@keyframes ambFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(35px,-25px) scale(1.12)}50%{transform:translate(-25px,35px) scale(.88)}75%{transform:translate(25px,20px) scale(1.06)}}

@keyframes raysRot{to{transform:translate(-50%,-50%) rotate(360deg)}}

@keyframes badgePulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}

@keyframes btnScan{0%{left:-60%}100%{left:160%}}

@keyframes scrollDrop{0%{top:-60%}100%{top:200%}}

@keyframes heroFadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

@keyframes titleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@keyframes conicSpin{to{transform:rotate(360deg)}}

@keyframes orbSpin{to{transform:rotate(360deg)}}

@keyframes ctaScan{0%{left:-50%}100%{left:150%}}

@keyframes glowPulse{0%,100%{opacity:.3;transform:translateX(-50%) scaleX(1)}50%{opacity:.7;transform:translateX(-50%) scaleX(1.2)}}

@keyframes specAnim{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

@keyframes particleFloat{0%{opacity:0;transform:translateY(0) scale(0)}10%{opacity:.6;transform:translateY(-20px) scale(1)}85%{opacity:.1;transform:translateY(-200px) scale(.2)}100%{opacity:0;transform:translateY(-220px) scale(0)}}

.view-transitions {
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
&{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
&{font-family:'DM Sans',system-ui,sans-serif;background:#050008;color:#fff;overflow-x:hidden;line-height:1.7;font-weight:300;font-size:15px}
::selection{background:#8b5cf6;color:#fff}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#050008}::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3)}::-webkit-scrollbar-thumb:hover{background:#8b5cf6}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}button{font-family:inherit;cursor:pointer;background:none;border:none;-webkit-tap-highlight-color:transparent}

&{
  --bg:#050008;--bg-card:rgba(139,92,246,.03);
  --text:#fff;--text-2:rgba(255,255,255,.5);--text-3:rgba(255,255,255,.3);
  --accent:#8b5cf6;--accent-h:#a78bfa;--accent-d:#6d28d9;
  --blue:#3b82f6;--cyan:#06b6d4;--emerald:#10b981;
  --sf:'Cormorant Garamond',Georgia,serif;
  --ease:cubic-bezier(.25,.1,.25,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --space:clamp(80px,10vw,140px)
}

/* ════ NAV ════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:72px;padding:0 clamp(24px,5vw,80px);display:flex;align-items:center;justify-content:space-between;transition:all .6s var(--ease);background:transparent}
.nav--s{background:rgba(5,0,8,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(139,92,246,.08)}
.nav-brand{display:flex;align-items:center;gap:12px;font-family:var(--sf);font-size:22px;font-weight:400;letter-spacing:.06em;color:#fff;transition:all .5s}
.nav-brand em{font-style:italic;color:var(--accent-h)}
.nav-logo{height:42px;width:auto;object-fit:contain;border-radius:4px;transition:all .5s}
.nav-actions{display:flex;gap:16px;align-items:center}
.nav-back{font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:10px 24px;border:1px solid rgba(139,92,246,.25);color:rgba(255,255,255,.6);transition:all .4s;display:inline-flex;align-items:center;gap:8px;border-radius:4px}
.nav-back:hover{border-color:var(--accent);color:#fff;background:rgba(139,92,246,.08)}
.nav-back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s}
.nav-back:hover svg{transform:translateX(-3px)}

/* ════ HERO — Full-screen cinematic ════ */
.hero{position:relative;height:100vh;min-height:800px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video-wrap video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%);object-fit:cover}
.hero-overlay{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,
    rgba(5,0,8,.95) 0%,
    rgba(13,5,32,.85) 15%,
    rgba(13,5,32,.55) 40%,
    rgba(13,5,32,.45) 55%,
    rgba(13,5,32,.65) 75%,
    rgba(5,0,8,.95) 100%
  )}
.hero-grain{position:absolute;inset:0;z-index:2;opacity:.015;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px;pointer-events:none}

/* Ambient light effects */
.hero-ambient{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.1;animation:ambFloat 14s ease-in-out infinite}
.hero-orb:nth-child(1){width:500px;height:500px;background:radial-gradient(circle,#8b5cf6,transparent 70%);top:5%;left:-15%;animation-delay:0s}
.hero-orb:nth-child(2){width:450px;height:450px;background:radial-gradient(circle,#3b82f6,transparent 70%);bottom:10%;right:-10%;animation-delay:-5s}
.hero-orb:nth-child(3){width:350px;height:350px;background:radial-gradient(circle,#06b6d4,transparent 70%);top:40%;left:55%;animation-delay:-9s}


/* Prismatic rays */
.hero-rays{position:absolute;top:50%;left:50%;width:1100px;height:1100px;transform:translate(-50%,-50%);pointer-events:none;z-index:2;background:conic-gradient(from 0deg,transparent 0deg,rgba(139,92,246,.04) 15deg,transparent 40deg,rgba(59,130,246,.03) 80deg,transparent 110deg,rgba(6,182,212,.04) 140deg,transparent 170deg,rgba(168,85,247,.04) 200deg,transparent 240deg,rgba(59,130,246,.03) 290deg,transparent 330deg,rgba(139,92,246,.03) 360deg);animation:raysRot 30s linear infinite;opacity:.6}


/* Hero content */
.hero-content{position:relative;z-index:5;text-align:center;max-width:900px;padding:0 clamp(20px,5vw,60px)}

.hero-logo{width:80px;height:80px;border-radius:16px;object-fit:contain;margin:0 auto 28px;opacity:0;animation:heroFadeUp .8s var(--ease-out) .3s forwards;filter:drop-shadow(0 8px 32px rgba(139,92,246,.3))}

.hero-badge{font-size:9px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;padding:10px 28px;border:1px solid rgba(139,92,246,.2);color:rgba(139,92,246,.7);margin-bottom:28px;background:rgba(139,92,246,.04);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:40px;opacity:0;animation:heroFadeUp .8s var(--ease-out) .5s forwards}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:badgePulse 2s ease-in-out infinite}


.hero-title{font-family:var(--sf);font-size:clamp(48px,10vw,110px);font-weight:200;color:#fff;line-height:.95;letter-spacing:-.02em;opacity:0;animation:heroFadeUp 1s var(--ease-out) .7s forwards}
.hero-title em{font-style:italic;font-weight:300;display:block;background:linear-gradient(135deg,#a78bfa,#818cf8,#38bdf8,#2dd4bf);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:titleShimmer 6s ease-in-out infinite}

.hero-sub{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-top:16px;opacity:0;animation:heroFadeUp .8s var(--ease-out) .9s forwards}

.hero-desc{font-size:16px;color:rgba(255,255,255,.4);line-height:2;max-width:560px;margin:28px auto 0;font-weight:300;letter-spacing:.01em;opacity:0;animation:heroFadeUp .8s var(--ease-out) 1.1s forwards}

.hero-ctas{display:flex;gap:16px;justify-content:center;margin-top:48px;opacity:0;animation:heroFadeUp .8s var(--ease-out) 1.3s forwards;flex-wrap:wrap}

.hero-btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:20px 48px;border:1.5px solid rgba(139,92,246,.35);background:rgba(139,92,246,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font-size:10px;font-weight:500;letter-spacing:.25em;text-transform:uppercase;transition:all .5s var(--ease);overflow:hidden;border-radius:4px}
.hero-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(59,130,246,.08),rgba(6,182,212,.15));opacity:0;transition:opacity .5s}
.hero-btn:hover::before{opacity:1}
.hero-btn::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(139,92,246,.08),transparent);animation:btnScan 5s linear infinite}

.hero-btn:hover{border-color:var(--accent-h);box-shadow:0 0 50px rgba(139,92,246,.25),0 0 100px rgba(139,92,246,.06);transform:translateY(-3px)}
.hero-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;position:relative;z-index:1;transition:all .4s}
.hero-btn span{position:relative;z-index:1}
.hero-btn:hover svg{filter:drop-shadow(0 0 6px rgba(139,92,246,.5))}

.hero-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-d));border-color:var(--accent)}
.hero-btn.primary:hover{box-shadow:0 0 60px rgba(139,92,246,.35),0 8px 32px rgba(139,92,246,.2)}

/* Scroll indicator */
.hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:heroFadeUp .8s var(--ease-out) 1.8s forwards}
.hero-scroll-text{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.2)}
.hero-scroll-line{width:1px;height:40px;background:linear-gradient(180deg,rgba(139,92,246,.4),transparent);position:relative;overflow:hidden}
.hero-scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:60%;background:linear-gradient(180deg,transparent,var(--accent));animation:scrollDrop 2s ease-in-out infinite}





/* Hero bottom line */
.hero-line{position:absolute;bottom:0;left:0;right:0;height:1px;z-index:5;background:linear-gradient(90deg,transparent,rgba(139,92,246,.15),rgba(59,130,246,.25),rgba(139,92,246,.15),transparent)}

/* ════ SECTION COMMON ════ */
.sec{padding:var(--space) 0;position:relative}
.sec-inner{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}

.heading{font-family:var(--sf);font-size:clamp(32px,5vw,56px);font-weight:300;line-height:1.1;letter-spacing:-.01em;color:#fff}
.heading em{font-style:italic;font-weight:400;background:linear-gradient(135deg,#a78bfa,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tag{font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-h);margin-bottom:16px;display:inline-flex;align-items:center;gap:10px}
.tag::before{content:'';width:24px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.desc{font-size:14px;color:var(--text-3);line-height:2;max-width:520px;font-weight:300;margin-top:12px}

/* Scroll reveal */
.rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}.rv.visible{opacity:1;transform:none}
.rv-d1{transition-delay:.15s}.rv-d2{transition-delay:.3s}.rv-d3{transition-delay:.45s}.rv-d4{transition-delay:.6s}

/* ════ ADAPTIVE SECTION — Indoor/Outdoor ════ */
.adaptive{background:linear-gradient(180deg,var(--bg) 0%,rgba(13,5,32,.4) 50%,var(--bg) 100%);overflow:hidden}

.adapt-showcase{margin-top:64px;position:relative}

/* Video showcase */
.adapt-video-wrap{position:relative;max-width:900px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid rgba(139,92,246,.1);background:rgba(139,92,246,.02)}
.adapt-video-wrap::before{content:'';position:absolute;inset:-1px;border-radius:20px;background:linear-gradient(135deg,rgba(139,92,246,.2),transparent 40%,transparent 60%,rgba(59,130,246,.15));z-index:1;pointer-events:none}
.adapt-video{width:100%;display:block;border-radius:20px}
.adapt-video-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 60%,rgba(5,0,8,.7) 100%);pointer-events:none;border-radius:20px}
.adapt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:80px;height:80px;border-radius:50%;background:rgba(139,92,246,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(139,92,246,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .5s var(--ease)}
.adapt-play::after{content:'';width:0;height:0;border-style:solid;border-width:12px 0 12px 22px;border-color:transparent transparent transparent rgba(255,255,255,.9);margin-left:4px}
.adapt-play:hover{background:rgba(139,92,246,.3);transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 60px rgba(139,92,246,.3)}
.adapt-play.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}

/* Comparison slider */
.adapt-compare{margin-top:64px;max-width:800px;margin-left:auto;margin-right:auto}
.adapt-compare-title{text-align:center;margin-bottom:40px}
.adapt-compare-title h3{font-family:var(--sf);font-size:clamp(24px,3vw,36px);font-weight:300;color:#fff}
.adapt-compare-title h3 em{font-style:italic;color:var(--accent-h)}

.compare-box{position:relative;height:360px;border-radius:20px;overflow:hidden;border:1px solid rgba(139,92,246,.1);cursor:ew-resize}
.compare-side{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:40px}
.compare-indoor{left:0;right:50%;background:linear-gradient(135deg,#faf9f6 0%,#e8e6e0 100%);transition:right .05s linear}
.compare-outdoor{left:50%;right:0;background:linear-gradient(135deg,#0a1628 0%,#1a0a30 50%,#0d0520 100%);transition:left .05s linear}

.compare-lens{width:140px;height:140px;border-radius:50%;position:relative;transition:all .8s var(--ease)}
.compare-indoor .compare-lens{background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.9),rgba(240,238,235,.7) 60%,rgba(220,218,210,.5) 80%);border:2px solid rgba(0,0,0,.08);box-shadow:0 4px 24px rgba(0,0,0,.06)}
.compare-outdoor .compare-lens{background:radial-gradient(circle at 40% 35%,rgba(139,92,246,.5),rgba(107,33,168,.3) 60%,rgba(30,10,60,.6) 80%);border:2px solid rgba(139,92,246,.2);box-shadow:0 4px 24px rgba(139,92,246,.15)}
.compare-lens::after{content:'';position:absolute;top:15%;left:20%;width:35%;height:25%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.35),transparent);pointer-events:none}

.compare-label{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.compare-indoor .compare-label{color:rgba(26,28,43,.5)}
.compare-outdoor .compare-label{color:rgba(167,139,250,.5)}
.compare-temp{font-size:11px;font-weight:300;letter-spacing:.05em}
.compare-indoor .compare-temp{color:rgba(26,28,43,.3)}
.compare-outdoor .compare-temp{color:rgba(255,255,255,.2)}

.compare-divider{position:absolute;top:0;bottom:0;left:50%;width:3px;background:linear-gradient(180deg,rgba(139,92,246,.6),rgba(59,130,246,.4),rgba(139,92,246,.6));z-index:10;transform:translateX(-50%);transition:left .05s linear}
.compare-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(139,92,246,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:2px solid rgba(139,92,246,.5);display:flex;align-items:center;justify-content:center;z-index:11;cursor:ew-resize;transition:all .3s var(--ease)}
.compare-handle:hover{background:rgba(139,92,246,.35);transform:translate(-50%,-50%) scale(1.1)}
.compare-handle svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.5}

/* Lens states explanation */
.adapt-states{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:48px;max-width:800px;margin-left:auto;margin-right:auto}
.adapt-state{text-align:center;padding:32px 20px;border:1px solid rgba(139,92,246,.06);background:rgba(139,92,246,.02);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;transition:all .5s var(--ease)}
.adapt-state:hover{border-color:rgba(139,92,246,.15);background:rgba(139,92,246,.05);transform:translateY(-4px)}
.adapt-state-dot{width:48px;height:48px;border-radius:50%;margin:0 auto 16px;position:relative}
.adapt-state-dot::after{content:'';position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(255,255,255,.1)}
.adapt-state h4{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:8px}
.adapt-state p{font-size:12px;color:rgba(255,255,255,.25);line-height:1.8;font-weight:300}

/* ════ COLORMATCH TOOL SECTION ════ */
.colormatch{background:linear-gradient(180deg,var(--bg),rgba(13,5,32,.3),var(--bg));overflow:hidden;position:relative}
.colormatch::before{content:'';position:absolute;top:50%;left:50%;width:800px;height:800px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(139,92,246,.04),transparent 60%);pointer-events:none}

.cm-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:64px}

/* Left: Interactive lens */
.cm-lens-area{position:relative}
.cm-lens-outer{position:relative;width:320px;height:320px;margin:0 auto}

.cm-conic{position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 0deg,#8b5cf6,#818cf8,#38bdf8,#2dd4bf,#a3e635,#fbbf24,#f472b6,#8b5cf6);opacity:.2;animation:conicSpin 10s linear infinite;filter:blur(2px)}

.cm-conic::after{content:'';position:absolute;inset:4px;border-radius:50%;background:rgba(5,0,8,.9);backdrop-filter:blur(8px)}

.cm-lens{width:320px;height:320px;border-radius:50%;border:1px solid rgba(139,92,246,.15);overflow:hidden;position:relative;cursor:pointer;transition:all .8s var(--ease);box-shadow:0 0 80px rgba(139,92,246,.06),inset 0 0 50px rgba(139,92,246,.04)}
.cm-lens:hover{border-color:rgba(139,92,246,.4);box-shadow:0 0 120px rgba(139,92,246,.15),0 0 200px rgba(139,92,246,.04),inset 0 0 70px rgba(139,92,246,.06)}

.cm-glass{position:absolute;inset:6px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.02);backdrop-filter:blur(4px)}
.cm-color{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(139,92,246,.35),rgba(139,92,246,.12) 60%,transparent 80%);transition:background 1.2s var(--ease)}
.cm-reflection{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.12),transparent 50%);pointer-events:none}

.cm-orbit-1{position:absolute;inset:-40px;border-radius:50%;border:1px solid rgba(139,92,246,.05);pointer-events:none;animation:orbSpin 28s linear infinite}
.cm-orbit-2{position:absolute;inset:-75px;border-radius:50%;border:1px solid rgba(59,130,246,.03);pointer-events:none;animation:orbSpin 40s linear infinite reverse}
.cm-orbit-1::after,.cm-orbit-2::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;top:-3px;left:50%}
.cm-orbit-1::after{background:#a78bfa;opacity:.3;box-shadow:0 0 10px rgba(167,139,250,.4)}
.cm-orbit-2::after{background:#38bdf8;opacity:.2;box-shadow:0 0 10px rgba(56,189,248,.3)}


/* Swatches */
.cm-swatches{display:flex;justify-content:center;gap:16px;margin-top:40px;background:rgba(255,255,255,.02);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:18px 32px;border-radius:60px;border:1px solid rgba(255,255,255,.04);width:fit-content;margin-left:auto;margin-right:auto}
.cm-swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .4s var(--ease);opacity:.45;transform:scale(.85)}
.cm-swatch:hover{opacity:.8;transform:scale(1)}
.cm-swatch.active{opacity:1;transform:scale(1.15);border-color:rgba(255,255,255,.6);box-shadow:0 0 24px currentColor,0 0 48px rgba(139,92,246,.12)}

/* Right: Info panel */
.cm-info{}
.cm-info .tag{margin-bottom:12px}
.cm-info .heading{margin-bottom:20px}
.cm-info .desc{margin-top:0;margin-bottom:32px}

.cm-features{display:flex;flex-direction:column;gap:20px;margin-bottom:40px}
.cm-feat{display:flex;align-items:flex-start;gap:16px;padding:20px;border:1px solid rgba(139,92,246,.06);border-radius:12px;background:rgba(139,92,246,.02);transition:all .4s var(--ease)}
.cm-feat:hover{border-color:rgba(139,92,246,.15);background:rgba(139,92,246,.05);transform:translateX(6px)}
.cm-feat-icon{width:40px;height:40px;border-radius:10px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cm-feat-icon svg{width:18px;height:18px;fill:none;stroke:var(--accent-h);stroke-width:1.2}
.cm-feat h4{font-size:12px;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.8);margin-bottom:4px}
.cm-feat p{font-size:12px;color:rgba(255,255,255,.25);line-height:1.7;font-weight:300}

/* CTA Button */
.cm-cta{position:relative;display:inline-flex;align-items:center;gap:16px;padding:22px 56px;background:linear-gradient(135deg,var(--accent),var(--accent-d));border:none;color:#fff;font-size:11px;font-weight:500;letter-spacing:.25em;text-transform:uppercase;transition:all .5s var(--ease);overflow:hidden;border-radius:6px;cursor:pointer}
.cm-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 50%);pointer-events:none}
.cm-cta::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:ctaScan 4s linear infinite}

.cm-cta:hover{transform:translateY(-3px);box-shadow:0 8px 40px rgba(139,92,246,.35),0 0 80px rgba(139,92,246,.1)}
.cm-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;position:relative;z-index:1}
.cm-cta span{position:relative;z-index:1}

.cm-glow{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:320px;height:50px;background:radial-gradient(ellipse,rgba(139,92,246,.2) 0%,transparent 70%);pointer-events:none;animation:glowPulse 3s ease-in-out infinite}


/* ════ COLORS GALLERY ════ */
.colors{background:var(--bg);overflow:hidden;position:relative}

.colors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.color-card{position:relative;padding:40px 24px;border:1px solid rgba(139,92,246,.06);background:rgba(139,92,246,.02);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:center;border-radius:16px;transition:all .6s var(--ease);overflow:hidden}
.color-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-color,var(--accent));opacity:.4;transition:opacity .4s}
.color-card:hover{border-color:rgba(139,92,246,.15);transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,0,0,.2)}
.color-card:hover::before{opacity:1}

.color-preview{width:72px;height:72px;border-radius:50%;margin:0 auto 20px;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.color-preview::after{content:'';position:absolute;top:12%;left:18%;width:30%;height:20%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.3),transparent)}

.color-card h4{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:rgba(255,255,255,.8);margin-bottom:4px;letter-spacing:.03em}
.color-card p{font-size:11px;color:rgba(255,255,255,.25);font-weight:300;line-height:1.6}

/* ════ BRANDS BANNER ════ */
.brands-banner{background:linear-gradient(180deg,var(--bg),rgba(13,5,32,.2),var(--bg));padding:80px 0;text-align:center;position:relative;overflow:hidden}
.brands-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(139,92,246,.03),transparent 60%);pointer-events:none}
.brands-logos{display:flex;align-items:center;justify-content:center;gap:48px;margin-top:40px;flex-wrap:wrap;opacity:.3}
.brands-logos span{font-family:var(--sf);font-size:clamp(18px,2.5vw,28px);font-weight:300;letter-spacing:.08em;color:rgba(255,255,255,.5);transition:all .4s}
.brands-logos span:hover{color:var(--accent-h);opacity:1}
.brands-sep{width:1px;height:24px;background:rgba(255,255,255,.1)}

/* ════ FOOTER CTA ════ */
.footer-cta{background:linear-gradient(180deg,var(--bg),rgba(13,5,32,.5));padding:var(--space) 0;text-align:center;position:relative;overflow:hidden}
.footer-cta::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(139,92,246,.08),transparent 60%);pointer-events:none}

.footer-cta .heading{margin-bottom:16px}
.footer-cta .desc{margin:0 auto 40px;text-align:center}

.footer-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Spectrum line */
.spectrum-line{width:200px;height:2px;margin:0 auto 40px;overflow:hidden;position:relative;border-radius:2px}
.spectrum-line::after{content:'';position:absolute;inset:0;width:200%;background:linear-gradient(90deg,transparent,#a78bfa,#818cf8,#38bdf8,#2dd4bf,#a3e635,transparent,#a78bfa,#818cf8,#38bdf8,#2dd4bf,#a3e635,transparent);animation:specAnim 4s linear infinite}


/* ════ FOOTER ════ */
.footer{background:rgba(5,0,8,.95);border-top:1px solid rgba(139,92,246,.06);padding:40px 0;text-align:center}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
.footer-brand{font-family:var(--sf);font-size:20px;font-weight:300;color:rgba(255,255,255,.4);letter-spacing:.06em;margin-bottom:8px}
.footer-brand em{font-style:italic;color:rgba(139,92,246,.5)}
.footer-copy{font-size:11px;color:rgba(255,255,255,.15);letter-spacing:.08em}

/* ════ PARTICLES ════ */
.particles-container{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.particle{position:absolute;border-radius:50%;pointer-events:none;animation:particleFloat linear infinite}


/* ════ MOBILE NAV ════ */
.nav-burger{display:none;flex-direction:column;gap:5px;padding:12px;background:none;border:none;cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-burger span{display:block;width:22px;height:1.5px;background:rgba(255,255,255,.6);transition:all .3s;border-radius:1px}
.nav-burger:hover span{background:var(--accent-h)}
.mobile-drawer{position:fixed;inset:0;z-index:9999;background:rgba(5,0,8,.97);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.mobile-drawer.open{opacity:1;pointer-events:all}
.mobile-drawer-close{position:absolute;top:20px;right:24px;font-size:28px;color:rgba(255,255,255,.5);background:none;border:none;font-family:var(--sf);cursor:pointer;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.mobile-drawer-link{font-family:var(--sf);font-size:28px;font-weight:300;color:rgba(255,255,255,.6);letter-spacing:.04em;transition:all .3s;padding:8px 16px}
.mobile-drawer-link:hover{color:var(--accent-h)}

/* ════ RESPONSIVE ════ */
@media(max-width:960px){
  .cm-layout{grid-template-columns:1fr;gap:48px;text-align:center}
  .cm-info .desc{margin-left:auto;margin-right:auto}
  .cm-features{max-width:500px;margin-left:auto;margin-right:auto}
  .colors-grid{grid-template-columns:repeat(2,1fr)}
  .adapt-states{grid-template-columns:1fr;max-width:360px;margin-left:auto;margin-right:auto}
  .hero{min-height:600px}
  .hero-orb:nth-child(1){width:300px;height:300px}
  .hero-orb:nth-child(2){width:280px;height:280px}
  .hero-orb:nth-child(3){width:200px;height:200px}
  .hero-rays{width:700px;height:700px}
  .adapt-video-wrap{border-radius:12px}
  .adapt-video{border-radius:12px}
  .adapt-video-overlay{border-radius:12px}
  .adapt-video-wrap::before{border-radius:12px}
}
@media(max-width:768px){
  .nav-back{display:none}
  .nav-burger{display:flex}
  .nav{height:60px}
  .nav-brand{font-size:18px;gap:10px}
  .nav-logo{height:34px}
  .hero-title{font-size:clamp(36px,8vw,72px)}
  .hero-desc{font-size:14px;line-height:1.8}
  .hero-badge{font-size:8px;letter-spacing:.3em;padding:8px 20px}
  .heading{font-size:clamp(26px,5vw,42px)}
  .sec-inner{padding:0 clamp(16px,4vw,40px)}
  .cm-lens-outer{width:260px;height:260px}
  .cm-lens{width:260px;height:260px}
  .adapt-compare{margin-top:40px}
  .compare-box{height:300px}
  .compare-lens{width:110px;height:110px}
  .colors-grid{gap:14px}
  .color-card{padding:28px 18px;border-radius:12px}
  .brands-logos{gap:24px;font-size:clamp(14px,2vw,20px)}
  .brands-sep{height:16px}
  .hero-orb:nth-child(1){width:200px;height:200px}
  .hero-orb:nth-child(2){width:180px;height:180px}
  .hero-orb:nth-child(3){width:140px;height:140px}
  .hero-rays{width:500px;height:500px;opacity:.3}
  .cm-feat{padding:16px}
  .hero-btn{padding:16px 32px;font-size:9px}
  .cm-cta{padding:18px 40px;font-size:10px}
  .footer-cta-btns{flex-direction:column;align-items:center}
}
@media(max-width:600px){
  .cm-lens-outer{width:200px;height:200px}
  .cm-lens{width:200px;height:200px}
  .cm-orbit-1{inset:-25px}
  .cm-orbit-2{inset:-50px}
  .cm-swatch{width:28px;height:28px}
  .cm-swatches{gap:10px;padding:12px 16px}
  .colors-grid{grid-template-columns:1fr 1fr;gap:10px}
  .color-card{padding:20px 14px}
  .color-preview{width:56px;height:56px;margin-bottom:14px}
  .compare-box{height:260px}
  .compare-lens{width:80px;height:80px}
  .compare-label{font-size:8px}
  .compare-temp{font-size:9px}
  .hero-ctas{flex-direction:column;align-items:center;width:100%;padding:0 20px}
  .hero-btn{width:100%;justify-content:center}
  .hero-scroll{display:none}
  .tag{font-size:8px;letter-spacing:.25em}
  .desc{font-size:13px}
  .sec{padding:clamp(48px,8vw,100px) 0}
  .brands-logos{gap:16px}
  .brands-sep{display:none}
  .cm-feat{flex-direction:column;text-align:center;align-items:center}
  .adapt-state{padding:24px 16px}
  .hero-orb{display:none}
  .hero-rays{display:none}
  .footer-brand{font-size:16px}
  .footer-copy{font-size:9px}
}

/* ════ TOAST ════ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(139,92,246,.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(139,92,246,.2);color:#fff;padding:14px 32px;font-size:12px;letter-spacing:.06em;z-index:9999;transition:all .5s var(--ease);border-radius:8px}
.toast.show{transform:translateX(-50%) translateY(0)}
}