/* ===================================================================== fitlune — shared stylesheet for content pages (Hakkımızda / İletişim / SSS) Replicated 1:1 from public/kinetic-light.html design system. Light luminous glass theme. Fonts are linked per-page in : Inter / Inter Tight / JetBrains Mono. ===================================================================== */ :root{ --ink:#15224a; --ink-deep:#0a1330; --blue:#2563eb; --blue-bright:#60a5fa; --purple:#2563eb; /* mor kalıntısı mavi palete bağlandı */ --purple-soft:#60a5fa; --green:#059669; --green-bright:#34d399; --paper:#fafbff; --glass:rgba(255,255,255,.55); --glass-brd:rgba(255,255,255,.7); --spring:cubic-bezier(.2,.8,.2,1); --shadow-soft:0 8px 24px -14px rgba(21,34,74,.22); --shadow-phone:0 25px 80px -12px rgba(0,0,0,.25); /* motion layer */ --fl-ease:cubic-bezier(.22,1,.36,1); --fl-dist:22px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;position:relative;min-height:100%;background:#dde6fb} /* Aşırı kaydırma (lastik bant): tuval rengi = footer'ın bittiği renk (alt esneme onu gösterir); üst esneme için belge ÜSTÜNE açık şerit. Alta şerit KOYMA: belge sonunun altına taşan içerik kaydırılabilir alan yaratıp sayfayı uzatıyor. */ html::before{content:"";position:absolute;left:0;right:0;top:-140vh;height:140vh;z-index:-10;pointer-events:none;background:#e6ebff} body{ font-family:'Inter',system-ui,sans-serif; color:var(--ink); /* the bright page theme used across the landing's light sections */ background:#e6ebff; -webkit-font-smoothing:antialiased; overflow-x:clip; line-height:1.5; } @supports not (overflow:clip){ body{overflow-x:hidden} } ::selection{background:rgba(96,165,250,.35);color:#fff} h1,h2,h3,h4,.tight{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.035em} .mono{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.16em;text-transform:uppercase} a{color:inherit} img{max-width:100%;display:block;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none} .wrap{width:100%;max-width:min(1480px,91vw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)} /* match the landing's desktop scale (kinetic-light.html runs at zoom .9 >=1100px) so nav/footer/everything are consistent */ @media(min-width:1100px){ html{ zoom:.9; } } /* narrower measure for long-form prose pages */ .wrap-narrow{width:100%;max-width:920px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)} /* ============ WORDMARK ============ */ .wm{font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1;display:inline-flex;align-items:baseline;text-decoration:none} .wm .dot{margin-left:.01em} /* ============ NAV ============ */ nav.site-nav{position:fixed;inset:0 0 auto 0;z-index:90;transition:all .5s var(--spring)} .nav-inner{ display:flex;align-items:center;justify-content:space-between; height:64px;margin-top:14px;padding:0 20px;border-radius:22px; background:rgba(12,19,48,.42); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); transition:all .5s var(--spring); contain:paint;isolation:isolate; } nav.site-nav.scrolled .nav-inner{ background:rgba(255,255,255,.62); border-color:var(--glass-brd); box-shadow:var(--shadow-soft); } .nav-inner .wm{font-size:23px;color:#fff;transition:color .5s var(--spring)} .nav-inner .wm .dot{color:var(--blue-bright);transition:color .5s var(--spring)} nav.site-nav.scrolled .wm{color:var(--ink)} nav.site-nav.scrolled .wm .dot{color:var(--blue)} .nav-inner .wm,.nav-inner .wm:hover,.nav-inner .wm:focus{text-decoration:none!important} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{ font-size:14.5px;font-weight:500;text-decoration:none; color:rgba(255,255,255,.78);transition:color .3s;position:relative; } .nav-links a:not(.btn)::after{ content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:left center; transition:transform .3s var(--spring); } .nav-links a:not(.btn):hover{color:#fff} .nav-links a:not(.btn):hover::after, .nav-links a:not(.btn):focus-visible::after{transform:scaleX(1)} nav.site-nav.scrolled .nav-links a{color:rgba(21,34,74,.72)} nav.site-nav.scrolled .nav-links a:hover{color:var(--ink)} /* flat language toggle — identical to the landing (globe + TR|EN|DE dividers, active = ink bold, no pill) */ .lang{display:inline-flex;align-items:center;background:none;border:none;padding:0} .lang .lang-globe{width:16px;height:16px;margin-right:9px;flex:none;color:rgba(21,34,74,.5)} .lang span{padding:2px 9px;font-size:13.5px;font-weight:600;color:rgba(21,34,74,.4);cursor:pointer;user-select:none;transition:color .2s;min-height:24px;display:inline-flex;align-items:center} .lang span:not(:last-child){border-right:1px solid rgba(21,34,74,.2)} .lang span:hover{color:rgba(21,34,74,.72)} .lang span.on{color:var(--ink);font-weight:700} .lang span:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 21px;border-radius:13px;font-weight:700;font-size:14.5px; background:#ffffff; color:#15224a!important;text-decoration:none;cursor:pointer;border:none; box-shadow:inset 0 0 0 1.5px #15224a,0 6px 14px -10px rgba(21,34,74,.18); transition:transform .3s var(--spring),box-shadow .3s var(--spring),color .3s; position:relative;overflow:hidden;isolation:isolate; } .btn::before{content:"";position:absolute;inset:0;background:#15224a;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--spring);z-index:-1;border-radius:inherit} .btn:hover,.btn:active{color:#fff!important} .btn:hover::before,.btn:active::before{transform:scaleX(1)} .btn:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px #15224a,0 10px 22px -12px rgba(21,34,74,.28)} .btn:active{transform:translateY(0) scale(.98)} .btn .arr{transition:transform .3s var(--spring)} .btn:hover .arr{transform:translateX(3px)} /* ============ MOBILE BURGER + DRAWER (display:none on desktop) ============ */ .nav-burger{display:none} .m-drawer,.nav-scrim{display:none} /* respect [hidden] even when mobile sets display:flex/block */ .m-drawer[hidden],.nav-scrim[hidden]{display:none!important} /* keep gutter stable while the drawer locks the body */ body[style*="position: fixed"]{overflow-y:scroll} @media(max-width:880px){ .nav-inner{height:56px;margin-top:10px;padding:0 8px 0 16px;border-radius:18px} .nav-inner .wm{font-size:22px} .nav-links{display:none!important} .nav-burger{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-4px;border:none;cursor:pointer;border-radius:13px;background:transparent;-webkit-tap-highlight-color:transparent;transition:background .25s var(--spring)} .nav-burger:active{background:rgba(21,34,74,.10)} .nav-burger:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .nb-box{position:relative;width:20px;height:14px;display:block} .nb-box span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#fff;transition:transform .34s var(--spring),opacity .2s ease,top .34s var(--spring),background .5s var(--spring)} nav.site-nav.scrolled .nb-box span{background:var(--ink)} .nb-box span:nth-child(1){top:0}.nb-box span:nth-child(2){top:6px}.nb-box span:nth-child(3){top:12px} .nav-burger[aria-expanded="true"] .nb-box span{background:#fff} nav.site-nav.scrolled .nav-burger[aria-expanded="true"] .nb-box span{background:var(--ink)} .nav-burger[aria-expanded="true"] .nb-box span:nth-child(1){top:6px;transform:rotate(45deg)} .nav-burger[aria-expanded="true"] .nb-box span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] .nb-box span:nth-child(3){top:6px;transform:rotate(-45deg)} .nav-scrim{display:block;position:fixed;inset:0;z-index:95;background:rgba(10,19,48,.34);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .3s ease} .nav-scrim.open{opacity:1} .m-drawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;z-index:96;width:min(86vw,360px);height:100vh;height:100dvh;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) 24px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(244,247,255,.96));border-left:1px solid var(--glass-brd);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:-26px 0 64px -22px rgba(21,34,74,.42);transform:translateX(102%);transition:transform .42s var(--spring);overflow-y:auto;overscroll-behavior:contain} .m-drawer.open{transform:translateX(0)} .m-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px} .m-drawer-head .wm{font-size:24px;font-weight:800;color:var(--ink)} .m-drawer-head .wm .dot{color:var(--blue)} .m-close{width:44px;height:44px;display:grid;place-items:center;margin-right:-8px;border:none;background:rgba(21,34,74,.05);color:var(--ink);cursor:pointer;border-radius:13px;-webkit-tap-highlight-color:transparent} .m-close:active{background:rgba(21,34,74,.10)} .m-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .m-nav{display:flex;flex-direction:column;position:static;inset:auto;z-index:auto} .m-link{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:6px 2px;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(21,34,74,.08);-webkit-tap-highlight-color:transparent} .m-link .m-arr{color:rgba(21,34,74,.32);font-size:17px;transition:transform .25s var(--spring),color .2s} .m-link:active{color:var(--blue)} .m-link:active .m-arr{transform:translateX(3px);color:var(--blue)} .m-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px} .m-lang-slot{margin-top:26px} .m-lang-slot .lang{display:inline-flex!important;gap:28px;width:auto;align-items:center;padding:12px 2px!important;border-radius:0!important;background:none!important;border:none!important} .m-lang-slot .lang .lang-globe{display:none!important} .m-lang-slot .lang span{position:relative;flex:none;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center;padding:0!important;border:none!important;border-radius:0!important;font-size:18px!important;font-weight:600;color:rgba(21,34,74,.34)!important;background:none!important} .m-lang-slot .lang span.on{background:none!important;color:var(--ink)!important;font-weight:800} .m-lang-slot .lang span.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--blue);border-radius:3px} .m-lang-slot .lang span:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .m-cta{margin-top:28px;position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:15px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:16px;background:#ffffff;color:#15224a;border:none;text-decoration:none;box-shadow:inset 0 0 0 1.5px #15224a,0 6px 14px -10px rgba(21,34,74,.2);-webkit-tap-highlight-color:transparent;transition:transform .2s var(--spring),color .3s} .m-cta::before{content:"";position:absolute;inset:0;background:#15224a;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--spring);z-index:-1;border-radius:inherit} .m-cta:active{transform:scale(.985);color:#fff} .m-cta:active::before{transform:scaleX(1)} .m-cta:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .m-cta .arr{transition:transform .25s var(--spring)} .m-cta:active .arr{transform:translateX(3px)} } /* ===================================================================== PAGE SHELL — the bright luminous content surface + ambient orbs ===================================================================== */ .page{position:relative;background:linear-gradient(180deg,#dbeafe 0%,#dde9fb 24%,#e3edfb 62%,#e8f3ff 100%);overflow:hidden;isolation:isolate} .page-orb{position:absolute;border-radius:50%;filter:blur(80px);mix-blend-mode:multiply;pointer-events:none;z-index:0;contain:layout paint} .po1{width:520px;height:520px;top:240px;right:-160px;background:rgba(96,165,250,.4);opacity:.4} .po2{width:480px;height:480px;top:1100px;left:-180px;background:rgba(96,165,250,.42);opacity:.4} .po3{width:440px;height:440px;bottom:280px;right:-120px;background:rgba(52,211,153,.3);opacity:.34} /* ===================================================================== PAGE HEADER (eyebrow + big H1 + lead) — on-brand content header ===================================================================== */ .page-head{position:relative;z-index:2;padding:clamp(120px,16vh,168px) 0 clamp(34px,5vw,58px)} .page-head .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:var(--blue);margin-bottom:20px} .page-head .eyebrow .ln{width:26px;height:1.5px;background:var(--blue);opacity:.5} .page-head h1{font-size:clamp(33px,5.2vw,58px);font-weight:800;line-height:1.04;color:var(--ink);letter-spacing:-.04em;max-width:18ch} .page-head h1 .brandword{color:var(--blue)} .page-head h1 .brandword .dot{color:var(--blue)} .page-head .lead{font-size:clamp(16px,1.35vw,18.5px);color:rgba(21,34,74,.66);max-width:62ch;margin-top:22px;line-height:1.62} /* ===================================================================== CONTENT SECTIONS ===================================================================== */ .sec{position:relative;z-index:2;padding:clamp(34px,4.4vw,64px) 0} .sec.sec-tight{padding-block:clamp(26px,3.4vw,46px)} .sec-head{max-width:62ch;margin-bottom:clamp(26px,3vw,40px)} .sec-head .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:var(--blue);margin-bottom:16px} .sec-head .eyebrow .ln{width:22px;height:1.5px;background:var(--blue);opacity:.5} .sec-head h2{font-size:clamp(26px,3.4vw,42px);font-weight:800;line-height:1.08;color:var(--ink);letter-spacing:-.035em} .sec-head .lead{font-size:clamp(15.5px,1.2vw,17.5px);color:rgba(21,34,74,.66);max-width:60ch;margin-top:16px;line-height:1.62} /* prose — long-form readable body copy */ .prose{max-width:64ch} .prose p{font-size:clamp(15.5px,1.15vw,17px);line-height:1.72;color:rgba(21,34,74,.74);margin-bottom:1.05em} .prose p:last-child{margin-bottom:0} .prose p b,.prose p strong{color:var(--ink);font-weight:700} .prose em{font-style:italic;color:rgba(21,34,74,.82)} .prose a{color:var(--blue);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(37,99,235,.28);transition:border-color .25s,color .25s} .prose a:hover{color:#1d4ed8;border-bottom-color:rgba(37,99,235,.7)} /* prose listeleri — global reset padding'i sıfırladığı için rakam/madde imleri içerik sütununun SOLUNA taşıyordu (mobilde ekran kenarına yapışma; hesap-silme reti değil ama Efe bildirimi, 22 Tem 2026). Kapsam yalnız .prose: nav/footer listeleri sıfır padding'e bilerek dayanır, onlara dokunma. */ .prose ol,.prose ul{padding-left:1.5em;margin-bottom:1.05em} .prose ol:last-child,.prose ul:last-child{margin-bottom:0} .prose li{font-size:clamp(15.5px,1.15vw,17px);line-height:1.72;color:rgba(21,34,74,.74);margin-bottom:.4em} .prose li:last-child{margin-bottom:0} .prose li::marker{color:rgba(21,34,74,.48);font-weight:600} /* ===================================================================== PILLAR / FEATURE GRID (cards) — glass cards, 2-col on desktop ===================================================================== */ .pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(20px,2.6vw,34px)} .pillar{ position:relative;border-radius:24px;padding:clamp(24px,2.4vw,32px);overflow:hidden; background:rgba(255,255,255,.62);border:1px solid var(--glass-brd); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-soft); transition:transform .5s var(--spring),box-shadow .5s var(--spring); contain:paint; } @media(hover:hover){.pillar:hover{transform:translateY(-5px);box-shadow:0 26px 56px -22px rgba(21,34,74,.28)}} .pillar:active{transform:translateY(-2px) scale(.992);transition-duration:.12s} .pillar .p-num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--blue);opacity:.85} .pillar h3{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(18px,1.5vw,21px);color:var(--ink);letter-spacing:-.025em;margin:14px 0 9px} .pillar p{font-size:14.5px;color:rgba(21,34,74,.66);line-height:1.6} .pillar p em{font-style:italic;color:rgba(21,34,74,.82)} /* ===================================================================== VALUES LIST — clean editorial bullets, no emoji ===================================================================== */ .values{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 40px;margin-top:clamp(18px,2vw,28px)} .value{display:flex;gap:16px;padding:20px 0;border-top:1px solid rgba(21,34,74,.1)} .value .v-mk{flex:none;width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)} .value .v-tx{font-size:15px;line-height:1.6;color:rgba(21,34,74,.7)} .value .v-tx b,.value .v-tx strong{display:block;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:-.015em;color:var(--ink);margin-bottom:4px} .value .v-tx a{color:var(--blue);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(37,99,235,.28)} .value .v-tx a:hover{border-bottom-color:rgba(37,99,235,.7)} /* ===================================================================== FAQ ACCORDION — native
/, premium + animated ===================================================================== */ .faq{margin-top:clamp(18px,2vw,28px);border-top:1px solid rgba(21,34,74,.1)} .faq details{border-bottom:1px solid rgba(21,34,74,.1)} .faq summary{ list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px; min-height:64px;padding:18px 4px; font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(16px,1.4vw,19px);letter-spacing:-.02em; color:var(--ink);-webkit-tap-highlight-color:transparent; } .faq summary::-webkit-details-marker{display:none} .faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px} .faq summary:hover{color:#1d2c58} .faq .q-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:rgba(37,99,235,.08);color:var(--blue);transition:transform .3s var(--spring),background .25s} .faq .q-ic svg{width:15px;height:15px;transition:transform .3s var(--spring)} .faq details[open] .q-ic{background:var(--blue);color:#fff} .faq details[open] .q-ic svg{transform:rotate(45deg)} .faq .a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--fl-ease)} .faq details[open] .a-wrap{grid-template-rows:1fr} .faq .a-inner{overflow:hidden} .faq .a-inner p{font-size:15px;line-height:1.68;color:rgba(21,34,74,.7);padding:0 4px 22px} .faq .a-inner p a{color:var(--blue);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(37,99,235,.28)} .faq .a-inner p a:hover{border-bottom-color:rgba(37,99,235,.7)} .faq .a-inner p b,.faq .a-inner p strong{color:var(--ink);font-weight:700} /* ===================================================================== CONTACT CARDS BLOCK ===================================================================== */ .contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(20px,2.6vw,34px)} .contact-card{ position:relative;border-radius:24px;padding:clamp(24px,2.4vw,32px); background:rgba(255,255,255,.62);border:1px solid var(--glass-brd); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-soft);text-decoration:none;display:block; transition:transform .5s var(--spring),box-shadow .5s var(--spring); } @media(hover:hover){.contact-card:hover{transform:translateY(-5px);box-shadow:0 26px 56px -22px rgba(21,34,74,.28)}} .contact-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px} .contact-card .c-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;color:#fff;background:linear-gradient(160deg,#3b82f6,var(--blue));box-shadow:0 10px 22px -8px rgba(21,34,74,.4)} .contact-card .c-ic svg{width:22px;height:22px} .contact-card h3{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.025em;margin-bottom:8px} .contact-card p{font-size:14.5px;color:rgba(21,34,74,.66);line-height:1.55;margin-bottom:12px} .contact-card .c-val{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:16px;color:var(--blue);letter-spacing:-.01em} /* single support card — keep it from stretching the full row */ .contact-grid-solo{grid-template-columns:1fr;max-width:460px} /* social row — three official-account cards */ .contact-grid-social{grid-template-columns:repeat(3,1fr)} /* brand logos: mono ink tile, not the blue gradient */ .social-card .c-ic{background:none;color:var(--ink);box-shadow:none;border:1px solid var(--glass-brd);border-radius:13px} .social-card .c-ic svg{width:20px;height:20px} .social-card .c-val{color:rgba(21,34,74,.55);font-size:15px} /* ===================================================================== CLOSING CTA CARD — ana sayfadaki (kinetic-light.html) kapanış kartıyla BİREBİR: buzlu cam kart + mavi ışıltı + App Store / Google Play rozetleri. Değerler kinetik ana sayfadan port edildi (nihai render'ı). ===================================================================== */ .cta-wrap{background:linear-gradient(180deg,#e8f3ff 0%,#e9f0ff 52%,#e4e9ff 100%);padding:clamp(40px,5.5vw,86px) 0 clamp(32px,4vw,60px);position:relative;z-index:2;overflow-x:clip} .cta{position:relative;z-index:2;margin:0 auto;max-width:1120px; border-radius:36px;overflow:hidden;isolation:isolate;text-align:center; padding:clamp(48px,7vw,86px) clamp(28px,6vw,76px); background: radial-gradient(78% 96% at -2% -4%,rgba(96,165,250,.42),transparent 60%), radial-gradient(80% 98% at 102% 104%,rgba(96,165,250,.4),transparent 60%), rgba(255,255,255,.52); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.72); box-shadow:0 34px 80px -46px rgba(21,34,74,.34),inset 0 1px 0 rgba(255,255,255,.65)} .cta-in{position:relative;z-index:2} .cta .eyebrow{display:inline-flex;align-items:center;gap:8px;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:var(--purple);margin-bottom:16px} .cta .eyebrow .ln{width:22px;height:1.5px;background:var(--purple);opacity:.6} .cta h2{font-size:clamp(30px,4.4vw,54px);font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1.04;max-width:20ch;margin-inline:auto} .cta h2 .grad{background:linear-gradient(105deg,#93c5fd,#9bb0e0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .cta p{color:rgba(21,34,74,.66);font-size:17px;margin:18px auto 34px;max-width:520px;line-height:1.6} .cta .stores{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;justify-content:center} .storebadge{position:relative;width:198px;height:60px;display:inline-flex;align-items:center;justify-content:flex-start;gap:13px;padding:0 18px;border-radius:15px;text-decoration:none;cursor:default;color:#fff;background:linear-gradient(180deg,#23262e 0%,#090a0d 100%);border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 30px -16px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .3s var(--spring),box-shadow .3s var(--spring)} .storebadge::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(130% 80% at 50% -16%,rgba(255,255,255,.10),transparent 58%);pointer-events:none} @media(hover:hover){.storebadge:hover{transform:translateY(-2px);box-shadow:0 24px 44px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18)}} .storebadge .sb-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;color:#fff;position:relative;z-index:1} .storebadge .sb-ic svg{width:28px;height:28px;display:block} .storebadge:first-child .sb-ic svg{width:27px;height:27px;margin-top:-1px} .storebadge .sb-tx{display:flex;flex-direction:column;line-height:1.05;text-align:left;position:relative;z-index:1} .storebadge .sb-sm{font-size:10px;font-weight:500;letter-spacing:.02em;text-transform:none;opacity:.84} .storebadge .sb-lg{font-family:'Inter Tight',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.015em;margin-top:1px} @media(max-width:560px){ .cta .stores{flex-direction:column;align-items:stretch} .storebadge{width:100%} } /* ===================================================================== FOOTER ===================================================================== */ footer{position:relative;z-index:2;content-visibility:auto;contain-intrinsic-size:auto 540px; background:linear-gradient(180deg,#e4e9ff,#dde6fb);color:rgba(21,34,74,.62); padding:50px 0 36px} .foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid rgba(21,34,74,.1)} .foot-brand .wm{font-size:27px;color:var(--ink)}.foot-brand .wm .dot{color:var(--blue)} .foot-brand p{font-size:13.5px;margin-top:12px;max-width:280px;line-height:1.55;color:rgba(21,34,74,.55)} .foot-cols{display:flex;gap:56px;flex-wrap:wrap} .foot-col{min-width:0} .foot-col h5{font-size:11px;color:rgba(21,34,74,.45);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;font-weight:600} .foot-col a{display:block;font-size:14px;color:rgba(21,34,74,.66);text-decoration:none;margin-bottom:10px;transition:color .25s,transform .18s var(--spring);overflow-wrap:anywhere} .foot-col a:hover{color:var(--ink)} .foot-bot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-top:24px;font-size:13px;color:rgba(21,34,74,.5)} .foot-bot .legal{display:flex;gap:22px;flex-wrap:wrap} .foot-bot a{color:inherit;text-decoration:none;transition:color .25s} .foot-bot a:hover{color:var(--ink)} @media(hover:hover){ footer a:hover{transform:translateX(2px)} } /* ===================================================================== MOTION LAYER (fl-motion) — replicated from landing ===================================================================== */ /* 1. REVEAL */ .js .fl-rv{opacity:0;transform:translateY(var(--fl-dist));transition:opacity .72s var(--fl-ease),transform .72s var(--fl-ease);transition-delay:var(--fl-d,0ms)} .fl-rv.fl-in{opacity:1;transform:none} .fl-arm{will-change:transform,opacity} /* 2. HEADER ENTRANCE (load-driven; classes added by JS) */ .js .fl-hb{opacity:0;transform:translateY(18px)} .fl-ready .fl-hb{opacity:1;transform:none;transition:opacity .64s var(--fl-ease),transform .64s var(--fl-ease);transition-delay:var(--fl-hd,0ms)} .fl-ready .fl-hb-eyebrow{--fl-hd:40ms} .fl-ready .fl-hb-h1{--fl-hd:120ms} .fl-ready .fl-hb-lead{--fl-hd:240ms} /* 3. MICRO-INTERACTIONS (compositor-only press feedback) */ .nav-links a:not(.btn):active{transform:scale(.97)} .lang span:active{transform:scale(.92)} .foot-col a:active,.foot-bot a:active{transform:translateX(2px)} /* 4. UNIVERSAL :focus-visible */ .btn:focus-visible,.nav-links a:focus-visible,.foot-col a:focus-visible,.foot-bot a:focus-visible,.prose a:focus-visible,.value .v-tx a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px} /* 4b. ACTIVE PAGE (aria-current) */ .foot-col a[aria-current="page"],.m-link[aria-current="page"]{color:var(--ink);font-weight:600} /* 4c. SKIP LINK (keyboard-only, revealed on focus) */ .skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 12px 0;font-weight:600;text-decoration:none} .skip-link:focus{left:0} /* 5. CONTAINMENT / LAYER HYGIENE */ .pillar,.contact-card{contain:paint} .page-orb{contain:layout paint} @media(max-width:768px){ .page-orb{filter:blur(54px)} } /* ===================================================================== RESPONSIVE ===================================================================== */ @media(max-width:768px){ .pillar-grid{grid-template-columns:1fr} .values{grid-template-columns:1fr;gap:0} .value:first-child{border-top:none} .contact-grid,.contact-grid-social{grid-template-columns:1fr} .cta{border-radius:24px;padding:34px 20px;max-width:none} .cta-wrap{padding-left:16px;padding-right:16px} .cta h2{font-size:clamp(27px,8vw,38px)} .cta p{font-size:15.5px;margin:14px auto 24px;max-width:none} .foot-top{flex-direction:column;gap:28px} .foot-brand p{max-width:none} .foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px} .foot-bot{flex-direction:column;align-items:flex-start;gap:14px} } @media(max-width:430px){ .page-head h1{font-size:clamp(28px,8.5vw,36px)} .foot-cols{grid-template-columns:1fr} } /* ===================================================================== REDUCED MOTION ===================================================================== */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} *,*::before,*::after{animation:none!important} .fl-rv,.fl-hb{opacity:1!important;transform:none!important;transition:none!important} .fl-arm{will-change:auto} .nav-links a:not(.btn)::after{transition:none!important} .faq .a-wrap{transition:none!important} :where(.pillar,.contact-card,.lang span,.nav-links a,.foot-col a):active{transform:none!important} .m-drawer{transition:opacity .2s ease!important;transform:translateX(0)!important;opacity:0;pointer-events:none} .m-drawer.open{opacity:1;pointer-events:auto} .nav-scrim,.nb-box span,.m-link .m-arr,.m-cta{transition:none!important} }