/* =========================================================================
   Black UI — marketing site
   Design system: deep ink + antique brass. Instrument Serif for headlines
   (the one deliberate flourish), Outfit for everything functional — the
   same body face the dashboard itself uses, so site and product still
   read as one thing.
   ========================================================================= */

@font-face{
  font-family:'Outfit';
  font-style:normal; font-weight:300 800; font-display:swap;
  src:url('fonts/outfit-latin-wght-normal.woff2') format('woff2-variations'),
      url('fonts/outfit-latin-wght-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}

:root{
  /* ---- ink scale (cool near-black, layered) ---- */
  --bg-0:#07080a; --bg-1:#0c0e11; --bg-2:#121519; --bg-3:#1a1e24; --bg-4:#232830;
  --line:rgba(238,235,225,.09); --line-strong:rgba(238,235,225,.17);

  /* ---- warm paper text on ink ---- */
  --ink-100:#f3f0e8; --ink-300:#b7b4a7; --ink-500:#7d7b70; --ink-700:#4c4b44;

  /* ---- the one accent: antique brass ---- */
  --brass:#c9a05e; --brass-bright:#e0bd83; --brass-dim:rgba(201,160,94,.13);
  --brass-line:rgba(201,160,94,.32); --brass-ink:#1b1408;

  --danger:#d97f6f; --good:#8fae82;

  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  --max:1160px; --measure:70ch;
  --r-s:8px; --r-m:14px; --r-l:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg-0); color:var(--ink-100);
  font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(20px, 6vw, 48px)}
::selection{background:var(--brass-dim); color:var(--brass-bright)}

/* faint fixed grain/grid so the ink field isn't flat & cheap */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:.35;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 70%);
}

/* body top offset so content never sits under the fixed header */
body{padding-top:82px}

/* ---------- Header ---------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(7,8,10,.96); backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:24px; padding:18px 28px; max-width:var(--max); margin:0 auto; position:relative}
.nav .navlinks{margin-right:auto; margin-left:36px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:600; font-size:1.08rem; color:var(--ink-100); letter-spacing:-.01em}
.brand img{height:21px; width:auto}
.navlinks{display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0}
.navlinks a{
  text-decoration:none; color:var(--ink-300); font-size:.9rem; padding:8px 13px; border-radius:99px;
  transition:color .15s var(--ease), background .15s var(--ease);
}
.navlinks a:hover{color:var(--ink-100); background:var(--bg-2)}
.navlinks a.active{color:var(--brass-bright); background:var(--brass-dim)}
.nav-cta{
  background:var(--brass); color:var(--brass-ink); padding:10px 20px; border-radius:99px;
  font-weight:600; font-size:.88rem; text-decoration:none; transition:background .15s var(--ease), transform .15s var(--ease);
  white-space:nowrap; border:1px solid transparent;
}
.nav-cta:hover{background:var(--brass-bright); transform:translateY(-1px)}
.nav-toggle{display:none; background:none; border:1px solid var(--line-strong); color:var(--ink-100); width:38px; height:38px; border-radius:var(--r-s); align-items:center; justify-content:center; font-size:1rem; flex:none}
.nav-right{display:flex; align-items:center; gap:10px}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line); padding:56px 0 30px; margin-top:110px; position:relative}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px}
.foot-brand{display:flex; align-items:center; gap:10px; font-weight:600; margin-bottom:12px; font-size:1.02rem}
.foot-brand img{height:18px}
.foot-desc{color:var(--ink-500); font-size:.87rem; max-width:30ch; line-height:1.6}
.foot-col h4{font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.05rem; color:var(--ink-300); margin:0 0 14px}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot-col a{color:var(--ink-300); text-decoration:none; font-size:.89rem; transition:color .15s}
.foot-col a:hover{color:var(--brass-bright)}
.foot-bottom{
  max-width:var(--max); margin:40px auto 0; padding:22px 28px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  color:var(--ink-700); font-size:.8rem;
}

/* ---------- Hero (single column, editorial) ---------- */
.hero{padding-top:64px; padding-bottom:56px; position:relative}
.hero-inner{max-width:44rem}
.hero .kicker{
  display:inline-flex; align-items:center; gap:9px; color:var(--brass-bright); margin-bottom:26px;
  font-family:var(--serif); font-style:italic; font-size:1.08rem;
}
.hero .kicker::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px var(--brass-dim); flex:none}
.hero h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem, 5.2vw, 4.3rem); line-height:1.05; margin:0 0 26px;
  max-width:16ch; letter-spacing:-.01em; color:var(--ink-100);
}
.hero p.lead{color:var(--ink-300); font-size:1.16rem; max-width:52ch; margin:0 0 38px; line-height:1.65}
.hero .ctas{display:flex; gap:14px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600;
  padding:14px 26px; border-radius:99px; font-size:.95rem; transition:all .15s var(--ease); border:1px solid transparent;
  font-family:var(--sans);
}
.btn-primary{background:var(--brass); color:var(--brass-ink)}
.btn-primary:hover{background:var(--brass-bright); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink-100); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--brass); color:var(--brass-bright)}
#installAppBtn[hidden]{display:none !important}

/* ---------- Pipeline (Chat -> Debug -> Build -> Ship: genuinely sequential) ---------- */
.pipeline{margin:64px 0 0; position:relative}
.pipeline-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.pipeline-row::before{
  content:''; position:absolute; top:19px; left:calc(12.5% ); right:calc(12.5%); height:1px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.p-step{position:relative; padding:0 18px; text-align:left}
.p-step .p-node{
  width:39px; height:39px; border-radius:50%; background:var(--bg-1); border:1px solid var(--brass-line);
  color:var(--brass-bright); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.15rem;
  margin-bottom:18px; position:relative; z-index:1;
}
.p-step h3{margin:0 0 7px; font-size:1rem; font-weight:600}
.p-step p{margin:0; color:var(--ink-500); font-size:.85rem; line-height:1.55; max-width:26ch}

/* ---------- Section shell ---------- */
.section{padding-top:64px; padding-bottom:64px}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap}
.section h2{font-family:var(--serif); font-weight:400; font-size:2.1rem; margin:0 0 10px; max-width:22ch; color:var(--ink-100)}
.section .sub{color:var(--ink-500); max-width:52ch; margin:0; font-size:1rem}

/* ---------- Feature list: spec-sheet rows, not a card grid ---------- */
.spec-list{border-top:1px solid var(--line)}
.spec-row{
  display:grid; grid-template-columns:230px 1fr; gap:28px; padding:26px 0; border-bottom:1px solid var(--line);
  transition:background .15s;
}
.spec-row:hover{background:var(--bg-1)}
.spec-name{display:flex; align-items:flex-start; gap:12px}
.spec-name i{color:var(--brass); font-size:1rem; margin-top:3px; flex:none; width:18px}
.spec-name span{font-weight:600; font-size:1rem; color:var(--ink-100)}
.spec-row p{margin:0; color:var(--ink-500); font-size:.92rem; max-width:58ch; line-height:1.6; align-self:center}

/* ---------- Callout / notice boxes ---------- */
.notice{
  border-left:2px solid var(--brass); background:var(--bg-1); border-radius:0 var(--r-m) var(--r-m) 0;
  padding:20px 24px; display:flex; gap:16px; margin:30px 0;
}
.notice i{color:var(--brass); margin-top:3px; flex:none}
.notice p{margin:0; color:var(--ink-300); font-size:.93rem; line-height:1.65}
.notice a{color:var(--brass-bright); text-decoration:underline; text-underline-offset:2px}
.notice.warn{border-left-color:var(--danger)}
.notice.warn i{color:var(--danger)}

/* ---------- Content pages (privacy / terms / guide) ---------- */
.doc{padding-top:60px; padding-bottom:100px; position:relative}
.doc-layout{display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start}
.doc-head{margin-bottom:40px}
.doc-head .updated{color:var(--ink-700); font-size:.84rem; margin-top:10px; font-family:var(--mono)}
.doc h1{font-family:var(--serif); font-weight:400; font-size:2.5rem; margin:0; color:var(--ink-100)}
.doc h2{font-size:1.28rem; margin:46px 0 14px; font-weight:600; color:var(--ink-100); scroll-margin-top:90px}
.doc h3{font-size:1.02rem; margin:26px 0 10px; font-weight:600; color:var(--ink-100)}
.doc p{color:var(--ink-300); max-width:var(--measure); line-height:1.7}
.doc ul, .doc ol{color:var(--ink-300); max-width:var(--measure); padding-left:22px; line-height:1.7}
.doc li{margin-bottom:9px}
.doc a{color:var(--brass-bright); text-decoration-color:var(--brass-line)}
.doc code{background:var(--bg-2); border:1px solid var(--line); padding:2px 7px; border-radius:5px; font-size:.86em; font-family:var(--mono); color:var(--ink-100)}
.doc strong{color:var(--ink-100); font-weight:600}
.doc blockquote{
  margin:26px 0; padding:4px 0 4px 20px; border-left:2px solid var(--brass); color:var(--ink-100); font-size:.98rem;
}
.doc-rail{position:sticky; top:96px; display:flex; flex-direction:column; gap:2px}
.doc-rail .rail-label{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-700); margin-bottom:10px; font-family:var(--mono)}
.doc-rail a{
  color:var(--ink-500); text-decoration:none; font-size:.86rem; padding:8px 12px; border-left:2px solid transparent; line-height:1.4;
  transition:color .15s, border-color .15s;
}
.doc-rail a:hover{color:var(--ink-100)}
.doc-rail a.active{color:var(--brass-bright); border-left-color:var(--brass)}
.toc{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-m); padding:22px 26px; margin-bottom:8px; max-width:var(--measure)}
.toc h4{margin:0 0 12px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-700); font-family:var(--mono)}
.toc ol{margin:0; padding-left:18px; color:var(--ink-300); font-size:.92rem}
.toc li{margin-bottom:6px}

/* ---------- Guide steps ---------- */
.steps{counter-reset:step; max-width:var(--measure)}
.step{position:relative; padding:0 0 34px 46px; border-left:1px solid var(--line); margin-left:15px}
.step:last-child{border-color:transparent; padding-bottom:0}
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:-15px; top:0; width:30px; height:30px; border-radius:50%;
  background:var(--bg-1); border:1px solid var(--brass-line); color:var(--brass-bright); font-family:var(--serif);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.step h3{margin:2px 0 8px}
.step p{color:var(--ink-300); margin:0 0 8px}

/* ---------- FAQ ---------- */
.faq{max-width:var(--measure)}
.faq-item{border-bottom:1px solid var(--line); padding:22px 0}
.faq-item summary{cursor:pointer; font-weight:500; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; gap:16px; color:var(--ink-100)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+'; color:var(--brass); font-size:1.3rem; flex-shrink:0; font-family:var(--serif); line-height:1}
.faq-item[open] summary::after{content:'\2212'}
.faq-item p{margin:14px 0 0; color:var(--ink-500); font-size:.93rem; line-height:1.65; max-width:60ch}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start}
.contact-grid h3{font-size:.98rem; margin:28px 0 10px}
.contact-grid > div > p{color:var(--ink-300); line-height:1.7}
.contact-card{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-l); padding:8px 30px}
.contact-row{display:flex; gap:15px; padding:19px 0; border-bottom:1px solid var(--line)}
.contact-row:last-child{border-bottom:none}
.contact-row i{color:var(--brass); width:20px; margin-top:3px}
.contact-row .lbl{font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-700); margin-bottom:4px; font-family:var(--mono)}
.contact-row a, .contact-row span.val{color:var(--ink-100); font-size:.96rem; text-decoration:none}
.contact-row a:hover{color:var(--brass-bright)}

/* ---------- Region badge (India-only notice) ---------- */
.region-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--bg-2); border:1px solid var(--line-strong);
  color:var(--ink-300); font-size:.8rem; padding:7px 14px; border-radius:99px; margin:0 0 28px;
}
.region-pill i{color:var(--brass)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr; row-gap:30px}
  .contact-grid{grid-template-columns:1fr}
  .doc-layout{grid-template-columns:1fr}
  .doc-rail{display:none}
  .spec-row{grid-template-columns:1fr}
  .pipeline-row{grid-template-columns:1fr 1fr; row-gap:32px}
  .pipeline-row::before{display:none}
}
@media (max-width:640px){
  body{padding-top:70px}
  .nav{padding:14px 20px}
  .nav-toggle{display:flex}
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    margin:0; padding:10px 20px 16px; background:rgba(7,8,10,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:11px 13px}
  .hero{padding-top:44px; padding-bottom:32px}
  .hero h1{font-size:clamp(2.1rem,9vw,2.6rem)}
  .section{padding-top:48px; padding-bottom:48px}
  .doc h1{font-size:1.9rem}
  .foot-grid{grid-template-columns:1fr; gap:26px}
  .foot-bottom{flex-direction:column; align-items:flex-start}
  .pipeline-row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ---- demo video + screenshots ---- */
.video-frame{position:relative; aspect-ratio:16/9; border:1px solid var(--line-strong); border-radius:var(--r-l); overflow:hidden; background:var(--bg-2)}
.video-frame iframe,.video-poster{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-poster{padding:0; border:0; background:var(--bg-2); cursor:pointer; display:block}
.video-poster img{width:100%; height:100%; object-fit:cover; display:block; opacity:.78; transition:opacity .25s var(--ease), transform .4s var(--ease)}
.video-poster:hover img,.video-poster:focus-visible img{opacity:1; transform:scale(1.02)}
.video-poster:focus-visible{outline:2px solid var(--brass); outline-offset:-2px}
.video-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:var(--brass); color:var(--brass-ink); font-size:1.5rem; padding-left:4px; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.video-steps{list-style:none; counter-reset:vs; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.video-steps li{counter-increment:vs; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-m); padding:12px 14px; color:var(--ink-300); font-size:.92rem}
.video-steps li::before{content:counter(vs); display:inline-grid; place-items:center; width:22px; height:22px; margin-right:8px; border-radius:50%; background:var(--brass-dim); color:var(--brass-bright); font-size:.78rem}
.shots{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.shot{display:block; width:100%; padding:0; text-align:left; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; cursor:zoom-in; color:var(--ink-300); font:inherit; transition:border-color .2s var(--ease), transform .2s var(--ease)}
.shot:hover,.shot:focus-visible{border-color:var(--brass-line); transform:translateY(-2px)}
.shot:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.shot img{display:block; width:100%; height:auto}
.shot span{display:block; padding:10px 14px; font-size:.9rem}
.lightbox{max-width:min(1200px,94vw); width:100%; padding:0; border:1px solid var(--line-strong); border-radius:var(--r-m); background:var(--bg-0); color:var(--ink-100)}
.lightbox::backdrop{background:rgba(0,0,0,.82)}
.lightbox img{display:block; width:100%; height:auto}
.lightbox p{margin:0; padding:12px 16px; color:var(--ink-300)}
.lb-close{position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(7,8,10,.8); color:var(--ink-100); cursor:pointer; font-size:1rem}
@media (max-width:640px){.video-play{width:60px; height:60px; font-size:1.2rem}.shots{grid-template-columns:repeat(2,1fr); gap:10px}}
.shots.collapsed li:nth-child(n+5){display:none}
.shots-more{display:flex; justify-content:center; margin-top:20px}
.btn-more[hidden]{display:none}
.btn-more{display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; border:1px solid var(--line-strong); background:var(--bg-1); color:var(--ink-100); font:inherit; cursor:pointer; transition:border-color .2s var(--ease)}
.btn-more:hover,.btn-more:focus-visible{border-color:var(--brass-line)}
.btn-more:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.btn-more i{transition:transform .2s var(--ease)}
.btn-more.open i{transform:rotate(180deg)}
.doc-fig{margin:22px 0 8px; max-width:var(--measure-wide,760px)}
.doc-fig img{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--r-m)}
.doc-fig figcaption,.doc .fig-note{color:var(--ink-700); font-size:.86rem; margin-top:8px; line-height:1.5}
.doc .video-frame{max-width:760px; margin:22px 0 6px}
.table-wrap{overflow-x:auto; max-width:760px; margin:18px 0}
.doc table{width:100%; border-collapse:collapse; font-size:.93rem}
.doc th,.doc td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--ink-300)}
.doc th{color:var(--ink-100); font-weight:600; background:var(--bg-1)}
.doc td:first-child{color:var(--ink-100)}