:root{
--black:      #030303;
--charcoal:   #0F0E11;
--charcoal-2: #17151A;
--paper:      #F4F2EC;
--grey:       #9A96A0;
--grey-dim:   #605C66;
--crimson:    #E5004E;
--crimson-br: #FF2166;
--acid:       #E9FF3D;
--line:       rgba(255,255,255,0.12);
--line-soft:  rgba(255,255,255,0.07);
--f-display: "Big Shoulders Display", sans-serif;
--f-body:    "Inter", sans-serif;
--f-mono:    "Space Mono", monospace;
--container: 1240px;
--ease: cubic-bezier(.16,1,.3,1);
--spring: cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--black); overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
margin:0;
background:var(--black);
color:var(--paper);
font-family:var(--f-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
} .da-root{
background:var(--black);
color:var(--paper);
position:relative;
width:100vw;
max-width:100vw;
margin-left:calc(50% - 50vw);
overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--acid); color:var(--black); }
h1,h2,h3,h4{
font-family:var(--f-display);
font-weight:900;
letter-spacing:-0.01em;
line-height:0.92;
margin:0;
text-transform:uppercase;
}
.eyebrow{
font-family:var(--f-mono);
font-size:12px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--acid);
display:flex;
align-items:center;
gap:10px;
margin-bottom:20px;
font-weight:700;
}
.eyebrow::before{ content:"●"; font-size:8px; }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; } .hero__grid > *, .hero__cta-row > *, .quiz__panel > *, .calc__panel > *,
.cta-band__grid > *, .form, .form__row > *, .results__stats > *,
.process__list > *, .footer__top > *, .services__grid > *{
min-width:0;
}
section{ position:relative; }
:focus-visible{ outline:3px solid var(--acid); outline-offset:3px; } .btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:17px 32px; border-radius:999px;
font-weight:800; font-size:14.5px; letter-spacing:0.01em; text-transform:uppercase;
border:2px solid transparent;
transition:transform .4s var(--spring), box-shadow .4s var(--ease), background .25s, color .25s, border-color .25s;
text-align:center;
}
.btn-primary{ background:var(--crimson); color:#fff; box-shadow:0 0 0 0 rgba(229,0,78,0.5); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 18px 40px -10px rgba(229,0,78,0.6); }
.btn-acid{ background:var(--acid); color:var(--black); }
.btn-acid:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 18px 40px -10px rgba(233,255,61,0.4); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--paper); transform:translateY(-3px); }
.btn-on-light{ background:var(--black); color:var(--paper); }
.btn-on-light:hover{ background:var(--crimson); color:#fff; transform:translateY(-3px); } .nav{
position:fixed; top:0; left:0; right:0; z-index:300;
display:flex; align-items:center; justify-content:space-between;
padding:18px 32px;
background:rgba(3,3,3,0.5);
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
border-bottom:1px solid transparent;
transition:border-color .3s, padding .3s, background .3s;
}
.nav.is-scrolled{ border-bottom-color:var(--line); background:rgba(3,3,3,0.86); padding:12px 32px; }
.nav__brand{ display:flex; align-items:center; }
.nav__brand img{ height:38px; width:auto; filter:brightness(0) invert(1); transition:height .3s; }
.nav.is-scrolled .nav__brand img{ height:32px; }
.nav__links{ display:flex; gap:32px; list-style:none; margin:0; padding:0; }
.nav__links a{ font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--grey); position:relative; padding:6px 0; transition:color .25s; }
.nav__links a:hover{ color:var(--paper); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--acid); transition:width .3s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__cta a{ padding:11px 22px; font-size:12.5px; } .nav__burger{
display:none;
width:44px; height:44px; flex:none;
align-items:center; justify-content:center;
background:transparent; border:1px solid var(--line); border-radius:10px;
position:relative; z-index:310;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after{
content:""; display:block; width:18px; height:2px; background:var(--paper);
position:relative; transition:transform .3s var(--ease), opacity .2s;
}
.nav__burger span::before{ position:absolute; top:-6px; left:0; content:""; }
.nav__burger span::after{ position:absolute; top:6px; left:0; content:""; }
.nav.is-open .nav__burger span{ background:transparent; }
.nav.is-open .nav__burger span::before{ top:0; transform:rotate(45deg); }
.nav.is-open .nav__burger span::after{ top:0; transform:rotate(-45deg); }
.nav__mobile-panel{
position:fixed; inset:0; z-index:290;
height:100vh; height:100dvh;
background:var(--black);
display:flex; flex-direction:column;
padding:100px 32px 40px;
transform:translateY(-100%);
transition:transform .45s var(--ease);
visibility:hidden;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.nav.is-open .nav__mobile-panel{ transform:translateY(0); visibility:visible; }
.nav__mobile-panel ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.nav__mobile-panel a{
display:block; padding:18px 4px; font-family:var(--f-display); font-size:32px;
text-transform:uppercase; color:var(--paper); border-bottom:1px solid var(--line);
overflow-wrap:break-word; word-break:break-word; line-height:1.1;
}
.nav__mobile-panel .btn{ margin-top:32px; width:100%; white-space:normal; }
@media (max-height: 560px){
.nav__mobile-panel{ padding-top:76px; }
.nav__mobile-panel a{ padding:10px 4px; font-size:24px; }
.nav__mobile-panel .btn{ margin-top:16px; }
}
@media (max-width: 880px){
.nav__links{ display:none; }
.nav__cta{ display:none; }
.nav__burger{ display:flex; }
}
@media (min-width: 881px){
.nav__mobile-panel{ display:none; }
} .hero{
min-height:100svh;
display:flex; align-items:flex-end;
position:relative; overflow:hidden;
padding:150px 0 70px;
isolation:isolate;
}
.hero__bg{
position:absolute; inset:0; z-index:-2;
overflow:hidden;
}
.hero__bg img{
width:110%; height:110%; object-fit:cover; object-position:center 30%;
position:absolute; top:-5%; left:-5%;
filter:grayscale(1) contrast(1.25) brightness(0.42);
}
.hero__bg::after{
content:"";
position:absolute; inset:0;
background:
radial-gradient(120% 90% at 15% 100%, rgba(229,0,78,0.55), transparent 60%),
linear-gradient(180deg, rgba(3,3,3,0.55) 0%, rgba(3,3,3,0.25) 40%, rgba(3,3,3,0.92) 100%);
mix-blend-mode:normal;
}
.hero__grain{
position:absolute; inset:0; z-index:-1; opacity:.35; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.hero__marquee{
position:absolute; top:12%; left:0; right:0; z-index:0;
overflow:hidden; pointer-events:none;
transform:rotate(-3deg) scale(1.15);
}
.hero__marquee-track{
display:flex; width:max-content; white-space:nowrap;
font-family:var(--f-display); font-weight:900; font-size:min(13vw,150px);
color:transparent;
-webkit-text-stroke:1.5px rgba(244,242,236,0.14);
text-transform:uppercase; letter-spacing:-0.01em;
}
.hero__marquee-track span{ padding:0 40px; }
.hero__content{ position:relative; z-index:2; width:100%; }
.hero__badge{
position:absolute; top:-90px; right:32px; z-index:5;
width:128px; height:128px;
}
.hero__badge svg{ width:100%; height:100%; }
.hero__badge-spin{ transform-origin:64px 64px; }
.hero__headline{
font-size:clamp(52px, 9.4vw, 132px);
color:var(--paper);
overflow:hidden;
}
.hero__headline .line{ display:block; overflow:hidden; padding-top:0.16em; margin-top:-0.16em; }
.hero__headline .line span{ display:inline-block; will-change:transform; }
.hero__headline em{ font-style:normal; color:var(--crimson); }
.hero__headline .acid{ color:var(--acid); }
.hero__sub{
font-size:19px; font-weight:600; color:var(--grey);
max-width:520px; margin:28px 0 38px;
}
.hero__cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px; }
.hero__trust{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--grey); font-weight:700; font-family:var(--f-mono); flex-wrap:wrap; }
.hero__trust b{ color:var(--acid); }
.hero__scroll{
position:absolute; bottom:26px; right:32px; z-index:3;
display:flex; align-items:center; gap:10px;
font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey);
}
.hero__scroll-line{ width:1px; height:40px; background:linear-gradient(var(--acid), transparent); }
@media (max-width: 720px){
.hero{ padding-top:120px; }
.hero__badge{ display:none; }
} .mband{
position:relative;
height:74px;
margin:10px 0;
z-index:5;
overflow-x:hidden;
}
.mband__skew{
position:absolute; top:0; bottom:0; left:-4%; right:-4%;
display:flex; align-items:center;
overflow:hidden; clip-path:polygon(0 14px, 100% 0, 100% calc(100% - 14px), 0 100%);
}
.mband--crimson .mband__skew{ background:var(--crimson); }
.mband--paper .mband__skew{ background:var(--paper); }
.mband--outline .mband__skew{ background:var(--black); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mband__track{
display:flex; width:max-content; white-space:nowrap;
font-family:var(--f-display); font-weight:900; font-size:26px;
text-transform:uppercase; letter-spacing:0.01em;
}
.mband--crimson .mband__track{ color:#fff; }
.mband--paper .mband__track{ color:var(--black); }
.mband--outline .mband__track{ color:transparent; -webkit-text-stroke:1px var(--grey-dim); }
.mband__track span{ padding:0 28px; display:flex; align-items:center; gap:28px; }
.mband__track span::after{ content:"✦"; font-size:14px; opacity:.6; } @keyframes marquee-flat{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes marquee-flat-rev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes badge-spin{ to{ transform:rotate(360deg); } }
.mband__track{ animation:marquee-flat 20s linear infinite; }
#mband2{ animation-name:marquee-flat-rev; animation-duration:24s; }
.hero__marquee-track{ animation:marquee-flat 26s linear infinite; }
.marquee__track{ animation:marquee-flat 24s linear infinite; }
.hero__badge-spin{ animation:badge-spin 14s linear infinite; transform-origin:64px 64px; }
@media (prefers-reduced-motion: reduce){
.mband__track, .hero__marquee-track, .marquee__track, .hero__badge-spin{ animation:none; }
} .marquee-section{ padding:40px 0; background:var(--charcoal); border-bottom:1px solid var(--line); }
.marquee-section__label{ text-align:center; font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--grey); margin-bottom:24px; }
.marquee{ overflow:hidden; position:relative; }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:110px; z-index:2; }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--charcoal),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--charcoal),transparent); }
.marquee__track{ display:flex; gap:56px; width:max-content; }
.brand-chip{
display:flex; align-items:center; gap:10px;
font-family:var(--f-display); font-weight:700; font-size:19px; text-transform:uppercase;
color:var(--grey-dim); white-space:nowrap; transition:color .3s;
}
.brand-chip:hover{ color:var(--acid); }
.brand-chip svg{ width:18px; height:18px; flex:none; } .section-head{ max-width:680px; margin-bottom:60px; }
.section-head h2{ font-size:clamp(36px, 5vw, 64px); color:var(--paper); }
.section-head p{ font-size:17.5px; color:var(--grey); margin-top:18px; font-weight:500; } .services{ padding:130px 0 110px; background:var(--black); }
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.service-card{
background:var(--black);
padding:44px 34px 38px;
position:relative; overflow:hidden;
transition:background .4s var(--ease);
}
.service-card::before{
content:""; position:absolute; inset:0; z-index:0; opacity:0;
background:radial-gradient(circle at 20% 0%, rgba(229,0,78,0.35), transparent 60%);
transition:opacity .5s var(--ease);
}
.service-card:hover::before{ opacity:1; }
.service-card:hover{ background:var(--charcoal); }
.service-card__num{
font-family:var(--f-mono); font-size:12.5px; color:var(--acid);
position:relative; z-index:1; margin-bottom:30px; display:block;
}
.service-card h3{ position:relative; z-index:1; font-size:30px; text-transform:none; letter-spacing:-0.01em; margin-bottom:14px; color:var(--paper); }
.service-card p{ position:relative; z-index:1; color:var(--grey); font-size:15px; margin-bottom:24px; font-weight:500; }
.service-card ul{ position:relative; z-index:1; list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px; }
.service-card li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--paper); font-weight:600; }
.service-card li::before{ content:"→"; color:var(--crimson); font-weight:900; flex:none; }
.service-card__link{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--paper); }
.service-card__link svg{ width:15px; height:15px; transition:transform .3s var(--spring); }
.service-card:hover .service-card__link svg{ transform:translateX(6px); }
@media (max-width: 980px){ .services__grid{ grid-template-columns:1fr; } } .gallery{ position:relative; height:400vh; }
.gallery__pin{ position:relative; height:100vh; height:100dvh; overflow:hidden; display:flex; align-items:center; } .gallery.no-gsap{ height:auto; }
.gallery.no-gsap .gallery__pin{ height:auto; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.gallery.no-gsap .gallery__track{ transform:none !important; }
.gallery.no-gsap .gallery__panel{ scroll-snap-align:start; height:80vh; height:80dvh; }
.gallery.no-gsap .gallery__progress{ display:none; }
.gallery__track{ display:flex; flex-shrink:0; width:400%; will-change:transform; }
.gallery.no-gsap .gallery__track{ width:auto; }
.gallery__panel{
position:relative; width:25%; flex:none; height:100vh; height:100dvh;
display:flex; align-items:flex-end;
overflow:hidden;
}
.gallery.no-gsap .gallery__panel{ width:100%; }
.gallery__panel img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:grayscale(1) contrast(1.2) brightness(0.5);
}
.gallery__panel::before{
content:""; position:absolute; inset:0;
background:linear-gradient(0deg, rgba(3,3,3,0.92) 0%, rgba(3,3,3,0.2) 45%, rgba(229,0,78,0.28) 100%);
}
.gallery__panel-content{ position:relative; z-index:2; padding:70px 60px; }
.gallery__panel-tag{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--acid); margin-bottom:14px; }
.gallery__panel-title{ font-size:clamp(40px,7vw,96px); color:var(--paper); max-width:900px; }
.gallery__progress{ position:absolute; bottom:36px; left:60px; z-index:3; display:flex; gap:8px; }
.gallery__progress i{ width:34px; height:3px; background:var(--line); display:block; position:relative; overflow:hidden; }
.gallery__progress i::after{ content:""; position:absolute; inset:0; background:var(--acid); transform:scaleX(0); transform-origin:left; }
.gallery__progress i.is-active::after{ transform:scaleX(1); transition:transform .3s; }
@media (max-width: 720px){ .gallery__panel-content{ padding:40px 28px; } .gallery__progress{ left:28px; } } .quiz{ padding:120px 0; background:var(--charcoal); }
.quiz__panel{ display:grid; grid-template-columns:1fr 1fr; background:var(--black); border:1px solid var(--line); }
.quiz__options{ padding:46px 42px; border-right:1px solid var(--line); }
.quiz__options h3{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--grey); margin-bottom:24px; font-family:var(--f-mono); }
.quiz__option{
width:100%; text-align:left; display:flex; align-items:center; gap:16px;
background:transparent; border:1px solid var(--line); border-radius:0;
padding:19px 22px; margin-bottom:12px; color:var(--paper);
transition:border-color .3s, background .3s, transform .3s var(--spring);
}
.quiz__option:hover{ border-color:var(--crimson); transform:translateX(6px); }
.quiz__option.is-active{ background:var(--crimson); border-color:var(--crimson); }
.quiz__option .num{ font-family:var(--f-mono); font-size:13px; color:var(--grey); flex:none; width:26px; }
.quiz__option.is-active .num{ color:rgba(255,255,255,0.75); }
.quiz__option .txt{ font-weight:800; font-size:16px; }
.quiz__result{ padding:46px 42px; display:flex; flex-direction:column; }
.quiz__result-badge{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acid); margin-bottom:16px; }
.quiz__result-title{ font-size:32px; margin-bottom:16px; color:var(--paper); text-transform:none; letter-spacing:-0.01em; }
.quiz__result-desc{ color:var(--grey); font-size:15px; font-weight:500; margin-bottom:28px; flex:1; }
.quiz__result-bars{ display:grid; gap:15px; margin-bottom:28px; }
.qbar__label{ display:flex; justify-content:space-between; font-size:12px; font-family:var(--f-mono); color:var(--grey); margin-bottom:7px; }
.qbar__track{ height:8px; background:var(--line-soft); overflow:hidden; }
.qbar__fill{ height:100%; background:linear-gradient(90deg,var(--crimson),var(--acid)); width:0%; }
@media (max-width: 880px){ .quiz__panel{ grid-template-columns:1fr; } .quiz__options{ border-right:none; border-bottom:1px solid var(--line); } } .calc{ padding:120px 0; background:var(--black); }
.calc__panel{ display:grid; grid-template-columns:1.1fr 0.9fr; border:1px solid var(--line); }
.calc__inputs{ padding:50px 46px; background:var(--charcoal); }
.calc__inputs h3{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:36px; font-family:var(--f-mono); color:var(--grey); font-weight:800; }
.slider-row{ margin-bottom:36px; }
.slider-row__top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.slider-row__top label{ font-weight:800; font-size:15px; color:var(--paper); }
.slider-row__value{ font-family:var(--f-mono); font-weight:700; color:var(--acid); font-size:19px; }
input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; background:var(--line); outline:none; }
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none; width:24px; height:24px; border-radius:50%;
background:var(--crimson); border:4px solid var(--black); box-shadow:0 0 0 2px var(--crimson);
cursor:pointer; transition:transform .2s var(--spring);
}
input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.2); }
input[type="range"]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--crimson); border:4px solid var(--black); cursor:pointer; }
.pill-group{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{ padding:10px 18px; border:1.5px solid var(--line); font-weight:800; font-size:13px; color:var(--grey); background:transparent; text-transform:uppercase; letter-spacing:.02em; transition:all .25s var(--ease); }
.pill.is-active{ background:var(--acid); color:var(--black); border-color:var(--acid); }
.pill:hover:not(.is-active){ border-color:var(--paper); color:var(--paper); }
.calc__output{ background:var(--crimson); color:#fff; padding:50px 42px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.calc__output::before{ content:""; position:absolute; inset:-40%; background:radial-gradient(circle at 80% 10%, rgba(0,0,0,0.28), transparent 60%); }
.calc__output-item{ position:relative; z-index:1; margin-bottom:28px; }
.calc__output-item:last-child{ margin-bottom:0; }
.calc__output-label{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,0.75); margin-bottom:8px; }
.calc__output-value{ font-family:var(--f-display); font-size:46px; font-weight:900; display:flex; align-items:baseline; gap:8px; }
.calc__output-value small{ font-family:var(--f-mono); font-size:14px; font-weight:400; color:rgba(255,255,255,0.75); }
.calc__output hr{ border:none; border-top:1px solid rgba(255,255,255,0.25); position:relative; z-index:1; margin:0 0 28px; }
.calc__cta{ margin-top:10px; position:relative; z-index:1; }
@media (max-width: 900px){ .calc__panel{ grid-template-columns:1fr; } } .process{ padding:120px 0; background:var(--charcoal); }
.process__list{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.process__item{ padding:38px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.process__item::before{ content:""; position:absolute; inset:0; background:var(--crimson); transform:translateY(101%); transition:transform .5s var(--ease); z-index:0; }
.process__item:hover::before{ transform:translateY(0); }
.process__num{ font-family:var(--f-display); font-size:52px; color:transparent; -webkit-text-stroke:1.5px var(--acid); margin-bottom:24px; display:block; position:relative; z-index:1; }
.process__item h3{ position:relative; z-index:1; font-size:20px; text-transform:none; letter-spacing:-0.01em; margin-bottom:10px; color:var(--paper); }
.process__item p{ position:relative; z-index:1; font-size:14.5px; color:var(--grey); font-weight:500; transition:color .4s; }
.process__item:hover p{ color:rgba(255,255,255,0.85); }
@media (max-width: 900px){ .process__list{ grid-template-columns:1fr 1fr; } } .results{ padding:120px 0; background:var(--black); }
.results__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); margin-bottom:70px; }
.stat-card{ background:var(--black); padding:34px 28px; transition:background .3s; }
.stat-card:hover{ background:var(--charcoal); }
.stat-card__value{ font-family:var(--f-display); font-size:50px; color:var(--crimson); display:flex; align-items:baseline; gap:2px; }
.stat-card__label{ font-size:13px; color:var(--grey); font-weight:700; margin-top:10px; text-transform:uppercase; letter-spacing:.02em; }
@media (max-width: 900px){ .results__stats{ grid-template-columns:1fr 1fr; } }
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.case-card{ padding:36px 30px; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--charcoal); transition:background .4s; }
.case-card:hover{ background:#1c1a20; }
.case-card__tag{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:16px; }
.case-card__num{ font-family:var(--f-display); font-size:56px; margin-bottom:8px; color:var(--acid); }
.case-card__desc{ font-size:14.5px; font-weight:500; color:var(--grey); }
@media (max-width: 900px){ .cases{ grid-template-columns:1fr; } } .testi{ padding:120px 0; background:var(--charcoal); }
.testi__wrap{ position:relative; max-width:800px; margin:0 auto; }
.testi__track{ overflow:hidden; }
.testi__slides{ display:flex; }
.testi__slide{ flex:0 0 100%; background:var(--black); border:1px solid var(--line); padding:52px 56px; text-align:center; }
.testi__stars{ color:var(--acid); font-size:19px; letter-spacing:4px; margin-bottom:24px; }
.testi__quote{ font-family:var(--f-display); font-weight:800; font-size:27px; text-transform:none; letter-spacing:-0.01em; line-height:1.3; margin-bottom:28px; color:var(--paper); }
.testi__author{ font-size:14px; font-weight:700; color:var(--grey); font-family:var(--f-mono); }
.testi__author span{ color:var(--crimson); }
.testi__nav{ display:flex; justify-content:center; gap:10px; margin-top:28px; }
.testi__dot{ width:9px; height:9px; border-radius:50%; background:var(--line); border:none; padding:0; transition:background .3s, transform .3s; }
.testi__dot.is-active{ background:var(--acid); transform:scale(1.3); } .cta-band{ position:relative; padding:130px 0; overflow:hidden; isolation:isolate; }
.cta-band__bg{ position:absolute; inset:0; z-index:-2; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.2) brightness(0.35); }
.cta-band__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(3,3,3,0.94) 30%, rgba(229,0,78,0.55) 100%); }
.cta-band__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.cta-band h2{ font-size:clamp(38px,5vw,58px); margin-bottom:22px; color:var(--paper); }
.cta-band p{ font-size:17.5px; font-weight:500; color:var(--grey); max-width:440px; }
.cta-band__direct{
display:flex; flex-wrap:wrap; gap:14px 28px;
margin-top:28px; padding-top:26px; border-top:1px solid var(--line);
}
.cta-band__direct a{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--f-mono); font-size:14px; font-weight:700; color:var(--paper);
transition:color .25s;
}
.cta-band__direct a:hover{ color:var(--acid); }
.cta-band__direct svg{ width:18px; height:18px; flex:none; color:var(--acid); }
.form{ background:var(--black); border:1px solid var(--line); padding:38px 36px; display:grid; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form label{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--grey); margin-bottom:8px; display:block; }
.form input, .form textarea{
width:100%; border:1.5px solid var(--line); padding:14px 15px; font-family:inherit; font-size:14.5px; color:var(--paper);
background:var(--charcoal); transition:border-color .25s;
line-height:1.3;
}
.form input:focus, .form textarea:focus{ border-color:var(--acid); outline:none; }
.form textarea{ resize:vertical; min-height:90px; }
.form .btn{ width:100%; margin-top:6px; } .custom-select{ position:relative; }
.custom-select__trigger{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
border:1.5px solid var(--line); padding:14px 15px; font-family:inherit; font-size:14.5px;
color:var(--paper); background:var(--charcoal); text-align:left;
transition:border-color .25s; border-radius:0;
}
.custom-select__trigger svg{ width:15px; height:15px; flex:none; color:var(--acid); transition:transform .25s var(--ease); }
.custom-select.is-open .custom-select__trigger{ border-color:var(--acid); }
.custom-select.is-open .custom-select__trigger svg{ transform:rotate(180deg); }
.custom-select__list{
list-style:none; margin:6px 0 0; padding:6px;
position:absolute; top:100%; left:0; right:0; z-index:20;
background:var(--charcoal); border:1.5px solid var(--line);
max-height:240px; overflow-y:auto;
}
.custom-select__list[hidden]{ display:none; }
.custom-select__list li{
padding:12px 12px; font-size:14.5px; color:var(--paper);
cursor:pointer; transition:background .2s;
}
.custom-select__list li:hover, .custom-select__list li.is-active{ background:rgba(255,255,255,0.06); }
.custom-select__list li.is-selected{ color:var(--acid); font-weight:700; }
.form__note{ font-size:12px; color:var(--grey-dim); text-align:center; }
.form__success{ display:none; text-align:center; padding:32px 10px; }
.form__success.is-visible{ display:block; }
.form__success svg{ width:52px; height:52px; color:var(--acid); margin:0 auto 16px; }
.form.is-submitted .form__fields{ display:none; }
@media (max-width: 900px){ .cta-band__grid{ grid-template-columns:1fr; } .form__row{ grid-template-columns:1fr; } } footer{ background:var(--black); color:var(--grey); padding:70px 0 30px; border-top:1px solid var(--line); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line); }
.footer__brand img{ height:40px; margin-bottom:18px; filter:brightness(0) invert(1); }
.footer__brand p{ font-size:14px; max-width:280px; font-weight:500; }
.footer h5{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--paper); margin-bottom:18px; font-weight:700; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer a{ font-size:14px; font-weight:500; transition:color .25s; }
.footer a:hover{ color:var(--acid); }
.footer__social{ display:flex; gap:12px; margin-top:8px; }
.footer__social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:all .25s; }
.footer__social a:hover{ background:var(--crimson); border-color:var(--crimson); color:#fff; }
.footer__social svg{ width:17px; height:17px; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; flex-wrap:wrap; gap:12px; }
.footer__bottom a{ margin-left:20px; }
@media (max-width: 900px){ .footer__top{ grid-template-columns:1fr 1fr; } } @media (max-width: 640px){
.container{ padding:0 20px; } .nav{ padding:14px 20px; }
.nav.is-scrolled{ padding:10px 20px; }
.nav__brand img{ height:32px; }
.nav__mobile-panel{ padding:90px 20px 32px; }
.nav__mobile-panel a{ font-size:26px; padding:14px 2px; } .hero{ padding:110px 0 56px; }
.hero__headline{ font-size:clamp(38px, 11vw, 60px); }
.hero__sub{ font-size:16px; margin:20px 0 28px; }
.hero__cta-row{ gap:12px; }
.hero__cta-row .btn{ width:100%; }
.hero__trust{ font-size:11.5px; row-gap:6px; }
.hero__marquee{ opacity:.5; top:6%; }
.hero__marquee-track{ font-size:9vw; }
.hero__scroll{ display:none; } .mband{ height:52px; margin:6px 0; }
.mband__track{ font-size:17px; }
.mband__track span{ padding:0 16px; gap:16px; }
.mband__skew{ clip-path:polygon(0 8px, 100% 0, 100% calc(100% - 8px), 0 100%); }
.marquee-section{ padding:28px 0; }
.brand-chip{ font-size:15px; } .services{ padding:70px 0 60px; }
.quiz{ padding:70px 0; }
.calc{ padding:70px 0; }
.process{ padding:70px 0; }
.results{ padding:70px 0; }
.testi{ padding:70px 0; }
.cta-band{ padding:80px 0; }
.section-head{ margin-bottom:36px; }
.section-head h2{ font-size:clamp(28px, 9vw, 40px); } .service-card{ padding:32px 24px 28px; }
.service-card h3{ font-size:22px; } .gallery__panel-content{ padding:32px 22px; }
.gallery__panel-tag{ font-size:11px; }
.gallery__panel-title{ font-size:clamp(30px, 10vw, 52px); } .quiz__options, .quiz__result{ padding:30px 22px; }
.quiz__result-title{ font-size:24px; } .calc__inputs, .calc__output{ padding:32px 24px; }
.calc__output-value{ font-size:34px; } .process__list{ grid-template-columns:1fr; }
.process__item{ padding:28px 24px; }
.process__num{ font-size:38px; margin-bottom:14px; } .results__stats{ grid-template-columns:1fr 1fr; }
.stat-card{ padding:22px 18px; }
.stat-card__value{ font-size:36px; }
.case-card{ padding:26px 22px; min-height:200px; }
.case-card__num{ font-size:40px; } .testi__slide{ padding:34px 24px; }
.testi__quote{ font-size:19px; } .cta-band h2{ font-size:clamp(30px, 9vw, 42px); }
.form{ padding:26px 22px; } .footer__top{ grid-template-columns:1fr; gap:32px; }
footer{ padding:50px 0 24px; }
.footer__bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
.footer__bottom a{ margin-left:0; margin-right:16px; }
}
@media (max-width: 380px){
.hero__headline{ font-size:clamp(32px, 12vw, 48px); }
.results__stats{ grid-template-columns:1fr; }
.mband__track{ font-size:15px; }
} .cookie-banner{
position:fixed; left:0; right:0; bottom:0; z-index:500;
background:var(--black);
border-top:1px solid var(--line);
box-shadow:0 -20px 60px -20px rgba(0,0,0,0.6);
transform:translateY(100%);
transition:transform .5s var(--ease);
max-height:100dvh;
overflow-y:auto;
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner__inner{
max-width:var(--container); margin:0 auto;
padding:26px 32px;
display:flex; align-items:center; gap:32px; flex-wrap:wrap;
}
.cookie-banner__text{ flex:1 1 420px; min-width:0; }
.cookie-banner__text h3{
font-size:18px; text-transform:none; letter-spacing:-0.01em; color:var(--paper);
margin-bottom:8px;
}
.cookie-banner__text p{ font-size:13.5px; color:var(--grey); line-height:1.6; }
.cookie-banner__text a{ color:var(--acid); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner__actions{
display:flex; gap:12px; flex-wrap:wrap; flex:0 0 auto;
}
.cookie-banner__actions .btn{ padding:13px 22px; font-size:13px; }
.cookie-banner__panel{
max-width:var(--container); margin:0 auto;
padding:0 32px 28px;
display:grid; gap:16px;
border-top:1px solid var(--line);
margin-top:4px; padding-top:22px;
}
.cookie-banner__panel[hidden]{ display:none; }
.cookie-banner__panel h4{
font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--grey);
font-family:var(--f-mono); font-weight:700;
}
.cookie-cat{
background:var(--charcoal); border:1px solid var(--line); border-radius:14px;
padding:16px 18px;
}
.cookie-cat__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.cookie-cat__head span{ font-weight:800; font-size:14.5px; color:var(--paper); }
.cookie-cat p{ font-size:13px; color:var(--grey); line-height:1.55; margin:0; }
.switch{ position:relative; display:inline-block; width:44px; height:26px; flex:none; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .slider{
position:absolute; inset:0; cursor:pointer;
background:var(--line); border-radius:999px; transition:background .25s;
}
.switch .slider::before{
content:""; position:absolute; width:20px; height:20px; left:3px; top:3px;
background:var(--paper); border-radius:50%; transition:transform .25s var(--spring);
}
.switch input:checked + .slider{ background:var(--crimson); }
.switch input:checked + .slider::before{ transform:translateX(18px); }
.switch--locked .slider{ background:var(--green, #1E9E5A); cursor:default; opacity:.7; }
.switch--locked .slider::before{ transform:translateX(18px); }
.cookie-banner__panel-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.cookie-banner__panel-actions .btn{ padding:13px 22px; font-size:13px; }
@media (max-width: 640px){
.cookie-banner__inner{ padding:22px 20px; flex-direction:column; align-items:stretch; }
.cookie-banner__actions{ flex-direction:column; }
.cookie-banner__actions .btn{ width:100%; }
.cookie-banner__panel{ padding:0 20px 24px; padding-top:20px; }
.cookie-banner__panel-actions{ flex-direction:column; }
.cookie-banner__panel-actions .btn{ width:100%; }
} .brand-chip,.form__note{color:var(--grey)}
.service-card li::before,.testi__author span{color:var(--crimson-br)}
.quiz__option.is-active,.quiz__option.is-active .num,.calc__output-label,.calc__output-value small,.process__item:hover p{color:#fff} .da-root :focus-visible{outline:3px solid var(--acid);outline-offset:3px}
#inhalt:focus{outline:none}