:root{
--void:#010104;
--dark:#06050c;
--card:#0c0a14;
--card2:#110e1a;
--card3:#161322;
--border:#1a1726;
--border2:#282438;
--gold:#c9a84c;
--gold2:#e4c36e;
--gold3:#f2dea0;
--goldDark:#7a5c22;
--goldGlow:rgba(201,168,76,.15);
--goldShimmer:linear-gradient(135deg,#c9a84c 0%,#f2dea0 45%,#c9a84c 100%);
--platinum:#d8d2e6;
--platinumMuted:rgba(216,210,230,.35);
--cream:#f2ead8;
--warm:#c8b898;
--muted:#8580a0;
--white:#ffffff;
--accent:#9b6fff;
--accent2:#6eaaff;
--shadow-card:0 8px 48px rgba(0,0,0,.55),0 0 0 1px rgba(201,168,76,.04);
--shadow-hover:0 24px 72px rgba(0,0,0,.65),0 0 0 1px rgba(201,168,76,.12);
--shadow-deep:0 40px 100px rgba(0,0,0,.8),0 0 160px rgba(201,168,76,.04);
--glow-gold:0 0 80px rgba(201,168,76,.18),0 0 160px rgba(201,168,76,.06);
--glow-sm:0 0 32px rgba(201,168,76,.14);
--glow-line:0 0 20px rgba(201,168,76,.4);
--space-xs:.5rem;
--space-sm:1rem;
--space-md:2rem;
--space-lg:4.5rem;
--space-xl:9rem;
--space-2xl:14rem;
--serif:'Cormorant Garamond',Georgia,serif;
--sans:'Outfit','Helvetica Neue',Arial,sans-serif;
--mono:'DM Mono','Fira Code',monospace;
--ease-smooth:cubic-bezier(.4,0,.2,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
--ease-out:cubic-bezier(.76,0,.24,1);
--ease-luxury:cubic-bezier(.22,.61,.36,1);
--ease-silk:cubic-bezier(.25,.46,.45,.94);
--t-fast:160ms;
--t-base:320ms;
--t-slow:580ms;
--t-glacial:1000ms;
--t-cinematic:1400ms;
--radius-sm:2px;
--radius-md:4px;
--radius-lg:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
background:var(--void);
color:var(--cream);
font-family:var(--sans);
font-weight:300;
font-size:16px;
line-height:1.7;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
font-feature-settings:'kern' 1,'liga' 1;
}
::selection{background:rgba(201,168,76,.2);color:var(--gold2)}
.skip-nav{position:fixed;top:-100px;left:1rem;z-index:9999;background:var(--gold);color:var(--void);padding:.6rem 1.4rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-decoration:none;transition:top .25s var(--ease-smooth);border-radius:0 0 var(--radius-md) var(--radius-md)}
.skip-nav:focus{top:0}
#cur{position:fixed;width:5px;height:5px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s var(--ease-spring),height .25s var(--ease-spring),background .25s,opacity .3s}
#cur2{position:fixed;width:36px;height:36px;border:1px solid rgba(201,168,76,.3);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .35s var(--ease-spring),height .35s var(--ease-spring),border-color .35s,opacity .3s}
body:has(a:hover,button:hover,[data-hover]:hover) #cur{width:16px;height:16px;background:var(--gold2);box-shadow:0 0 16px rgba(201,168,76,.5)}
body:has(a:hover,button:hover,[data-hover]:hover) #cur2{width:52px;height:52px;border-color:rgba(201,168,76,.55)}
#transition{position:fixed;inset:0;z-index:1000;pointer-events:none;display:flex}
.t-panel{flex:1;background:var(--gold);transform:scaleY(0);transform-origin:bottom}
.transitioning .t-panel:nth-child(2){animation-delay:.07s}
.transitioning .t-panel:nth-child(3){animation-delay:.14s}
.transitioning .t-panel:nth-child(4){animation-delay:.21s}
.out .t-panel{transform:scaleY(1);transform-origin:top;animation:tOut .45s var(--ease-out) forwards}
.out .t-panel:nth-child(2){animation-delay:.07s}
.out .t-panel:nth-child(3){animation-delay:.14s}
.out .t-panel:nth-child(4){animation-delay:.21s}
@keyframes tIn{to{transform:scaleY(1)}}
@keyframes tOut{to{transform:scaleY(0)}}
.page{display:none;opacity:0;transition:opacity .5s var(--ease-smooth)}
.page.active{display:block}
.page.visible{opacity:1}
.rev{opacity:0;transform:translateY(36px);transition:opacity .85s var(--ease-smooth),transform .85s var(--ease-smooth)}
.rev.in{opacity:1;transform:none}
.sec{padding:10rem 5rem}
.sec-dark{background:var(--dark)}
.sec-tag{display:flex;align-items:center;gap:.9rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem}
.sec-tag::before{content:'';width:28px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(201,168,76,.3));flex-shrink:0}
.sec-h2{font-family:var(--serif);font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:300;line-height:1.15;letter-spacing:-.025em;color:var(--cream)}
.sec-h2 em{font-style:italic;background:var(--goldShimmer);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-lead{font-size:clamp(.88rem,1.4vw,1.02rem);color:var(--muted);line-height:1.92;max-width:560px;margin-top:1.2rem;letter-spacing:.01em}
.alink::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width var(--t-slow) var(--ease-smooth)}
.alink:hover::after{width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:var(--radius-sm)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
html{scroll-behavior:auto}
.hero-pill,.hero-h1,.hero-bottom,.hero-stats,.hero-scroll{animation:none;opacity:1;transform:none}
.rev{opacity:1;transform:none}
.t-panel{animation:none!important}
#heroCanvas{display:none}
}
footer{
padding-bottom:max(3.5rem,env(safe-area-inset-bottom));
}
.float-cta{
bottom:max(2rem,env(safe-area-inset-bottom));
right:max(2rem,env(safe-area-inset-right));
}
#chatBtn{
bottom:max(1.8rem,env(safe-area-inset-bottom));
}
#cookieBanner{
padding-bottom:max(1rem,env(safe-area-inset-bottom));
}
.glass{
background:rgba(12,10,20,.55);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border:1px solid rgba(255,255,255,.04);
}
#progressBar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold2));z-index:9990;width:0;transition:width .15s linear}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:max(2.2rem,env(safe-area-inset-top)) max(5rem,env(safe-area-inset-right)) 2.2rem max(5rem,env(safe-area-inset-left));transition:all .5s var(--ease-luxury)}
nav.scrolled{
background:rgba(6,5,12,.82);
backdrop-filter:blur(32px) saturate(200%);
-webkit-backdrop-filter:blur(32px) saturate(200%);
padding:max(1.1rem,env(safe-area-inset-top)) max(5rem,env(safe-area-inset-right)) 1.1rem max(5rem,env(safe-area-inset-left));
border-bottom:1px solid rgba(26,23,38,.6);
box-shadow:0 8px 40px rgba(0,0,0,.4);
}
.nav-logo{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--cream);text-decoration:none;letter-spacing:.05em;cursor:none;transition:color var(--t-base),letter-spacing var(--t-slow)}
.nav-logo:hover{color:var(--gold);letter-spacing:.07em}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;gap:2.8rem;list-style:none}
.nav-links a{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color var(--t-base);cursor:none;font-weight:500;position:relative;padding-bottom:3px}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--gold),rgba(201,168,76,.3));transition:width .4s var(--ease-smooth)}
.nav-links a:hover,.nav-links a.active{color:var(--cream)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--gold)}
.nav-cta{border:1px solid rgba(201,168,76,.4);color:var(--gold);padding:.6rem 1.5rem;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:none;transition:all .4s var(--ease-luxury);font-family:var(--sans);position:relative;overflow:hidden}
.nav-cta::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .4s var(--ease-out);z-index:-1}
.nav-cta:hover{color:var(--void);border-color:var(--gold)}
.nav-cta:hover::before{transform:translateX(0)}
.hbg{display:none;flex-direction:column;gap:7px;border:none;background:none;cursor:none;padding:.5rem;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.hbg span{width:24px;height:1px;background:var(--cream);display:block;transition:all .4s var(--ease-out);transform-origin:center}
.mob-menu.open ~ nav .hbg span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.mob-menu.open ~ nav .hbg span:nth-child(2){opacity:0;transform:scaleX(0)}
.mob-menu.open ~ nav .hbg span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mob-menu{display:none;position:fixed;inset:0;z-index:501;flex-direction:column;align-items:center;justify-content:center;gap:2.6rem;background:var(--void);overflow:hidden}
.mob-menu::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(201,168,76,.04),transparent 70%)}
.mob-menu.open{display:flex}
.mob-menu a{font-family:var(--serif);font-size:clamp(2.2rem,7vw,3.4rem);font-weight:300;color:var(--cream);text-decoration:none;cursor:none;transition:color var(--t-base),letter-spacing var(--t-slow),transform var(--t-base);letter-spacing:.04em;position:relative;display:inline-block}
.mob-menu a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width .45s var(--ease-smooth)}
.mob-menu a:hover{color:var(--gold);letter-spacing:.08em;transform:translateX(8px)}
.mob-menu a:hover::after{width:100%}
.mob-menu-footer{position:absolute;bottom:2.5rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero{min-height:100svh;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 5rem 6rem}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero-glow{position:absolute;top:18%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(201,168,76,.06) 0%,transparent 65%);pointer-events:none;animation:glowPulse 8s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.1)}}
#vl-hero-mesh{position:absolute;inset:0;pointer-events:none}
.hero-pill{
display:inline-flex;
align-items:center;
gap:.6rem;
border:1px solid var(--border2);
padding:.4rem .9rem;
border-radius:4px;
font-family:var(--mono);
font-size:.58rem;
letter-spacing:.15em;
text-transform:uppercase;
color:var(--muted);
background:rgba(12,10,20,.6);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition: all var(--t-fast) var(--ease-smooth);
}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(201,168,76,.45)}50%{opacity:.25;box-shadow:0 0 0 8px rgba(201,168,76,0)}}
.hero-h1{
font-family:var(--serif);
font-size:clamp(5rem,12vw,13rem);
font-weight:300;
line-height:.95;
letter-spacing:-.03em;
opacity:0;
animation:riseIn 1s .5s forwards;
}
.hero-h1 em{
font-style:italic;
background:var(--goldShimmer);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
position:relative;
display:inline-block;
}
.hero-h1 em::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,transparent 0%,rgba(242,222,160,.12) 50%,transparent 100%);
background-size:200% 100%;
animation:shimmerSlide 5s 2.5s ease-in-out infinite;
mix-blend-mode:overlay;
}
@keyframes shimmerSlide{0%,100%{background-position:200% 0}50%{background-position:-200% 0}}
.hero-h1 .stroke{-webkit-text-stroke:1.5px var(--warm);color:transparent}
.hero-line{width:60px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin-top:2rem;opacity:0;animation:riseIn .8s .7s forwards}
.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:2.5rem;flex-wrap:wrap;gap:2.5rem;opacity:0;animation:riseIn .9s .9s forwards}
.hero-desc{max-width:440px;font-size:clamp(.9rem,1.4vw,1.05rem);color:var(--warm);line-height:1.85;letter-spacing:.01em}
.hero-actions{display:flex;gap:1.1rem;flex-wrap:wrap}
.btn-gold{
background:var(--gold);
color:var(--void);
padding:.95rem 2.4rem;
font-size:.73rem;
letter-spacing:.15em;
text-transform:uppercase;
text-decoration:none;
cursor:none;
font-weight:600;
transition:all .4s var(--ease-luxury);
font-family:var(--sans);
border:none;
display:inline-flex;
align-items:center;
gap:.5rem;
position:relative;
overflow:hidden;
}
.btn-gold::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 60%);opacity:0;transition:opacity var(--t-base)}
.btn-gold:hover{background:var(--gold2);transform:translateY(-4px);box-shadow:0 16px 48px rgba(201,168,76,.3),0 6px 16px rgba(201,168,76,.2)}
.btn-gold:hover::before{opacity:1}
.btn-gold:active{transform:translateY(-1px)}
.btn-ghost{
border:1px solid rgba(201,168,76,.25);
color:var(--warm);
padding:.95rem 2.4rem;
font-size:.73rem;
letter-spacing:.15em;
text-transform:uppercase;
text-decoration:none;
cursor:none;
transition:all .4s var(--ease-luxury);
font-family:var(--sans);
display:inline-flex;
align-items:center;
gap:.5rem;
background:rgba(255,255,255,.02);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.05);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.3)}
.hero-stats::before{content:'';position:absolute;left:-1.8rem;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(40,36,56,.7) 15%,rgba(40,36,56,.7) 85%,transparent)}
.hstat .n{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--gold);line-height:1}
.hstat .l{font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.hero-scroll{position:absolute;bottom:3.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--muted);font-family:var(--mono);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;opacity:0;animation:riseIn 1s 1.6s forwards;z-index:2;cursor:none}
@keyframes scrollLine{0%,100%{transform:scaleY(1) translateY(0);opacity:1}50%{transform:scaleY(.4) translateY(12px);opacity:.25}}
@keyframes riseIn{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
.ticker{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--card);padding:1.2rem 0;overflow:hidden}
.ticker-track:hover{animation-play-state:paused}
.ticker-item:hover{color:var(--gold)}
.ticker-item::after{content:'◈';font-size:.55rem;color:var(--gold);font-style:normal;opacity:.6}
@keyframes tickerScroll{to{transform:translateX(-50%)}}
.sec > *:not(.svc-grid):not(.testi-grid):not(.price-grid):not(.blog-grid):not(.port-grid):not(.ba-container):not(.stats-bar):not(.team-grid):not(.svc-cat-grid):not(.compare-wrap):not(.cs-card):not(.roi-section):not(.beyond-grid):not(.values-grid):not(.tech-grid):not(.svc-process-grid):not(.quote-why-grid){
max-width:1280px;
margin-left:auto;
margin-right:auto;
}
.sec-tag{display:flex;align-items:center;gap:.9rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem}
.sec-tag::before{content:'';width:28px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(201,168,76,.3));flex-shrink:0}
.sec-h2{font-family:var(--serif);font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:300;line-height:1.15;letter-spacing:-.025em}
.sec-h2 em{font-style:italic;background:var(--goldShimmer);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-lead{font-size:clamp(.88rem,1.4vw,1.02rem);color:var(--muted);line-height:1.92;max-width:560px;margin-top:1.2rem}
.center{text-align:center}
.center .sec-tag{justify-content:center}
@media(max-width:1280px){.sec{padding:8rem 3.5rem}}
@media(max-width:1024px){.sec{padding:6.5rem 2.5rem}}
@media(max-width:768px){.sec{padding:5rem 1.8rem}}
@media(max-width:600px){.sec{padding:4rem 1.3rem}}
@media(max-width:420px){.sec{padding:3.5rem 1rem}}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1280px;margin:3.5rem auto 0}
.svc-card{background:var(--card);border:1px solid rgba(201,168,76,.06);padding:2.8rem 2.4rem;position:relative;overflow:hidden;transition:all .5s var(--ease-luxury)}
.svc-card::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(201,168,76,.03) 0%,transparent 60%);opacity:0;transition:opacity .5s}
.svc-card:hover{border-color:rgba(201,168,76,.15);transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.svc-card:hover::before{opacity:1}
.svc-price{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.editorial-bleed{padding:8rem 5rem;background:var(--dark)}
.editorial-stat .n{font-family:var(--serif);font-size:3.2rem;font-weight:600;color:var(--gold);line-height:1}
.editorial-stat .l{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.5rem;max-width:200px;line-height:1.7}
.beyond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3.5rem;max-width:1280px;margin-left:auto;margin-right:auto}
.beyond-card{background:var(--card);border:1px solid var(--border);padding:2.4rem;transition:all .5s var(--ease-luxury);position:relative;overflow:hidden}
.beyond-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.15),transparent);opacity:0;transition:opacity .5s}
.beyond-card:hover{border-color:rgba(201,168,76,.12);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.beyond-card:hover::after{opacity:1}
.beyond-icon{width:44px;height:44px;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;color:var(--gold);transition:background .2s,border-color .2s}
.beyond-card:hover .beyond-icon{background:rgba(201,168,76,.15);border-color:var(--gold)}
.beyond-title{font-family:var(--serif);font-size:1.35rem;font-weight:400;color:var(--cream);margin-bottom:.7rem;letter-spacing:-.01em}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3.5rem;max-width:1280px;margin-left:auto;margin-right:auto}
.testi{background:var(--card);border:1px solid var(--border);padding:2.4rem;transition:all .5s var(--ease-luxury);position:relative}
.testi:hover{border-color:rgba(201,168,76,.1);box-shadow:var(--shadow-card)}
.testi-stars{color:var(--gold);font-size:.9rem;letter-spacing:.15em;margin-bottom:1.2rem}
.testi-text{font-family:var(--serif);font-size:1.08rem;font-style:italic;line-height:1.75;color:var(--warm);margin-bottom:1.5rem}
.testi-av{width:40px;height:40px;border-radius:50%;background:rgba(201,168,76,.08);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--gold);flex-shrink:0}
.testi-name{font-size:.82rem;color:var(--cream);font-weight:500}
.guarantee-banner{display:flex;gap:1.5rem;padding:2.2rem 2.5rem;background:rgba(201,168,76,.03);border:1px solid var(--border);border-left:3px solid var(--gold);margin-top:4rem;max-width:1280px;margin-left:auto;margin-right:auto;align-items:flex-start}
.guar-icon{flex-shrink:0;margin-top:.2rem}
.guar-title{font-family:var(--serif);font-size:1.15rem;color:var(--cream);font-weight:400;margin-bottom:.4rem}
.guar-text{font-size:.84rem;color:var(--muted);line-height:1.8}
.compare-table th.highlight{color:var(--gold);background:rgba(201,168,76,.03)}
.compare-table td.highlight{background:rgba(201,168,76,.02);color:var(--cream)}
.compare-table tr:hover td{background:rgba(201,168,76,.015)}
.price-tabs{display:flex;gap:.5rem;margin-top:2.5rem;margin-bottom:3rem;flex-wrap:wrap;max-width:1280px;margin-left:auto;margin-right:auto}
.price-tab{background:none;border:1px solid var(--border);color:var(--muted);padding:.65rem 1.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all var(--t-base);min-height:44px}
.price-tab.active,.price-tab:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.04)}
.price-panel{display:none}
.price-panel.active{display:block}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;max-width:1280px;margin:0 auto}
.price-card{background:var(--card);border:1px solid var(--border);padding:2.8rem;position:relative;transition:all .5s var(--ease-luxury)}
.price-card:hover{border-color:rgba(201,168,76,.12);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.price-card.feat{border-color:rgba(201,168,76,.2);background:linear-gradient(145deg,rgba(12,10,20,.95),rgba(17,14,26,.95))}
.feat-badge{position:absolute;top:0;right:2rem;background:var(--gold);color:var(--void);font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .9rem;font-weight:600}
.price-num{font-family:var(--serif);font-size:3rem;font-weight:600;color:var(--cream);margin-bottom:1rem;line-height:1}
.price-feat::before{content:'→';color:var(--gold);font-size:.7rem;flex-shrink:0}
.price-btn{display:block;text-align:center;padding:.9rem 2rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:all .4s var(--ease-luxury);border:none}
.price-btn-outline:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.05);transform:translateY(-3px)}
.price-btn-gold{background:var(--gold);color:var(--void);font-weight:600}
.price-btn-gold:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 12px 36px rgba(201,168,76,.3)}
.newsletter-input{background:var(--dark);border:1px solid var(--border2);color:var(--cream);padding:.7rem 1rem;font-family:var(--sans);font-size:.82rem;width:220px;transition:border-color var(--t-base)}
.newsletter-input:focus{border-color:var(--gold);outline:none}
.newsletter-btn{background:var(--gold);color:var(--void);border:none;padding:.7rem 1.4rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:all .3s var(--ease-luxury)}
.newsletter-btn:hover{background:var(--gold2);transform:translateY(-2px)}
.newsletter-ok{display:none;font-size:.78rem;color:var(--gold)}
.roi-field{margin-bottom:1.5rem}
.roi-label{font-size:.82rem;color:var(--muted);margin-bottom:.6rem;display:flex;justify-content:space-between;align-items:center}
.roi-label span{color:var(--gold);font-weight:500}
.roi-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 12px rgba(201,168,76,.3);transition:box-shadow .3s}
.roi-range::-webkit-slider-thumb:hover{box-shadow:0 0 20px rgba(201,168,76,.5)}
.roi-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:pointer;border:none;box-shadow:0 0 12px rgba(201,168,76,.3)}
.roi-metric-val.highlight{color:var(--gold);font-size:1.5rem}
.site-bad-nav .logo{font-weight:bold;font-size:.8rem}
.site-bad-nav .links{display:flex;gap:.5rem}
.site-bad-nav .links a{color:white;text-decoration:underline;font-size:.6rem}
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2rem;max-width:1280px;margin:0 auto}
.port-card{background:var(--card);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:all .5s var(--ease-luxury);position:relative;display:flex;flex-direction:column}
.port-card:hover{border-color:rgba(201,168,76,.15);transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.port-thumb{height:220px;position:relative;overflow:hidden;background:#06060a}
.port-thumb-inner{width:100%;height:100%;transition:transform .8s var(--ease-luxury)}
.port-card:hover .port-thumb-inner{transform:scale(1.04)}
.port-overlay{position:absolute;inset:0;background:rgba(10,8,14,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-smooth);z-index:2}
.port-card:hover .port-overlay{opacity:1;pointer-events:auto}
.port-ov-title{font-family:var(--serif);font-size:1.2rem;color:var(--gold);margin-bottom:.4rem;font-weight:400;letter-spacing:-.01em}
.port-ov-sub{font-size:.72rem;color:var(--platinum);opacity:.85;margin-bottom:1.5rem}
.port-view-btn{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(10px);opacity:0;pointer-events:none;z-index:3;background:var(--gold);color:#000;font-family:var(--sans);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;border:none;padding:.6rem 1.4rem;border-radius:4px;cursor:pointer;transition:all .3s var(--ease-luxury)}
.port-card:hover .port-view-btn{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.port-view-btn:hover{background:#fff;box-shadow:var(--glow-sm)}
.port-info{padding:1.5rem;display:flex;flex-direction:column;flex-grow:1}
.port-info-title{font-family:var(--serif);font-size:1.15rem;color:var(--cream);margin-bottom:.3rem;letter-spacing:-.01em}
.port-info-sub{font-size:.72rem;color:var(--muted);margin-bottom:1rem}
.port-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.ptag{font-family:var(--mono);font-size:.55rem;color:var(--gold);border:1px solid rgba(201,168,76,.25);background:rgba(201,168,76,.04);padding:.2rem .6rem;border-radius:4px}
.filter-btn{background:none;border:1px solid var(--border);color:var(--muted);padding:.5rem 1rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all var(--t-base);min-height:44px}
.filter-btn.active,.filter-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.04)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2rem;max-width:1280px;margin:0 auto}
.blog-card{background:var(--card);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:all .5s var(--ease-luxury)}
.blog-card:hover{border-color:rgba(201,168,76,.12);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.blog-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
.blog-cat{position:absolute;top:.8rem;left:.8rem;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:rgba(1,1,4,.7);padding:.3rem .6rem;backdrop-filter:blur(4px);z-index:2}
.blog-card:hover .blog-read{letter-spacing:.18em}
.faq-cat-btn{background:none;border:1px solid var(--border);color:var(--muted);padding:.5rem 1rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all var(--t-base);min-height:44px}
.faq-cat-btn.active,.faq-cat-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.04)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;color:var(--cream);padding:1.5rem 0;cursor:pointer;text-align:left;font-family:var(--serif);font-size:1.1rem;font-weight:400;transition:color var(--t-base);gap:1rem}
.faq-q:hover{color:var(--gold)}
.faq-q-text{flex:1}
.faq-icon{font-family:var(--mono);font-size:1.2rem;color:var(--gold);transition:transform var(--t-base);flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-smooth)}
.faq-item.open .faq-a{max-height:500px}
.faq-a-inner{padding:0 0 1.5rem;font-size:.88rem;color:var(--muted);line-height:1.9}
.btn-book:hover{background:rgba(201,168,76,.1);border-color:var(--gold);transform:translateY(-2px)}
.phone-link:hover{color:var(--gold)!important}
.contact-form{display:flex;flex-direction:column;gap:1.2rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fg{display:flex;flex-direction:column;gap:.4rem}
.fg label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fg input,.fg select,.fg textarea{background:var(--dark);border:1px solid var(--border2);color:var(--cream);padding:.8rem 1rem;font-family:var(--sans);font-size:.88rem;transition:border-color var(--t-base);resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);outline:none}
.fg select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238580a0'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.fg select option{background:var(--card);color:var(--cream)}
.fsub{background:var(--gold);color:var(--void);border:none;padding:1rem 2rem;font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:all .4s var(--ease-luxury)}
.fsub:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 12px 36px rgba(201,168,76,.3)}
.ok-msg{display:none;padding:1rem;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.2);color:var(--gold);font-size:.85rem;text-align:center}
.deposit-strip{display:flex;gap:1rem;padding:1.2rem;background:rgba(201,168,76,.03);border:1px solid var(--border);margin-top:1rem;align-items:flex-start}
footer{padding:5rem 5rem 3rem;background:var(--void);border-top:1px solid var(--border);text-align:center}
.foot-logo{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--cream);margin-bottom:1rem;letter-spacing:.05em}
.foot-logo span{color:var(--gold)}
.foot-contact-line a:hover{color:var(--gold)}
.social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border2);border-radius:50%;color:var(--muted);transition:all var(--t-base)}
.social-link:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.05)}
.foot-copy{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;line-height:1.7;opacity:.7}
.foot-links{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}
.foot-links a{font-size:.72rem;color:var(--muted);text-decoration:none;transition:color var(--t-base);letter-spacing:.04em}
.foot-links a:hover{color:var(--gold)}
.float-cta{position:fixed;bottom:2rem;right:2rem;z-index:400;opacity:0;transform:translateY(20px);pointer-events:none;transition:all .5s var(--ease-luxury)}
.float-cta.show{opacity:1;transform:translateY(0);pointer-events:auto}
.float-cta a{display:inline-flex;align-items:center;gap:.5rem;background:var(--gold);color:var(--void);padding:.7rem 1.4rem;font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;font-weight:600;box-shadow:0 8px 32px rgba(201,168,76,.3);transition:all .3s var(--ease-luxury)}
.float-cta a:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 12px 40px rgba(201,168,76,.4)}
.float-dot{width:6px;height:6px;border-radius:50%;background:var(--void);animation:pulse 2s infinite}
#toastContainer{position:fixed;bottom:6rem;left:2rem;z-index:450;display:flex;flex-direction:column;gap:.5rem}
.toast{display:flex;align-items:center;gap:.8rem;background:rgba(12,10,20,.9);backdrop-filter:blur(20px);border:1px solid var(--border2);padding:.8rem 1.2rem;opacity:0;transform:translateY(16px);transition:all .5s var(--ease-luxury);max-width:360px}
.toast.show{opacity:1;transform:translateY(0)}
.toast-av{width:32px;height:32px;border-radius:50%;background:rgba(201,168,76,.08);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.5rem;color:var(--gold);flex-shrink:0;letter-spacing:.05em}
.toast-body{flex:1;min-width:0}
.toast-name{display:block;font-size:.72rem;color:var(--cream);font-weight:500}
.toast-action{display:block;font-size:.65rem;color:var(--muted);margin-top:.1rem}
.toast-time{font-family:var(--mono);font-size:.5rem;color:var(--muted);flex-shrink:0;letter-spacing:.06em}
#cookieBanner{position:fixed;bottom:0;left:0;right:0;z-index:600;background:rgba(6,5,12,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:1.2rem 2rem;display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;opacity:0;transform:translateY(100%);transition:all .5s var(--ease-luxury);pointer-events:none}
#cookieBanner.show{opacity:1;transform:translateY(0);pointer-events:auto}
.cookie-text{font-size:.78rem;color:var(--muted);max-width:500px;line-height:1.6}
.cookie-text a{color:var(--gold);text-decoration:underline}
.cookie-btns{display:flex;gap:.5rem}
.cookie-accept{background:var(--gold);color:var(--void);border:none;padding:.6rem 1.2rem;font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:all .3s;min-height:44px}
.cookie-accept:hover{background:var(--gold2)}
.cookie-decline{background:none;border:1px solid var(--border2);color:var(--muted);padding:.6rem 1.2rem;font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .3s;min-height:44px}
.cookie-decline:hover{border-color:var(--muted);color:var(--cream)}
.modal{display:none;position:fixed;inset:0;z-index:700;background:rgba(1,1,4,.85);backdrop-filter:blur(8px);flex-direction:column;padding:2rem}
.modal.open,.modal[style*="display:flex"],.modal[style*="display: flex"]{display:flex!important}
.modal-close{background:none;border:1px solid var(--border2);color:var(--muted);padding:.4rem .8rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s;min-height:34px}
.modal-close:hover{border-color:var(--gold);color:var(--gold)}
#chatBtn{position:fixed;bottom:2rem;right:2rem;z-index:400;width:52px;height:52px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(201,168,76,.3);transition:all .3s var(--ease-luxury)}
#chatBtn:hover{transform:scale(1.08);box-shadow:0 12px 40px rgba(201,168,76,.4)}
#chatBtn svg{width:22px;height:22px;fill:none;stroke:var(--void);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#chatBox{display:none;position:fixed;bottom:5.5rem;right:2rem;width:360px;max-height:500px;z-index:450;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-deep);flex-direction:column;overflow:hidden}
#chatBox.open{display:flex}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--border);background:rgba(201,168,76,.03)}
.chat-close:hover{color:var(--gold)}
.chat-msg{max-width:85%;padding:.6rem .9rem;font-size:.82rem;line-height:1.6;border-radius:var(--radius-md)}
.chat-msg.bot{background:rgba(201,168,76,.06);border:1px solid var(--border);color:var(--cream);align-self:flex-start}
.chat-msg.user{background:var(--gold);color:var(--void);align-self:flex-end;font-weight:500}
.chat-opt{background:none;border:1px solid var(--border2);color:var(--warm);padding:.5rem .8rem;font-size:.78rem;cursor:pointer;text-align:left;transition:all .2s;font-family:var(--sans)}
.chat-opt:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.03)}
.chat-input:focus{border-color:var(--gold);outline:none}
.chat-send:hover{background:var(--gold2)}
#scrollTop{position:fixed;bottom:5.5rem;right:2rem;z-index:400;width:44px;height:44px;background:rgba(12,10,20,.85);backdrop-filter:blur(12px);border:1px solid var(--border2);color:var(--muted);border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .3s var(--ease-luxury);font-size:.9rem}
#scrollTop:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.05)}
.grader-opt:focus-visible{
outline:2px solid var(--gold);
outline-offset:2px;
border-color:var(--gold);
}
.est-opt:focus-visible{
outline:2px solid var(--gold);
outline-offset:2px;
border-color:var(--gold);
}
.blog-card[role="button"]:focus-visible,
.port-card:focus-visible{
outline:2px solid var(--gold);
outline-offset:3px;
}
.price-btn:focus-visible,
.est-btn-next:focus-visible,
.est-btn-back:focus-visible{
outline:2px solid var(--gold);
outline-offset:3px;
}
.faq-q:focus-visible{
outline:2px solid var(--gold);
outline-offset:3px;
border-radius:var(--radius-sm);
}
.filter-btn:focus-visible,
.faq-cat-btn:focus-visible,
.svc-filter-btn:focus-visible,
.price-tab:focus-visible{
outline:2px solid var(--gold);
outline-offset:2px;
}
.chat-opt:focus-visible{
outline:2px solid var(--gold);
outline-offset:2px;
}
.about-hero{padding:12rem 5rem 6rem;background:var(--dark);position:relative}
.about-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.about-hero-content{max-width:700px}
.founder-social a:hover{background:rgba(201,168,76,.06);border-color:var(--gold)}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:3.5rem;max-width:1280px;margin-left:auto;margin-right:auto}
.value-card{background:var(--card);border:1px solid var(--border);padding:2.5rem;transition:all .5s var(--ease-luxury)}
.value-card:hover{border-color:rgba(201,168,76,.1);transform:translateY(-3px)}
.value-num{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--goldDark);margin-bottom:1.2rem}
.value-title{font-family:var(--serif);font-size:1.25rem;color:var(--cream);margin-bottom:.6rem;font-weight:400}
.value-desc{font-size:.84rem;color:var(--muted);line-height:1.85}
.stat-n{font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--gold);line-height:1}
.tech-item{background:var(--card);border:1px solid var(--border);padding:1.8rem;text-align:center;transition:all .4s var(--ease-luxury);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;gap:0.8rem;z-index:1}
.tech-item:hover{border-color:rgba(201,168,76,.25);transform:translateY(-3px)}
.tech-item:hover .tech-logo-wrap svg{color:var(--cream);opacity:1;filter:none}
.tech-item:not(:hover) .tech-logo-wrap svg{filter:grayscale(100%) brightness(85%) sepia(30%) saturate(80%);opacity:.65}
.tech-item:hover .tech-label{color:var(--cream)}
.tech-item:hover .tech-desc{color:var(--cream)}
.work-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.blog-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.blog-cats{display:flex;gap:.5rem;flex-wrap:wrap}
.faq-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.privacy-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.services-hero{padding:12rem 5rem 6rem;background:var(--dark);position:relative}
.services-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.svc-filter-bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:2rem 0 3rem}
.svc-filter-btn{background:none;border:1px solid var(--border);color:var(--muted);padding:.45rem .9rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all var(--t-base);min-height:36px}
.svc-filter-btn.active,.svc-filter-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.04)}
.svc-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2rem;max-width:1280px;margin-left:auto;margin-right:auto;margin-top:2rem}
.svc-cat-card{background:var(--card);border:1px solid var(--border);padding:2.4rem;transition:all .5s var(--ease-luxury)}
.svc-cat-card:hover{border-color:rgba(201,168,76,.12);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.svc-cat-items li::before{content:'→';color:var(--gold);font-size:.65rem;flex-shrink:0}
.svc-cat-price{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.svc-trust-n{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--gold);line-height:1}
.svc-process-step{padding:2rem;border:1px solid var(--border);background:var(--card);position:relative;transition:all .5s var(--ease-luxury)}
.svc-process-step:hover{border-color:rgba(201,168,76,.1);transform:translateY(-3px)}
.svc-process-step::before{content:attr(data-step);font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--gold);display:block;margin-bottom:1rem}
.estimator-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.quote-why-card:hover{border-color:rgba(201,168,76,.1);transform:translateY(-3px)}
.est-progress-step.done{background:rgba(201,168,76,.45)}
.est-progress-step.active{background:var(--gold)}
.est-step{display:none}
.est-step.active{display:block}
.est-opts{display:flex;flex-direction:column;gap:.6rem}
.est-opt:hover{border-color:rgba(201,168,76,.2);background:rgba(201,168,76,.03)}
.est-opt.selected{border-color:var(--gold);background:rgba(201,168,76,.05)}
.est-opt-price{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--gold);margin-top:.2rem}
.est-btn-next:hover{background:var(--gold2);transform:translateY(-2px)}
.est-btn-back:hover{border-color:var(--muted);color:var(--cream)}
.est-result-includes li::before{content:'✓';color:var(--gold);font-size:.7rem;flex-shrink:0}
.grader-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.grader-opt{background:var(--card);border:1px solid var(--border);padding:1rem 1.4rem;cursor:pointer;text-align:left;font-family:var(--sans);font-size:.85rem;color:var(--cream);transition:all .3s}
.grader-opt:hover{border-color:rgba(201,168,76,.2);background:rgba(201,168,76,.03)}
.grader-opt.selected{border-color:var(--gold);background:rgba(201,168,76,.05)}
.grader-dim{background:var(--card);border:1px solid var(--border);padding:1.2rem}
.grader-dim-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.grader-dim-bar{height:4px;background:var(--border2);margin-bottom:.3rem;border-radius:2px;overflow:hidden}
.grader-dim-fill{height:100%;background:var(--gold);border-radius:2px;transition:width 1s var(--ease-smooth)}
.grader-dim-score{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--gold)}
.cs-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.cs-card{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;padding:4rem 0;border-bottom:1px solid var(--border)}
.cs-card:first-child{padding-top:0}
.article-hero{padding:12rem 5rem 4rem;background:var(--dark)}
.article-back:hover{letter-spacing:.18em}
.config-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.config-opt:hover{border-color:rgba(201,168,76,.15)}
.config-opt.selected{border-color:var(--gold);background:rgba(201,168,76,.04)}
.referral-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
@media(max-width:1280px){
nav{padding:2rem 3.5rem}
nav.scrolled{padding:1.1rem 3.5rem}
.hero{padding:100px 3.5rem 5rem}
.svc-grid{grid-template-columns:repeat(2,1fr)}
.beyond-grid{grid-template-columns:repeat(2,1fr)}
.editorial-bleed{padding:7rem 3.5rem}
footer{padding:4rem 3.5rem 3rem}
}
@media(max-width:1024px){
.nav-links{display:none}
.nav-cta{display:none}
.hbg{display:flex}
nav{padding:max(1.5rem,env(safe-area-inset-top)) 2.5rem 1.5rem}
nav.scrolled{padding:max(1rem,env(safe-area-inset-top)) 2.5rem 1rem}
.hero{padding:90px 2.5rem 4rem}
.hero-h1{font-size:clamp(3.5rem,10vw,8rem)}
.hero-stats::before{display:none}
.hero-bottom{flex-direction:column;align-items:flex-start}
.testi-grid{grid-template-columns:1fr 1fr}
.frow{grid-template-columns:1fr}
.cs-card{grid-template-columns:1fr}
.blog-card.featured{grid-template-columns:1fr}
.founder-wrap > div:last-child{text-align:left}
.editorial-bleed{padding:6rem 2.5rem}
footer{padding:3rem 2.5rem 2.5rem}
}
@media(max-width:768px){
.hero{padding:80px 1.8rem 3.5rem}
.hero-h1{font-size:clamp(3rem,9vw,5.5rem);line-height:.95}
.hero-pill, .dynamic-badge{font-size:.53rem;padding:.35rem .75rem}
.hero-desc{font-size:.88rem}
.hstat .n{font-size:2rem}
.svc-grid{grid-template-columns:1fr}
.beyond-grid{grid-template-columns:1fr}
.testi-grid{grid-template-columns:1fr}
.price-grid{grid-template-columns:1fr}
.editorial-bleed{padding:5rem 1.8rem}
.port-grid{grid-template-columns:1fr}
.blog-grid{grid-template-columns:1fr}
.svc-cat-grid{grid-template-columns:1fr}
.newsletter-input{width:100%}
footer{padding:3rem 1.8rem 2rem}
.about-hero,.work-hero,.blog-hero,.faq-hero,.privacy-hero,.services-hero,.estimator-hero,.grader-hero,.cs-hero,.config-hero,.referral-hero{padding:10rem 1.8rem 3rem}
#chatBox{width:calc(100vw - 2rem);right:1rem;bottom:5rem}
}
@media(max-width:600px){
.hero{padding:0 1.3rem 3rem}
.hero-h1{font-size:clamp(2.6rem,8.5vw,4.5rem)}
.hero-actions{flex-direction:column;width:100%}
.btn-gold,.btn-ghost{width:100%;justify-content:center;text-align:center}
.price-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.price-tab{white-space:nowrap;flex-shrink:0}
.faq-cat-btn{white-space:nowrap;flex-shrink:0}
.blog-cats{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.filter-btn{white-space:nowrap;flex-shrink:0}
.svc-filter-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.svc-filter-btn{white-space:nowrap;flex-shrink:0}
.about-hero,.work-hero,.blog-hero,.faq-hero,.privacy-hero,.services-hero,.estimator-hero,.grader-hero,.cs-hero,.config-hero,.referral-hero{padding:9rem 1.3rem 2.5rem}
.sec-h2{font-size:clamp(1.8rem,5vw,2.5rem)}
footer{padding:2.5rem 1.3rem 2rem}
}
@media(max-width:420px){
.hero{padding:0 1rem 2.5rem}
.hero-h1{font-size:clamp(2.2rem,8vw,3.5rem)}
nav{padding:max(1.2rem,env(safe-area-inset-top)) 1rem 1.2rem}
nav.scrolled{padding:max(.8rem,env(safe-area-inset-top)) 1rem .8rem}
.about-hero,.work-hero,.blog-hero,.faq-hero,.privacy-hero,.services-hero,.estimator-hero,.grader-hero,.cs-hero,.config-hero,.referral-hero{padding:8rem 1rem 2rem}
footer{padding:2rem 1rem}
#cur,#cur2{display:none}
}
@media(hover:none),(pointer:coarse){
#cur,#cur2{display:none!important}
*{cursor:auto!important}
.btn-gold,.btn-ghost,.nav-cta,.nav-links a,.mob-menu a,.est-opt,.grader-opt,.filter-btn,.faq-cat-btn,.faq-q{cursor:pointer!important}
}
@keyframes riseIn{
from{opacity:0;transform:translateY(36px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes glowPulse{
0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}
50%{opacity:1;transform:translateX(-50%) scale(1.1)}
}
@keyframes pulse{
0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(201,168,76,.45)}
50%{opacity:.25;box-shadow:0 0 0 8px rgba(201,168,76,0)}
}
@keyframes scrollLine{
0%,100%{transform:scaleY(1) translateY(0);opacity:1}
50%{transform:scaleY(.4) translateY(12px);opacity:.25}
}
@keyframes shimmerSlide{
0%,100%{background-position:200% 0}
50%{background-position:-200% 0}
}
@keyframes tickerScroll{
to{transform:translateX(-50%)}
}
@keyframes tIn{to{transform:scaleY(1)}}
@keyframes tOut{to{transform:scaleY(0)}}
.svc-card,.beyond-card,.testi,.price-card,.blog-card,.port-card,.value-card,.tech-item,.svc-cat-card,.quote-why-card,.svc-process-step,.referral-step{
transition:all .5s var(--ease-luxury);
}
.svc-card:hover,.beyond-card:hover,.value-card:hover{
transform:translateY(-6px);
}
.price-card:hover,.blog-card:hover,.port-card:hover,.svc-cat-card:hover{
transform:translateY(-4px);
}
.btn-gold,.btn-ghost,.price-btn,.est-btn-next,.fsub,.cookie-accept{
transition:all .4s var(--ease-luxury);
}
.btn-gold:active,.btn-ghost:active,.price-btn:active,.est-btn-next:active,.fsub:active{
transform:translateY(-1px)!important;
transition-duration:.1s;
}
.nav-links a::after{
transition:width .4s var(--ease-smooth);
}
.faq-icon{
transition:transform .35s var(--ease-smooth);
}
.faq-item.open .faq-icon{
transform:rotate(45deg);
}
.faq-a{
transition:max-height .5s var(--ease-smooth);
}
.mob-menu.open a:nth-child(1){animation:fadeSlideUp .4s .05s both}
.mob-menu.open a:nth-child(2){animation:fadeSlideUp .4s .1s both}
.mob-menu.open a:nth-child(3){animation:fadeSlideUp .4s .15s both}
.mob-menu.open a:nth-child(4){animation:fadeSlideUp .4s .2s both}
.mob-menu.open a:nth-child(5){animation:fadeSlideUp .4s .25s both}
.mob-menu.open a:nth-child(6){animation:fadeSlideUp .4s .3s both}
.mob-menu.open a:nth-child(7){animation:fadeSlideUp .4s .35s both}
.mob-menu.open a:nth-child(8){animation:fadeSlideUp .4s .4s both}
@keyframes fadeSlideUp{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.port-card:hover .port-card-img{
transform:scale(1.04);
}
.blog-card:hover .blog-img{
transform:scale(1.04);
}
.toast{
transition:all .5s var(--ease-luxury);
}
.float-cta{
transition:all .5s var(--ease-luxury);
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
box-shadow:0 0 0 3px rgba(201,168,76,.08);
}
.price-card.feat{
position:relative;
}
.price-card.feat::before{
content:'';
position:absolute;
inset:-1px;
background:linear-gradient(135deg,rgba(201,168,76,.1),transparent 40%,transparent 60%,rgba(201,168,76,.06));
pointer-events:none;
opacity:0;
transition:opacity .5s;
}
.price-card.feat:hover::before{
opacity:1;
}
.svc-card::after{
content:'';
position:absolute;
top:-50%;
right:-50%;
width:100%;
height:100%;
background:radial-gradient(circle,rgba(201,168,76,.06) 0%,transparent 70%);
pointer-events:none;
opacity:0;
transition:opacity .5s;
}
.svc-card:hover::after{
opacity:1;
}
.blog-card:hover .blog-read{
letter-spacing:.18em;
color:var(--gold2);
}
.grader-score-ring svg circle:last-child{
transition:stroke-dashoffset 1.5s var(--ease-smooth);
}
#cookieBanner{
transition:all .5s var(--ease-luxury);
}
.hero-pill{animation-delay:.3s}
.hero-h1{animation-delay:.5s}
.hero-line{animation-delay:.7s}
.hero-bottom{animation-delay:.9s}
.hero-scroll{animation-delay:1.6s}
body::before{
content:'';
position:fixed;inset:0;
background:radial-gradient(ellipse 90% 75% at 50% 0%, rgba(201,168,76,.04) 0%, transparent 65%),
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(155,111,255,.025) 0%, transparent 55%);
pointer-events:none;z-index:0;
}
nav.scrolled{
background:rgba(2,1,4,.92)!important;
backdrop-filter:blur(40px) saturate(200%) brightness(0.9)!important;
border-bottom:1px solid rgba(201,168,76,.1)!important;
box-shadow:0 1px 0 rgba(201,168,76,.06), 0 8px 40px rgba(0,0,0,.6)!important;
}
.btn-gold{
background:linear-gradient(135deg, var(--gold) 0%, var(--gold2) 50%, var(--gold) 100%)!important;
background-size:200% 100%!important;
color:var(--void)!important;
box-shadow:0 4px 24px rgba(201,168,76,.28), inset 0 1px 0 rgba(255,255,255,.18)!important;
transition:all var(--t-slow) var(--ease-luxury)!important;
letter-spacing:.1em;
font-weight:500;
}
.btn-gold:hover{
background-position:100% 0!important;
box-shadow:0 8px 40px rgba(201,168,76,.45), 0 0 0 1px rgba(201,168,76,.3), inset 0 1px 0 rgba(255,255,255,.22)!important;
transform:translateY(-2px)!important;
}
.price-card, .svc-cat-card, .testi, .work-item, .case-card, .blog-card{
background:linear-gradient(145deg, var(--card2) 0%, var(--card) 100%)!important;
border-color:rgba(201,168,76,.08)!important;
transition:transform var(--t-slow) var(--ease-luxury),
box-shadow var(--t-slow) var(--ease-luxury),
border-color var(--t-slow)!important;
}
.price-card:hover, .svc-cat-card:hover, .work-item:hover{
transform:translateY(-6px)!important;
box-shadow:var(--shadow-hover)!important;
border-color:rgba(201,168,76,.22)!important;
}
.price-card.feat{
background:linear-gradient(145deg, #17141e 0%, #100e15 100%)!important;
border-color:rgba(201,168,76,.22)!important;
box-shadow:0 0 0 1px rgba(201,168,76,.14), var(--shadow-card), var(--glow-sm)!important;
color: var(--platinum)!important;
}
.price-card.feat .price-tier{ color:var(--gold)!important; }
.price-card.feat .price-num{ color:var(--cream)!important; }
.price-card.feat .price-desc{ color:var(--muted)!important; }
.price-card.feat .price-feat{ color:var(--warm)!important; }
.price-card.feat .price-feat::before{ color:var(--gold)!important; }
.price-card.feat .price-testi{ color:var(--muted)!important; border-color:var(--border2)!important; }
.price-card.feat .price-testi-name{ color:var(--gold)!important; }
.price-card.feat .price-btn-dark{
border-color:rgba(201,168,76,.3)!important;
color:var(--warm)!important;
}
.price-card.feat .price-btn-dark:hover{
background:rgba(201,168,76,.08)!important;
color:var(--cream)!important;
border-color:var(--gold)!important;
}
.sec + .sec::before{
content:'';
display:block;
width:120px;
height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
margin:0 auto;
opacity:.35;
margin-bottom:-1px;
}
.sec-h2{
letter-spacing:-.025em!important;
font-weight:300!important;
}
.sec-h2 em{
font-style:italic!important;
background:linear-gradient(135deg, var(--gold) 0%, var(--gold2) 60%, var(--gold3) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.testi{
border:1px solid rgba(201,168,76,.1)!important;
box-shadow:0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(201,168,76,.05)!important;
position:relative;overflow:hidden;
}
.testi::before{
content:'';
position:absolute;top:-1px;left:20%;right:20%;
height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.35), transparent);
}
.testi-stars{
color:var(--gold2)!important;
letter-spacing:.1em;
text-shadow:0 0 12px rgba(201,168,76,.4);
}
.stat-n{
background:linear-gradient(135deg, var(--gold) 0%, var(--gold3) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.sec-tag{
letter-spacing:.25em!important;
font-size:.58rem!important;
opacity:.9;
}
.sec-tag::before{
background:linear-gradient(90deg, var(--gold), var(--gold2))!important;
box-shadow:var(--glow-line)!important;
}
footer{
background:linear-gradient(180deg, var(--void) 0%, #010002 100%)!important;
border-top:1px solid rgba(201,168,76,.1)!important;
}
footer::before{
content:'';
display:block;
width:60%;max-width:400px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.3), transparent);
margin:0 auto 2rem;
}
.contact-form input, .contact-form textarea, .contact-form select{
background:rgba(14,12,17,.8)!important;
border:1px solid rgba(201,168,76,.12)!important;
transition:border-color var(--t-base), box-shadow var(--t-base)!important;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
border-color:rgba(201,168,76,.4)!important;
box-shadow:0 0 0 3px rgba(201,168,76,.08), inset 0 1px 0 rgba(201,168,76,.04)!important;
outline:none!important;
}
#chatBox{
background:rgba(10,8,14,.95)!important;
border:1px solid rgba(201,168,76,.15)!important;
backdrop-filter:blur(40px)!important;
box-shadow:0 24px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(201,168,76,.06)!important;
}
.rev{
transition:opacity var(--t-glacial) var(--ease-luxury),
transform var(--t-glacial) var(--ease-luxury)!important;
}
.hero-pill{
border-color:rgba(201,168,76,.25)!important;
background:rgba(201,168,76,.04)!important;
box-shadow:0 0 20px rgba(201,168,76,.08), inset 0 1px 0 rgba(201,168,76,.08)!important;
backdrop-filter:blur(12px)!important;
}
.nav-cta::before{
background:linear-gradient(135deg, var(--gold), var(--gold2))!important;
}
.feat-badge{
background:linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%)!important;
color:var(--void)!important;
box-shadow:0 2px 12px rgba(201,168,76,.35)!important;
font-weight:600!important;
letter-spacing:.1em!important;
}
.toast{
background:rgba(14,12,17,.97)!important;
border:1px solid rgba(201,168,76,.14)!important;
backdrop-filter:blur(20px)!important;
box-shadow:0 8px 32px rgba(0,0,0,.6)!important;
}
#cookieBanner{
background:rgba(8,7,10,.96)!important;
border-top:1px solid rgba(201,168,76,.1)!important;
backdrop-filter:blur(24px)!important;
}
#progressBar{
background:linear-gradient(90deg, var(--goldDark), var(--gold), var(--gold2), var(--gold3))!important;
background-size:200% 100%!important;
animation:progressShimmer 2s linear infinite!important;
}
@keyframes progressShimmer{
0%{background-position:0% 0}
100%{background-position:200% 0}
}
.editorial-bleed{
position:relative;overflow:hidden;
padding:var(--space-xl) var(--space-lg);
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:3rem;
border-top:1px solid rgba(201,168,76,.06);
border-bottom:1px solid rgba(201,168,76,.06);
}
.editorial-bleed::before{
content:'Results.';
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%);
font-family:var(--serif);
font-size:clamp(8rem,18vw,15rem);
font-weight:300;
font-style:italic;
-webkit-text-stroke:1px rgba(201,168,76,.08);
color:transparent;
white-space:nowrap;
pointer-events:none;
letter-spacing:-.025em;
line-height:1;
user-select:none;
}
.editorial-stat .n{
font-family:var(--serif);
font-size:clamp(3rem,6vw,5.5rem);
font-weight:300;
line-height:1;
background:linear-gradient(135deg,var(--gold) 0%,var(--gold3) 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.editorial-stat .l{
font-family:var(--mono);
font-size:.58rem;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--muted);
margin-top:.6rem;
}
.deposit-strip{
display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
padding:1rem 1.4rem;
border:1px solid rgba(201,168,76,.1);
background:rgba(201,168,76,.03);
margin-top:1.5rem;
}
#article-progress{
position:fixed;top:0;left:0;height:2px;width:0%;z-index:999;
background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold3));
transition:width .1s linear;
}
.price-card:hover,
.svc-cat-card:hover,
.work-item:hover {
transform: none !important;
}
.sec-h2.kinetic-init,
.hero-h1.kinetic-init {
overflow: visible;
}
.vl-marquee-strip {
overflow: hidden;
padding: 2rem 0;
border-top: 1px solid rgba(201,168,76,.07);
border-bottom: 1px solid rgba(201,168,76,.07);
background: linear-gradient(180deg, var(--dark) 0%, var(--void) 100%);
user-select: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.vl-marquee-track {
display: flex;
align-items: center;
gap: 0;
width: max-content;
animation: vl-marquee 38s linear infinite;
}
.vl-marquee-strip:hover .vl-marquee-track {
animation-play-state: paused;
}
@keyframes vl-marquee {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.vl-marquee-item {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0 2.8rem;
white-space: nowrap;
flex-shrink: 0;
}
#floatCta {
position: relative;
}
@keyframes vl-pulse-ring {
0%   { transform: scale(1);   opacity: 0.6; }
70%  { transform: scale(1.18); opacity: 0; }
100% { transform: scale(1.18); opacity: 0; }
}
#transition {
overflow: hidden;
}
.btn-gold, .nav-cta {
transition: transform 0.4s cubic-bezier(.22,.61,.36,1),
box-shadow 0.4s cubic-bezier(.22,.61,.36,1),
opacity 0.4s,
background-position 0.5s !important;
}
.sec-dark > * {
position: relative;
z-index: 1;
}
html.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto;
}
html[data-theme="light"] nav.scrolled {
background: rgba(250,248,244,0.96)!important;
backdrop-filter: blur(28px) saturate(140%)!important;
border-bottom-color: var(--border)!important;
box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08)!important;
}
html[data-theme="light"] .price-card.feat {
background: linear-gradient(145deg, #17141e 0%, #100e15 100%)!important;
color: var(--platinum)!important;
}
html[data-theme="light"] .price-card.feat .price-num { color: #f0e8d8!important; }
html[data-theme="light"] .price-card.feat .price-desc { color: rgba(200,184,152,.75)!important; }
html[data-theme="light"] .price-card.feat .price-feat { color: rgba(200,184,152,.85)!important; }
html[data-theme="light"] .price-card.feat .price-testi { color: rgba(200,184,152,.6)!important; border-color: rgba(201,168,76,.18)!important; }
html[data-theme="light"] .price-card.feat .price-testi-name { color: var(--gold)!important; }
html[data-theme="light"] .price-card.feat .price-btn-dark { color: #f0e8d8!important; border-color: rgba(201,168,76,.35)!important; }
html { scroll-behavior: auto !important; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.price-card[data-tilt]:hover,
.svc-cat-card[data-tilt]:hover {
transform: none;
}
.float-cta { will-change: transform, opacity; }
nav:not(.scrolled) { padding-top: max(1.6rem, env(safe-area-inset-top)); }
.sec-h2[data-kinetic] { overflow: visible; line-height: 1.15; }
#vl-scarcity {
position: relative;
z-index: 499;
background: linear-gradient(90deg, var(--goldDark) 0%, #9a7535 50%, var(--goldDark) 100%);
background-size: 200% 100%;
animation: vl-strip-shift 8s linear infinite;
}
@keyframes vl-strip-shift {
0%   { background-position: 0% 0; }
100% { background-position: 200% 0; }
}
.vl-sc-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.6rem 1.5rem;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--void);
position: relative;
}
.vl-sc-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--void);
opacity: 0.6;
flex-shrink: 0;
animation: pulse 2s infinite;
}
.vl-sc-text { color: var(--void); }
.vl-sc-text strong { font-weight: 700; }
.vl-sc-link {
color: var(--void);
text-decoration: underline;
text-underline-offset: 2px;
transition: opacity 0.2s;
}
.vl-sc-link:hover { opacity: 0.7; }
.vl-sc-close {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: rgba(0,0,0,0.5);
cursor: pointer;
font-size: 0.7rem;
padding: 0.4rem;
line-height: 1;
transition: color 0.15s;
min-width: 28px;
min-height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.vl-sc-close:hover { color: var(--void); }
.vl-trust-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.4rem;
margin-top: 2rem;
padding-top: 1.8rem;
border-top: 1px solid rgba(200, 164, 92, 0.12);
}
.vl-trust-badge {
display: flex;
align-items: center;
gap: 0.45rem;
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.vl-trust-icon {
font-size: 0.72rem;
line-height: 1;
}
.vl-trust-badge .vl-trust-star { color: var(--gold); }
@media (max-width: 768px) {
.vl-trust-row { gap: 0.4rem 1rem; }
.vl-trust-badge { font-size: 0.55rem; }
}
.vl-timeline-sec {
padding: 8rem 4rem;
background: var(--void);
overflow: hidden;
position: relative;
}
.vl-timeline-sec::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border2), transparent);
}
.vl-timeline-inner { max-width: 1200px; margin: 0 auto; }
.vl-timeline-track {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
margin-top: 5rem;
position: relative;
}
.vl-timeline-track::before {
content: '';
position: absolute;
top: 28px;
left: 28px;
right: 28px;
height: 1px;
background: linear-gradient(90deg, var(--goldDark), var(--gold), var(--gold2), var(--gold));
z-index: 0;
}
.vl-tstep {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 0.5rem;
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.55s var(--ease-luxury), transform 0.55s var(--ease-luxury);
}
.vl-tstep.in { opacity: 1; transform: none; }
.vl-tstep:nth-child(1) { transition-delay: 0.0s; }
.vl-tstep:nth-child(2) { transition-delay: 0.1s; }
.vl-tstep:nth-child(3) { transition-delay: 0.2s; }
.vl-tstep:nth-child(4) { transition-delay: 0.3s; }
.vl-tstep:nth-child(5) { transition-delay: 0.4s; }
.vl-tstep:nth-child(6) { transition-delay: 0.5s; }
.vl-tstep:nth-child(7) { transition-delay: 0.6s; }
.vl-tstep-node {
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid var(--border2);
background: var(--card);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.08em;
color: var(--gold);
margin-bottom: 1.2rem;
transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
position: relative;
}
.vl-tstep:hover .vl-tstep-node {
border-color: var(--gold);
background: var(--card2);
box-shadow: 0 0 20px rgba(201,168,76,0.2);
}
.vl-tstep-node svg {
width: 18px;
height: 18px;
stroke: var(--gold);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.vl-tstep-day {
font-family: var(--mono);
font-size: 0.52rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--goldDark);
margin-bottom: 0.4rem;
}
.vl-tstep-title {
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 500;
color: var(--cream);
margin-bottom: 0.3rem;
line-height: 1.3;
}
.vl-tstep-sub {
font-size: 0.68rem;
color: var(--muted);
line-height: 1.5;
}
@media (max-width: 1024px) {
.vl-timeline-sec { padding: 5.5rem 2.5rem; }
.vl-timeline-track {
grid-template-columns: repeat(4, 1fr);
gap: 2rem 0;
}
.vl-timeline-track::before { display: none; }
}
@media (max-width: 768px) {
.vl-timeline-sec { padding: 4.5rem 1.5rem; }
.vl-timeline-track { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 480px) {
.vl-timeline-track { grid-template-columns: 1fr; }
}
.vl-vtesti-sec {
padding: 8rem 4rem;
background: var(--dark);
}
.vl-vtesti-inner { max-width: 1200px; margin: 0 auto; }
.vl-vtesti-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 4rem;
}
.vl-vtesti-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 2px;
overflow: hidden;
transition: border-color 0.3s, transform 0.3s;
}
.vl-vtesti-card:hover {
border-color: var(--border2);
transform: translateY(-4px);
}
.vl-vtesti-thumb {
position: relative;
aspect-ratio: 16 / 9;
background: var(--card2);
cursor: pointer;
overflow: hidden;
}
.vl-vtesti-thumb-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--card2), var(--card3));
display: flex;
align-items: center;
justify-content: center;
}
.vl-vtesti-play {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--gold);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.vl-vtesti-thumb:hover .vl-vtesti-play {
transform: scale(1.12);
box-shadow: 0 8px 32px rgba(201,168,76,0.4);
}
.vl-vtesti-play svg {
width: 20px;
height: 20px;
fill: var(--void);
margin-left: 3px;
}
.vl-vtesti-duration {
position: absolute;
bottom: 0.7rem;
right: 0.7rem;
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.08em;
background: rgba(0,0,0,0.8);
color: var(--warm);
padding: 0.2rem 0.5rem;
}
.vl-vtesti-body {
padding: 1.2rem 1.4rem;
}
.vl-vtesti-quote {
font-family: var(--serif);
font-style: italic;
font-size: 0.95rem;
font-weight: 300;
color: var(--cream);
line-height: 1.65;
margin-bottom: 1rem;
}
.vl-vtesti-meta {
display: flex;
align-items: center;
gap: 0.75rem;
}
.vl-vtesti-av {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--border2);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 0.85rem;
font-weight: 600;
color: var(--gold);
flex-shrink: 0;
}
.vl-vtesti-name {
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 500;
color: var(--cream);
}
.vl-vtesti-role {
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.08em;
color: var(--muted);
text-transform: uppercase;
margin-top: 1px;
}
.vl-vtesti-stars {
color: var(--gold);
font-size: 0.65rem;
letter-spacing: 0.05em;
margin-left: auto;
}
.vl-vtesti-modal {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0,0,0,0.92);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.vl-vtesti-modal.open {
opacity: 1;
pointer-events: all;
}
.vl-vtesti-modal-inner {
width: min(900px, 90vw);
aspect-ratio: 16 / 9;
position: relative;
}
.vl-vtesti-modal iframe {
width: 100%;
height: 100%;
border: none;
}
.vl-vtesti-modal-close {
position: absolute;
top: -3rem;
right: 0;
background: none;
border: 1px solid var(--border2);
color: var(--muted);
padding: 0.4rem 0.9rem;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
cursor: pointer;
text-transform: uppercase;
transition: color 0.2s, border-color 0.2s;
}
.vl-vtesti-modal-close:hover { color: var(--cream); border-color: var(--cream); }
@media (max-width: 1024px) {
.vl-vtesti-sec { padding: 5.5rem 2.5rem; }
.vl-vtesti-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.vl-vtesti-sec { padding: 4.5rem 1.5rem; }
.vl-vtesti-grid { grid-template-columns: 1fr; }
}
#vl-exit-overlay {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(2,1,4,0.85);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
#vl-exit-overlay.open {
opacity: 1;
pointer-events: all;
}
.vl-exit-box {
background: var(--card);
border: 1px solid var(--border2);
border-top: 2px solid var(--gold);
max-width: 480px;
width: calc(100% - 3rem);
padding: 3rem;
position: relative;
transform: translateY(24px);
transition: transform 0.4s var(--ease-spring);
}
#vl-exit-overlay.open .vl-exit-box { transform: none; }
.vl-exit-close {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
color: var(--muted);
font-size: 1rem;
cursor: pointer;
padding: 0.4rem;
line-height: 1;
transition: color 0.2s;
min-width: 36px;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.vl-exit-close:hover { color: var(--cream); }
.vl-exit-eyebrow {
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
}
.vl-exit-h {
font-family: var(--serif);
font-size: clamp(1.5rem, 3.5vw, 2rem);
font-weight: 300;
line-height: 1.15;
color: var(--cream);
margin-bottom: 0.75rem;
}
.vl-exit-h em { font-style: italic; color: var(--gold); }
.vl-exit-p {
font-size: 0.85rem;
color: var(--muted);
line-height: 1.65;
margin-bottom: 1.8rem;
}
.vl-exit-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.vl-exit-input {
flex: 1;
min-width: 180px;
background: var(--dark);
border: 1px solid var(--border);
color: var(--cream);
padding: 0.8rem 1rem;
font-family: var(--sans);
font-size: 0.88rem;
outline: none;
transition: border-color 0.2s;
min-height: 44px;
}
.vl-exit-input:focus { border-color: var(--gold); }
.vl-exit-submit {
background: var(--gold);
color: var(--void);
border: none;
padding: 0.8rem 1.4rem;
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
white-space: nowrap;
min-height: 44px;
}
.vl-exit-submit:hover { background: var(--gold2); }
.vl-exit-ok {
display: none;
font-family: var(--mono);
font-size: 0.68rem;
color: var(--gold);
letter-spacing: 0.06em;
margin-top: 0.8rem;
}
.vl-exit-fine {
font-family: var(--mono);
font-size: 0.55rem;
color: var(--muted);
letter-spacing: 0.08em;
margin-top: 1rem;
line-height: 1.5;
}
.vl-nav-extras {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: 0.75rem;
}
.vl-icon-btn {
width: 36px;
height: 36px;
border: 1px solid var(--border2);
background: none;
color: var(--muted);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
flex-shrink: 0;
}
.vl-icon-btn:hover {
border-color: var(--gold);
color: var(--gold);
}
.vl-icon-btn svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
.vl-icon-btn.active {
border-color: var(--gold);
color: var(--gold);
background: rgba(201,168,76,0.08);
}
@media (max-width: 600px) {
.vl-nav-extras { display: none; }
}
html[data-theme="light"] {
--void: #FAF8F4;
--dark: #F2EDE6;
--card: #EAE5DE;
--card2: #E2DDD6;
--card3: #DAD5CE;
--border: #D0C8BC;
--border2: #BFB8AC;
--cream: #1A1613;
--warm: #3A3028;
--muted: #6B6055;
--platinum: #4A4540;
--platinumMuted: rgba(74,69,64,0.35);
--shadow-card: 0 4px 32px rgba(0,0,0,0.12);
--shadow-hover: 0 20px 64px rgba(0,0,0,0.2), 0 0 0 1px rgba(201,168,76,0.2);
color-scheme: light;
}
html[data-theme="light"] body {
background: var(--void);
color: var(--cream);
}
html[data-theme="light"] .hero {
background: linear-gradient(to bottom, #1a1410, var(--dark));
}
html[data-theme="light"] .hero-h1 { color: #faf3e8; }
html[data-theme="light"] .hero-desc { color: #e0d8cc; }
html[data-theme="light"] #heroCanvas { opacity: 0.7; }
html[data-theme="light"] .ticker { background: var(--card); }
html[data-theme="light"] .editorial-bleed { background: var(--dark); }
html[data-theme="light"] nav { background: rgba(250,248,244,0); }
html[data-theme="light"] nav.scrolled {
background: rgba(250,248,244,0.96)!important;
backdrop-filter: blur(28px) saturate(140%)!important;
border-bottom-color: var(--border)!important;
box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08)!important;
}
html[data-theme="light"] .nav-logo { color: var(--cream); }
html[data-theme="light"] .mob-menu { background: var(--void); }
html[data-theme="light"] .toast { background: var(--card); }
html[data-theme="light"] #cookieBanner { background: var(--card); }
html[data-theme="light"] .ba-section { background: var(--dark); }
html[data-theme="light"] .price-card { background: var(--card); }
html[data-theme="light"] .vl-vtesti-sec { background: var(--dark); }
html[data-theme="light"] .vl-advisor-panel { background: var(--card); }
html[data-theme="light"] #vl-scarcity {
background: linear-gradient(90deg, #8a6020, #b88028, #8a6020);
background-size: 200% 100%;
animation: vl-strip-shift 8s linear infinite;
}
html[data-theme="light"] .nav-links a {
color: var(--muted);
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active {
color: var(--cream);
}
html[data-theme="light"] .nav-cta {
border-color: rgba(150,100,20,.4);
color: var(--gold);
}
html[data-theme="light"] .nav-cta:hover {
color: #fff;
}
html[data-theme="light"] .hbg span {
background: var(--cream);
}
html[data-theme="light"] .hero-pill {
background: rgba(10,8,12,.55);
border-color: rgba(201,168,76,.3);
}
html[data-theme="light"] .ticker {
border-color: var(--border);
}
html[data-theme="light"] .ticker-item {
color: var(--muted);
}
html[data-theme="light"] .svc-card {
background: var(--void);
}
html[data-theme="light"] .svc-card:hover {
background: var(--card);
}
html[data-theme="light"] .testi {
background: var(--card);
}
html[data-theme="light"] .testi:hover {
background: var(--card2);
}
html[data-theme="light"] .value-card {
background: var(--void);
}
html[data-theme="light"] .value-card:hover {
background: var(--card);
}
html[data-theme="light"] .price-card {
background: var(--void);
}
html[data-theme="light"] .price-card:hover {
background: var(--card);
}
html[data-theme="light"] .blog-card {
background: var(--card);
border-color: var(--border);
}
html[data-theme="light"] .port-card {
background: var(--card);
border-color: var(--border);
}
html[data-theme="light"] .work-item {
border-color: var(--border);
}
html[data-theme="light"] .case-card {
background: var(--card);
border-color: var(--border);
}
html[data-theme="light"] .stat-item {
background: var(--card);
}
html[data-theme="light"] .stat-item:hover {
background: var(--card2);
}
html[data-theme="light"] .team-card {
background: var(--card);
border-color: var(--border);
}
html[data-theme="light"] .fg input,
html[data-theme="light"] .fg textarea,
html[data-theme="light"] .fg select {
background: var(--void);
border-color: var(--border);
color: var(--cream);
}
html[data-theme="light"] .fg input:focus,
html[data-theme="light"] .fg textarea:focus,
html[data-theme="light"] .fg select:focus {
background: var(--card);
border-color: var(--gold);
}
html[data-theme="light"] .fg select option {
background: var(--void);
color: var(--cream);
}
html[data-theme="light"] footer {
background: var(--card);
border-top-color: var(--border);
}
html[data-theme="light"] .modal {
background: var(--card);
border-color: var(--border);
}
html[data-theme="light"] .filter-btn,
html[data-theme="light"] .blog-cat-btn,
html[data-theme="light"] .faq-cat-btn {
border-color: var(--border);
color: var(--muted);
background: var(--void);
}
html[data-theme="light"] .filter-btn:hover,
html[data-theme="light"] .filter-btn.active,
html[data-theme="light"] .blog-cat-btn:hover,
html[data-theme="light"] .blog-cat-btn.active,
html[data-theme="light"] .faq-cat-btn:hover,
html[data-theme="light"] .faq-cat-btn.active {
border-color: var(--gold);
color: var(--gold);
background: rgba(201,168,76,.07);
}
html[data-theme="light"] .faq-item {
border-bottom-color: var(--border);
}
html[data-theme="light"] .faq-q {
color: var(--cream);
}
html[data-theme="light"] .compare-table th {
border-bottom-color: var(--border);
}
html[data-theme="light"] .compare-table td {
border-bottom-color: var(--border);
}
html[data-theme="light"] .compare-table tr:hover td {
background: rgba(0,0,0,.03);
}
html[data-theme="light"] .ba-container {
border-color: var(--border);
}
html[data-theme="light"] .ba-label {
background: rgba(250,248,244,.9);
border-color: var(--border);
color: var(--muted);
}
html[data-theme="light"] .ba-label-after {
color: var(--gold);
border-color: var(--gold);
}
html[data-theme="light"] .vl-marquee-strip {
background: linear-gradient(180deg, var(--card) 0%, var(--dark) 100%);
border-top-color: rgba(0,0,0,.06);
border-bottom-color: rgba(0,0,0,.06);
}
html[data-theme="light"] #vl-section-counter .vl-sc-bar {
background: rgba(0,0,0,.1);
}
html[data-theme="light"] .vl-icon-btn {
border-color: var(--border);
color: var(--muted);
}
html[data-theme="light"] .vl-icon-btn:hover {
border-color: var(--gold);
color: var(--gold);
}
html[data-theme="light"] .vl-icon-btn.active {
border-color: var(--gold);
color: var(--gold);
background: rgba(201,168,76,.1);
}
html[data-theme="light"] .vl-float-ring {
border-color: rgba(201,168,76,.5);
}
html[data-theme="light"] #chatBtn {
background: var(--card);
border-color: var(--border);
}
html[data-theme="light"] #scrollTop {
background: var(--card);
border-color: var(--border);
color: var(--muted);
}
html[data-theme="light"] #scrollTop:hover {
border-color: var(--gold);
color: var(--gold);
}
html[data-theme="light"] {
--goldGlow: rgba(201,168,76,.12);
}
html[data-theme="light"] ::selection {
background: rgba(201,168,76,.2);
color: var(--cream);
}
html[data-theme="light"] .vl-tstep-node {
background: var(--card);
border-color: var(--border);
}
html[data-theme="light"] .vl-trust-badge {
color: var(--muted);
}
html[data-theme="light"] #vl-advisor-fab {
background: var(--card);
border-color: var(--border);
color: var(--cream);
}
html[data-theme="light"] #vl-advisor-fab:hover {
border-color: var(--gold);
}
html[data-theme="light"] .vl-cfg-opt {
background: var(--void);
border-color: var(--border);
}
html[data-theme="light"] .vl-cfg-opt:hover {
background: var(--card);
border-color: var(--gold);
}
html[data-theme="light"] .vl-cfg-opt.selected {
background: rgba(201,168,76,.07);
border-color: var(--gold);
}
html[data-theme="light"] .vl-cfg-result-card {
background: var(--card);
border-color: var(--border);
}
html[data-theme="light"] .vl-ref-hero {
background: var(--dark);
}
html[data-theme="light"] .vl-ref-step {
border-color: var(--border);
}
html[data-theme="light"] .vl-ref-fg input {
background: var(--void);
border-color: var(--border);
color: var(--cream);
}
html[data-theme="light"] #cookieBanner {
background: var(--card);
border-top: 1px solid var(--border);
}
#scrollTop {
right: 2rem;
left: auto !important;
bottom: 5.5rem;
}
#vl-advisor-fab {
position: fixed;
bottom: max(2rem, env(safe-area-inset-bottom));
left: 2rem;
z-index: 401;
display: flex;
align-items: center;
gap: 0.6rem;
background: var(--card);
border: 1px solid var(--border2);
color: var(--cream);
padding: 0.7rem 1.1rem;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
box-shadow: var(--shadow-card);
opacity: 0;
transform: translateY(12px);
pointer-events: none;
}
#vl-advisor-fab.show {
opacity: 1;
transform: none;
pointer-events: all;
}
#vl-advisor-fab:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: var(--glow-sm);
}
#vl-advisor-fab .vl-adv-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
animation: pulse 2s infinite;
flex-shrink: 0;
}
.vl-advisor-panel {
position: fixed;
bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5rem));
left: 2rem;
z-index: 402;
width: min(360px, calc(100vw - 4rem));
background: var(--card);
border: 1px solid var(--border2);
border-top: 2px solid var(--gold);
box-shadow: var(--shadow-deep);
display: none;
flex-direction: column;
overflow: hidden;
}
.vl-advisor-panel.open { display: flex; }
.vl-adv-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.2rem;
border-bottom: 1px solid var(--border);
}
.vl-adv-title {
font-family: var(--serif);
font-size: 1rem;
font-weight: 300;
color: var(--cream);
}
.vl-adv-title span { color: var(--gold); font-style: italic; }
.vl-adv-close {
background: none;
border: none;
color: var(--muted);
font-size: 1rem;
cursor: pointer;
padding: 0.3rem;
line-height: 1;
min-width: 32px;
min-height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.vl-adv-close:hover { color: var(--cream); }
.vl-adv-body {
padding: 1.4rem;
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.vl-adv-step.active { display: block; }
.vl-adv-q {
font-size: 0.88rem;
color: var(--cream);
line-height: 1.55;
margin-bottom: 1rem;
font-weight: 400;
}
.vl-adv-opts {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.vl-adv-opt {
background: var(--dark);
border: 1px solid var(--border);
color: var(--warm);
padding: 0.65rem 1rem;
font-size: 0.82rem;
cursor: pointer;
text-align: left;
transition: border-color 0.2s, color 0.2s, background 0.2s;
line-height: 1.35;
}
.vl-adv-opt:hover {
border-color: var(--gold);
color: var(--cream);
background: var(--card2);
}
.vl-adv-progress {
display: flex;
gap: 4px;
margin-bottom: 1rem;
}
.vl-adv-progress-dot {
height: 2px;
flex: 1;
background: var(--border);
border-radius: 1px;
transition: background 0.3s;
}
.vl-adv-progress-dot.done { background: var(--gold); }
.vl-adv-result {
display: none;
font-size: 0.84rem;
color: var(--warm);
line-height: 1.65;
}
.vl-adv-result.show { display: block; }
.vl-adv-result strong { color: var(--gold); }
.vl-adv-typing {
display: none;
align-items: center;
gap: 4px;
padding: 0.6rem 0;
}
.vl-adv-typing.show { display: flex; }
.vl-adv-typing span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
opacity: 0.4;
animation: vl-adv-bounce 1.2s ease-in-out infinite;
}
.vl-adv-typing span:nth-child(2) { animation-delay: 0.2s; }
.vl-adv-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes vl-adv-bounce {
0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
40% { opacity: 1; transform: translateY(-4px); }
}
.vl-adv-cta {
display: none;
margin-top: 1rem;
background: var(--gold);
color: var(--void);
padding: 0.75rem 1.2rem;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
font-weight: 600;
transition: background 0.2s;
cursor: pointer;
}
.vl-adv-cta:hover { background: var(--gold2); }
.vl-adv-cta.show { display: block; }
.vl-adv-restart {
background: none;
border: none;
color: var(--muted);
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
padding: 0.3rem 0;
transition: color 0.2s;
display: none;
margin-top: 0.5rem;
}
.vl-adv-restart.show { display: block; }
.vl-adv-restart:hover { color: var(--cream); }
.vl-config-hero {
padding: 10rem 4rem 5rem;
background: var(--void);
text-align: center;
border-bottom: 1px solid var(--border);
}
.vl-config-wrap {
max-width: 760px;
margin: 0 auto;
padding: 5rem 4rem 8rem;
}
.vl-config-steps-bar {
display: flex;
gap: 0;
margin-bottom: 4rem;
position: relative;
}
.vl-config-steps-bar::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border);
z-index: 0;
}
.vl-cfg-step-dot {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex: 1;
position: relative;
z-index: 1;
}
.vl-cfg-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--card);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 0.62rem;
color: var(--muted);
transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.vl-cfg-step-dot.active .vl-cfg-step-num {
border-color: var(--gold);
background: var(--gold);
color: var(--void);
}
.vl-cfg-step-dot.done .vl-cfg-step-num {
border-color: var(--goldDark);
background: rgba(201,168,76,0.1);
color: var(--gold);
}
.vl-cfg-step-label {
font-family: var(--mono);
font-size: 0.52rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.vl-cfg-panel { display: none; }
.vl-cfg-panel.active { display: block; }
.vl-cfg-question {
font-family: var(--serif);
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 300;
color: var(--cream);
line-height: 1.15;
margin-bottom: 0.5rem;
}
.vl-cfg-question em { font-style: italic; color: var(--gold); }
.vl-cfg-sub {
font-size: 0.85rem;
color: var(--muted);
margin-bottom: 2.5rem;
line-height: 1.6;
}
.vl-cfg-opts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 2rem;
}
.vl-cfg-opt {
border: 1px solid var(--border2);
background: var(--card);
padding: 1.2rem 1.4rem;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
text-align: left;
}
.vl-cfg-opt:hover {
border-color: var(--gold);
background: var(--card2);
}
.vl-cfg-opt.selected {
border-color: var(--gold);
background: rgba(201,168,76,0.06);
}
.vl-cfg-opt-icon {
font-size: 1.3rem;
margin-bottom: 0.5rem;
display: block;
}
.vl-cfg-opt-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--cream);
display: block;
margin-bottom: 0.2rem;
}
.vl-cfg-opt-sub {
font-size: 0.72rem;
color: var(--muted);
line-height: 1.4;
}
.vl-cfg-next {
background: var(--gold);
color: var(--void);
border: none;
padding: 0.9rem 2.2rem;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
transition: background 0.2s, opacity 0.2s;
display: none;
}
.vl-cfg-next.show { display: inline-flex; align-items: center; gap: 0.5rem; }
.vl-cfg-next:hover { background: var(--gold2); }
.vl-cfg-result-card {
border: 1px solid var(--border2);
border-top: 2px solid var(--gold);
background: var(--card);
padding: 2.5rem;
margin-bottom: 1.5rem;
}
.vl-cfg-result-pkg {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.5rem;
}
.vl-cfg-result-name {
font-family: var(--serif);
font-size: 1.6rem;
font-weight: 300;
color: var(--cream);
margin-bottom: 0.3rem;
}
.vl-cfg-result-price {
font-family: var(--serif);
font-size: 2.5rem;
font-weight: 600;
color: var(--gold);
line-height: 1;
margin-bottom: 1.5rem;
}
.vl-cfg-result-items {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.8rem;
}
.vl-cfg-result-item {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.85rem;
color: var(--warm);
}
.vl-cfg-result-item::before {
content: '✓';
color: var(--gold);
font-size: 0.75rem;
flex-shrink: 0;
margin-top: 0.05rem;
}
.vl-cfg-result-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.vl-cfg-restart {
background: none;
border: 1px solid var(--border2);
color: var(--muted);
padding: 0.9rem 1.8rem;
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
}
.vl-cfg-restart:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 768px) {
.vl-config-hero { padding: 8rem 1.5rem 3rem; }
.vl-config-wrap { padding: 3rem 1.5rem 5rem; }
.vl-cfg-opts { grid-template-columns: 1fr; }
}
.vl-ref-hero {
padding: 10rem 4rem 6rem;
background: var(--void);
text-align: center;
position: relative;
overflow: hidden;
}
.vl-ref-hero::before {
content: '';
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(201,168,76,0.06), transparent 70%);
pointer-events: none;
}
.vl-ref-amount {
font-family: var(--serif);
font-size: clamp(4rem, 12vw, 8rem);
font-weight: 600;
color: var(--gold);
line-height: 1;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.vl-ref-tagline {
font-family: var(--serif);
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-weight: 300;
color: var(--cream);
margin-bottom: 1rem;
}
.vl-ref-sub {
font-size: 0.9rem;
color: var(--muted);
max-width: 480px;
margin: 0 auto 3rem;
line-height: 1.7;
}
.vl-ref-how {
padding: 6rem 4rem;
background: var(--dark);
}
.vl-ref-how-inner { max-width: 900px; margin: 0 auto; }
.vl-ref-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
margin-top: 4rem;
}
.vl-ref-step {
text-align: center;
}
.vl-ref-step-n {
width: 48px;
height: 48px;
border: 1px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 0.65rem;
color: var(--gold);
margin: 0 auto 1.2rem;
letter-spacing: 0.08em;
}
.vl-ref-step-title {
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 500;
color: var(--cream);
margin-bottom: 0.4rem;
}
.vl-ref-step-desc {
font-size: 0.82rem;
color: var(--muted);
line-height: 1.6;
}
.vl-ref-form-sec {
padding: 6rem 4rem;
background: var(--void);
}
.vl-ref-form-wrap {
max-width: 560px;
margin: 0 auto;
}
.vl-ref-form {
display: flex;
flex-direction: column;
gap: 1.2rem;
margin-top: 3rem;
}
.vl-ref-fg label {
display: block;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.4rem;
}
.vl-ref-fg input {
width: 100%;
background: var(--card);
border: 1px solid var(--border);
color: var(--cream);
padding: 0.85rem 1rem;
font-family: var(--sans);
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s;
min-height: 44px;
}
.vl-ref-fg input:focus { border-color: var(--gold); }
.vl-ref-submit {
background: var(--gold);
color: var(--void);
border: none;
padding: 1rem 2.5rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
transition: background 0.2s, transform 0.2s;
margin-top: 0.5rem;
}
.vl-ref-submit:hover { background: var(--gold2); transform: translateY(-2px); }
.vl-ref-result {
display: none;
text-align: center;
padding: 2.5rem;
border: 1px solid var(--border2);
background: var(--card);
margin-top: 2rem;
}
.vl-ref-result.show { display: block; }
.vl-ref-link-label {
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.75rem;
}
.vl-ref-link-box {
display: flex;
align-items: center;
background: var(--dark);
border: 1px solid var(--border);
padding: 0.6rem 0.8rem;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
}
.vl-ref-link-text {
flex: 1;
font-family: var(--mono);
font-size: 0.68rem;
color: var(--gold);
letter-spacing: 0.04em;
word-break: break-all;
}
.vl-ref-copy {
background: none;
border: 1px solid var(--border2);
color: var(--muted);
padding: 0.35rem 0.8rem;
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.vl-ref-copy:hover { border-color: var(--gold); color: var(--gold); }
.vl-ref-tos {
font-size: 0.72rem;
color: var(--muted);
line-height: 1.6;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
.vl-ref-hero { padding: 8rem 1.5rem 4rem; }
.vl-ref-how { padding: 4rem 1.5rem; }
.vl-ref-steps { grid-template-columns: 1fr; gap: 2rem; }
.vl-ref-form-sec { padding: 4rem 1.5rem; }
}
.vl-trust-text { color: var(--muted); }
.nav-links {
gap: clamp(0.6rem, 1.2vw, 1.8rem);
}
.nav-links a {
font-size: clamp(0.55rem, 0.75vw, 0.72rem);
white-space: nowrap;
}
@media (max-width: 768px) {
#vl-advisor-fab {
left: 1rem;
bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5rem));
font-size: 0.58rem;
padding: 0.6rem 0.9rem;
}
.vl-advisor-panel {
left: 1rem;
bottom: max(8.5rem, calc(env(safe-area-inset-bottom) + 8rem));
}
}
.vl-marquee-strip { margin: 0; }
html[data-theme="light"] .vl-sc-text,
html[data-theme="light"] .vl-sc-text strong,
html[data-theme="light"] .vl-sc-link { color: var(--void) !important; }
#vl-exit-overlay { z-index: 8500; }
#transition { z-index: 9000; }
.vl-vtesti-modal-inner { background: #000; border-radius: 0; }
@media (max-width: 380px) {
.vl-timeline-sec { padding: 4rem 1rem; }
.vl-tstep-title { font-size: 0.72rem; }
.vl-tstep-sub { font-size: 0.62rem; }
}
.vl-cfg-opts { min-height: 200px; }
@media (max-width: 380px) {
.vl-ref-amount { font-size: clamp(3rem, 18vw, 5rem); }
}
@media (max-width: 390px) {
.vl-trust-row { gap: 0.3rem 0.8rem; }
.vl-trust-badge { font-size: 0.5rem; }
}
@media (max-width: 420px) {
.vl-sc-inner { font-size: 0.55rem; padding: 0.5rem 2.5rem 0.5rem 1rem; }
.vl-sc-dot { display: none; }
}
@media (max-width: 980px) {
.vl-nav-extras { display: none; }
}
#page-configurator.active,
#page-referral.active {
display: block;
opacity: 1;
visibility: visible;
}
#page-configurator.active.visible,
#page-referral.active.visible {
opacity: 1;
}
.vl-adv-typing { overflow: hidden; }
.hero-h1:not([data-kinetic]) { opacity: 1; }
.hero-h1[data-kinetic] .kinetic-char:not(.in) { opacity: 0; }
.vl-timeline-inner .sec-h2,
.vl-timeline-inner .sec-lead {
text-align: left;
}
.vl-sc-timer {
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--void);
opacity: 0.85;
background: rgba(0,0,0,0.12);
padding: 0.1rem 0.5rem;
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 520px) {
.vl-sc-timer { display: none; }
}
#vl-exit-v8 {
position: fixed;
inset: 0;
background: rgba(2,1,4,0.82);
backdrop-filter: blur(8px);
z-index: 8600;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--ease-luxury), visibility 0.4s;
}
#vl-exit-v8.open {
opacity: 1;
visibility: visible;
}
.vl-exit-v8-box {
background: var(--card2);
border: 1px solid rgba(201,168,76,0.2);
max-width: 520px;
width: 100%;
padding: 3rem 3rem 2.5rem;
position: relative;
transform: translateY(20px);
transition: transform 0.4s var(--ease-luxury);
box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,76,0.08);
}
#vl-exit-v8.open .vl-exit-v8-box {
transform: translateY(0);
}
.vl-exit-v8-close {
position: absolute;
top: 1.2rem;
right: 1.2rem;
background: none;
border: 1px solid var(--border2);
color: var(--muted);
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-size: 0.65rem;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s, color 0.2s;
}
.vl-exit-v8-close:hover { border-color: var(--gold); color: var(--gold); }
.vl-exit-v8-eyebrow {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
}
.vl-exit-v8-h {
font-family: var(--serif);
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 300;
color: var(--cream);
line-height: 1.2;
margin-bottom: 1rem;
}
.vl-exit-v8-h em { font-style: italic; color: var(--gold2); }
.vl-exit-v8-p {
font-size: 0.88rem;
color: var(--muted);
line-height: 1.75;
margin-bottom: 1.8rem;
}
.vl-exit-v8-cta {
display: block;
width: 100%;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 50%, var(--gold) 100%);
background-size: 200% 100%;
color: var(--void);
border: none;
padding: 1rem 2rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
transition: background-position 0.4s, transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 24px rgba(201,168,76,0.25);
margin-bottom: 1rem;
}
.vl-exit-v8-cta:hover {
background-position: 100% 0;
transform: translateY(-1px);
box-shadow: 0 8px 32px rgba(201,168,76,0.4);
}
.vl-exit-v8-fine {
font-size: 0.72rem;
color: var(--muted);
text-align: center;
opacity: 0.7;
}
.vl-adv-followup {
gap: 0.5rem;
margin-top: 1rem;
border-top: 1px solid var(--border);
padding-top: 1rem;
}
.vl-adv-followup-input {
flex: 1;
background: var(--dark);
border: 1px solid var(--border2);
color: var(--cream);
padding: 0.55rem 0.8rem;
font-family: var(--sans);
font-size: 0.8rem;
outline: none;
border-radius: 0;
transition: border-color 0.2s;
min-height: 36px;
}
.vl-adv-followup-input:focus { border-color: var(--gold); }
.vl-adv-followup-btn {
background: var(--gold);
color: var(--void);
border: none;
padding: 0.55rem 0.9rem;
font-family: var(--mono);
font-size: 0.8rem;
cursor: pointer;
transition: background 0.2s;
min-height: 36px;
}
.vl-adv-followup-btn:hover { background: var(--gold2); }
.vl-v8-price-bar-wrap {
margin-top: 2rem;
padding: 1.5rem;
background: var(--dark);
border: 1px solid rgba(201,168,76,0.12);
}
.vl-v8-price-bar-label {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.75rem;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.vl-v8-price-total {
font-family: var(--serif);
font-size: 1.4rem;
font-weight: 600;
color: var(--gold);
letter-spacing: -0.01em;
}
.vl-v8-price-bar {
display: flex;
height: 8px;
border-radius: 4px;
overflow: hidden;
background: var(--border);
gap: 1px;
margin-bottom: 1rem;
}
.vl-v8-price-breakdown {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.vl-v8-price-line {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 0.65rem;
color: var(--muted);
}
.vl-v8-price-monthly { color: var(--gold); }
.vl-marquee-item {
transition: background 0.2s, padding 0.2s;
border-radius: 4px;
cursor: pointer;
}
.vl-marquee-item:hover { background: rgba(201,168,76,0.05); }
.vl-marquee-item.expanded {
background: rgba(201,168,76,0.08);
padding: 0.5rem 1rem;
border: 1px solid rgba(201,168,76,0.15);
display: inline-flex;
flex-direction: column;
gap: 0.25rem;
}
.vl-marquee-item.expanded .vl-marquee-quote {
font-size: 0.85rem;
color: var(--cream);
}
.vl-marquee-strip { cursor: grab; }
.vl-marquee-strip:active { cursor: grabbing; }
.vl-ba-section {
padding: 8rem 4rem;
background: var(--dark);
position: relative;
}
.vl-ba-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border2), transparent);
}
.vl-ba-inner { max-width: 1200px; margin: 0 auto; }
.vl-ba-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 4rem;
}
.vl-ba-card {
display: flex;
flex-direction: column;
gap: 1rem;
}
.vl-ba-label {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.vl-ba-slider {
position: relative;
height: 280px;
overflow: hidden;
border: 1px solid var(--border2);
user-select: none;
touch-action: none;
cursor: ew-resize;
background: var(--void);
}
.vl-ba-before,
.vl-ba-after {
position: absolute;
inset: 0;
}
.vl-ba-after {
transition: clip-path 0ms;
}
.vl-ba-mock {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 0;
pointer-events: none;
}
.vl-ba-mock-nav {
height: 36px;
background: #1a1a2e;
border-bottom: 1px solid #2a2a3e;
flex-shrink: 0;
}
.vl-ba-mock-nav-new {
background: var(--void);
border-bottom: 1px solid rgba(201,168,76,0.15);
}
.vl-ba-mock-hero {
flex: 1;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
.vl-ba-mock-hero-old {
background: #1a1a2e;
}
.vl-ba-mock-hero-new {
background: var(--card);
}
.vl-ba-mock-h {
font-family: Arial, sans-serif;
font-size: 0.9rem;
color: #aaaacc;
font-weight: bold;
line-height: 1.3;
}
.vl-ba-mock-h-new {
font-family: var(--serif);
font-size: 1.1rem;
font-weight: 300;
color: var(--cream);
line-height: 1.2;
}
.vl-ba-mock-h-new em {
font-style: italic;
background: linear-gradient(135deg, var(--gold), var(--gold2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.vl-ba-mock-sub {
font-size: 0.7rem;
color: #7777aa;
}
.vl-ba-mock-tag-new {
font-family: var(--mono);
font-size: 0.5rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid rgba(201,168,76,0.3);
display: inline-block;
padding: 0.2rem 0.6rem;
margin-bottom: 0.4rem;
}
.vl-ba-mock-cta-wrap {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.vl-ba-mock-cta {
font-size: 0.55rem;
background: var(--gold);
color: var(--void);
padding: 0.3rem 0.7rem;
font-family: var(--mono);
letter-spacing: 0.08em;
}
.vl-ba-mock-cta-ghost {
font-size: 0.55rem;
border: 1px solid var(--border2);
color: var(--muted);
padding: 0.3rem 0.7rem;
font-family: var(--mono);
letter-spacing: 0.08em;
}
.vl-ba-mock-cols {
display: flex;
gap: 4px;
padding: 0.5rem;
background: rgba(0,0,0,0.2);
flex-shrink: 0;
}
.vl-ba-mock-block {
flex: 1;
height: 36px;
background: #1e1e3a;
border-radius: 2px;
}
.vl-ba-mock-block-new {
background: var(--card2);
border: 1px solid var(--border);
}
.vl-ba-badge-old,
.vl-ba-badge-new {
position: absolute;
top: 8px;
font-family: var(--mono);
font-size: 0.5rem;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
}
.vl-ba-badge-old {
left: 8px;
background: rgba(100,100,140,0.7);
color: #9999cc;
}
.vl-ba-badge-new {
right: 8px;
background: rgba(201,168,76,0.2);
color: var(--gold);
}
.vl-ba-divider {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: var(--gold);
transform: translateX(-50%);
z-index: 10;
box-shadow: 0 0 12px rgba(201,168,76,0.6);
}
.vl-ba-handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--gold);
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
font-size: 0.5rem;
color: var(--void);
box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 3px rgba(201,168,76,0.2);
cursor: ew-resize;
white-space: nowrap;
}
@media (max-width: 768px) {
.vl-ba-section { padding: 5rem 1.5rem; }
.vl-ba-slider { height: 220px; }
}
#vl-ambient-btn.active svg { color: var(--gold); }
#vl-ambient-btn.active { border-color: rgba(201,168,76,0.3); }
.vl-toc {
background: var(--card);
border: 1px solid var(--border2);
border-left: 2px solid var(--gold);
padding: 1.5rem;
margin-bottom: 2.5rem;
max-width: 360px;
}
.vl-toc-label {
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
}
.vl-toc-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0;
margin: 0;
counter-reset: toc-counter;
}
.vl-toc-item { counter-increment: toc-counter; }
.vl-toc-link {
font-size: 0.82rem;
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
display: block;
padding: 0.15rem 0;
line-height: 1.4;
}
.vl-toc-link:hover,
.vl-toc-link.active { color: var(--cream); }
.vl-toc-link.active {
color: var(--gold);
padding-left: 0.5rem;
border-left: 1px solid var(--gold);
margin-left: -0.5rem;
}
.vl-toc-h3 .vl-toc-link {
font-size: 0.78rem;
padding-left: 0.75rem;
color: rgba(200,184,152,0.5);
}
.vl-toc-h3 .vl-toc-link:hover { color: var(--muted); }
.vl-summary-wrap {
margin-bottom: 2rem;
}
.vl-summary-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: none;
border: 1px solid rgba(201,168,76,0.3);
color: var(--gold);
padding: 0.55rem 1.1rem;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 0.75rem;
}
.vl-summary-btn:hover {
background: rgba(201,168,76,0.06);
border-color: var(--gold);
}
.vl-summary-btn:disabled { opacity: 0.5; cursor: wait; }
.vl-summary-card {
display: none;
background: rgba(201,168,76,0.04);
border: 1px solid rgba(201,168,76,0.15);
border-left: 2px solid var(--gold);
padding: 1.25rem 1.5rem;
animation: vl-fade-in 0.3s var(--ease-luxury);
}
.vl-summary-card.open { display: block; }
@keyframes vl-fade-in {
from { opacity: 0; transform: translateY(4px); }
to   { opacity: 1; transform: translateY(0); }
}
.vl-summary-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.9rem;
}
.vl-summary-bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0;
margin: 0;
}
.vl-summary-bullets li {
font-size: 0.87rem;
color: var(--warm);
line-height: 1.6;
padding-left: 1rem;
position: relative;
}
.vl-summary-bullets li::before {
content: '→';
position: absolute;
left: 0;
color: var(--gold);
font-size: 0.72rem;
}
.vl-summary-loading {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--muted);
letter-spacing: 0.1em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.vl-summary-loading::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid var(--gold);
border-top-color: transparent;
border-radius: 50%;
animation: vl-spin 0.7s linear infinite;
}
@keyframes vl-spin { to { transform: rotate(360deg); } }
.vl-cur-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--mono);
font-size: 0.45rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--void);
pointer-events: none;
white-space: nowrap;
opacity: 0;
transition: opacity 0.15s;
}
#cur.cursor-play,
#cur.cursor-view {
width: 52px !important;
height: 52px !important;
background: var(--gold) !important;
margin-left: -26px !important;
margin-top: -26px !important;
}
#cur.cursor-play .vl-cur-label,
#cur.cursor-view .vl-cur-label { opacity: 1; }
#cur.cursor-drag {
width: 44px !important;
height: 22px !important;
border-radius: 999px !important;
background: var(--gold) !important;
margin-left: -22px !important;
margin-top: -11px !important;
}
#cur.cursor-drag .vl-cur-label { opacity: 1; }
#cur.cursor-cta {
width: 44px !important;
height: 44px !important;
background: rgba(201,168,76,0.2) !important;
border: 1px solid var(--gold) !important;
margin-left: -22px !important;
margin-top: -22px !important;
}
#cur { transition: width 0.2s, height 0.2s, background 0.2s, border-radius 0.2s, margin 0.2s; }
@keyframes vl-mesh-drift-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33%       { transform: translate(30px, -20px) scale(1.05); }
66%       { transform: translate(-15px, 15px) scale(0.97); }
}
@keyframes vl-mesh-drift-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
40%       { transform: translate(-25px, 30px) scale(1.03); }
70%       { transform: translate(20px, -10px) scale(1.06); }
}
@keyframes vl-mesh-drift-3 {
0%, 100% { transform: translate(0, 0); }
50%       { transform: translate(15px, 25px); }
}
#vl-hero-mesh {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
#vl-hero-mesh::before,
#vl-hero-mesh::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(80px);
}
#vl-hero-mesh::before {
width: 600px;
height: 600px;
top: -10%;
left: 20%;
background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
animation: vl-mesh-drift-1 14s ease-in-out infinite;
}
#vl-hero-mesh::after {
width: 500px;
height: 500px;
bottom: 0;
right: 10%;
background: radial-gradient(circle, rgba(155,111,255,0.04) 0%, transparent 70%);
animation: vl-mesh-drift-2 18s ease-in-out infinite;
}
.vl-wizard-progress {
margin-bottom: 2.5rem;
}
.vl-wizard-dots {
display: flex;
align-items: center;
gap: 0;
}
.vl-wizard-dot {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
.vl-wizard-dot span {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--border2);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 0.65rem;
color: var(--muted);
transition: all 0.3s var(--ease-luxury);
background: var(--card);
}
.vl-wizard-dot.active span {
border-color: var(--gold);
color: var(--gold);
background: rgba(201,168,76,0.08);
box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}
.vl-wizard-dot.done span {
background: var(--gold);
border-color: var(--gold);
color: var(--void);
font-weight: 700;
}
.vl-wizard-dot-label {
font-family: var(--mono);
font-size: 0.52rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.vl-wizard-dot.active .vl-wizard-dot-label { color: var(--gold); }
.vl-wizard-dot-line {
flex: 1;
height: 1px;
background: var(--border);
margin: 0 0.75rem;
margin-bottom: 1.3rem;
transition: background 0.3s;
min-width: 20px;
}
.vl-wizard-dot.done + .vl-wizard-dot-line {
background: var(--gold);
}
.vl-wizard-step {
display: none;
animation: vl-step-in 0.35s var(--ease-luxury);
}
.vl-wizard-step.active { display: block; }
@keyframes vl-step-in {
from { opacity: 0; transform: translateX(16px); }
to   { opacity: 1; transform: translateX(0); }
}
.vl-wizard-step.done {
animation: vl-step-out 0.25s var(--ease-luxury);
}
@keyframes vl-step-out {
to { opacity: 0; transform: translateX(-16px); }
}
.vl-wizard-q {
font-family: var(--serif);
font-size: 1.3rem;
font-weight: 300;
color: var(--cream);
margin-bottom: 0.4rem;
line-height: 1.25;
}
.vl-wizard-sub {
font-size: 0.84rem;
color: var(--muted);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.vl-wizard-service-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
margin-bottom: 1.75rem;
transition: box-shadow 0.2s;
}
.vl-wizard-service-grid.vl-wizard-error {
box-shadow: 0 0 0 1px rgba(200,80,80,0.4);
border-radius: 4px;
}
.vl-wizard-service-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
padding: 1rem 1rem 0.9rem;
border: 1px solid var(--border2);
background: var(--card);
cursor: pointer;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
position: relative;
}
.vl-wizard-service-card input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.vl-wizard-service-card:hover {
border-color: rgba(201,168,76,0.35);
background: var(--card2);
}
.vl-wizard-service-card:has(input:checked) {
border-color: var(--gold);
background: rgba(201,168,76,0.06);
box-shadow: 0 0 0 1px rgba(201,168,76,0.2);
}
.vl-ws-icon {
font-size: 1.2rem;
line-height: 1;
margin-bottom: 0.2rem;
}
.vl-ws-label {
font-size: 0.82rem;
color: var(--cream);
line-height: 1.3;
font-weight: 400;
}
.vl-ws-price {
font-family: var(--mono);
font-size: 0.58rem;
color: var(--gold);
letter-spacing: 0.06em;
}
.vl-wizard-next {
background: var(--gold);
color: var(--void);
border: none;
padding: 0.9rem 2rem;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
transition: background 0.2s, transform 0.2s;
}
.vl-wizard-next:hover { background: var(--gold2); transform: translateY(-1px); }
.vl-wizard-back {
background: none;
border: 1px solid var(--border2);
color: var(--muted);
padding: 0.9rem 1.5rem;
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
}
.vl-wizard-back:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 768px) {
.vl-wizard-service-grid { grid-template-columns: 1fr 1fr; }
.vl-wizard-dot-label { display: none; }
.vl-wizard-dot-line { min-width: 12px; }
}
@media (max-width: 480px) {
.vl-wizard-service-grid { grid-template-columns: 1fr; }
}
html[data-theme="light"] .vl-exit-v8-box { background: #fff; border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .vl-ba-mock-hero-old { background: #e8e8f0; }
html[data-theme="light"] .vl-ba-mock-h { color: #5555aa; }
html[data-theme="light"] .vl-ba-mock-sub { color: #8888aa; }
html[data-theme="light"] .vl-ba-mock-block { background: #d0d0e8; }
html[data-theme="light"] #vl-hero-mesh::before { background: radial-gradient(circle, rgba(139,111,71,0.08) 0%, transparent 70%); }
html[data-theme="light"] #vl-hero-mesh::after { background: radial-gradient(circle, rgba(80,60,140,0.04) 0%, transparent 70%); }
html[data-theme="light"] .vl-toc { background: #fff; }
html[data-theme="light"] .vl-summary-card { background: rgba(139,111,71,0.04); }
html[data-theme="light"] .vl-wizard-service-card { background: #fff; }
html[data-theme="light"] .vl-wizard-service-card:has(input:checked) { background: rgba(139,111,71,0.06); }
html[data-theme="light"] .vl-sc-timer { color: var(--void); }
.scramble-char.resolved {
background: linear-gradient(135deg, var(--gold), var(--gold2), var(--gold3));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hscroll-section {
position: relative;
height: 300vh;
}
.hscroll-pin {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
}
.hscroll-track {
display: flex;
gap: 3rem;
padding: 0 5rem;
transition: transform 0.1s linear;
will-change: transform;
}
.hscroll-card {
min-width: 380px;
max-width: 420px;
flex-shrink: 0;
background-color: var(--card);
background-image: radial-gradient(rgba(201, 168, 76, 0.05) 1.5px, transparent 1.5px);
background-size: 16px 16px;
border: 1px solid var(--border);
border-radius: 8px;
padding: 2.5rem;
position: relative;
transition: border-color 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}
.hscroll-card:hover {
border-color: rgba(201, 168, 76, 0.35);
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 24px rgba(201, 168, 76, 0.04);
}
.hscroll-card::before,
.hscroll-card::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 1.5px solid rgba(201, 168, 76, 0.25);
transition: all 0.45s var(--ease-spring);
opacity: 0;
pointer-events: none;
}
.hscroll-card::before {
top: 1.25rem;
left: 1.25rem;
border-right: none;
border-bottom: none;
transform: translate(-8px, -8px);
}
.hscroll-card::after {
bottom: 1.25rem;
right: 1.25rem;
border-left: none;
border-top: none;
transform: translate(8px, 8px);
}
.hscroll-card:hover::before,
.hscroll-card:hover::after {
opacity: 1;
transform: translate(0, 0);
border-color: var(--gold2);
}
.hscroll-card-tag {
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
}
.hscroll-card h3 {
font-family: var(--serif);
font-size: 1.8rem;
font-weight: 300;
color: var(--cream);
margin-bottom: 1rem;
line-height: 1.2;
}
.hscroll-card h3 em {
font-style: italic;
color: var(--gold2);
}
.hscroll-card p {
font-size: 0.85rem;
color: var(--muted);
line-height: 1.8;
}
.hscroll-progress {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
}
.hscroll-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border);
transition: all 0.3s;
}
.hscroll-dot.active {
background: var(--gold);
width: 24px;
border-radius: 3px;
}
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.split-word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.05em;
margin-bottom: -0.05em;
}
.split-word-inner {
display: block;
transform: translateY(110%);
opacity: 0;
transition: transform 0.7s var(--ease-luxury),
opacity  0.7s var(--ease-luxury);
}
.split-word.in .split-word-inner {
transform: translateY(0);
opacity: 1;
}
.sec-h2[data-split] em {
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: unset !important;
background-clip: unset !important;
font-style: italic !important;
}
.sec-h2 em .split-word-inner {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 60%, var(--gold3) 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.tilt-card {
transform-style: preserve-3d;
perspective: 800px;
transition: transform 0.4s var(--ease-luxury);
}
.tilt-card > * {
transform: translateZ(20px);
}
.tilt-card .tilt-shine {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
background: radial-gradient(
circle at var(--mx, 50%) var(--my, 50%),
rgba(201, 168, 76, 0.08) 0%,
transparent 60%
);
z-index: 2;
}
.tilt-card:hover .tilt-shine {
opacity: 1;
}
.trail-dot {
position: fixed;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold);
pointer-events: none;
z-index: 9998;
opacity: 0;
transition: opacity 0.3s;
will-change: transform, opacity;
}
@media (hover: none) {
.trail-dot {
display: none;
}
}
.mesh-container {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
opacity: 0.6;
}
.mesh-blob {
position: absolute;
border-radius: 50%;
filter: blur(120px);
will-change: transform;
}
.mesh-blob-1 {
width: 600px;
height: 600px;
background: rgba(201, 168, 76, 0.06);
top: -200px;
left: -100px;
animation: meshFloat1 18s ease-in-out infinite;
}
.mesh-blob-2 {
width: 500px;
height: 500px;
background: rgba(155, 111, 255, 0.04);
bottom: -150px;
right: -100px;
animation: meshFloat2 22s ease-in-out infinite;
}
.mesh-blob-3 {
width: 400px;
height: 400px;
background: rgba(201, 168, 76, 0.03);
top: 40%;
left: 60%;
animation: meshFloat3 25s ease-in-out infinite;
}
@keyframes meshFloat1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33%      { transform: translate(80px, 60px) scale(1.1); }
66%      { transform: translate(-40px, 100px) scale(0.95); }
}
@keyframes meshFloat2 {
0%, 100% { transform: translate(0, 0) scale(1); }
33%      { transform: translate(-60px, -40px) scale(1.15); }
66%      { transform: translate(50px, -80px) scale(0.9); }
}
@keyframes meshFloat3 {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
50%      { transform: translate(-80px, 60px) scale(1.2) rotate(20deg); }
}
.btn-gold,
.btn-ghost,
.nav-cta {
position: relative;
overflow: hidden;
}
.ripple-circle {
position: absolute;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.25) 0%,
transparent 70%
);
transform: scale(0);
animation: rippleExpand 600ms ease-out forwards;
pointer-events: none;
z-index: 1;
}
@keyframes rippleExpand {
0%   { transform: scale(0); opacity: 1; }
100% { transform: scale(4); opacity: 0; }
}
.fg.float-label {
position: relative;
}
.fg.float-label label {
position: absolute;
top: 50%;
left: 1.2rem;
transform: translateY(-50%);
font-size: 0.82rem;
color: var(--muted);
pointer-events: none;
transition: all 0.3s var(--ease-luxury);
}
.fg.float-label textarea ~ label {
top: 1.2rem;
transform: none;
}
.fg.float-label input:focus ~ label,
.fg.float-label input:not(:placeholder-shown) ~ label,
.fg.float-label textarea:focus ~ label,
.fg.float-label textarea:not(:placeholder-shown) ~ label {
top: -0.6rem;
left: 0.8rem;
font-size: 0.6rem;
color: var(--gold);
letter-spacing: 0.15em;
text-transform: uppercase;
font-family: var(--mono);
}
.fg.float-label input,
.fg.float-label textarea {
background-image: linear-gradient(var(--gold), var(--gold));
background-size: 0% 2px;
background-repeat: no-repeat;
background-position: center bottom;
transition: background-size 0.4s var(--ease-luxury),
border-color 0.3s;
}
.fg.float-label input:focus,
.fg.float-label textarea:focus {
background-size: 100% 2px;
}
.page-morph-overlay.expanding {
clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%));
}
.page-morph-flash.visible {
opacity: 1;
}
.stagger-item {
opacity: 0;
transform: translateY(30px);
transition: opacity   0.6s var(--ease-luxury),
transform 0.6s var(--ease-luxury);
}
.stagger-item.in {
opacity: 1;
transform: translateY(0);
}
[data-parallax] {
will-change: transform;
transition: transform 0.1s linear;
}
.svg-draw path,
.svg-draw polyline,
.svg-draw circle,
.svg-draw rect,
.svg-draw line {
stroke-dasharray: var(--path-length, 100);
stroke-dashoffset: var(--path-length, 100);
transition: stroke-dashoffset 1.2s var(--ease-luxury);
}
.svg-draw.drawn path,
.svg-draw.drawn polyline,
.svg-draw.drawn circle,
.svg-draw.drawn rect,
.svg-draw.drawn line {
stroke-dashoffset: 0 !important;
}
@keyframes toastSlideIn {
0%   { transform: translateX(120%); opacity: 0; }
60%  { transform: translateX(-5%); }
80%  { transform: translateX(2%); }
100% { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
0%   { transform: translateX(0); opacity: 1; }
100% { transform: translateX(120%); opacity: 0; }
}
.toast {
animation: toastSlideIn 0.6s var(--ease-luxury) forwards !important;
}
.toast.hiding {
animation: toastSlideOut 0.4s ease-in forwards !important;
}
.typing-indicator {
display: inline-flex;
gap: 4px;
align-items: center;
padding: 8px 14px;
background: var(--card2);
border-radius: 12px;
}
.typing-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
opacity: 0.4;
animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) {
animation-delay: 0.15s;
}
.typing-dot:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
30%           { transform: translateY(-6px); opacity: 1;   }
}
.odo-wrap {
display: inline-flex;
overflow: hidden;
line-height: 1em;
height: 1em;
vertical-align: bottom;
}
.odo-digit {
display: inline-block;
height: 1em;
overflow: hidden;
line-height: 1em;
vertical-align: bottom;
}
.odo-digit-col {
display: flex;
flex-direction: column;
transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
height: 10em;
}
.odo-digit-col span {
display: flex;
align-items: center;
justify-content: center;
height: 1em;
line-height: 1em;
}
.odo-prefix,
.odo-suffix {
display: inline-block;
height: 1em;
line-height: 1em;
vertical-align: bottom;
}
.odo-wrap span,
.odo-prefix,
.odo-suffix {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold3) 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
::view-transition-old(root) {
animation: vtFadeOut 0.3s ease-in forwards;
}
::view-transition-new(root) {
animation: vtFadeIn 0.3s ease-out forwards;
}
@keyframes vtFadeOut {
to {
opacity: 0;
transform: scale(0.98);
}
}
@keyframes vtFadeIn {
from {
opacity: 0;
transform: scale(1.02);
}
to {
opacity: 1;
transform: scale(1);
}
}
@supports (animation-timeline: scroll()) {
.hero-h1 {
animation: scrollFadeParallax linear both;
animation-timeline: scroll();
animation-range: 0vh 60vh;
}
@keyframes scrollFadeParallax {
from { opacity: 1; transform: translateY(0); }
to   { opacity: 0; transform: translateY(-60px); }
}
.hero-desc {
animation: scrollFadeParallax linear both;
animation-timeline: scroll();
animation-range: 0vh 50vh;
}
.sec-tag {
animation: scrollRevealUp linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
@keyframes scrollRevealUp {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
}
.globe-section {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.globe-canvas {
width: 100%;
max-width: 600px;
height: 600px;
cursor: grab;
outline: none;
}
.globe-canvas:active {
cursor: grabbing;
}
.globe-label {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--muted);
}
.globe-section .sec-tag {
position: absolute;
top: 3rem;
left: 50%;
transform: translateX(-50%);
}
.dynamic-greeting {
display: inline-flex;
}
.dynamic-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0.9rem;
background: rgba(201, 168, 76, 0.06);
border: 1px solid var(--border);
border-radius: 4px;
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gold);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all var(--t-fast) var(--ease-smooth);
}
.dynamic-badge .pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1;   transform: scale(1); }
50%      { opacity: 0.5; transform: scale(0.7); }
}
@media (max-width: 768px) {
.trail-dot {
display: none;
}
.mesh-blob {
opacity: 0.3;
}
.hscroll-card {
min-width: 300px;
}
.hscroll-section {
height: 250vh;
}
#vl-globe-section {
display: none;
}
.globe-canvas {
height: 350px;
}
}
@media (max-width: 480px) {
.hscroll-card {
min-width: 260px;
padding: 1.8rem;
}
}
html[data-theme="light"] .mesh-blob-1 {
background: rgba(201, 168, 76, 0.04);
}
html[data-theme="light"] .mesh-blob-2 {
background: rgba(155, 111, 255, 0.03);
}
html[data-theme="light"] .mesh-container {
opacity: 0.4;
}
html[data-theme="light"] .page-morph-overlay {
background: #faf8f4;
}
html[data-theme="light"] .hscroll-card {
background: #f5f2ec;
border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .hscroll-card h3 {
color: #1a1816;
}
html[data-theme="light"] .typing-dot {
background: var(--goldDark);
}
html[data-theme="light"] .trail-dot {
background: var(--goldDark);
}
.cmd-backdrop {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(1, 1, 4, .85);
backdrop-filter: blur(20px);
opacity: 0;
visibility: hidden;
transition: opacity .25s, visibility .25s;
}
.cmd-backdrop.open {
opacity: 1;
visibility: visible;
}
.cmd-palette {
position: fixed;
top: 18%;
left: 50%;
transform: translateX(-50%);
z-index: 10001;
width: 90%;
max-width: 580px;
background: var(--card);
border: 1px solid var(--border);
box-shadow: 0 24px 80px rgba(0, 0, 0, .8);
border-radius: 12px;
overflow: hidden;
opacity: 0;
transform: translateX(-50%) translateY(10px) scale(.97);
transition: all .25s var(--ease-luxury);
}
.cmd-backdrop.open .cmd-palette {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
.cmd-search-wrap {
display: flex;
align-items: center;
gap: .8rem;
padding: 1rem 1.4rem;
border-bottom: 1px solid var(--border);
}
.cmd-search-icon {
color: var(--muted);
flex-shrink: 0;
}
.cmd-search {
flex: 1;
background: none;
border: none;
color: var(--cream);
font-family: var(--sans);
font-size: .95rem;
outline: none;
}
.cmd-search::placeholder {
color: var(--muted);
}
.cmd-kbd {
font-family: var(--mono);
font-size: .55rem;
letter-spacing: .1em;
color: var(--muted);
background: rgba(255, 255, 255, .05);
padding: .2rem .5rem;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, .08);
}
.cmd-results {
max-height: 360px;
overflow-y: auto;
padding: .5rem;
}
.cmd-results::-webkit-scrollbar {
width: 4px;
}
.cmd-results::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
.cmd-group-label {
font-family: var(--mono);
font-size: .55rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
padding: .6rem .8rem .3rem;
}
.cmd-item {
display: flex;
align-items: center;
gap: .8rem;
padding: .7rem .8rem;
border-radius: 8px;
cursor: pointer;
transition: background .15s;
}
.cmd-item:hover,
.cmd-item.active {
background: rgba(201, 168, 76, .08);
}
.cmd-item-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(201, 168, 76, .06);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: .85rem;
flex-shrink: 0;
}
.cmd-item-text {
flex: 1;
}
.cmd-item-title {
font-size: .85rem;
color: var(--cream);
}
.cmd-item-desc {
font-size: .65rem;
color: var(--muted);
margin-top: .1rem;
}
.cmd-item-shortcut {
font-family: var(--mono);
font-size: .55rem;
color: var(--muted);
}
.cmd-footer {
display: flex;
gap: 1rem;
padding: .6rem 1.2rem;
border-top: 1px solid var(--border);
justify-content: center;
}
.cmd-footer span {
font-family: var(--mono);
font-size: .5rem;
color: var(--muted);
letter-spacing: .1em;
display: flex;
align-items: center;
gap: .3rem;
}
.cmd-empty {
text-align: center;
padding: 2rem;
color: var(--muted);
font-size: .82rem;
}
.vl-roi-section {
padding: 4rem 2rem;
max-width: 700px;
margin: 0 auto;
}
.roi-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2.5rem;
position: relative;
overflow: hidden;
}
.roi-card::before {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: .3;
}
.roi-title {
font-family: var(--serif);
font-size: 1.6rem;
font-weight: 300;
color: var(--cream);
margin-bottom: .5rem;
}
.roi-title em {
font-style: italic;
color: var(--gold2);
}
.roi-subtitle {
font-size: .78rem;
color: var(--muted);
margin-bottom: 2rem;
}
.roi-field {
margin-bottom: 1.5rem;
}
.roi-label {
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: .5rem;
display: block;
}
.roi-input {
width: 100%;
background: var(--card2);
border: 1px solid var(--border);
color: var(--cream);
padding: .8rem 1rem;
font-family: var(--sans);
font-size: .9rem;
border-radius: 6px;
outline: none;
transition: border-color .3s;
}
.roi-input:focus {
border-color: rgba(201, 168, 76, .4);
}
.roi-slider {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 3px;
background: var(--border);
border-radius: 2px;
outline: none;
}
.roi-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--gold);
cursor: pointer;
box-shadow: 0 0 12px rgba(201, 168, 76, .4);
}
.roi-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--gold);
cursor: pointer;
border: none;
box-shadow: 0 0 12px rgba(201, 168, 76, .4);
}
.roi-slider-val {
font-family: var(--mono);
font-size: .7rem;
color: var(--gold);
float: right;
}
.roi-results {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.roi-result-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.roi-result-item {
text-align: center;
}
.roi-result-num {
font-family: var(--serif);
font-size: 2rem;
font-weight: 300;
background: linear-gradient(135deg, var(--gold), var(--gold3));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.roi-result-label {
font-family: var(--mono);
font-size: .55rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin-top: .3rem;
}
.roi-bar-wrap {
margin-top: 1.5rem;
}
.roi-bar-label {
display: flex;
justify-content: space-between;
font-size: .7rem;
color: var(--muted);
margin-bottom: .4rem;
}
.roi-bar {
height: 6px;
background: var(--card2);
border-radius: 3px;
overflow: hidden;
}
.roi-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold2));
border-radius: 3px;
transition: width 1s var(--ease-luxury);
}
.smart-rec {
position: fixed;
bottom: 6rem;
right: 2rem;
z-index: 800;
max-width: 280px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.2rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
transform: translateY(20px);
opacity: 0;
visibility: hidden;
transition: all .4s var(--ease-luxury);
}
.smart-rec.show {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.smart-rec-tag {
font-family: var(--mono);
font-size: .5rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .5rem;
}
.smart-rec-title {
font-size: .82rem;
color: var(--cream);
margin-bottom: .4rem;
line-height: 1.4;
}
.smart-rec-desc {
font-size: .7rem;
color: var(--muted);
line-height: 1.6;
margin-bottom: .8rem;
}
.smart-rec-btn {
display: inline-block;
font-family: var(--mono);
font-size: .6rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--gold);
cursor: pointer;
transition: color .2s;
}
.smart-rec-btn:hover {
color: var(--gold2);
}
.smart-rec-close {
position: absolute;
top: .6rem;
right: .6rem;
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: .7rem;
padding: .2rem;
}
@media (max-width: 768px) {
.smart-rec {
right: 1rem;
bottom: 5rem;
max-width: 240px;
}
}
.quote-share-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
font-family: var(--mono);
font-size: .55rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
cursor: pointer;
padding: .3rem .6rem;
border: 1px solid var(--border);
border-radius: 4px;
background: none;
transition: all .2s;
margin-top: .6rem;
}
.quote-share-btn:hover {
color: var(--gold);
border-color: rgba(201, 168, 76, .3);
}
.quote-card-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(1, 1, 4, .85);
backdrop-filter: blur(12px);
opacity: 0;
visibility: hidden;
transition: all .3s;
}
.quote-card-modal.open {
opacity: 1;
visibility: visible;
}
.quote-card-preview {
background: linear-gradient(145deg, #0c0a14, #06050c);
border: 1px solid rgba(201, 168, 76, .15);
padding: 3rem 2.5rem;
max-width: 480px;
width: 90%;
text-align: center;
position: relative;
}
.quote-card-stars {
color: var(--gold2);
font-size: 1rem;
letter-spacing: .2em;
margin-bottom: 1.2rem;
}
.quote-card-text {
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 300;
font-style: italic;
color: var(--cream);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.quote-card-author {
font-family: var(--mono);
font-size: .6rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
}
.quote-card-logo {
font-family: var(--serif);
font-size: .7rem;
color: var(--muted);
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.quote-card-actions {
display: flex;
gap: .8rem;
justify-content: center;
margin-top: 1.5rem;
}
.quote-card-action {
font-family: var(--mono);
font-size: .55rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
background: rgba(255, 255, 255, .04);
border: 1px solid var(--border);
padding: .5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: all .2s;
}
.quote-card-action:hover {
color: var(--gold);
border-color: rgba(201, 168, 76, .3);
}
.calendly-slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .8rem;
padding: 1.5rem;
}
.calendly-slot {
background: var(--card2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
text-align: center;
cursor: pointer;
transition: all .25s;
}
.calendly-slot:hover {
border-color: rgba(201, 168, 76, .3);
background: rgba(201, 168, 76, .04);
}
.calendly-slot.selected {
border-color: var(--gold);
background: rgba(201, 168, 76, .08);
}
.calendly-slot-day {
font-family: var(--mono);
font-size: .55rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
}
.calendly-slot-date {
font-family: var(--serif);
font-size: 1.4rem;
color: var(--cream);
margin: .3rem 0;
}
.calendly-slot-time {
font-size: .7rem;
color: var(--gold);
}
#hero-neon-svg-container {
position: absolute;
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 900px;
height: auto;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.hero-neon-svg {
width: 100%;
height: auto;
overflow: visible;
}
.hero-neon-text-back, .hero-neon-text-glow, .hero-neon-text-front {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 80px;
letter-spacing: 0.08em;
text-anchor: middle;
dominant-baseline: middle;
fill: none;
}
.hero-neon-text-back {
stroke: rgba(201, 168, 76, 0.06);
stroke-width: 1px;
}
.hero-neon-text-glow {
stroke: var(--gold2);
stroke-width: 1.5px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 100 300;
stroke-dashoffset: 0;
animation: hero-laser-dash 7s linear infinite;
filter: drop-shadow(0 0 6px var(--gold));
opacity: 0.8;
transition: stroke-width 0.4s, filter 0.4s;
}
.hero-neon-text-front {
stroke: var(--cream);
stroke-width: 0.5px;
opacity: 0.08;
transition: opacity 0.6s var(--ease-smooth), stroke-width 0.6s;
}
#hero-neon-svg-container:hover .hero-neon-text-front {
opacity: 0.6;
stroke-width: 0.8px;
}
#hero-neon-svg-container:hover .hero-neon-text-glow {
animation-duration: 3.5s;
stroke-width: 2.2px;
filter: drop-shadow(0 0 10px var(--gold));
}
@keyframes hero-laser-dash {
to {
stroke-dashoffset: -400;
}
}
.hero {
position: relative;
}
.particle-text-active .hero-h1 {
opacity: 0;
}
.img-reveal {
position: relative;
overflow: hidden;
}
.img-reveal::after {
content: '';
position: absolute;
inset: 0;
background: var(--card);
transform: scaleX(1);
transform-origin: right;
transition: transform 0.8s var(--ease-luxury);
z-index: 1;
}
.img-reveal.revealed::after {
transform: scaleX(0);
transform-origin: left;
}
.img-reveal img {
transition: transform 1.2s var(--ease-luxury);
transform: scale(1.15);
}
.img-reveal.revealed img {
transform: scale(1);
}
.logo-reveal svg path {
stroke-dasharray: var(--logo-len, 300);
stroke-dashoffset: var(--logo-len, 300);
transition: stroke-dashoffset 2s var(--ease-luxury),
fill .8s .8s;
}
.logo-reveal.drawn svg path {
stroke-dashoffset: 0;
}
.cursor-noise {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .035;
mix-blend-mode: overlay;
background-image: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
background-repeat: repeat;
background-size: 200px;
}
.a11y-btn {
position: fixed;
bottom: 5.5rem;
left: 1.5rem;
z-index: 900;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--card);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--muted);
font-size: .9rem;
transition: all .3s;
box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.a11y-btn:hover {
color: var(--gold);
border-color: rgba(201, 168, 76, .3);
}
.a11y-panel {
position: fixed;
bottom: 8rem;
left: 1.5rem;
z-index: 901;
width: 260px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.2rem;
box-shadow: 0 16px 48px rgba(0, 0, 0, .7);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .3s var(--ease-luxury);
}
.a11y-panel.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.a11y-panel-title {
font-family: var(--mono);
font-size: .55rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .8rem;
}
.a11y-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem 0;
border-bottom: 1px solid var(--border);
}
.a11y-option:last-child {
border: none;
}
.a11y-option-label {
font-size: .75rem;
color: var(--cream);
}
.a11y-toggle {
width: 36px;
height: 20px;
border-radius: 10px;
background: var(--card2);
border: 1px solid var(--border);
position: relative;
cursor: pointer;
transition: background .3s;
}
.a11y-toggle::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--muted);
transition: all .3s;
}
.a11y-toggle.on {
background: rgba(201, 168, 76, .2);
border-color: var(--gold);
}
.a11y-toggle.on::after {
left: 18px;
background: var(--gold);
}
.a11y-size-btn:hover,
.a11y-size-btn.active {
color: var(--gold);
border-color: rgba(201, 168, 76, .3);
}
html.a11y-large-text {
font-size: 120%;
}
html.a11y-high-contrast {
filter: contrast(1.4);
}
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
animation-duration: 0s !important;
transition-duration: 0s !important;
}
html.a11y-dyslexia {
font-family: "Comic Sans MS", "OpenDyslexic", sans-serif !important;
}
@media (max-width: 768px) {
.a11y-btn {
bottom: 4.5rem;
left: 1rem;
}
.a11y-panel {
left: 1rem;
bottom: 7rem;
width: 240px;
}
}
#article-read-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0%;
z-index: 9999;
background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold3));
pointer-events: none;
opacity: 0;
transition: width .15s linear, opacity .3s;
}
#article-read-progress.visible {
opacity: 1;
}
.shortcuts-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(1, 1, 4, .88);
backdrop-filter: blur(16px);
opacity: 0;
visibility: hidden;
transition: all .25s;
}
.shortcuts-overlay.open {
opacity: 1;
visibility: visible;
}
.shortcuts-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2rem;
max-width: 420px;
width: 90%;
}
.shortcuts-title {
font-family: var(--serif);
font-size: 1.3rem;
font-weight: 300;
color: var(--cream);
margin-bottom: .3rem;
}
.shortcuts-subtitle {
font-size: .7rem;
color: var(--muted);
margin-bottom: 1.5rem;
}
.shortcut-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: .4rem 0;
}
.shortcut-label {
font-size: .78rem;
color: var(--cream);
}
.shortcut-keys {
display: flex;
gap: .3rem;
}
.shortcut-key {
font-family: var(--mono);
font-size: .6rem;
color: var(--muted);
background: rgba(255, 255, 255, .05);
padding: .15rem .45rem;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, .08);
min-width: 22px;
text-align: center;
}
.cmd-palette--search .cmd-search-wrap {
padding: 1.1rem 1.5rem;
}
.cmd-palette--search .cmd-item-icon {
background: rgba(155, 111, 255, .08);
color: var(--accent);
}
.cmd-palette--search .cmd-item.active .cmd-item-icon {
background: rgba(201, 168, 76, .12);
color: var(--gold);
}
.cmd-palette--search .cmd-group-label {
color: var(--accent);
}
@media print {
body {
background: #fff !important;
color: #111 !important;
}
nav,
.mob-menu,
.float-cta,
#chatBtn,
#cur,
#cur2,
.toast,
.trail-dot,
.mesh-container,
.cursor-noise,
.page-morph-overlay,
.a11y-btn,
.a11y-panel,
.smart-rec,
.cmd-backdrop,
.cmd-palette,
#vl-section-counter,
.vl-sc-bar,
.hscroll-section,
#vl-globe-section,
canvas {
display: none !important;
}
.page {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
position: static !important;
}
.sec {
padding: 1.5rem 0 !important;
}
.hero {
min-height: auto !important;
padding: 2rem 0 !important;
}
.hero-h1 {
font-size: 2rem !important;
color: #111 !important;
-webkit-text-fill-color: #111 !important;
}
.btn-gold,
.btn-ghost {
border: 1px solid #888 !important;
background: none !important;
color: #111 !important;
-webkit-text-fill-color: #111 !important;
}
.price-card,
.svc-card,
.testi,
.port-card,
.cs-card,
.blog-card {
border: 1px solid #ddd !important;
background: #f9f9f9 !important;
color: #111 !important;
break-inside: avoid;
}
a {
color: #111 !important;
text-decoration: underline !important;
}
.sec-h2 {
color: #111 !important;
-webkit-text-fill-color: #111 !important;
}
footer {
border-top: 1px solid #ddd !important;
}
}
#shader-bg {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
}
#shader-bg canvas {
width: 100% !important;
height: 100% !important;
}
@keyframes celebPop {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--cx, 40px), var(--cy, -60px)) scale(0);
}
}
.timeline-section {
padding: 4rem 2rem;
overflow: hidden;
}
.timeline-track-wrap {
position: relative;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
cursor: grab;
padding: 2rem 0;
scrollbar-width: none;
}
.timeline-track-wrap::-webkit-scrollbar {
display: none;
}
.timeline-track-wrap.grabbing {
cursor: grabbing;
}
.timeline-track {
display: flex;
gap: 0;
min-width: max-content;
padding: 0 4rem;
}
.timeline-node {
position: relative;
min-width: 280px;
padding: 2rem 1.5rem;
flex-shrink: 0;
}
.timeline-node::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border);
}
.timeline-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--card);
border: 2px solid var(--gold);
position: relative;
z-index: 2;
margin: 0 auto 1.2rem;
transition: all .3s;
}
.timeline-node:hover .timeline-dot {
background: var(--gold);
box-shadow: 0 0 16px rgba(201, 168, 76, .4);
}
.timeline-year {
font-family: var(--mono);
font-size: .6rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--gold);
text-align: center;
margin-bottom: .5rem;
}
.timeline-title {
font-family: var(--serif);
font-size: 1.1rem;
font-weight: 300;
color: var(--cream);
text-align: center;
margin-bottom: .4rem;
}
.timeline-desc {
font-size: .72rem;
color: var(--muted);
text-align: center;
line-height: 1.6;
max-width: 240px;
margin: 0 auto;
}
.timeline-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .15), transparent);
pointer-events: none;
}
.timeline-drag-hint {
text-align: center;
font-family: var(--mono);
font-size: .5rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin-top: 1rem;
}
.chat-personality-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .3rem .7rem;
background: rgba(201, 168, 76, .06);
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--mono);
font-size: .5rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .8rem;
}
.chat-persona-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--gold2));
display: flex;
align-items: center;
justify-content: center;
font-size: .7rem;
flex-shrink: 0;
}
.chat-stream-cursor {
display: inline-block;
width: 2px;
height: 1em;
background: var(--gold);
animation: chatBlink 1s step-end infinite;
vertical-align: text-bottom;
margin-left: 2px;
}
@keyframes chatBlink {
0%, 100% { opacity: 1; }
50%      { opacity: 0; }
}
.konami-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(1, 1, 4, .95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all .5s;
}
.konami-overlay.active {
opacity: 1;
visibility: visible;
}
.konami-title {
font-family: var(--serif);
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 300;
font-style: italic;
color: var(--gold2);
margin-bottom: 1rem;
text-align: center;
}
.konami-subtitle {
font-family: var(--mono);
font-size: .6rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--muted);
}
.konami-rain {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.konami-drop {
position: absolute;
font-family: var(--serif);
font-style: italic;
font-size: .7rem;
color: var(--gold);
opacity: .3;
white-space: nowrap;
animation: konamiRain linear infinite;
}
@keyframes konamiRain {
0%   { transform: translateY(-100%); }
100% { transform: translateY(100vh); }
}
.vitals-badge {
display: inline-flex;
align-items: center;
gap: .8rem;
padding: .4rem .8rem;
background: rgba(201, 168, 76, .03);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
transition: all .3s;
}
.vitals-badge:hover {
border-color: rgba(201, 168, 76, .25);
}
.vitals-metric {
display: flex;
flex-direction: column;
align-items: center;
gap: .1rem;
}
.vitals-value {
font-family: var(--mono);
font-size: .6rem;
font-weight: 500;
}
.vitals-value.good {
color: #4ade80;
}
.vitals-value.needs-work {
color: #fbbf24;
}
.vitals-value.poor {
color: #f87171;
}
.vitals-label {
font-family: var(--mono);
font-size: .4rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--muted);
}
.vitals-sep {
width: 1px;
height: 20px;
background: var(--border);
}
html[data-theme="light"] .cmd-palette {
background: #f5f2ec;
border-color: rgba(0, 0, 0, .1);
}
html[data-theme="light"] .cmd-search {
color: #1a1816;
}
html[data-theme="light"] .cmd-item:hover,
html[data-theme="light"] .cmd-item.active {
background: rgba(201, 168, 76, .1);
}
html[data-theme="light"] .cmd-item-title {
color: #1a1816;
}
html[data-theme="light"] .a11y-panel {
background: #f5f2ec;
}
html[data-theme="light"] .roi-card {
background: #f5f2ec;
border-color: rgba(0, 0, 0, .08);
}
html[data-theme="light"] .smart-rec {
background: #f5f2ec;
}
html[data-theme="light"] .shortcuts-card {
background: #f5f2ec;
}
html[data-theme="light"] .timeline-node .timeline-title {
color: #1a1816;
}
html[data-theme="light"] .konami-overlay {
background: rgba(250, 248, 244, .95);
}
html[data-theme="light"] .a11y-btn {
background: #f5f2ec;
}
html[data-theme="light"] .a11y-option-label {
color: #1a1816;
}
html[data-theme="light"] .quote-card-preview {
background: linear-gradient(145deg, #f5f2ec, #ebe6dc);
}
html[data-theme="light"] .quote-card-text {
color: #1a1816;
}
html[data-theme="light"] .calendly-slot {
background: #ebe6dc;
}
html[data-theme="light"] .calendly-slot-date {
color: #1a1816;
}
html[data-theme="light"] .offline-title {
color: #1a1816;
}
html[data-theme="light"] .shortcut-label {
color: #1a1816;
}
html[data-theme="light"]{
--void:#f9f7f3;
--dark:#f2ede3;
--card:#fffffc;
--card2:#f5f0e8;
--card3:#ede7d9;
--border:#ddd8cc;
--border2:#ccc6b8;
--gold:#9a7a2e;
--gold2:#b8922e;
--gold3:#7a5c1e;
--goldDark:#5a3e10;
--goldGlow:rgba(154,122,46,.12);
--goldShimmer:linear-gradient(135deg,#9a7a2e 0%,#d4aa50 45%,#9a7a2e 100%);
--platinum:#1a1714;
--platinumMuted:rgba(26,23,20,.55);
--cream:#2a2520;
--warm:#3a3028;
--muted:#6b6358;
--white:#ffffff;
--accent:#6040cc;
--accent2:#2860aa;
--shadow-card:0 4px 24px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
--shadow-hover:0 12px 48px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.06);
--shadow-deep:0 24px 72px rgba(0,0,0,.18);
--glow-gold:0 0 40px rgba(154,122,46,.1);
--glow-sm:0 0 20px rgba(154,122,46,.08);
}
html[data-theme="light"] body{
background:#f9f7f3;
color:#1a1714;
}
html[data-theme="light"] nav{
background:rgba(249,247,243,.92);
border-bottom:1px solid var(--border);
}
html[data-theme="light"] nav.scrolled{
background:rgba(249,247,243,.97);
border-bottom:1px solid var(--border);
box-shadow:0 4px 24px rgba(0,0,0,.08);
}
html[data-theme="light"] .nav-logo,
html[data-theme="light"] .nav-links a{color:#1a1714;}
html[data-theme="light"] .nav-cta{background:var(--gold);color:#fff;}
html[data-theme="light"] .mob-menu{background:#f2ede3;}
html[data-theme="light"] .mob-menu a{color:#1a1714;}
html[data-theme="light"] .hero-bg{background:linear-gradient(160deg,#f0ebe0 0%,#e8e0d0 100%);}
html[data-theme="light"] .page{background:#f9f7f3;}
html[data-theme="light"] .sec-dark{background:#f0ebe0;}
html[data-theme="light"] .btn-ghost{border-color:var(--border2);color:#1a1714;}
html[data-theme="light"] .btn-ghost:hover{background:var(--border2);}
html[data-theme="light"] .est-opt,
html[data-theme="light"] .grader-opts button,
html[data-theme="light"] .grant-opt{background:#fff;border-color:var(--border);color:#1a1714;}
html[data-theme="light"] .est-opt:hover,
html[data-theme="light"] .grader-opts button:hover,
html[data-theme="light"] .grant-opt:hover{border-color:var(--gold);}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{background:#fff!important;border-color:var(--border)!important;color:#1a1714!important;}
html[data-theme="light"] .port-card,
html[data-theme="light"] .value-card,
html[data-theme="light"] .svc-cat-card,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .case-card,
html[data-theme="light"] .faq-item{background:#fff;border-color:var(--border);}
html[data-theme="light"] footer{background:#f0ebe0;border-top:1px solid var(--border);}
html[data-theme="light"] #cookieBanner{background:#fff;border-color:var(--border);}
html[data-theme="light"] #chatBox{background:#fff;border-color:var(--border2);}
html[data-theme="light"] .chat-msg{background:#f0ebe0;}
html[data-theme="light"] .chat-opt{background:#fff;border-color:var(--border2);color:#1a1714;}
html[data-theme="light"] #floatCta{background:var(--gold);color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.15);}
html[data-theme="light"] #currencyToggle button{background:#fff;border-color:var(--border2);color:#1a1714;}
html[data-theme="light"] #currencyToggle button.curr-active{background:var(--gold);border-color:var(--gold);color:#fff;}
.sr-init{
opacity:0;
transform:translateY(20px);
transition:opacity .5s var(--ease-smooth),transform .5s var(--ease-smooth);
}
.sr-visible{
opacity:1!important;
transform:translateY(0)!important;
}
@media(prefers-reduced-motion:reduce){
.sr-init{opacity:1;transform:none;transition:none;}
}
#currencyToggle{
display:inline-flex;
gap:2px;
margin:1rem 0 1.5rem;
background:var(--card2);
border:1px solid var(--border2);
border-radius:6px;
padding:3px;
}
#currencyToggle button{
padding:6px 16px;
border:none;
background:transparent;
color:var(--muted);
font-size:.78rem;
font-family:var(--sans);
font-weight:500;
border-radius:4px;
cursor:pointer;
transition:all .15s;
}
#currencyToggle button.curr-active{
background:var(--gold);
color:#000;
font-weight:600;
}
#currencyToggle button:not(.curr-active):hover{
background:var(--card3);
color:var(--platinum);
}
.scan-spinner{
width:36px;
height:36px;
border:3px solid var(--border2);
border-top-color:var(--gold);
border-radius:50%;
animation:spin .8s linear infinite;
margin:0 auto;
}
@keyframes spin{to{transform:rotate(360deg)}}
.scanner-input-row{
display:flex;
border:1px solid var(--border2);
border-radius:4px;
overflow:hidden;
}
.scanner-input-row input{
border:none!important;
border-radius:0!important;
}
.scanner-input-row input:focus{
outline:none;
box-shadow:inset 0 0 0 2px var(--gold);
}
#estResumeBanner{
background:var(--card2);
border:1px solid var(--gold);
border-radius:4px;
padding:12px 16px;
margin:1.5rem auto;
max-width:760px;
font-size:.82rem;
color:var(--platinum);
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.grant-opt:hover{
border-color:var(--gold)!important;
color:var(--platinum)!important;
}
.grant-opt:focus-visible{
outline:2px solid var(--gold);
outline-offset:2px;
}
.ai-tool-card:hover{
border-color:var(--gold);
box-shadow:var(--glow-sm);
transform:translateY(-3px);
}
[id^="page-city-"] .about-hero{
background:linear-gradient(160deg,var(--void) 0%,var(--dark) 100%);
}
[id^="page-city-"] .about-hero::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse at 70% 50%,rgba(201,168,76,.08) 0%,transparent 60%);
pointer-events:none;
}
.hl-result-card:hover{
border-color:var(--gold)!important;
background:var(--card2)!important;
}
#article-progress{
position:fixed;
top:0;
left:0;
height:3px;
background:var(--goldShimmer);
z-index:9999;
transition:width .1s linear;
pointer-events:none;
box-shadow:0 0 8px rgba(201,168,76,.4);
}
@media(max-width:768px){
.scanner-input-row{flex-direction:column;}
.scanner-input-row input{border-radius:4px 4px 0 0!important;}
.scanner-input-row button{border-radius:0 0 4px 4px!important;width:100%;}
#estResumeBanner{flex-direction:column;align-items:flex-start;}
#currencyToggle{width:100%;justify-content:center;}
}
.mob-menu a { display:flex; align-items:center; gap:.85rem; }
.mob-menu a .nav-svg-icon {
flex-shrink:0;
width:32px !important;
height:32px !important;
padding:5px;
background:var(--card2);
border:1px solid var(--border2);
border-radius:6px;
transition:background .15s, border-color .15s;
margin-right:0 !important;
vertical-align:unset !important;
display:inline-flex !important;
align-items:center;
justify-content:center;
}
.mob-menu a:hover .nav-svg-icon,
.mob-menu a.active .nav-svg-icon {
background:rgba(201,168,76,.12);
border-color:var(--gold);
}
.mob-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
background:var(--card2);
border:1px solid var(--border2);
border-radius:6px;
flex-shrink:0;
color:var(--gold);
transition:background .15s, border-color .15s;
}
.mob-menu a:hover .mob-icon,
.mob-menu a.active .mob-icon {
background:rgba(201,168,76,.12);
border-color:var(--gold);
}
.fg { position:relative; }
.field-icon {
position:absolute;
left:.85rem;
top:50%;
transform:translateY(-50%);
color:var(--muted);
pointer-events:none;
display:flex;
align-items:center;
z-index:1;
line-height:0;
}
.fg-textarea .field-icon {
top:.95rem;
transform:none;
}
.fg:focus-within .field-icon { color:var(--gold); }
.value-icon {
width:40px;
height:40px;
background:rgba(201,168,76,.08);
border:1px solid rgba(201,168,76,.2);
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:.6rem;
color:var(--gold);
transition:background .2s, border-color .2s;
}
.value-card:hover .value-icon {
background:rgba(201,168,76,.15);
border-color:var(--gold);
}
html[data-theme="light"] .value-icon {
background:rgba(154,122,46,.08);
border-color:rgba(154,122,46,.2);
}
.process-icon {
width:36px;
height:36px;
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.25);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:.75rem;
color:var(--gold);
flex-shrink:0;
}
.blog-cat { display:inline-flex; align-items:center; gap:.3rem; }
footer .foot-links a {
display:inline-flex;
align-items:center;
gap:.3rem;
}
footer .foot-links a svg { opacity:.5; flex-shrink:0; }
footer .foot-links a:hover svg { opacity:1; }
a.nav-cta { display:inline-flex; align-items:center; gap:.4rem; }
#scrollTop { display:flex; align-items:center; justify-content:center; }
#cookieBanner { display:flex; align-items:flex-start; gap:.75rem; flex-wrap:wrap; }
.cookie-icon { margin-top:.1rem; }
.grader-dim-label span { display:inline-flex; align-items:center; gap:.4rem; }
.vl-spotlight {
position: relative;
overflow: hidden;
}
.vl-spotlight::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: radial-gradient(
600px circle at var(--spot-x, 50%) var(--spot-y, 50%),
rgba(201, 168, 76, 0.06),
transparent 40%
);
opacity: 0;
transition: opacity var(--t-base) var(--ease-smooth);
}
.vl-spotlight:hover::before {
opacity: 1;
}
@property --beam-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.vl-beam {
position: relative;
}
.vl-beam::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
pointer-events: none;
z-index: 1;
background: conic-gradient(
from var(--beam-angle, 0deg),
transparent 0%,
transparent 75%,
var(--gold) 85%,
transparent 95%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: vl-beam-orbit 3s linear infinite;
}
@keyframes vl-beam-orbit {
to {
--beam-angle: 360deg;
}
}
.vl-gradient-text {
background: linear-gradient(
90deg,
var(--gold),
var(--gold2),
var(--accent),
var(--gold3),
var(--gold)
);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: vl-gradient-flow 6s ease infinite;
}
@keyframes vl-gradient-flow {
0%   { background-position: 0% 50%; }
50%  { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.rev {
filter: blur(6px);
transition:
opacity 0.85s var(--ease-smooth),
transform 0.85s var(--ease-smooth),
filter  0.85s var(--ease-smooth);
}
.rev.in {
filter: blur(0);
}
@keyframes vl-grain-shift {
0%   { transform: translate(0, 0); }
10%  { transform: translate(-2%, -3%); }
20%  { transform: translate(3%, 1%); }
30%  { transform: translate(-1%, 2%); }
40%  { transform: translate(2%, -2%); }
50%  { transform: translate(-3%, 1%); }
60%  { transform: translate(1%, -1%); }
70%  { transform: translate(-2%, 3%); }
80%  { transform: translate(3%, -1%); }
90%  { transform: translate(-1%, 2%); }
100% { transform: translate(0, 0); }
}
.vl-whisper {
display: block;
font-family: var(--mono);
font-size: 0.52rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
opacity: 0.55;
margin-top: 0.65rem;
text-align: center;
transition: opacity var(--t-base);
}
.hero-actions:hover .vl-whisper,
.price-card:hover .vl-whisper {
opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
.vl-spotlight::before {
transition: none;
}
.vl-beam::after {
animation: none;
}
.vl-gradient-text {
animation: none;
}
.rev {
filter: none;
transition: none;
}
}
.vl-aurora {
position: relative;
overflow: hidden;
}
.vl-aurora::before {
content: '';
position: absolute;
inset: -50%;
width: 200%;
height: 200%;
background: conic-gradient(
from 0deg at 50% 50%,
rgba(201, 168, 76, 0.03) 0%,
rgba(155, 111, 255, 0.04) 25%,
rgba(110, 170, 255, 0.03) 50%,
rgba(201, 168, 76, 0.04) 75%,
rgba(155, 111, 255, 0.03) 100%
);
animation: vl-aurora-spin 20s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes vl-aurora-spin {
to { transform: rotate(360deg); }
}
.vl-aurora > * {
position: relative;
z-index: 1;
}
.price-tabs {
position: relative;
}
.vl-tab-indicator {
position: absolute;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold2));
transition: left 0.4s var(--ease-spring),
width 0.4s var(--ease-spring);
border-radius: 1px;
box-shadow: 0 0 8px rgba(201, 168, 76, 0.3);
}
.vl-float-label input:focus ~ label,
.vl-float-label input:not(:placeholder-shown) ~ label,
.vl-float-label textarea:focus ~ label,
.vl-float-label textarea:not(:placeholder-shown) ~ label {
top: -0.5rem;
font-size: 0.6rem;
color: var(--gold);
letter-spacing: 0.08em;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
border-color: var(--gold) !important;
box-shadow:
0 0 0 3px rgba(201, 168, 76, 0.1),
0 0 20px rgba(201, 168, 76, 0.05) !important;
}
.nav.scrolled {
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
}
.vl-skeleton {
background: linear-gradient(
90deg,
var(--card) 25%,
var(--card2) 50%,
var(--card) 75%
);
background-size: 200% 100%;
animation: vl-skeleton-shimmer 1.5s ease infinite;
border-radius: 4px;
}
.vl-skeleton-text {
height: 1em;
margin-bottom: 0.6rem;
border-radius: 3px;
}
.vl-skeleton-text:last-child {
width: 70%;
}
.vl-skeleton-img {
height: 180px;
margin-bottom: 1rem;
}
.vl-skeleton-card {
padding: 1.5rem;
border: 1px solid var(--border);
border-radius: 4px;
}
@keyframes vl-skeleton-shimmer {
to { background-position: -200% 0; }
}
.port-card {
transition:
transform 0.5s var(--ease-luxury),
box-shadow 0.5s var(--ease-luxury),
z-index 0s;
}
.port-card:hover {
transform: scale(1.05) translateY(-8px);
z-index: 10;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.5),
0 0 40px rgba(201, 168, 76, 0.08);
}
.port-card:hover ~ .port-card {
transform: translateX(12px);
}
.vl-divider {
width: 100%;
height: 40px;
overflow: hidden;
position: relative;
}
.vl-divider svg {
width: 100%;
height: 100%;
}
.vl-divider path {
fill: none;
stroke: rgba(201, 168, 76, 0.12);
stroke-width: 1;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset 1.5s var(--ease-smooth);
}
.vl-divider.in path {
stroke-dashoffset: 0;
}
.vl-trusted {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
padding: 2rem 0;
opacity: 0.4;
transition: opacity 0.5s;
}
.vl-trusted:hover {
opacity: 0.65;
}
.vl-trusted-label {
font-family: var(--mono);
font-size: 0.52rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.vl-trusted-icon {
width: 28px;
height: 28px;
color: var(--muted);
flex-shrink: 0;
opacity: 0.6;
}
.vl-trusted-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.vl-stack-card {
position: sticky;
top: 120px;
transition:
transform 0.3s var(--ease-smooth),
opacity 0.3s;
}
.vl-stack-card[data-stacked] {
transform: scale(0.95);
opacity: 0.6;
}
@media (max-width: 768px) {
.vl-dock {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0.6rem 1rem;
padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
background: rgba(6, 5, 12, 0.92);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-top: 1px solid rgba(201, 168, 76, 0.1);
}
.vl-dock-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
text-decoration: none;
color: var(--muted);
font-family: var(--mono);
font-size: 0.45rem;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: all 0.3s var(--ease-spring);
padding: 0.3rem 0.5rem;
}
.vl-dock-item.active,
.vl-dock-item:hover {
color: var(--gold);
}
.vl-dock-item svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.3s var(--ease-spring);
}
.vl-dock-item:hover svg,
.vl-dock-item.active svg {
transform: scale(1.25);
}
body {
padding-bottom: 70px;
}
}
@media (min-width: 769px) {
.vl-dock { display: none; }
}
.vl-sparkle {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold2);
box-shadow: 0 0 6px var(--gold);
animation: vl-sparkle-pop 0.6s ease-out forwards;
pointer-events: none;
}
@keyframes vl-sparkle-pop {
0%   { transform: scale(0) translateY(0);     opacity: 1;   }
50%  { transform: scale(1) translateY(-15px);  opacity: 0.8; }
100% { transform: scale(0) translateY(-30px);  opacity: 0;   }
}
[data-time-mood="evening"] {
--gold: #d4a84a;
--gold2: #e8c870;
}
[data-time-mood="morning"] {
--gold: #baa860;
--gold2: #d4c880;
}
[data-time-mood="night"] {
--gold: #c9a84c;
--gold2: #e4c36e;
}
.vl-progress-dots {
position: fixed;
top: 2px;
left: 0;
right: 0;
z-index: 9989;
display: flex;
justify-content: center;
gap: 0;
pointer-events: none;
height: 2px;
}
.vl-progress-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(201, 168, 76, 0.2);
position: absolute;
top: -2px;
transform: translateX(-50%);
transition: background 0.3s, transform 0.3s;
pointer-events: all;
cursor: pointer;
}
.vl-progress-dot.active {
background: var(--gold);
transform: translateX(-50%) scale(1.5);
box-shadow: 0 0 6px rgba(201, 168, 76, 0.4);
}
.vl-progress-dot:hover {
background: var(--gold2);
transform: translateX(-50%) scale(1.3);
}
.vl-avatar-stack {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.vl-avatar-stack .testi-av {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--dark);
margin-left: -10px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 0.5rem;
font-weight: 500;
color: var(--gold);
background: var(--card2);
position: relative;
transition:
transform 0.3s var(--ease-spring),
z-index 0s;
}
.vl-avatar-stack .testi-av:hover {
transform: translateY(-4px) scale(1.15);
z-index: 5;
border-color: var(--gold);
}
.vl-avatar-stack .testi-av:first-child {
margin-left: 0;
}
.vl-avatar-count {
font-family: var(--mono);
font-size: 0.52rem;
color: var(--muted);
margin-left: 0.8rem;
align-self: center;
letter-spacing: 0.08em;
}
.vl-beams-canvas {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.4;
}
.pixel-canvas-wrap {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.pixel-canvas-wrap canvas {
display: block;
width: 100%;
height: 100%;
}
@media (prefers-reduced-motion: reduce) {
.vl-aurora::before          { animation: none; }
.vl-skeleton                { animation: none; }
.vl-sparkle                 { animation: none; }
.vl-dock-item svg           { transition: none; }
.vl-tab-indicator           { transition: none; }
.vl-divider path            { transition: none; stroke-dashoffset: 0; }
.vl-progress-dot            { transition: none; }
.vl-avatar-stack .testi-av  { transition: none; }
}