*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto Mono,monospace;background:linear-gradient(135deg,#0a0a1a,#1a1f3a);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;overflow-x:hidden}.flyer-container{position:relative;width:794px;height:1123px;max-width:100%;perspective:2000px;margin-bottom:30px}.flyer-side{position:absolute;width:100%;height:100%;background:linear-gradient(180deg,#0a0a1a,#1a1f3a,#0a0a1a);border-radius:12px;overflow:hidden;box-shadow:0 0 40px #00d9ff4d,0 0 80px #06f3,inset 0 0 60px #00d9ff1a;transition:transform .8s cubic-bezier(.4,0,.2,1);backface-visibility:hidden;transform-style:preserve-3d}.flyer-side:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,rgba(0,217,255,.1) 0%,transparent 70%);pointer-events:none}.back-side{transform:rotateY(180deg)}.flyer-container.flipped .front-side{transform:rotateY(-180deg)}.flyer-container.flipped .back-side{transform:rotateY(0)}.hexagonal-background{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(./assets/hexagonal-molecular-grid.png);background-size:cover;background-position:center;opacity:.4;animation:pulseBackground 8s ease-in-out infinite}@keyframes pulseBackground{0%,to{opacity:.4}50%{opacity:.6}}.content-wrapper{position:relative;width:100%;height:100%;padding:40px;z-index:1}.logo-section{text-align:center;margin-bottom:60px;animation:fadeInDown 1s ease-out}.logo-image{width:200px;height:auto;margin-bottom:20px;filter:drop-shadow(0 0 20px rgba(0,217,255,.8));animation:logoGlow 3s ease-in-out infinite}@keyframes logoGlow{0%,to{filter:drop-shadow(0 0 20px rgba(0,217,255,.8))}50%{filter:drop-shadow(0 0 40px rgba(0,217,255,1))}}.brand-name{font-family:Orbitron,sans-serif;font-size:56px;font-weight:900;color:#fff;letter-spacing:8px;text-transform:uppercase;text-shadow:0 0 20px rgba(0,217,255,.8),0 0 40px rgba(0,217,255,.6),0 0 60px rgba(0,102,255,.4);margin-bottom:10px}.brand-subtitle{font-family:Orbitron,sans-serif;font-size:24px;font-weight:500;color:#00d9ff;letter-spacing:6px;text-transform:uppercase;text-shadow:0 0 15px rgba(0,217,255,.6)}.molecule-section{position:relative;display:flex;align-items:center;justify-content:center;margin:80px 0;height:400px}.water-molecule{width:450px;height:auto;position:relative;z-index:2;filter:drop-shadow(0 0 40px rgba(0,217,255,.9));animation:floatMolecule 6s ease-in-out infinite}@keyframes floatMolecule{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}.molecule-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(0,217,255,.3) 0%,transparent 70%);border-radius:50%;animation:expandGlow 4s ease-in-out infinite}@keyframes expandGlow{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.5}}.slogan-section{text-align:center;margin-top:60px;animation:fadeInUp 1s ease-out .5s backwards}.slogan{font-family:Orbitron,sans-serif;font-size:22px;font-weight:300;color:#b0c4de;line-height:1.6;letter-spacing:2px;text-shadow:0 0 10px rgba(0,217,255,.4);margin-bottom:20px}.slogan-underline{width:300px;height:2px;background:linear-gradient(90deg,transparent 0%,#00D9FF 50%,transparent 100%);margin:0 auto;box-shadow:0 0 10px #00d9ff99;animation:slideUnderline 2s ease-in-out infinite}@keyframes slideUnderline{0%,to{width:300px}50%{width:400px}}.tech-grid{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.grid-line{position:absolute;background:linear-gradient(90deg,transparent 0%,rgba(0,217,255,.3) 50%,transparent 100%);box-shadow:0 0 10px #00d9ff66}.grid-line.horizontal{width:100%;height:1px;top:30%;animation:scanHorizontal 4s linear infinite}.grid-line.vertical{width:1px;height:100%;left:50%;animation:scanVertical 4s linear infinite}@keyframes scanHorizontal{0%,to{top:30%;opacity:.3}50%{top:70%;opacity:.6}}@keyframes scanVertical{0%,to{left:30%;opacity:.3}50%{left:70%;opacity:.6}}.header-section{text-align:center;margin-bottom:40px}.main-header{font-family:Orbitron,sans-serif;font-size:32px;font-weight:700;color:#fff;letter-spacing:3px;text-shadow:0 0 15px rgba(0,217,255,.8),0 0 30px rgba(0,217,255,.5);margin-bottom:20px}.header-line{width:100%;height:2px;background:linear-gradient(90deg,transparent 0%,#00D9FF 20%,#00D9FF 80%,transparent 100%);box-shadow:0 0 15px #00d9ff99}.minerals-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.mineral-card{position:relative;display:flex;align-items:center;gap:20px;background:#1a1f3a99;border:1px solid rgba(0,217,255,.3);border-radius:8px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.mineral-card:hover{transform:translate(10px);border-color:#00d9ff99;box-shadow:0 0 30px #00d9ff66}.element-icon{position:relative;width:100px;height:100px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid;border-radius:8px;background:#0a0a1acc;transition:all .3s ease}.element-icon.gold{border-color:gold;box-shadow:0 0 20px #ffd70066}.element-icon.silver{border-color:#00d9ff;box-shadow:0 0 20px #00d9ff66}.element-icon.magnesium{border-color:#7fff00;box-shadow:0 0 20px #7fff0066}.element-icon.zinc{border-color:#f0f0f0;box-shadow:0 0 20px #f0f0f066}.element-icon.copper{border-color:#ff8c00;box-shadow:0 0 20px #ff8c0066}.mineral-card:hover .element-icon{transform:scale(1.1) rotate(5deg)}.atomic-number{font-family:Roboto Mono,monospace;font-size:12px;font-weight:400;color:#b0c4de;position:absolute;top:8px;left:8px}.element-symbol{font-family:Roboto Mono,monospace;font-size:36px;font-weight:700;text-shadow:0 0 15px currentColor}.element-icon.gold .element-symbol{color:gold}.element-icon.silver .element-symbol{color:#00d9ff}.element-icon.magnesium .element-symbol{color:#7fff00}.element-icon.zinc .element-symbol{color:#f0f0f0}.element-icon.copper .element-symbol{color:#ff8c00}.element-name{font-family:Roboto Mono,monospace;font-size:10px;font-weight:400;color:#b0c4de;text-transform:uppercase;letter-spacing:1px;margin-top:4px}.mineral-info{flex:1}.mineral-title{font-family:Orbitron,sans-serif;font-size:18px;font-weight:500;color:#fff;margin-bottom:8px;letter-spacing:1px}.mineral-description{font-family:Roboto Mono,monospace;font-size:12px;font-weight:300;color:#b0c4de;line-height:1.6}.glow-effect{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;opacity:0;transition:opacity .3s ease;pointer-events:none}.mineral-card:hover .glow-effect{opacity:.2}.gold-glow{background:radial-gradient(circle at 10% 50%,rgba(255,215,0,.4) 0%,transparent 70%)}.silver-glow{background:radial-gradient(circle at 10% 50%,rgba(0,217,255,.4) 0%,transparent 70%)}.magnesium-glow{background:radial-gradient(circle at 10% 50%,rgba(127,255,0,.4) 0%,transparent 70%)}.zinc-glow{background:radial-gradient(circle at 10% 50%,rgba(240,240,240,.4) 0%,transparent 70%)}.copper-glow{background:radial-gradient(circle at 10% 50%,rgba(255,140,0,.4) 0%,transparent 70%)}.footer-section{text-align:center;margin-top:30px}.footer-line{width:100%;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(0,217,255,.4) 50%,transparent 100%);margin-bottom:15px}.footer-text{font-family:Roboto Mono,monospace;font-size:11px;font-weight:300;color:#b0c4de;letter-spacing:1px;text-shadow:0 0 5px rgba(0,217,255,.3)}.controls{text-align:center}.flip-button{font-family:Orbitron,sans-serif;font-size:16px;font-weight:500;color:#fff;background:linear-gradient(135deg,#00d9ff33,#06f3);border:2px solid #00D9FF;border-radius:50px;padding:15px 40px;cursor:pointer;display:inline-flex;align-items:center;gap:15px;transition:all .3s ease;box-shadow:0 0 20px #00d9ff4d;letter-spacing:2px}.flip-button:hover{background:linear-gradient(135deg,#00d9ff4d,#0066ff4d);box-shadow:0 0 40px #00d9ff99;transform:translateY(-2px)}.flip-button:active{transform:translateY(0)}.button-icon{font-size:24px;transition:transform .3s ease}.flip-button:hover .button-icon{transform:rotate(180deg)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 850px){.flyer-container{width:90vw;height:calc(90vw * 1.414)}.content-wrapper{padding:30px}.brand-name{font-size:42px;letter-spacing:6px}.brand-subtitle{font-size:18px;letter-spacing:4px}.water-molecule{width:350px}.slogan{font-size:18px}.main-header{font-size:24px}.mineral-card{flex-direction:column;text-align:center}.element-icon{width:80px;height:80px}.element-symbol{font-size:28px}}@media (max-width: 600px){body{padding:20px 10px}.content-wrapper{padding:20px}.brand-name{font-size:32px;letter-spacing:4px}.brand-subtitle{font-size:14px;letter-spacing:3px}.logo-image{width:150px}.water-molecule{width:280px}.molecule-section{height:300px;margin:40px 0}.slogan{font-size:16px}.main-header{font-size:20px}.mineral-title{font-size:16px}.mineral-description{font-size:11px}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#1a1f3a80}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00d9ff,#06f);border-radius:5px;box-shadow:0 0 10px #00d9ff80}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#00e5ff,#07f)}@media print{body{background:#fff}.controls{display:none}.flyer-container{width:210mm;height:297mm;box-shadow:none}.flyer-side{box-shadow:none}}