/* ══════════════════════════════════════════════════════════════
   PIXEL SOCIALS — Aurora Glass - ACT
   Design system: midnight ink base, drifting aurora ribbons,
   frosted glass surfaces with luminous 1px rims.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ink */
  --ink-900:#04050d;
  --ink-800:#070a16;
  --ink-700:#0b0f1e;

  /* aurora spectrum */
  --mint:#5EEAD4;
  --cyan:#38BDF8;
  --violet:#8B7CFF;
  --rose:#F472B6;
  --amber:#FBBF24;

  /* text */
  --fg:#EAF0FF;
  --fg-soft:rgba(232,239,255,.68);
  --fg-mute:rgba(232,239,255,.44);

  /* glass */
  --glass-bg:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.022) 55%,rgba(255,255,255,.05));
  --glass-brd:rgba(255,255,255,.13);
  --glass-blur:26px;
  --glass-shadow:0 24px 60px -28px rgba(2,4,14,.9), 0 2px 0 rgba(255,255,255,.05) inset;

  /* type */
  --f-display:"Bricolage Grotesque",-apple-system,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-body:"Outfit",-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  --wrap:1240px;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.68;
  color:var(--fg);
  background:var(--ink-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* height:auto ŞART: <img> üzerindeki width/height attribute'ları (CLS için var)
   tarayıcıda sunum ipucu olarak height:XXXpx gibi davranır ve CSS aspect-ratio'yu
   ezer. Bu kural onları etkisizleştirir; sabit yükseklik isteyen yerler
   (.logos__track img, .nav__logo img gibi) sınıf seçicisiyle yine kazanır. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--mint);color:#04050d}

.skip{position:fixed;left:-999px;top:0;z-index:999}
.skip:focus{left:12px;top:12px;padding:10px 16px;background:var(--mint);color:#04050d;border-radius:10px}

:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}

/* ══ AURORA BACKDROP ═══════════════════════════════════════════ */

.aurora{
  position:fixed;inset:-30vh -15vw;z-index:-3;
  filter:blur(70px) saturate(150%);
  pointer-events:none;
}
.aurora__band{
  position:absolute;
  border-radius:50%;
  mix-blend-mode:screen;
  will-change:transform;
}
.aurora__band--mint{
  width:64vw;height:54vw;left:-14vw;top:-14vh;
  background:radial-gradient(circle at 45% 45%,rgba(45,212,191,.95),rgba(45,212,191,.3) 42%,transparent 66%);
  animation:drift-a 26s var(--ease) infinite alternate;
}
.aurora__band--cyan{
  width:60vw;height:48vw;right:-16vw;top:-4vh;
  background:radial-gradient(circle at 55% 45%,rgba(56,189,248,.85),rgba(56,189,248,.24) 44%,transparent 68%);
  animation:drift-b 32s var(--ease) infinite alternate;
}
.aurora__band--violet{
  width:72vw;height:58vw;left:6vw;top:30vh;
  background:radial-gradient(circle at 50% 50%,rgba(129,110,255,.8),rgba(129,110,255,.22) 44%,transparent 68%);
  animation:drift-c 38s var(--ease) infinite alternate;
}
.aurora__band--rose{
  width:52vw;height:46vw;right:0;top:58vh;
  background:radial-gradient(circle at 50% 50%,rgba(244,114,182,.7),rgba(244,114,182,.18) 44%,transparent 68%);
  animation:drift-d 30s var(--ease) infinite alternate;
}
.aurora__band--amber{
  width:40vw;height:34vw;left:-6vw;top:74vh;
  background:radial-gradient(circle at 50% 50%,rgba(251,191,36,.5),rgba(251,191,36,.12) 44%,transparent 68%);
  animation:drift-b 34s var(--ease) infinite alternate-reverse;
}

@keyframes drift-a{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(14vw,10vh,0) scale(1.18)}
  100%{transform:translate3d(-6vw,20vh,0) scale(.94)}
}
@keyframes drift-b{
  0%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-16vw,14vh,0) scale(.9)}
  100%{transform:translate3d(6vw,-8vh,0) scale(1.2)}
}
@keyframes drift-c{
  0%{transform:translate3d(0,0,0) scale(.95)}
  50%{transform:translate3d(12vw,-12vh,0) scale(1.15)}
  100%{transform:translate3d(-14vw,6vh,0) scale(1.02)}
}
@keyframes drift-d{
  0%{transform:translate3d(0,0,0) scale(1.1)}
  100%{transform:translate3d(-18vw,-16vh,0) scale(.92)}
}

/* dark veil so glass + text read against the aurora */
.veil{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(130% 80% at 68% 22%,rgba(4,5,13,.06),rgba(4,5,13,.5) 58%,rgba(4,5,13,.78)),
    linear-gradient(180deg,rgba(4,5,13,.42),rgba(4,5,13,.3) 45%,rgba(4,5,13,.52));
}

/* film grain */
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* cursor-follow bloom */
.pointer-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;z-index:-1;
  margin:-260px 0 0 -260px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(94,234,212,.16),transparent 62%);
  filter:blur(28px);
  transition:opacity .5s ease;
  will-change:transform;
}
body.has-pointer .pointer-glow{opacity:1}

/* ══ PRIMITIVES ════════════════════════════════════════════════ */

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}

.glass{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:var(--glass-shadow);
}
/* luminous top rim */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 42%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;
  opacity:.9;
}

.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-soft);
  padding:7px 15px 7px 12px;border-radius:100px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.kicker .dot{
  width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 3px rgba(94,234,212,.18),0 0 14px var(--mint);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.45;transform:scale(.82)}}

.h2{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2rem,4.4vw,3.5rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:20px 0 0;
}
.h2 em{color:var(--mint)}

.lead{color:var(--fg-soft);max-width:60ch;margin-top:18px;font-size:clamp(15px,.5vw + 14px,17.5px)}
.lead--center{margin-inline:auto;text-align:center}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:100px;
  font-weight:500;font-size:15px;letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.btn--solid{
  color:#04050d;
  background:linear-gradient(115deg,var(--mint),var(--cyan) 55%,var(--violet));
  box-shadow:0 12px 34px -12px rgba(94,234,212,.6),0 1px 0 rgba(255,255,255,.5) inset;
}
.btn--solid:hover{box-shadow:0 20px 46px -14px rgba(94,234,212,.75),0 1px 0 rgba(255,255,255,.6) inset}

.btn--ghost{
  color:var(--fg);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}

.pill{
  display:inline-block;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;
  color:var(--mint);
  background:rgba(94,234,212,.1);
  border:1px solid rgba(94,234,212,.28);
}
.pill--alt{color:var(--violet);background:rgba(139,124,255,.12);border-color:rgba(139,124,255,.32)}
.pill--warm{color:var(--amber);background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3)}

/* reveal-on-scroll */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s);
}
.reveal.in{opacity:1;transform:none}

/* ══ NAV ═══════════════════════════════════════════════════════ */

.nav{position:fixed;top:14px;left:0;right:0;z-index:80;padding-inline:20px}
.nav__inner{
  width:min(100%,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:24px;
  padding:11px 11px 11px 22px;
  border-radius:100px;
  transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.stuck .nav__inner{
  padding-block:8px;
  box-shadow:0 18px 46px -22px rgba(2,4,14,.95),0 2px 0 rgba(255,255,255,.06) inset;
}

.nav__logo img{
  height:45px;width:auto;
  filter:invert(1) brightness(1.9);
  transition:filter .3s ease,transform .4s var(--ease);
}
.nav__logo:hover img{transform:scale(1.04)}

.nav__links{display:flex;gap:2px;margin-left:auto}
.nav__item{position:relative}
.nav__item > a{
  position:relative;display:flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:100px;
  font-size:14.5px;color:var(--fg-soft);white-space:nowrap;
  transition:color .3s ease,background .3s ease;
}
.nav__item > a::after{
  content:"";position:absolute;left:50%;bottom:5px;translate:-50% 0;
  width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--mint),var(--cyan));
  transition:width .35s var(--ease);
}
.nav__item > a:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.nav__item > a:hover::after{width:18px}
.nav__item.is-active > a{color:var(--fg)}
.nav__item.is-active > a::after{width:18px}
.nav__item > a svg{width:10px;height:10px;opacity:.6;transition:transform .35s var(--ease)}
.nav__item:hover > a svg{transform:rotate(180deg)}

.nav__sub{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;
  min-width:236px;padding:8px;border-radius:var(--r-md);
  display:flex;flex-direction:column;gap:1px;
  /* koyu zemin: altında görsel olsa bile menü okunur kalsın */
  background:linear-gradient(150deg,rgba(10,13,26,.74),rgba(6,8,18,.77));
  -webkit-backdrop-filter:blur(34px) saturate(150%);
  backdrop-filter:blur(34px) saturate(150%);
  box-shadow:0 30px 60px -26px rgba(2,4,14,.98),0 1px 0 rgba(255,255,255,.07) inset;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub::after{content:"";position:absolute;bottom:100%;left:0;right:0;height:14px}
.nav__sub a{
  padding:10px 14px;border-radius:11px;font-size:14px;color:var(--fg-soft);
  white-space:nowrap;transition:background .28s ease,color .28s ease,padding-left .3s var(--ease);
}
.nav__sub a:hover{background:rgba(255,255,255,.07);color:var(--fg);padding-left:19px}

.nav__right{display:flex;align-items:center;gap:10px}
.nav__cta{padding:11px 20px;font-size:14px}

.burger{display:none;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:16px;height:1.6px;background:var(--fg);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

.mobilemenu{position:fixed;inset:0;z-index:79;padding:88px 20px 20px;
  background:rgba(4,5,13,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mobilemenu__panel{border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:2px}
.mobilemenu__panel{max-height:calc(100svh - 108px);overflow-y:auto}
.mobilemenu__panel a{display:block;padding:13px 18px;border-radius:var(--r-sm);font-size:16.5px;color:var(--fg-soft)}
.mobilemenu__panel a:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.mobilemenu__panel a.is-sub{font-size:14.5px;padding-left:34px;color:var(--fg-mute);position:relative}
.mobilemenu__panel a.is-sub::before{
  content:"";position:absolute;left:20px;top:50%;width:7px;height:1px;
  background:var(--mint);opacity:.6;
}
.mobilemenu__panel .btn{justify-content:center;margin-top:10px;color:#04050d}

/* ══ HERO ══════════════════════════════════════════════════════ */

.hero{position:relative;padding:170px 0 90px;min-height:100svh;display:flex;flex-direction:column;justify-content:center}

.hero__grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;
}

.hero__title{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.7rem,6.6vw,5.4rem);
  line-height:.96;
  letter-spacing:-.045em;
  margin:26px 0 0;
}
.hero__title span{display:block}
.hero__title .serif{font-weight:400;letter-spacing:-.02em;color:rgba(234,240,255,.9)}
.hero__title .grad{
  background:linear-gradient(100deg,var(--mint),var(--cyan) 38%,var(--violet) 72%,var(--rose));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 100%;
  animation:shimmer 9s ease-in-out infinite;
}
@keyframes shimmer{50%{background-position:100% 0}}

.hero__lead{color:var(--fg-soft);max-width:50ch;margin-top:26px;font-size:clamp(15.5px,.5vw + 14px,18px)}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.hero__stats{display:flex;align-items:center;gap:clamp(16px,3vw,34px);margin-top:46px;flex-wrap:wrap}
.stat strong{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.7rem,2.6vw,2.35rem);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(120deg,#fff,rgba(94,234,212,.85));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat span{font-size:13px;color:var(--fg-mute);letter-spacing:.02em}
.stat__sep{width:1px;height:34px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent)}

/* hero stage */
.hero__stage{position:relative;height:clamp(430px,46vw,560px)}

.card3d{border-radius:var(--r-md);overflow:hidden;position:absolute;will-change:transform}

.card3d--a{
  width:56%;left:2%;top:4%;
  animation:float 9s ease-in-out infinite;
}
.card3d--a img{aspect-ratio:4/3.4;object-fit:cover;width:100%;filter:saturate(1.05) contrast(1.02)}
.card3d--b{
  width:41%;right:0;top:27%;
  animation:float 11s ease-in-out infinite reverse;
}
.card3d--b img{aspect-ratio:3/3.6;object-fit:cover;width:100%}

.card3d figcaption{
  display:flex;align-items:center;gap:9px;
  padding:13px 15px;font-size:13.5px;color:var(--fg-soft);
  background:rgba(6,9,20,.45);
}

.card3d--c{
  left:0;bottom:0;width:54%;padding:16px 18px;border-radius:var(--r-md);
}
.mini{display:flex;align-items:center;gap:14px}
.mini__avatars{display:flex}
.mini__avatars img{
  width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(10,14,28,.9);margin-left:-11px;
}
.mini__avatars img:first-child{margin-left:0}
.mini p{font-size:12.5px;line-height:1.45;color:var(--fg-mute)}
.mini strong{color:var(--fg);font-weight:500}

.card3d--d{
  right:4%;top:6%;padding:10px 16px;border-radius:100px;
  display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--fg-soft);
  white-space:nowrap;
}
.live{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint);animation:pulse 1.8s ease-in-out infinite}

.orb{
  position:absolute;inset:12% 8%;border-radius:50%;z-index:-1;
  background:conic-gradient(from 180deg,rgba(94,234,212,.5),rgba(139,124,255,.45),rgba(244,114,182,.4),rgba(94,234,212,.5));
  filter:blur(58px);opacity:.55;
  animation:spin 24s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-16px)}}

.float-slow{animation:float 10s ease-in-out infinite}
.float-fast{animation:float 7s ease-in-out infinite reverse}

.tilt{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}

.scrollcue{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:64px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg-mute);
}
.scrollcue span{
  width:1px;height:34px;
  background:linear-gradient(180deg,transparent,var(--mint));
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ══ TICKER ════════════════════════════════════════════════════ */

.ticker{
  overflow:hidden;padding:22px 0;margin:20px 0 40px;
  border-block:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{display:flex;align-items:center;gap:34px;width:max-content;animation:marquee 38s linear infinite}
.ticker span{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.3rem,2.6vw,2.1rem);letter-spacing:-.03em;
  color:rgba(234,240,255,.16);
  -webkit-text-stroke:.5px rgba(234,240,255,.2);
  white-space:nowrap;
}
.ticker i{color:var(--mint);font-size:14px;opacity:.55;font-style:normal}
@keyframes marquee{to{transform:translateX(-33.333%)}}

/* ══ SECTIONS ══════════════════════════════════════════════════ */

.section{padding:clamp(70px,9vw,130px) 0}
.section--tight{padding-block:clamp(50px,6vw,80px)}

.secthead{max-width:760px;margin:0 auto clamp(44px,5vw,68px);text-align:center;display:flex;flex-direction:column;align-items:center}
.secthead--split{
  max-width:none;text-align:left;align-items:flex-end;
  display:grid;grid-template-columns:1fr auto;gap:32px;
}
.secthead--split .lead{margin-top:0;max-width:38ch;text-align:right}
.secthead--split > div{display:flex;flex-direction:column;align-items:flex-start}

/* ══ ABOUT ═════════════════════════════════════════════════════ */

.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,72px);align-items:center}
.about__media{position:relative}
.about__frame{
  border-radius:var(--r-lg);padding:18px;overflow:hidden;
}
.about__frame img{border-radius:var(--r-md);width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:50% 22%}
.about__badge{
  position:absolute;right:-6px;bottom:-22px;
  border-radius:var(--r-md);padding:16px 20px;
  display:flex;align-items:center;gap:12px;
}
.about__badge strong{
  font-family:var(--f-display);font-weight:700;font-size:1.8rem;letter-spacing:-.04em;
  color:var(--mint);
}
.about__badge span{font-size:12px;line-height:1.35;color:var(--fg-mute)}

.about__copy{display:flex;flex-direction:column;align-items:flex-start}

.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;margin-top:32px;width:100%}
.checks li{
  display:flex;align-items:center;gap:11px;
  font-size:14.5px;color:var(--fg-soft);
}
.checks li::before{
  content:"";flex:none;width:20px;height:20px;border-radius:50%;
  background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.35);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.5' stroke='%235EEAD4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px;
}

/* ══ STEPS ═════════════════════════════════════════════════════ */

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.step{
  border-radius:var(--r-lg);padding:30px 26px 34px;
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.step:hover{transform:translateY(-8px);border-color:rgba(94,234,212,.35)}
.step__num{
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  color:var(--mint);
}
.step h3{
  font-family:var(--f-display);font-weight:600;font-size:1.22rem;letter-spacing:-.03em;
  line-height:1.16;margin:16px 0 10px;
}
.step p{font-size:14.5px;color:var(--fg-mute);line-height:1.6}

/* progressive tint down the row */
.steps .step:nth-child(2) .step__num{color:var(--cyan)}
.steps .step:nth-child(3) .step__num{color:var(--violet)}
.steps .step:nth-child(4) .step__num{color:var(--rose)}
.steps .step:nth-child(2):hover{border-color:rgba(56,189,248,.35)}
.steps .step:nth-child(3):hover{border-color:rgba(139,124,255,.35)}
.steps .step:nth-child(4):hover{border-color:rgba(244,114,182,.35)}

/* ══ WORKS ═════════════════════════════════════════════════════ */

.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.work{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(320px,30vw,400px);
  transition:transform .55s var(--ease);
}
.work--wide{grid-row:span 2;min-height:clamp(420px,46vw,600px)}
.work > img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform 1s var(--ease),filter .6s ease;
  filter:saturate(.9) brightness(.82);
}
.work::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,5,13,.05) 20%,rgba(4,5,13,.72));
  pointer-events:none;
}
.work:hover > img{transform:scale(1.06);filter:saturate(1.05) brightness(.9)}

.work__body{
  display:block;position:relative;z-index:2;width:calc(100% - 28px);
  margin:0 14px 14px;border-radius:var(--r-md);
  padding:22px 24px 24px;
  background:linear-gradient(150deg,rgba(10,14,28,.72),rgba(10,14,28,.5) 55%,rgba(10,14,28,.66));
}
.work__body h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.15rem,1.6vw,1.55rem);letter-spacing:-.035em;line-height:1.1;
  margin:14px 0 9px;
}
.work__body p{font-size:14px;color:var(--fg-mute);line-height:1.6;max-width:44ch}
.work__go{
  position:absolute;right:22px;top:22px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  transition:transform .45s var(--ease),background .45s var(--ease);
}
.work__go svg{width:16px;height:16px}
.work:hover .work__go{transform:rotate(45deg) scale(1.08);background:var(--mint);color:#04050d;border-color:transparent}

/* ══ SERVICES ══════════════════════════════════════════════════ */

.svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.svc{
  border-radius:var(--r-lg);padding:30px 26px 32px;
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .5s var(--ease);
  overflow:hidden;
}
.svc::after{
  content:"";position:absolute;inset:auto -30% -60% -30%;height:60%;
  background:radial-gradient(ellipse at 50% 0%,rgba(94,234,212,.22),transparent 70%);
  opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.svc:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.26)}
.svc:hover::after{opacity:1}

.svc__icon{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(94,234,212,.18),rgba(94,234,212,.04));
  border:1px solid rgba(94,234,212,.26);color:var(--mint);
  margin-bottom:22px;
}
.svc__icon svg{width:24px;height:24px}
.svcs .svc:nth-child(2) .svc__icon{background:linear-gradient(150deg,rgba(56,189,248,.18),rgba(56,189,248,.04));border-color:rgba(56,189,248,.26);color:var(--cyan)}
.svcs .svc:nth-child(3) .svc__icon{background:linear-gradient(150deg,rgba(139,124,255,.18),rgba(139,124,255,.04));border-color:rgba(139,124,255,.26);color:var(--violet)}
.svcs .svc:nth-child(4) .svc__icon{background:linear-gradient(150deg,rgba(251,191,36,.18),rgba(251,191,36,.04));border-color:rgba(251,191,36,.26);color:var(--amber)}
.svcs .svc:nth-child(2)::after{background:radial-gradient(ellipse at 50% 0%,rgba(56,189,248,.22),transparent 70%)}
.svcs .svc:nth-child(3)::after{background:radial-gradient(ellipse at 50% 0%,rgba(139,124,255,.22),transparent 70%)}
.svcs .svc:nth-child(4)::after{background:radial-gradient(ellipse at 50% 0%,rgba(251,191,36,.2),transparent 70%)}

.svc h3{
  font-family:var(--f-display);font-weight:600;font-size:1.18rem;
  letter-spacing:-.03em;line-height:1.14;margin-bottom:18px;
}
.svc ul{display:flex;flex-direction:column;gap:1px}
.svc li{
  font-size:14.5px;color:var(--fg-soft);
  padding:9px 0;border-top:1px solid rgba(255,255,255,.07);
  transition:color .3s ease,padding-left .35s var(--ease);
}
.svc li:hover{color:var(--fg);padding-left:6px}

/* ══ QUOTE ═════════════════════════════════════════════════════ */

.quote{
  border-radius:var(--r-lg);
  padding:clamp(36px,5vw,62px) clamp(28px,5vw,72px);
  max-width:900px;margin-inline:auto;text-align:center;
}
.quote__mark{
  display:block;font-family:var(--f-serif);font-size:5rem;line-height:.5;
  color:var(--mint);opacity:.5;margin-bottom:18px;
}
.quote blockquote{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.2rem,2.5vw,1.85rem);line-height:1.34;letter-spacing:-.03em;
  color:var(--fg);
}
.quote figcaption{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:32px;
}
.quote figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.quote figcaption span{text-align:left;font-size:13.5px;color:var(--fg-mute);line-height:1.45}
.quote figcaption strong{display:block;color:var(--fg);font-weight:500;font-size:15px}

/* ══ LOGOS ═════════════════════════════════════════════════════ */

.logos{
  overflow:hidden;padding:8px 0;margin-top:12px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.logos__track{display:flex;align-items:center;gap:20px;width:max-content;animation:marquee-half 44s linear infinite}
.logos__track img{
  height:88px;width:auto;max-width:170px;object-fit:contain;
  padding:16px 26px;border-radius:var(--r-md);
  background:rgba(248,250,255,.88);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 40px -24px rgba(2,4,14,.9);
  filter:grayscale(.55) contrast(1.02);
  transition:filter .45s ease,transform .45s var(--ease),background .45s ease,box-shadow .45s ease;
}
.logos__track img:hover{
  filter:none;transform:translateY(-5px);background:#fff;
  box-shadow:0 22px 44px -20px rgba(94,234,212,.4);
}
@keyframes marquee-half{to{transform:translateX(-50%)}}

/* ══ POSTS ═════════════════════════════════════════════════════ */

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.post{display:flex;flex-direction:column;gap:18px;transition:transform .5s var(--ease)}
.post__img{border-radius:var(--r-md);overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.09)}
.post__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(4,5,13,.5));
}
.post__img img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .9s var(--ease),filter .5s ease;filter:saturate(.85) brightness(.85)}
.post:hover{transform:translateY(-6px)}
.post:hover .post__img img{transform:scale(1.05);filter:saturate(1.05) brightness(.95)}
.post__meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)}
.post h3{
  font-family:var(--f-display);font-weight:600;font-size:1.22rem;
  letter-spacing:-.035em;line-height:1.2;margin-top:9px;
  transition:color .3s ease;
}
.post:hover h3{color:var(--mint)}

/* ══ CTA ═══════════════════════════════════════════════════════ */

.cta{
  border-radius:clamp(28px,4vw,44px);
  padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px);
  text-align:center;display:flex;flex-direction:column;align-items:center;
  overflow:hidden;
}
.cta__title{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.4rem,7vw,5rem);line-height:.95;letter-spacing:-.05em;
  margin:22px 0 0;
}
.cta__title em{
  color:transparent;
  background:linear-gradient(100deg,var(--mint),var(--violet));
  -webkit-background-clip:text;background-clip:text;
}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.cta__glow{
  position:absolute;left:50%;bottom:-55%;translate:-50% 0;
  width:110%;aspect-ratio:2/1;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(94,234,212,.34),rgba(139,124,255,.2) 45%,transparent 70%);
  filter:blur(46px);
  animation:breathe 8s ease-in-out infinite;
}
@keyframes breathe{50%{opacity:.62;transform:translate(-50%,0) scale(1.1)}}

/* ══ FOOTER ════════════════════════════════════════════════════ */

.footer{
  margin-top:clamp(40px,6vw,90px);
  padding-top:clamp(48px,6vw,80px);
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);
}
.footer__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:44px 32px;
  padding-bottom:56px;
}
.footer__logo{height:22px;width:auto;filter:invert(1) brightness(1.9)}
.footer__brand p{margin-top:20px;font-size:14.5px;color:var(--fg-mute);max-width:34ch}

.socials{display:flex;gap:9px;margin-top:24px}
.socials a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--fg-soft);
  transition:transform .4s var(--ease),background .4s ease,color .4s ease,border-color .4s ease;
}
.socials a svg{width:18px;height:18px}
.socials a:hover{transform:translateY(-3px);background:var(--mint);color:#04050d;border-color:transparent}

.footer__col{display:flex;flex-direction:column;gap:11px}
.footer__col h4{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg);
  margin-bottom:8px;
}
.footer__col a{font-size:14.5px;color:var(--fg-mute);width:fit-content;transition:color .3s ease,transform .3s var(--ease)}
.footer__col a:hover{color:var(--mint);transform:translateX(3px)}

.footer__bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.07);
  font-size:13px;color:var(--fg-mute);
}

/* ══ REELS — UGC VIDEO SHOWCASE ════════════════════════════════ */

.reels{overflow:hidden}
.reels__rail{
  display:flex;gap:clamp(14px,1.6vw,22px);
  justify-content:center;align-items:flex-start;
  /* "safe" keeps the first item reachable once the rail starts scrolling */
  justify-content:safe center;
  padding:8px clamp(16px,4vw,40px) 18px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reels__rail::-webkit-scrollbar{display:none}

.phone{flex:none;scroll-snap-align:center;width:clamp(168px,14.4vw,206px)}
.phone:nth-child(even){margin-top:clamp(18px,2.6vw,38px)}

.phone__frame{
  position:relative;border-radius:32px;padding:8px;
  background:linear-gradient(158deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 30%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.2));
  box-shadow:
    0 34px 70px -34px rgba(2,4,14,.95),
    0 0 0 1px rgba(255,255,255,.07),
    0 2px 14px rgba(94,234,212,.06) inset;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.phone__frame::before{
  content:"";position:absolute;inset:3px;border-radius:29px;
  background:linear-gradient(170deg,#171d31,#080b16 55%,#12172a);
  z-index:0;
}
.phone:hover .phone__frame{transform:translateY(-10px)}
.phone:hover .phone__frame{box-shadow:0 44px 82px -34px rgba(2,4,14,.95),0 0 0 1px rgba(94,234,212,.32),0 0 44px -12px rgba(94,234,212,.4)}

.phone__screen{
  position:relative;z-index:1;border-radius:25px;overflow:hidden;
  aspect-ratio:432/900;background:#05060f;
}
.phone__screen video,.phone__screen img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.phone__notch{
  position:absolute;z-index:3;top:0;left:50%;translate:-50% 0;
  width:42%;height:15px;border-radius:0 0 11px 11px;
  background:#080b16;
}
.phone__notch::after{
  content:"";position:absolute;right:22%;top:5px;
  width:5px;height:5px;border-radius:50%;
  background:rgba(94,234,212,.5);
}
.phone__glare{
  position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(126deg,rgba(255,255,255,.16) 0%,transparent 34%,transparent 66%,rgba(255,255,255,.07) 100%);
  mix-blend-mode:screen;
}
.phone__play{
  position:absolute;z-index:4;inset:auto 10px 10px auto;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,11,22,.55);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;opacity:0;transition:opacity .35s ease;
}
.phone__play svg{width:12px;height:12px}
.phone:hover .phone__play{opacity:1}
.phone.is-muted .phone__play{opacity:1}

.phone__label{
  display:flex;align-items:center;gap:7px;justify-content:center;
  margin-top:14px;font-size:12.5px;color:var(--fg-mute);text-align:center;
}
.phone__label b{
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mint);
  padding:3px 8px;border-radius:100px;
  background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.24);
}

.reels__chips{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:stretch;
  margin-top:clamp(28px,4vw,48px);
}
.chip{
  display:flex;align-items:center;gap:14px;
  padding:18px 26px;border-radius:var(--r-md);min-width:210px;
}
.chip__icon{font-size:22px;line-height:1}
.chip strong{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:1.75rem;line-height:1;letter-spacing:-.04em;
  background:linear-gradient(120deg,#fff,rgba(94,234,212,.85));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.chip span{font-size:12.5px;color:var(--fg-mute)}
.chip--cta{
  gap:18px;padding-right:14px;
  transition:transform .45s var(--ease),border-color .45s ease;
}
.chip--cta:hover{transform:translateY(-4px);border-color:rgba(94,234,212,.42)}
.chip--cta b{
  font-family:var(--f-display);font-weight:600;font-size:1.15rem;letter-spacing:-.03em;
}

.badge{position:relative;width:62px;height:62px;flex:none;display:grid;place-items:center}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.badge text{
  font-family:var(--f-mono);font-size:9.4px;letter-spacing:.16em;
  fill:var(--fg-mute);text-transform:uppercase;
}
.badge__core{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(120deg,var(--mint),var(--cyan));
  color:#04050d;
}
.badge__core svg{position:static;width:15px;height:15px;animation:none}

/* ══ PAGE HERO (inner pages) ═══════════════════════════════════ */

.pagehero{padding:clamp(150px,15vw,200px) 0 clamp(48px,6vw,80px);position:relative}
.pagehero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.pagehero--center .pagehero__grid{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:840px;margin-inline:auto}

.crumbs{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:20px;
}
.crumbs a{transition:color .3s ease}
.crumbs a:hover{color:var(--mint)}
.crumbs i{opacity:.4;font-style:normal}

.h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:.98;letter-spacing:-.045em;
  margin:18px 0 0;
}
.h1 em{
  font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
  color:transparent;background:linear-gradient(100deg,var(--mint),var(--cyan) 45%,var(--violet));
  -webkit-background-clip:text;background-clip:text;
}

.pagehero__media{position:relative}
.pagehero__media img{
  width:100%;border-radius:var(--r-lg);
  aspect-ratio:5/4;object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px -44px rgba(2,4,14,.95);
}
.pagehero__media::after{
  content:"";position:absolute;inset:8% 6%;z-index:-1;border-radius:50%;
  background:conic-gradient(from 140deg,rgba(94,234,212,.45),rgba(139,124,255,.4),rgba(244,114,182,.35),rgba(94,234,212,.45));
  filter:blur(56px);opacity:.5;animation:spin 26s linear infinite;
}

/* ══ PROSE ═════════════════════════════════════════════════════ */

.prose{max-width:74ch}
.prose p{color:var(--fg-soft);margin-top:18px}
.prose p:first-child{margin-top:0}
.prose--wide{max-width:none}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:start}

/* ══ FEATURE ROW ═══════════════════════════════════════════════ */

.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feature{
  border-radius:var(--r-md);padding:24px 22px 26px;
  transition:transform .5s var(--ease),border-color .5s ease;
}
.feature:hover{transform:translateY(-6px);border-color:rgba(94,234,212,.32)}
.feature span{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  font-family:var(--f-mono);font-size:12px;color:var(--mint);
  background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.24);
  margin-bottom:16px;
}
.feature h3{
  font-family:var(--f-display);font-weight:600;font-size:1.06rem;
  letter-spacing:-.03em;line-height:1.2;
}
.feature p{font-size:13.5px;color:var(--fg-mute);margin-top:8px;line-height:1.55}

/* ══ TIMELINE ══════════════════════════════════════════════════ */

.timeline{position:relative;display:flex;flex-direction:column;gap:14px}
.tl{
  display:grid;grid-template-columns:132px 1fr;gap:clamp(16px,3vw,40px);align-items:start;
  padding:26px 28px;border-radius:var(--r-md);
  transition:border-color .5s ease,transform .5s var(--ease);
}
.tl:hover{border-color:rgba(94,234,212,.3);transform:translateX(6px)}
.tl__year{
  font-family:var(--f-display);font-weight:700;font-size:1.9rem;
  letter-spacing:-.045em;line-height:1;
  background:linear-gradient(120deg,#fff,rgba(94,234,212,.8));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.tl h3{font-family:var(--f-display);font-weight:600;font-size:1.12rem;letter-spacing:-.03em}
.tl p{font-size:14px;color:var(--fg-mute);margin-top:7px}

/* ══ BENEFITS LIST ═════════════════════════════════════════════ */

.benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.benefits li{
  display:flex;gap:13px;align-items:flex-start;
  padding:18px 20px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  font-size:14.5px;color:var(--fg-soft);line-height:1.5;
  transition:background .4s ease,border-color .4s ease,transform .4s var(--ease);
}
.benefits li:hover{background:rgba(255,255,255,.06);border-color:rgba(94,234,212,.3);transform:translateY(-3px)}
.benefits li::before{
  content:"";flex:none;margin-top:2px;width:19px;height:19px;border-radius:6px;
  background:rgba(94,234,212,.14);border:1px solid rgba(94,234,212,.34);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.5' stroke='%235EEAD4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px;
}

/* ══ FORM ══════════════════════════════════════════════════════ */

.formcard{border-radius:var(--r-lg);padding:clamp(28px,4vw,48px)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);
}
.field label b{color:var(--mint);font-weight:400}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:15px;font-weight:300;color:var(--fg);
  padding:13px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  transition:border-color .3s ease,background .3s ease;
  width:100%;
}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5l4 4 4-4' stroke='%23EAF0FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:40px}
.field select option{background:#0b0f1e;color:var(--fg)}
.field input::placeholder,.field textarea::placeholder{color:rgba(232,239,255,.3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(94,234,212,.55);background:rgba(255,255,255,.07);
}
.field small{font-size:12px;color:var(--fg-mute)}

.consent{
  grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;color:var(--fg-mute);line-height:1.5;
}
.consent input{
  appearance:none;flex:none;margin-top:2px;width:20px;height:20px;border-radius:6px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);cursor:pointer;
  transition:background .3s ease,border-color .3s ease;
}
.consent input:checked{
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.5' stroke='%2304050d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:transparent;
}
.consent a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.form .btn{grid-column:1/-1;justify-content:center;justify-self:start}

.notice{
  grid-column:1/-1;padding:14px 18px;border-radius:var(--r-sm);font-size:14px;
  background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.3);color:var(--fg);
}
.notice--bad{background:rgba(244,114,182,.1);border-color:rgba(244,114,182,.34)}

/* ══ LOGO GRID ═════════════════════════════════════════════════ */

.logogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.logogrid > *{
  border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:16px;
  transition:transform .5s var(--ease),border-color .5s ease;
}
.logogrid > *:hover{transform:translateY(-6px);border-color:rgba(94,234,212,.32)}
.logogrid img{
  width:100%;object-fit:contain;border-radius:var(--r-sm);
  background:rgba(248,250,255,.9);padding:14px;height:96px;
  filter:grayscale(.5);transition:filter .4s ease;
}
.logogrid img.shot{
  height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;
  padding:0;background:none;filter:saturate(.9) brightness(.95);
}
.logogrid > *:hover img{filter:none}
.logogrid .cap{
  display:block;font-size:13.5px;color:var(--fg-mute);line-height:1.5;
  padding:0 6px 8px;
}
.logogrid .cap b{
  display:block;color:var(--fg);font-weight:500;font-size:15.5px;
  letter-spacing:-.01em;margin-bottom:4px;
}
.logogrid > *:hover .cap b{color:var(--mint)}

/* ══ POST LIST (blog index) ════════════════════════════════════ */

.postlist{display:flex;flex-direction:column}
.pl{
  display:grid;grid-template-columns:62px 1fr 190px auto;gap:clamp(16px,3vw,34px);
  align-items:center;padding:24px 4px;
  border-top:1px solid rgba(255,255,255,.09);
  transition:padding-left .45s var(--ease);
}
.postlist .pl:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.pl:hover{padding-left:14px}
.pl__n{font-family:var(--f-mono);font-size:12px;color:var(--mint)}
.pl h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.035em;line-height:1.16;
  transition:color .3s ease;
}
.pl:hover h3{color:var(--mint)}
.pl__thumb{border-radius:var(--r-sm);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.pl__thumb img{aspect-ratio:16/9;object-fit:cover;width:100%;filter:saturate(.85) brightness(.85);transition:filter .4s ease,transform .8s var(--ease)}
.pl:hover .pl__thumb img{filter:none;transform:scale(1.05)}
.pl__date{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);white-space:nowrap}

/* ══ FAQ (details/summary — JS'siz, erişilebilir) ══════════════ */

.faq{display:flex;flex-direction:column;gap:12px;max-width:860px;margin-inline:auto}
.faq__item{
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color .45s ease;
}
.faq__item[open]{border-color:rgba(94,234,212,.3)}
.faq__item summary{
  display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:22px 24px;cursor:pointer;list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1rem,1.5vw,1.15rem);letter-spacing:-.025em;line-height:1.3;
  transition:color .3s ease;
}
.faq__item summary:hover h3{color:var(--mint)}
.faq__icon{
  position:relative;flex:none;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:background .35s ease,border-color .35s ease,transform .45s var(--ease);
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  background:currentColor;border-radius:2px;
}
.faq__icon::before{width:11px;height:1.6px}
.faq__icon::after{width:1.6px;height:11px;transition:transform .35s var(--ease)}
.faq__item[open] .faq__icon{background:var(--mint);border-color:transparent;color:#04050d}
.faq__item[open] .faq__icon::after{transform:scaleY(0)}
.faq__item p{
  padding:0 24px 24px;margin:0;max-width:70ch;
  font-size:15px;color:var(--fg-soft);line-height:1.7;
}

/* ══ ARTICLE ═══════════════════════════════════════════════════ */

.article{max-width:74ch;margin-inline:auto}
.article__cover{
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:clamp(32px,4vw,54px);
  border:1px solid rgba(255,255,255,.12);
}
.article__cover img{width:100%;aspect-ratio:16/8;object-fit:cover}
.article h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.035em;line-height:1.12;
  margin:44px 0 14px;
}
.article h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.12rem,1.9vw,1.35rem);letter-spacing:-.03em;
  margin:32px 0 10px;
}
.article p{color:var(--fg-soft);margin-top:16px}
.article ul{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.article ul li{
  position:relative;padding-left:24px;color:var(--fg-soft);
}
.article ul li::before{
  content:"";position:absolute;left:4px;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--mint);
}
.article strong{color:var(--fg);font-weight:500}
.article__meta{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:26px;
}

.tablewrap{overflow-x:auto;margin-top:22px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.1)}
.tablewrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.tablewrap th,.tablewrap td{padding:13px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.tablewrap th{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg);background:rgba(255,255,255,.05);
}
.tablewrap td{color:var(--fg-soft)}
.tablewrap tr:last-child td{border-bottom:0}

/* ══ 404 ═══════════════════════════════════════════════════════ */

.notfound{
  min-height:78svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:150px 0 90px;
}
.notfound__code{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(6rem,20vw,15rem);line-height:.8;letter-spacing:-.06em;
  background:linear-gradient(100deg,var(--mint),var(--cyan) 40%,var(--violet) 72%,var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% 100%;animation:shimmer 9s ease-in-out infinite;
}

/* ══ RELATED CTA STRIP ═════════════════════════════════════════ */

.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.related a{
  border-radius:var(--r-md);padding:24px 26px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;
  transition:transform .5s var(--ease),border-color .5s ease;
}
.related a:hover{transform:translateY(-6px);border-color:rgba(94,234,212,.34)}
.related h3{font-family:var(--f-display);font-weight:600;font-size:1.05rem;letter-spacing:-.03em}
.related span{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
}
.related span svg{width:14px;height:14px}
.related a:hover span{background:var(--mint);color:#04050d;border-color:transparent}

/* ══ WHATSAPP FAB ══════════════════════════════════════════════ */

.wa{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 18px;border-radius:100px;
  font-size:14px;font-weight:500;color:#04050d;
  background:linear-gradient(120deg,#6EE7B7,#34D399);
  box-shadow:0 14px 34px -12px rgba(52,211,153,.75);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.wa svg{width:20px;height:20px}
.wa:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 44px -12px rgba(52,211,153,.9)}

/* ══ RESPONSIVE ════════════════════════════════════════════════ */

@media (max-width:1080px){
  .steps,.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px}
  .footer__brand{grid-column:1/-1}
}

@media (max-width:1180px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:flex}
  .nav__right{margin-left:auto}
}

@media (max-width:1080px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related{grid-template-columns:1fr}
  .pl{grid-template-columns:48px 1fr 150px auto;gap:20px}
}

@media (max-width:900px){
  .pagehero__grid{grid-template-columns:1fr;gap:38px}
  .split{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr;gap:10px}
  .pl{grid-template-columns:40px 1fr;gap:14px 18px}
  .pl__thumb{grid-column:1/-1;order:3}
  .pl__date{grid-column:1/-1;order:4}

  .hero{padding-top:130px;min-height:auto}
  .hero__grid{grid-template-columns:1fr;gap:52px}
  .hero__stage{height:min(96vw,460px);max-width:520px;margin-inline:auto;width:100%}

  .about{grid-template-columns:1fr;gap:56px}
  .about__frame{max-width:520px}

  .secthead--split{grid-template-columns:1fr;align-items:flex-start}
  .secthead--split .lead{text-align:left;margin-top:6px}

  .works{grid-template-columns:1fr}
  .work--wide{grid-row:auto;min-height:clamp(320px,60vw,420px)}

  .posts{grid-template-columns:1fr;gap:26px}
}

/* Mobilde display tipografisi: masaüstü clamp'lerinin alt sınırı dar ekranda
   kapsayıcının yarısını bile doldurmuyordu. Katsayılar gerçek metin genişliği
   ölçülerek çıkarıldı (en uzun satır kapsayıcının ~%93'ünü doldurur). */
@media (max-width:640px){
  .hero__title{font-size:clamp(2.8rem,calc(18.8vw - 6px),6rem)}
  .h1{font-size:clamp(2.4rem,calc(16.2vw - 5px),5rem)}
  .h2{font-size:clamp(2rem,9.4vw,3.5rem)}
  .cta__title{font-size:clamp(2.4rem,12.5vw,5rem)}
  .quote blockquote{font-size:clamp(1.2rem,5.4vw,1.85rem)}
}

@media (max-width:560px){
  .wrap{width:calc(100% - 32px)}
  .steps,.svcs,.checks,.features{grid-template-columns:1fr}
  .chip{width:100%;min-width:0}
  .logogrid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  /* dar ekranda butonlar yan yana sığmıyor; alt alta tam genişlik daha
     düzenli görünüyor ve dokunma alanını büyütüyor */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{justify-content:center}
  .cta__actions{flex-direction:column;align-items:stretch;width:100%}
  .cta__actions .btn{justify-content:center}

  .hero__stats{gap:18px}
  .stat__sep{display:none}
  .stat{min-width:44%}
  .logos__track img{height:64px;padding:12px 18px}
  .wa span{display:none}
  .wa{padding:14px;border-radius:50%}
  .quote figcaption{flex-direction:column;text-align:center}
  .quote figcaption span{text-align:center}
}

/* ══ MOTION SAFETY ═════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}