/* WirStartenKI.de landing (design handoff 2026-09-04). Tokens: navy #061E38,
   ink #0B1F35, cream #F4F1EC, accent #FF4D00 only for ::selection and focus. */
:root{--navy:#061E38;--ink:#0B1F35;--cream:#F4F1EC;--white:#fff;--accent:#FF4D00;--gutter:48px;--ease:cubic-bezier(.16,1,.3,1);--sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.wsk-landing{margin:0;background:var(--navy);color:var(--white);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
a:hover{opacity:.78}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin:0}
em{font-style:italic;font-weight:400}
img{max-width:100%;display:block}
.mono{font-family:var(--mono);font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--navy);padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.cream{background:var(--cream);color:var(--ink)}
.tex{background-color:#1a4e74;background-size:cover;background-position:center;background-repeat:no-repeat}
.tex-amber{background-color:#8a5a1c;background-image:var(--tex-amber)}
.tex-steel{background-color:#4a5c68;background-image:var(--tex-steel)}
.tex-teal{background-color:#1e5c50;background-image:var(--tex-teal)}
.tex-olive{background-color:#5c6420;background-image:var(--tex-olive)}
.tex-blue{background-color:#1a4e74;background-image:var(--tex-blue)}

/* buttons */
.btn{display:inline-block;border-radius:10px;font-size:16px;font-weight:500;line-height:1;transition:opacity .25s,background .25s}
.btn-glass{padding:12px 22px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:16px;font-weight:400}
.btn-glass:hover{background:rgba(255,255,255,.26);opacity:1}
.btn-white{padding:16px 28px;background:#fff;color:var(--navy)}
.btn-white:hover{opacity:.88}
.btn-outline{padding:14px 24px;border:1px solid rgba(255,255,255,.5);font-size:14px;font-weight:400;margin-top:8px}

/* field canvases + striations */
.field{position:absolute;inset:0;width:100%;height:100%;display:block;background:linear-gradient(180deg,#09284a,#061E38 60%,#0a2d52)}
.hero .field{filter:blur(1.5px)}
.stria{position:absolute;inset:0;pointer-events:none}
.stria-a{mix-blend-mode:soft-light;opacity:.85;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 3px,rgba(0,0,0,.35) 3px 6px,rgba(255,255,255,.22) 6px 9px,rgba(0,0,0,0) 9px 19px,rgba(255,255,255,.3) 19px 22px,rgba(0,0,0,.28) 22px 25px,rgba(0,0,0,0) 25px 34px)}
.stria-b{mix-blend-mode:overlay;opacity:.5;background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 4px,rgba(0,0,0,0) 4px 12px,rgba(0,0,0,.3) 12px 16px,rgba(0,0,0,0) 16px 62px,rgba(255,255,255,.28) 62px 66px,rgba(0,0,0,0) 66px 108px)}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,30,56,.55),rgba(6,30,56,.12) 30%,rgba(6,30,56,.18) 70%,rgba(6,30,56,.5))}

/* hero */
.hero{position:relative;height:100vh;min-height:780px;overflow:hidden}
.banner{position:relative;z-index:3;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(6,30,56,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:14px}
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;height:96px;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:500;letter-spacing:-.01em}
.brand img{width:38px;height:38px}
.nav-links{display:flex;align-items:center;gap:36px;font-size:16px}
.lang-form{display:flex;align-items:center;position:relative}
.lang-form select{appearance:none;-webkit-appearance:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 30px 8px 14px;font:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer}
.lang-form::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.lang-form select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lang-form option{color:var(--ink);background:#fff}
.hero-copy{position:absolute;z-index:2;left:var(--gutter);top:230px;display:flex;flex-direction:column;gap:28px;animation:fade 1.2s ease both}
.hero-copy h1{font-weight:400;font-size:clamp(64px,7.6vw,132px);line-height:.98;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.hero-copy p{font-size:20px;color:rgba(255,255,255,.85);letter-spacing:-.005em}
.yt-card{position:absolute;z-index:2;left:var(--gutter);bottom:36px;display:flex;gap:14px;align-items:center;padding:14px;width:330px;background:rgba(6,30,56,.45);border:1px solid rgba(255,255,255,.14);border-radius:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .3s}
.yt-card:hover{opacity:1;border-color:rgba(255,255,255,.4)}
.yt-thumb{width:160px;height:90px;flex:none;border-radius:8px;overflow:hidden}
.yt-thumb img{width:160px;height:90px;object-fit:cover;display:block}
.yt-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.yt-text span:first-child{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.yt-text .mono{font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.5}
.hero-claim{position:absolute;z-index:2;right:var(--gutter);bottom:44px;width:min(620px,46vw);display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.hero-claim p{font-size:clamp(22px,1.9vw,30px);line-height:1.3;letter-spacing:-.015em;text-wrap:pretty}

/* trust marquee */
.trust{padding:72px 0 40px;display:flex;flex-direction:column;gap:36px;align-items:center}
.trust .label{font-size:13px;color:rgba(6,30,56,.55)}
.marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 40s linear infinite}
.mark{height:92px;display:grid;place-items:center;flex:none}
.mark img{filter:grayscale(1);opacity:.75;height:40px;width:auto}
.mark img[height="24"]{height:24px}

/* petals */
.petals{position:relative;height:360vh}
.sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;overflow:hidden;padding:40px var(--gutter)}
.flower{position:relative;width:min(700px,88vw,62vh);aspect-ratio:1}
.disc-center{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:2;border-radius:50%;background:rgba(11,31,53,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:6%;color:rgba(255,255,255,.92)}
.disc-center .big{font-size:clamp(34px,3.4vw,52px);font-weight:300;letter-spacing:-.04em;line-height:1}
.disc-center .mono{font-size:clamp(12px,1.2vw,15px);opacity:.8}
.petal{position:absolute;width:44%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.72);opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease);border-radius:50%;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:10%;overflow:hidden;isolation:isolate}
.petal::before{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.8;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 3px,rgba(0,0,0,.35) 3px 6px,rgba(255,255,255,.2) 6px 9px,rgba(0,0,0,0) 9px 19px,rgba(255,255,255,.3) 19px 22px,rgba(0,0,0,.28) 22px 25px,rgba(0,0,0,0) 25px 34px)}
.petal::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(4,14,26,.62),rgba(4,14,26,.18) 62%,rgba(4,14,26,0) 82%)}
.petal.p-a{left:50%;top:9%}
.petal.p-b{left:85.5%;top:70.5%}
.petal.p-c{left:14.5%;top:70.5%}
.petal>*{position:relative;z-index:1}
.petal .mono{font-size:11.5px;color:rgba(255,255,255,.78)}
.petal .figure{font-size:clamp(32px,3.2vw,48px);font-weight:300;letter-spacing:-.04em;line-height:1;color:rgba(255,255,255,.94)}
.flower[data-reveal="1"] .petal:nth-of-type(1),.flower[data-reveal="2"] .petal:nth-of-type(1),.flower[data-reveal="2"] .petal:nth-of-type(2),.flower[data-reveal="3"] .petal{opacity:1;transform:translate(-50%,-50%) scale(1)}
.petals-quote{max-width:820px;text-align:center;font-size:clamp(17px,1.6vw,22px);line-height:1.5;color:rgba(11,31,53,.78);text-wrap:pretty}
.petals-quote em{color:var(--ink)}

/* ring */
.ring-section{background:var(--navy);color:#fff;padding:140px var(--gutter) 180px;display:flex;flex-direction:column;align-items:center;gap:72px}
.ring-section h2{font-weight:400;font-size:clamp(40px,4.4vw,66px);line-height:1.02;letter-spacing:-.035em;text-align:center}
.ring{position:relative;width:min(760px,100%);aspect-ratio:1;display:grid;place-items:center}
/* .ring-disc carries the four circle layers; on desktop it fills .ring exactly, so the
   geometry is unchanged. .ring-chips is display:contents, so the chips stay absolutely
   positioned against .ring. Both exist so the mobile layout can reflow them (2026-09-06). */
.ring-disc{position:absolute;inset:0;display:grid;place-items:center}
.ring-chips{display:contents}
.ring-glow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(120,160,195,.22),rgba(6,30,56,0) 70%);filter:blur(30px)}
.ring-field,.ring-arc,.ring-stria{position:absolute;inset:10%;border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 62%,#000 68%,#000 92%,transparent 97%);mask:radial-gradient(circle,transparent 62%,#000 68%,#000 92%,transparent 97%)}
.ring-field{width:80%;height:80%;filter:blur(.6px);background:linear-gradient(180deg,#0b2f55,#1a4e74)}
.ring-arc{background:conic-gradient(from 0deg,rgba(6,30,56,.85) 0deg,rgba(6,30,56,0) 42deg,rgba(255,255,255,.14) 92deg,rgba(6,30,56,.7) 150deg,rgba(6,30,56,.88) 208deg,rgba(255,255,255,.1) 268deg,rgba(6,30,56,.6) 320deg,rgba(6,30,56,.85) 360deg);mix-blend-mode:multiply;filter:blur(6px)}
.ring-stria{pointer-events:none;mix-blend-mode:soft-light;opacity:.9;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 3px,rgba(0,0,0,.4) 3px 6px,rgba(255,255,255,.2) 6px 9px,rgba(0,0,0,0) 9px 19px,rgba(255,255,255,.3) 19px 22px,rgba(0,0,0,.3) 22px 25px,rgba(0,0,0,0) 25px 34px)}
.ring-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:300px;text-align:center;animation:fade .5s ease both}
.ring-name{font-size:34px;letter-spacing:-.025em;line-height:1.05}
.ring-note{font-size:15px;line-height:1.5;color:rgba(255,255,255,.7);text-wrap:pretty}
.chip{all:unset;cursor:pointer;position:absolute;transform:translate(-50%,-50%);z-index:3;font-family:var(--mono);font-size:14px;padding:12px 18px;border-radius:8px;background:rgba(6,30,56,.72);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;transition:color .3s,border-color .3s}
.chip.is-active,.chip:hover{border-color:rgba(255,255,255,.55);color:#fff}
.chip:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* impact stack */
.impact{position:relative;height:520vh}
.impact .sticky{gap:0;padding:0}
.impact-grid{display:grid;grid-template-columns:1fr 460px 1fr;align-items:center;gap:56px;max-width:1400px;width:100%;padding:0 var(--gutter)}
.impact-left{justify-self:end;text-align:right}
.impact-left,.impact-right{font-weight:400;font-size:clamp(30px,2.8vw,44px);letter-spacing:-.03em;line-height:1.05;transition:opacity .5s}
.stack{position:relative;height:min(620px,78vh)}
.card{position:absolute;left:0;right:0;bottom:0;height:min(580px,73vh);border-radius:20px;overflow:hidden;color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -40px rgba(2,12,24,.9);transition:transform .8s var(--ease),opacity .8s var(--ease),filter .8s;isolation:isolate;transform:translateY(calc(var(--d)*-26px)) scale(calc(1 - var(--d)*.055));z-index:calc(10 - var(--d));opacity:calc(1 - var(--d)*.12);filter:blur(calc(var(--d)*1.6px))}
.card.is-hidden{opacity:0}
.card::before{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.7;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 3px,rgba(0,0,0,.35) 3px 6px,rgba(255,255,255,.2) 6px 9px,rgba(0,0,0,0) 9px 19px,rgba(255,255,255,.3) 19px 22px,rgba(0,0,0,.28) 22px 25px,rgba(0,0,0,0) 25px 34px)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,26,.42),rgba(4,14,26,.12) 38%,rgba(4,14,26,.28) 72%,rgba(4,14,26,.66))}
.card .step,.card-body{position:relative;z-index:1}
.card .step{position:absolute;top:40px;right:38px;font-size:12px;color:rgba(255,255,255,.7)}
.card-body{position:absolute;left:38px;right:38px;bottom:44px;display:flex;flex-direction:column;gap:14px}
.card-body .mono{font-size:12px;color:rgba(255,255,255,.7)}
.card-body .figure{font-size:clamp(46px,4.6vw,68px);font-weight:300;letter-spacing:-.04em;line-height:.98;color:rgba(255,255,255,.94)}
.card .rule{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
.card-body p{font-size:16px;line-height:1.5;text-wrap:pretty;color:rgba(255,255,255,.8)}

/* partners */
.partners{border-top:1px solid rgba(11,31,53,.12);padding:120px var(--gutter);display:flex;flex-direction:column;align-items:center;gap:56px}
.partners h2{font-weight:400;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.025em;text-align:center;text-wrap:balance}
.partner-row{display:flex;gap:64px;align-items:center;flex-wrap:wrap;justify-content:center}
.partner-row span{display:flex;align-items:center;gap:14px;font-size:17px;color:rgba(11,31,53,.9)}
.partner-row img{width:36px;height:auto}

/* insights */
.insights{border-top:1px solid rgba(11,31,53,.12)}
.insights .wrap{padding-top:140px;padding-bottom:160px;display:flex;flex-direction:column;gap:64px}
.insights-head{display:flex;justify-content:space-between;align-items:baseline}
.insights-head h2{font-weight:400;font-size:48px;letter-spacing:-.03em}
.insights-head a{font-size:15px;color:rgba(11,31,53,.7)}
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.post{display:flex;flex-direction:column;gap:20px;color:var(--ink)}
.post:hover{opacity:1}
.post-thumb{display:block;aspect-ratio:4/3;border-radius:14px;position:relative;overflow:hidden;transition:transform .45s var(--ease)}
.post-thumb.tex::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 3px,transparent 3px 9px)}
.post-thumb.has-img{background:#e9e4dc}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post:hover .post-thumb{transform:scale(1.015)}
.post-text{display:flex;flex-direction:column;gap:10px}
.post-text .mono{font-size:12px;color:rgba(11,31,53,.5)}
.post-title{font-size:22px;line-height:1.3;letter-spacing:-.015em;text-wrap:pretty}

/* go-rocket */
.gorocket{border-top:1px solid rgba(11,31,53,.12)}
.gorocket .wrap{padding-top:120px;padding-bottom:120px;display:flex;flex-direction:column;gap:28px}
.gorocket .eyebrow{font-size:12px;color:rgba(11,31,53,.55);max-width:none;line-height:1.6}
.gorocket .eyebrow-lead{font-family:var(--sans);font-size:22px;letter-spacing:-.02em;color:var(--ink);display:inline-block;margin-bottom:6px}
.petals-quote br{display:block;content:"";margin-top:.35em}
.gr-card{position:relative;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:48px;padding:48px;border-radius:18px;overflow:hidden;color:#fff;transition:transform .45s var(--ease);isolation:isolate}
.gr-card:hover{transform:scale(1.006);opacity:1}
.gr-card::before{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.8;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 3px,rgba(0,0,0,.35) 3px 6px,rgba(255,255,255,.2) 6px 9px,rgba(0,0,0,0) 9px 19px,rgba(255,255,255,.3) 19px 22px,rgba(0,0,0,.28) 22px 25px,rgba(0,0,0,0) 25px 34px)}
.gr-card::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,14,26,.72),rgba(4,14,26,.34) 55%,rgba(4,14,26,.12))}
.gr-copy,.gr-mat{position:relative;z-index:1}
.gr-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.gr-copy .mono{font-size:12px;color:rgba(255,255,255,.7)}
.gr-title{font-size:clamp(30px,3vw,46px);line-height:1.05;letter-spacing:-.035em}
.gr-mat{display:block;border-radius:12px;overflow:hidden;background:var(--cream);padding:18px;box-shadow:0 30px 70px -30px rgba(2,10,20,.85)}
.gr-mat img{width:100%;height:auto;border-radius:6px}

/* newsletter */
.newsletter{border-top:1px solid rgba(11,31,53,.12)}
.newsletter .wrap{padding-top:120px;padding-bottom:120px;display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.newsletter h2{font-weight:400;font-size:44px;line-height:1.05;letter-spacing:-.03em}
.nl-form{display:flex;border-bottom:1px solid rgba(11,31,53,.35);padding-bottom:12px;gap:16px}
.nl-form:focus-within{border-color:var(--ink)}
.nl-form input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-family:var(--sans);font-size:17px}
.nl-form input::placeholder{color:currentColor;opacity:.45}
.nl-form button{all:unset;cursor:pointer;font-size:15px;padding:4px 0;font-family:var(--sans)}
.nl-form button:hover{opacity:.7}
.nl-form button:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* booking */
.booking{position:relative;overflow:hidden;padding:140px var(--gutter) 160px}
.booking-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#061E38,rgba(6,30,56,.15) 22%,rgba(6,30,56,.2) 78%,#061E38)}
.glass{position:relative;max-width:1280px;margin:0 auto;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(6,30,56,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.glass-left{display:flex;flex-direction:column;gap:36px;min-height:420px}
.glass-left>.mono{font-size:13px;color:rgba(255,255,255,.6)}
.glass-left h2{font-weight:400;font-size:clamp(38px,3.8vw,56px);line-height:1.03;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.glass-left p{font-size:18px;line-height:1.55;color:rgba(255,255,255,.78);max-width:440px;text-wrap:pretty}
.founder{margin-top:auto;display:flex;flex-direction:column;gap:20px}
.founder-row{display:flex;align-items:center;gap:16px}
.founder-row img{width:64px;height:64px;border-radius:10px}
.founder-row>span{display:flex;flex-direction:column;gap:4px;font-size:16px}
.founder-row .mono{font-size:12px;color:rgba(255,255,255,.6)}
.founder-links{display:flex;gap:24px;font-size:14px;color:rgba(255,255,255,.8)}
.founder-links a{display:inline-flex;align-items:center;gap:9px}
.white-card{background:#fff;border-radius:14px;padding:36px;display:flex;flex-direction:column;gap:28px;color:var(--navy)}
.wc-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:500}
.wc-brand img{width:30px;height:30px;border-radius:6px}
.wc-lead{display:flex;flex-direction:column;gap:6px}
.wc-lead span:first-child{font-size:17px;color:rgba(6,30,56,.75)}
.wc-lead .mono{font-size:11px;color:rgba(6,30,56,.45)}
.pill{padding:16px;background:var(--navy);color:#fff;border-radius:999px;text-align:center;font-size:16px;font-weight:500;transition:background .25s}
.pill:hover{background:#0b2e52;opacity:1}
.wc-foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:12px;color:rgba(6,30,56,.55)}
.wc-foot a{color:var(--navy)}

/* footer */
.footer{border-top:1px solid rgba(255,255,255,.1);max-width:1280px;margin:0 auto;padding:40px var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,255,255,.5);gap:24px;flex-wrap:wrap}
.footer-brand{font-size:18px;font-weight:500;color:#fff}
.footer nav{display:flex;gap:32px;flex-wrap:wrap}
.footer nav a{color:rgba(255,255,255,.6)}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* mobile and narrow viewports */
@media (max-width:900px){
  :root{--gutter:24px}
  .hero{height:auto;min-height:0;padding-bottom:36px}
  .banner{font-size:13px;padding:0 12px;text-align:center;height:auto;min-height:44px}
  .nav{height:72px}
  .nav-links{gap:18px;font-size:15px}
  .nav-links a:not(.btn){display:none}
  .nav-links{gap:10px}
  .nav .brand{font-size:19px;gap:8px;min-width:0;white-space:nowrap}
  .nav-links .btn{white-space:nowrap;padding:9px 14px;font-size:14px}
  .lang-form select{padding:7px 26px 7px 11px;font-size:12px}
  .btn-glass{padding:10px 16px;font-size:15px}
  .hero-copy{position:relative;left:auto;top:auto;padding:56px var(--gutter) 40px}
  .hero-copy h1{font-size:clamp(46px,13vw,72px)}
  .yt-card,.hero-claim{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:0 var(--gutter)}
  .hero-claim{margin-top:28px;width:auto}
  .trust{padding:56px 0 24px}
  .petals,.impact{height:auto}
  .petals .sticky,.impact .sticky{position:relative;height:auto;padding:80px var(--gutter);overflow:visible}
  /* Petals: the desktop flower overlaps at phone width, so the circles stack (2026-09-06). */
  .flower{width:100%;max-width:none;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:18px}
  /* position:relative, never static: the pseudo-elements must keep the circle as their
     containing block, otherwise the striation escapes across the whole flower. */
  .flower .disc-center,.flower[data-reveal] .petal{position:relative;left:auto;top:auto;transform:none;opacity:1;transition:none}
  .flower .disc-center{width:min(42vw,168px);padding:10%}
  .flower[data-reveal] .petal{width:min(64vw,248px);padding:13%;gap:10px}
  .petal .mono{font-size:12.5px;line-height:1.35}
  .petals .sticky{gap:44px}
  /* Ring: the circle stays on phones (it was display:none), the chips wrap underneath it. */
  .ring-section{padding:96px var(--gutter) 120px;gap:40px}
  .ring{display:flex;flex-direction:column;align-items:center;gap:28px;aspect-ratio:auto;width:100%}
  .ring-disc{position:relative;inset:auto;width:min(84vw,340px);aspect-ratio:1;flex:none}
  .ring-center{max-width:74%;animation:none}
  .ring-name{font-size:27px}
  .ring-note{font-size:14px}
  .ring-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .chip{position:static;transform:none;white-space:normal;text-align:center;font-size:13px;padding:10px 14px}
  .impact-grid{grid-template-columns:1fr;gap:28px;padding:0}
  .impact-left{justify-self:start;text-align:left}
  .impact-right{display:none}
  .stack{height:auto;display:flex;flex-direction:column;gap:20px}
  .card{position:relative;height:auto;min-height:380px;transform:none!important;opacity:1!important;filter:none!important}
  .card-body{position:relative;left:auto;right:auto;bottom:auto;padding:88px 28px 32px}
  .card .step{top:28px;right:28px}
  .partners{padding:80px var(--gutter)}
  .partner-row{gap:28px}
  .insights .wrap,.gorocket .wrap,.newsletter .wrap{padding-top:80px;padding-bottom:80px}
  .insights-grid,.newsletter .wrap{grid-template-columns:1fr;gap:40px}
  .insights-head h2{font-size:36px}
  .gr-card{grid-template-columns:1fr;padding:28px;gap:28px}
  .newsletter h2{font-size:34px}
  .booking{padding:80px var(--gutter) 96px}
  .glass{grid-template-columns:1fr;padding:28px;gap:36px}
  .glass-left{min-height:0}
  .footer{flex-direction:column;align-items:flex-start;gap:20px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .hero-copy,.ring-center{animation:none}
  .flower .petal{opacity:1;transition:none}
  .card,.post-thumb,.gr-card{transition:none}
}
@media (max-width:480px){.nav-links .btn{display:none}}