@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2')}

:root{
  --bg:#0A0A1A;
  --surface:#12121F;
  --surfaceHover:#1A1A2E;
  --text:#F0F0F8;
  --textStrong:#F8F8FF;
  --muted:rgba(240,240,248,.55);
  --muted2:rgba(240,240,248,.32);
  --line:rgba(255,255,255,.07);
  --accent:#818CF8;
  --accentGlow:rgba(129,140,248,.22);
  --max:900px;
  --radius:16px;
  /* transparent + 80% variants of --bg, for the vignette fade */
  --bgFade0:rgba(10,10,26,0);
  --bgFade:rgba(10,10,26,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-gutter:stable;overflow-x:clip}
body{
  display:flex;flex-direction:column;min-height:100vh;
  overflow-y:scroll;overflow-x:hidden;
  font-family:'Geist',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}

/* ── bg ── */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
canvas.p{position:absolute;inset:0;width:100%;height:100%;display:block}
.vig{
  position:absolute;inset:-20%;
  background:
    radial-gradient(700px 450px at 24% 18%,var(--accentGlow),transparent 55%),
    radial-gradient(500px 350px at 78% 32%,rgba(139,92,246,.06),transparent 48%),
    linear-gradient(180deg,var(--bgFade0) 0%,var(--bgFade) 88%,var(--bg) 100%);
}

/* ── hero ── */
.hero{position:relative;z-index:2;text-align:center;padding:88px 0 0}
.hero-icon-wrap{position:relative;display:inline-block;margin-bottom:32px}
.hero-icon-wrap::before{
  content:'';position:absolute;inset:-60px;
  background:radial-gradient(circle,var(--accentGlow) 0%,rgba(129,140,248,.04) 40%,transparent 70%);
  pointer-events:none;z-index:0;
}
.hero-icon{
  position:relative;z-index:1;
  width:172px;height:172px;border-radius:38px;
  border:1px solid rgba(255,255,255,.08);object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 28px 72px rgba(0,0,0,.55),0 0 60px var(--accentGlow),0 0 120px rgba(129,140,248,.08);
  animation:iconIn .8s ease both;
}
@keyframes iconIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero h1{
  font-size:clamp(36px,5.5vw,54px);font-weight:700;line-height:1.08;
  letter-spacing:-1.6px;color:var(--textStrong);
  animation:fadeUp .7s ease .15s both;
}
.hero .tagline{
  margin:12px auto 0;color:var(--muted);
  font-size:18px;font-weight:400;line-height:1.65;max-width:44ch;
  animation:fadeUp .7s ease .25s both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hero-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:28px;padding:14px 32px;border-radius:12px;
  background:var(--accent);border:none;
  color:#fff;font-weight:700;font-size:15px;letter-spacing:-.1px;cursor:pointer;
  box-shadow:0 12px 36px var(--accentGlow);
  transition:filter .15s,transform .15s,box-shadow .15s;
}
.hero-cta:hover{filter:brightness(1.1);transform:translateY(-1px)}
.hero-cta svg{width:18px;height:18px;fill:currentColor;flex-shrink:0;position:relative;top:-1px}

/* ── divider ── */
hr.div{border:none;border-top:1px solid var(--line);margin:60px 0}

/* ── features ── */
.features{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{padding:22px 20px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);text-align:center}
.feat-icon{font-size:28px;margin-bottom:10px;display:block}
.feat h3{font-size:15px;font-weight:600;letter-spacing:-.2px;margin-bottom:6px}
.feat p{font-size:13px;color:var(--muted);line-height:1.6}

/* ── screenshots ── */
.shots-section{position:relative;z-index:2;text-align:center}
.shots-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-bottom:24px}
.shots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:900px;margin-inline:auto}
.shots.six{grid-template-columns:repeat(6,1fr)}
.shots img{
  width:100%;border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 48px rgba(0,0,0,.35);
  display:block;transition:transform .2s,box-shadow .2s;
}
.shots img:hover{transform:translateY(-4px);box-shadow:0 20px 56px rgba(0,0,0,.45)}

/* ══════════════════════════════════════════════════════════
   HUB — yalnızca ana sayfa (/) tarafından kullanılır.
   Landing sayfaları .hero/.features/.shots kullanır, buraya dokunmaz.
   ══════════════════════════════════════════════════════════ */
/* Palette sampled directly from the reference landing render. */
.hub{
  --max:1220px;
  --bg:#040512;
  --surface:#090C1C;
  --surfaceHover:#0E1328;
  --line:#0D1022;
  --text:#C0CBE0;
  --textStrong:#FFFFFF;
  --muted:#9FA7C2;
  --muted2:#575C74;
  --violet:#7772DE;
  --blue:#25BDF8;
  --accentGlow:rgba(109,72,253,.20);
  --bgFade0:rgba(4,5,18,0);
  --bgFade:rgba(4,5,18,.8);
}
.hub .wrap{width:min(var(--max),calc(100% - 56px))}

/* ── header ── */
.site-header{position:relative;z-index:3;padding:24px 0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center}
.brand img{height:46px;width:auto;display:block}

/* ── hub hero ── */
.hub-hero{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:40px;align-items:start;
  padding:18px 0 24px;
}
.hub-copy{padding-top:7px}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet);margin-bottom:17px;
}
.hub-hero h1{
  font-size:clamp(34px,2.95vw,49px);font-weight:700;
  line-height:1.1;letter-spacing:-1.5px;color:var(--textStrong);
  animation:fadeUp .7s ease .05s both;
}
.grad{
  background:linear-gradient(96deg,#20AEFE 0%,#4A7BFE 52%,#684DFE 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.lead{
  margin-top:20px;max-width:42ch;
  font-size:15px;line-height:1.65;color:#C0CBE0;
  animation:fadeUp .7s ease .15s both;
}
.cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px;animation:fadeUp .7s ease .25s both}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  background:linear-gradient(100deg,#6D48FD 0%,#2D5DFF 52%,#26BAF8 100%);
  color:#fff;font-size:15px;font-weight:600;letter-spacing:-.1px;
  box-shadow:0 14px 40px rgba(77,86,250,.34);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 18px 48px rgba(93,110,246,.44)}
.btn-primary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ── trust row ── */
.trust-row{display:flex;align-items:center;gap:24px;margin-top:22px;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:11px}
.trust svg{width:21px;height:21px;stroke:#6677E5;fill:none;stroke-width:1.6;flex-shrink:0}
.trust span{font-size:13px;line-height:1.35;color:#9097B5}
.trust-sep{width:1px;height:30px;background:var(--line)}

/* ── hero visual: phones ── */
/* Devices deliberately overflow the hero row and bleed into the section
   below on the right side, as in the reference composition. */
.hub-visual{position:relative;--sceneW:500px;--sceneTop:0px;min-height:calc(var(--sceneW)*.81)}

/* ══ HERO STAGE ═══════════════════════════════════════════════════════════
   The orbital ring, the glow and the foreground planet are all baked into the
   supplied render now, so there are no CSS stand-ins for them: one image,
   correct by construction. Only a soft ambient wash sits behind it. */
.ambient-glow{
  position:absolute;left:38%;top:44%;translate:-50% -50%;
  width:min(980px,164%);aspect-ratio:1.2;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(44,60,200,.18) 0%,rgba(36,48,170,.09) 46%,transparent 74%);
  filter:blur(56px);
}
.hero-scene{
  position:absolute;top:var(--sceneTop);left:50%;translate:-50% 0;z-index:1;
  width:var(--sceneW);height:auto;display:block;
}

/* ── section head ── */
.section-head{position:relative;z-index:2;margin-bottom:34px}
.section-head .eyebrow{margin-bottom:0;line-height:1.2}
.section-head h2{
  font-size:clamp(28px,3.2vw,38px);font-weight:700;
  letter-spacing:-1.2px;color:var(--textStrong);
}
.section-head p{margin-top:12px;font-size:15px;color:#9FA7C2;line-height:1.65;max-width:60ch}

/* ── app tiles ── */
.app-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  padding-bottom:76px;
}
.app-tile{
  display:flex;align-items:flex-start;gap:22px;
  padding:28px;border:1px solid var(--line);
  background:linear-gradient(180deg,#0A0D22,#080B1A);
  border-radius:22px;
  transition:border-color .18s,transform .18s,background .18s;
}
.app-tile:hover{border-color:rgba(140,150,255,.30);transform:translateY(-3px)}
.tile-icon{
  width:96px;height:96px;border-radius:22px;flex-shrink:0;object-fit:cover;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.tile-body{flex:1;min-width:0}
.tile-body h3{font-size:21px;font-weight:600;letter-spacing:-.5px;color:#FDFDFE}
.tile-body p{margin-top:13px;font-size:14px;line-height:1.65;color:#B1B8CB;max-width:54ch}
.tile-body p.tile-tagline{margin-top:5px;font-size:14px;color:#8C94B5}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}
.chip{
  padding:6px 13px;border-radius:999px;font-size:12px;font-weight:500;
  color:#8382DA;background:#1B1B41;
  border:1px solid #2E2C6A;
}
.learn{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  flex-shrink:0;align-self:center;
  font-size:12px;line-height:1.3;color:#9DA3BB;text-align:center;
}
.learn i{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  transition:border-color .18s,background .18s,transform .18s;
}
.app-tile:hover .learn i{border-color:rgba(140,150,255,.5);background:rgba(124,107,245,.14);transform:translateX(2px)}
.learn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ── hub footer ── */
.site-footer{
  position:relative;z-index:2;border-top:1px solid var(--line);
  padding:24px 0 30px;margin-top:auto;
}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:#575C74}
.foot-brand img{height:30px;width:auto;display:block}
.foot-brand .bar{color:var(--line)}
.foot-brand a{transition:color .15s}
.foot-brand a:hover{color:var(--muted)}
/* Baseline alignment, not box centring: the label is uppercase (no descenders)
   and the address has them, so centring the boxes makes the two sit off each other. */
.foot-note{display:flex;align-items:baseline;gap:10px;font-size:12px;color:#575C74}
.foot-note span{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);line-height:1;
}
.foot-note a{color:#8E92A7;transition:color .15s;line-height:1}
.foot-note a:hover{color:#C0CBE0}

/* ── hub responsive ── */
/* Two columns need room for a 480px-wide device stack beside the copy;
   below this the stack would overflow the grid track. */
@media(max-width:1200px){
  .hub-hero{grid-template-columns:1fr;gap:40px;padding-bottom:16px}
  .hub-copy{padding-top:0}
  .hub-visual{order:2;--sceneW:min(600px,84vw);--sceneTop:0px}
  .app-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hub .wrap{width:calc(100% - 40px)}
  .brand img{height:38px}
  .site-header{padding:18px 0}
  .hub-hero h1{font-size:34px;letter-spacing:-1.2px}
  .trust-row{gap:16px;margin-top:32px}
  .trust-sep{display:none}
  .trust{width:100%}
  .hub-visual{--sceneW:min(420px,90vw)}
  .app-tile{flex-direction:column;gap:18px;padding:24px}
  .learn{flex-direction:row;align-self:flex-start}
  .site-footer .wrap{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ── help ── */
.help{position:relative;z-index:2}
.help-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-bottom:10px}
.help-text{color:var(--muted);font-size:14px;line-height:1.7}
.help-text a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(129,140,248,.30)}
.help-text a:hover{text-decoration-color:var(--accent)}

/* ── footer ── */
footer{
  position:relative;z-index:2;border-top:1px solid var(--line);
  padding:18px 0 22px;color:var(--muted2);font-size:12px;margin-top:auto;
}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:16px}
.foot-links a{transition:color .15s}
.foot-links a:hover{color:var(--muted)}

/* ── responsive ── */
@media(max-width:640px){
  .hero{padding-top:40px}
  .hero-icon{width:130px;height:130px;border-radius:30px}
  .hero h1{font-size:32px;letter-spacing:-1px}
  .hero .tagline{font-size:16px}
  hr.div{margin:44px 0}
  .features{grid-template-columns:1fr;gap:12px}
  .apps{grid-template-columns:1fr;gap:12px}
  .shots,.shots.six{grid-template-columns:repeat(2,1fr);gap:10px}
}