:root {
  --bg: #05070e;
  --bg-2: #070a13;
  --ink: #ffffff;
  --muted: rgba(233, 238, 251, 0.66);
  --faint: rgba(233, 238, 251, 0.42);
  --glass: rgba(255, 255, 255, 0.055);
  --glass-2: rgba(255, 255, 255, 0.09);
  --glass-line: rgba(255, 255, 255, 0.13);
  --glass-line-soft: rgba(255, 255, 255, 0.07);
  --teal: #5eead4;
  --blue: #7aa2ff;
  --violet: #c084fc;
  --grad: linear-gradient(100deg, #5eead4 0%, #7aa2ff 48%, #c084fc 100%);
  --grad-soft: linear-gradient(100deg, rgba(94,234,212,0.16), rgba(122,162,255,0.16) 50%, rgba(192,132,252,0.16));
  --radius: 22px;
  --radius-sm: 16px;
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --display: "Sora", "Inter", sans-serif;
  --maxw: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* soft ambient page glows */
.page-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(800px 600px at 82% 8%, rgba(122,162,255,0.10), transparent 60%),
    radial-gradient(700px 600px at 10% 40%, rgba(94,234,212,0.06), transparent 60%),
    radial-gradient(700px 700px at 90% 82%, rgba(192,132,252,0.08), transparent 60%);
}

/* ── Glass utility ─────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* ── Buttons ───────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: transform .18s, box-shadow .2s, background .2s; }
.btn-grad {
  padding: 13px 24px; font-size: .9rem; border-radius: 999px; color: #06121a;
  background: var(--grad); background-size: 160% 160%;
  box-shadow: 0 10px 30px rgba(122,162,255,.42), inset 0 1px 0 rgba(255,255,255,.5);
  animation: gradshift 8s ease infinite;
}
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(122,162,255,.6); }
@keyframes gradshift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.btn-glass {
  padding: 12px 22px; font-size: .9rem; border-radius: 999px; color: var(--ink);
  background: var(--glass-2); border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.btn-glass:hover { background: rgba(255,255,255,.14); }
.btn-glass .play { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); }

/* ── Nav ───────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: var(--maxw); margin: 0 auto; padding: 16px 32px;
  transition: padding .3s;
}
.site-nav.scrolled {
  margin: 12px auto; padding: 10px 18px; border-radius: 999px;
  background: rgba(8,11,20,0.72);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  max-width: 1180px; position: sticky; top: 10px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--grad); box-shadow: 0 8px 26px rgba(122,162,255,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.brand .mark svg { width: 21px; height: 21px; }
.brand .name { font-family: var(--display); font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; }
.brand .name small { display: block; font-family: var(--font); font-size: .6rem; font-weight: 500; letter-spacing: .18em; color: var(--faint); text-transform: uppercase; margin-top: 2px; }
.navlinks { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; }
.navlinks a { font-size: .86rem; color: var(--muted); text-decoration: none; padding: 9px 15px; border-radius: 999px; transition: color .18s, background .18s; }
.navlinks a:hover { color: var(--ink); }
.navlinks a.active { color: var(--ink); background: rgba(255,255,255,.1); }
.navlinks a.active::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); margin-right:7px; vertical-align:middle; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; }
.nav-toggle svg { width: 20px; height: 20px; }

/* ── Hero ──────────────────────────── */
.hero-sec { position: relative; isolation: isolate; overflow: hidden; margin-top: -74px; padding-top: 74px; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background: url("images/hero-istanbul-aurora.webp") center 28% / cover no-repeat; transform: scale(1.04); }
.hero-sec::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(102deg, rgba(4,6,13,.95) 0%, rgba(4,6,13,.72) 34%, rgba(4,6,13,.3) 62%, rgba(4,6,13,.06) 100%), linear-gradient(0deg, var(--bg) 2%, rgba(4,6,13,.15) 30%, transparent 60%); }
.hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 48px; align-items: center; padding: clamp(40px,7vh,84px) 0 52px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 13px; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); border-radius:999px; }
.eyebrow .star { color: var(--teal); }
.hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.7rem,5.6vw,4.6rem); line-height: 1.02; letter-spacing: -.035em; margin-top: 24px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { margin-top: 22px; max-width: 46ch; font-size: clamp(1rem,1.3vw,1.15rem); line-height: 1.6; color: var(--muted); }
.cta-row { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.founder { display:flex; align-items:center; gap:14px; margin-top:34px; padding:12px 18px 12px 12px; border-radius:999px; width:fit-content; }
.founder .ava { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:1.15rem; color:#06121a; background:var(--grad); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.founder .txt b { display:block; font-size:.9rem; font-weight:600; }
.founder .txt span { font-size:.78rem; color:var(--muted); }

/* right glass panel */
.panel { border-radius: var(--radius); padding: 26px; position: relative; overflow: hidden; }
.panel .head { display:flex; align-items:flex-start; justify-content:space-between; }
.panel .loc { font-size:.92rem; font-weight:600; }
.panel .loc small { display:block; font-size:.74rem; color:var(--muted); font-weight:400; margin-top:2px; }
.panel .pin { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid var(--glass-line); }
.panel .big { font-family:var(--display); font-weight:600; font-size:3.4rem; line-height:1; letter-spacing:-.03em; margin:22px 0 4px; }
.panel .big em { font-style:normal; font-size:1.4rem; color:var(--muted); }
.panel .stat-line { font-size:.86rem; color:var(--muted); }
.panel .divider { height:1px; background:var(--glass-line-soft); margin:22px 0; }
.panel .prow { display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:.84rem; }
.panel .prow span { color:var(--muted); }
.panel .prow b { font-weight:600; }
.panel .live { display:inline-flex; align-items:center; gap:7px; font-size:.78rem; color:var(--teal); }
.panel .live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 9px var(--teal); animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.panel .foot { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:18px; border-top:1px solid var(--glass-line-soft); font-size:.82rem; }
.panel .foot .rate { font-family:var(--display); font-weight:600; }

/* hero feature strip */
.hero-feats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-bottom: clamp(40px,7vh,80px); }
.feat { border-radius:18px; padding:22px; transition:transform .25s, border-color .25s; }
.feat:hover { transform:translateY(-6px); border-color:rgba(255,255,255,.24); }
.feat .fic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px; background:rgba(255,255,255,.08); border:1px solid var(--glass-line); }
.feat .fic svg { width:22px; height:22px; }
.feat h3 { font-family:var(--display); font-size:1.02rem; font-weight:600; letter-spacing:-.01em; }
.feat p { margin-top:9px; font-size:.82rem; line-height:1.5; color:var(--muted); }
.feat .arrow { margin-top:16px; display:inline-flex; color:var(--faint); transition:color .2s, transform .2s; }
.feat:hover .arrow { color:var(--teal); transform:translateX(4px); }

/* ── Sections common ───────────────── */
section { position: relative; }
.sec { padding: clamp(64px, 11vh, 128px) 0; }
.sec-head { max-width: 640px; margin: 0 auto clamp(40px,6vh,64px); text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }
.kicker { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); background:var(--grad-soft); border:1px solid var(--glass-line); }
.sec-head h2 { font-family:var(--display); font-weight:600; font-size:clamp(2rem,4vw,3.1rem); line-height:1.08; letter-spacing:-.03em; margin-top:18px; }
.sec-head p { margin-top:16px; font-size:1.05rem; line-height:1.6; color:var(--muted); }

/* ── Services ──────────────────────── */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc { border-radius:var(--radius); padding:28px; transition:transform .25s, border-color .25s; }
.svc:hover { transform:translateY(-6px); border-color:rgba(255,255,255,.24); }
.svc .sic { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:20px; background:var(--grad-soft); border:1px solid var(--glass-line); }
.svc .sic svg { width:26px; height:26px; }
.svc h3 { font-family:var(--display); font-size:1.18rem; font-weight:600; letter-spacing:-.01em; }
.svc p { margin-top:11px; font-size:.9rem; line-height:1.6; color:var(--muted); }
.svc ul { margin-top:16px; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.svc ul li { font-size:.74rem; color:var(--muted); padding:5px 11px; border-radius:999px; border:1px solid var(--glass-line-soft); background:rgba(255,255,255,.03); }

/* ── Process ───────────────────────── */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.step { border-radius:var(--radius); padding:26px; position:relative; }
.step .no { font-family:var(--display); font-size:2.6rem; font-weight:700; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.9; }
.step h3 { font-family:var(--display); font-size:1.06rem; font-weight:600; margin-top:14px; }
.step p { margin-top:9px; font-size:.85rem; line-height:1.55; color:var(--muted); }
.step .dur { margin-top:14px; font-size:.72rem; color:var(--teal); font-weight:600; letter-spacing:.04em; }

/* ── Cases ─────────────────────────── */
.cases { display:flex; flex-direction:column; gap:28px; }
.case { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius); overflow:hidden; }
.case:nth-child(even) .case-media { order:2; }
.case-media { position:relative; min-height:340px; background:#0a0e1a; overflow:hidden; }
.case-media img { width:100%; height:100%; object-fit:cover; }
.case-media .tag { position:absolute; top:18px; left:18px; padding:7px 13px; border-radius:999px; font-size:.72rem; font-weight:600; }
.case-body { padding:clamp(28px,4vw,48px); display:flex; flex-direction:column; justify-content:center; }
.case-body .sector { font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); }
.case-body h3 { font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2rem); font-weight:600; letter-spacing:-.02em; margin-top:14px; line-height:1.15; }
.case-body p { margin-top:14px; font-size:.95rem; line-height:1.6; color:var(--muted); }
.case-metrics { display:flex; gap:32px; margin-top:26px; }
.case-metrics div strong { display:block; font-family:var(--display); font-size:1.7rem; font-weight:600; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.case-metrics div span { font-size:.76rem; color:var(--muted); }

/* ── Team / Why ────────────────────── */
.why { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.why-media { border-radius:var(--radius); overflow:hidden; position:relative; min-height:420px; }
.why-media img { width:100%; height:100%; object-fit:cover; }
.why-media .badge { position:absolute; left:20px; bottom:20px; right:20px; padding:18px 20px; border-radius:var(--radius-sm); display:flex; align-items:center; gap:14px; }
.why-media .badge .ava { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.3rem; color:#06121a; background:var(--grad); }
.why-media .badge b { display:block; font-size:.95rem; }
.why-media .badge span { font-size:.8rem; color:var(--muted); }
.why-list { list-style:none; display:flex; flex-direction:column; gap:16px; margin-top:26px; }
.why-list li { display:flex; gap:14px; align-items:flex-start; }
.why-list .ck { width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid var(--glass-line); }
.why-list .ck svg { width:15px; height:15px; }
.why-list b { font-family:var(--display); font-size:1rem; font-weight:600; }
.why-list p { font-size:.88rem; color:var(--muted); margin-top:3px; }

/* ── Pricing ───────────────────────── */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.tier { border-radius:var(--radius); padding:32px 28px; display:flex; flex-direction:column; }
.tier.pop { border-color:rgba(122,162,255,.5); box-shadow:0 24px 70px rgba(122,162,255,.22), inset 0 1px 0 rgba(255,255,255,.2); }
.tier .badge-pop { align-self:flex-start; margin-bottom:14px; padding:5px 12px; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#06121a; background:var(--grad); }
.tier .tname { font-family:var(--display); font-size:1.15rem; font-weight:600; }
.tier .tprice { font-family:var(--display); font-size:2.4rem; font-weight:700; letter-spacing:-.02em; margin:10px 0 2px; }
.tier .tprice small { font-size:.9rem; font-weight:400; color:var(--muted); }
.tier .tdesc { font-size:.86rem; color:var(--muted); min-height:40px; }
.tier ul { list-style:none; margin:22px 0; display:flex; flex-direction:column; gap:12px; flex:1; }
.tier ul li { display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:rgba(233,238,251,.8); }
.tier ul li svg { width:18px; height:18px; flex:none; margin-top:1px; }
.tier .btn { justify-content:center; width:100%; }

/* ── Testimonials ──────────────────── */
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.quote { border-radius:var(--radius); padding:28px; }
.quote .stars { color:var(--teal); font-size:.9rem; letter-spacing:2px; }
.quote p { margin-top:16px; font-size:.98rem; line-height:1.6; }
.quote .who { display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--glass-line-soft); }
.quote .who .av { width:40px; height:40px; border-radius:50%; background:var(--grad-soft); border:1px solid var(--glass-line); display:grid; place-items:center; font-family:var(--display); font-weight:600; }
.quote .who b { display:block; font-size:.88rem; }
.quote .who span { font-size:.76rem; color:var(--muted); }

/* ── FAQ ───────────────────────────── */
.faq { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.qa { border-radius:var(--radius-sm); overflow:hidden; }
.qa summary { list-style:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--display); font-size:1.02rem; font-weight:500; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary .ico { width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid var(--glass-line); transition:transform .25s; }
.qa[open] summary .ico { transform:rotate(45deg); }
.qa .ans { padding:0 24px 22px; font-size:.92rem; line-height:1.65; color:var(--muted); }

/* ── Contact / CTA ─────────────────── */
.cta-band { border-radius:var(--radius); padding:clamp(36px,6vw,64px); text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--grad-soft); opacity:.6; }
.cta-band h2 { font-family:var(--display); font-size:clamp(1.9rem,3.6vw,2.8rem); font-weight:600; letter-spacing:-.03em; }
.cta-band p { margin:16px auto 0; max-width:52ch; color:var(--muted); font-size:1.02rem; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:14px; }
.info-row { display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--radius-sm); }
.info-row .ii { width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid var(--glass-line); }
.info-row .ii svg { width:20px; height:20px; }
.info-row b { display:block; font-size:.95rem; }
.info-row span { font-size:.82rem; color:var(--muted); }
.cform { border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:14px; }
.cform .fr { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cform label { display:block; font-size:.78rem; color:var(--muted); margin-bottom:7px; }
.cform input, .cform textarea, .cform select { width:100%; padding:13px 15px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--glass-line); color:var(--ink); font-family:var(--font); font-size:.92rem; transition:border-color .2s, background .2s; }
.cform input:focus, .cform textarea:focus, .cform select:focus { outline:none; border-color:var(--blue); background:rgba(255,255,255,.07); }
.cform textarea { min-height:110px; resize:vertical; }
.cform .btn { justify-content:center; margin-top:6px; }
.cform .note { font-size:.74rem; color:var(--faint); text-align:center; }

/* ── Footer ────────────────────────── */
.site-foot { border-top:1px solid var(--glass-line-soft); padding:56px 0 40px; margin-top:40px; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.foot-grid .col h4 { font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.foot-grid .col a { display:block; font-size:.88rem; color:var(--muted); text-decoration:none; padding:5px 0; transition:color .18s; }
.foot-grid .col a:hover { color:var(--ink); }
.foot-grid .about p { font-size:.88rem; color:var(--muted); margin-top:16px; max-width:32ch; line-height:1.6; }
.foot-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:48px; padding-top:24px; border-top:1px solid var(--glass-line-soft); font-size:.8rem; color:var(--faint); flex-wrap:wrap; }
.foot-bottom .socials { display:flex; gap:10px; }
.foot-bottom .socials a { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--glass-2); border:1px solid var(--glass-line); }
.foot-bottom .socials svg { width:17px; height:17px; }

/* reveal */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:none; }

/* ── Responsive ────────────────────── */
@media (max-width: 1000px) {
  .hero { grid-template-columns:1fr; gap:32px; }
  .navlinks { display:none; }
  .nav-toggle { display:flex; }
  .hero-feats { grid-template-columns:repeat(2,1fr); }
  .svc-grid, .steps, .quotes, .tiers { grid-template-columns:repeat(2,1fr); }
  .case { grid-template-columns:1fr; }
  .case:nth-child(even) .case-media { order:0; }
  .why { grid-template-columns:1fr; }
  .contact-grid, .foot-grid { grid-template-columns:1fr; }
  .foot-grid { gap:28px; }
}
@media (max-width: 620px) {
  .wrap { padding:0 20px; }
  .site-nav { padding:14px 20px; }
  .hero-bg { background-image:url("images/hero-istanbul-aurora-mobile.webp"); background-position:center; }
  .hero-feats, .svc-grid, .steps, .quotes, .tiers { grid-template-columns:1fr; }
  .cform .fr { grid-template-columns:1fr; }
  .case-metrics { gap:20px; }
  .cta-row .btn { flex:1; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-grad, .panel .live::before { animation:none; }
  .reveal { opacity:1; transform:none; transition:none; }
}