/* =========================================================
   Gyaan Setu — design tokens
   Palette grounded in the classroom: chalkboard moss, warm
   marigold (the colour of school uniforms & festival
   marigolds across Gujarat), and a cool paper tone instead
   of the usual cream.
========================================================= */
:root{
  --ink:        #16231C;   /* chalkboard */
  --ink-soft:   #22392C;   /* lighter chalkboard, panels */
  --paper:      #EEF0E9;   /* cool paper, not cream */
  --paper-high: #F8F9F5;   /* lightest surface */
  --marigold:   #E0932E;   /* single accent — spend it carefully */
  --marigold-deep: #B96F1D;
  --clay:       #A6472B;   /* used once, for the "offline" mark only */
  --line:       rgba(22,35,28,0.14);
  --line-onink: rgba(238,240,233,0.16);
  --text:       #1B271F;
  --text-soft:  #47564B;
  --text-onink: #EDEFE7;
  --text-onink-soft: #B7C2B7;

  --serif: "Fraunces", "Iowan Old Style", ui-serif, Georgia, serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-size:17px;
  line-height:1.6;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
}

p{ margin:0; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

:focus-visible{
  outline:2.5px solid var(--marigold-deep);
  outline-offset:3px;
}

/* ---------- section rhythm ---------- */
section{ position:relative; }
.section-pad{ padding:clamp(64px, 9vw, 128px) 0; }
.rule{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}
.rule.onink{ border-top-color:var(--line-onink); }

.kicker{
  font-family:var(--sans);
  font-size:0.8rem;
  font-weight:600;
  color:var(--marigold-deep);
  margin:0 0 14px;
}

.section-head{
  max-width:640px;
  margin-bottom:clamp(36px,5vw,56px);
}
.section-head h2{
  font-size:clamp(1.9rem, 3.4vw, 2.75rem);
}
.section-head .lede{
  margin-top:16px;
  font-size:1.08rem;
  color:var(--text-soft);
  max-width:56ch;
}

/* =========================================================
   Header / Nav
========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(238,240,233,0.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-weight:600; font-size:1.28rem;
  text-decoration:none; color:var(--ink);
}
.brand .mark{ width:30px; height:30px; flex:none; }

.nav-links{
  display:flex; align-items:center; gap:2.1rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size:0.96rem;
  color:var(--text-soft);
  position:relative;
  padding:4px 0;
}
.nav-links a:hover{ color:var(--ink); }

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--paper-high);
  padding:11px 20px;
  border-radius:2px;
  font-size:0.92rem; font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease;
}
.nav-cta:hover{ background:var(--marigold-deep); color:#fff; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:38px; height:38px;
  padding:0;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--ink);
  margin:5px auto; transition:transform .2s ease, opacity .2s ease;
}

@media (max-width:860px){
  .nav-links{
    position:absolute; top:74px; left:0; right:0;
    background:var(--paper-high);
    flex-direction:column; align-items:flex-start;
    gap:0; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition:max-height .28s ease;
  }
  .nav-links.open{ max-height:420px; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:16px var(--gutter); width:100%; border-bottom:1px solid var(--line); }
  .nav-cta{ margin:16px var(--gutter) 20px; }
  .nav-toggle{ display:block; }
}

/* =========================================================
   Hero
========================================================= */
.hero{
  padding:clamp(48px,8vw,88px) 0 clamp(56px,8vw,96px);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero h1{
  font-size:clamp(2.4rem, 5.1vw, 3.9rem);
  color:var(--ink);
}
.hero h1 em{
  font-style:italic;
  color:var(--marigold-deep);
}
.hero .lede{
  margin-top:22px;
  font-size:1.18rem;
  color:var(--text-soft);
  max-width:46ch;
}
.hero-actions{
  margin-top:34px;
  display:flex; flex-wrap:wrap; gap:16px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  border-radius:2px;
  font-weight:600; font-size:0.98rem;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .18s ease, border-color .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--marigold); color:#241605; }
.btn-primary:hover{ background:var(--marigold-deep); color:#fff; }
.btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper-high); }
.btn-ghost.onink{ border-color:var(--line-onink); color:var(--text-onink); }
.btn-ghost.onink:hover{ background:var(--text-onink); color:var(--ink); }

.hero-stats{
  display:flex; gap:clamp(20px,4vw,44px);
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.hero-stats div strong{
  display:block;
  font-family:var(--serif); font-size:1.7rem; color:var(--ink);
}
.hero-stats div span{ font-size:0.88rem; color:var(--text-soft); }

.hero-art{ position:relative; }

/* =========================================================
   Problem section
========================================================= */
.problem{ background:var(--paper-high); }
.problem-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line);
}
.problem-card{
  padding:clamp(28px,4vw,44px);
  position:relative;
}
.problem-card + .problem-card{ border-left:1px solid var(--line); }
.problem-card h3{
  font-size:1.4rem; margin-bottom:16px; color:var(--ink);
  display:flex; align-items:center; gap:12px;
}
.problem-card p{ color:var(--text-soft); }
.problem-card .src{
  display:block; margin-top:20px;
  font-size:0.78rem; letter-spacing:0.02em;
  color:var(--marigold-deep); font-weight:600;
}
.problem-card .icn{ width:26px; height:26px; flex:none; }

@media (max-width:760px){
  .problem-grid{ grid-template-columns:1fr; }
  .problem-card + .problem-card{ border-left:none; border-top:1px solid var(--line); }
}

/* =========================================================
   Solution
========================================================= */
.solution-grid{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:clamp(36px,5vw,64px);
  align-items:center;
}
.solution ul{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; gap:18px;
}
.solution li{
  display:flex; gap:14px; align-items:flex-start;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.solution li:last-child{ border-bottom:none; padding-bottom:0; }
.solution li .num{
  font-family:var(--serif); color:var(--marigold-deep);
  font-size:1.05rem; flex:none; width:28px;
}
.solution li strong{ display:block; color:var(--ink); margin-bottom:2px; }
.solution li span{ color:var(--text-soft); font-size:0.97rem; }

/* device mock */
.device-mock{
  background:var(--ink);
  border-radius:6px;
  padding:clamp(18px,3vw,28px);
  position:relative;
}
.device-mock .bezel{
  background:#0E1712;
  border-radius:3px;
  padding:14px;
}
.screen-ui{
  background:linear-gradient(180deg,#1B2A21,#12201A);
  border-radius:2px;
  padding:18px;
  display:grid; gap:12px;
}
.screen-ui .row{ display:flex; gap:10px; }
.chip{
  background:rgba(224,147,46,0.14);
  border:1px solid rgba(224,147,46,0.4);
  color:#F1C685;
  font-size:0.72rem; padding:6px 10px; border-radius:20px;
}
.bubble{
  background:rgba(238,240,233,0.06);
  border:1px solid rgba(238,240,233,0.14);
  border-radius:4px; padding:12px 14px;
  color:var(--text-onink-soft); font-size:0.86rem;
}
.bubble.accent{ border-color:rgba(224,147,46,0.35); color:#F1C685; }
.mini-bars{ display:flex; gap:8px; align-items:flex-end; height:44px; }
.mini-bars i{ display:block; width:9px; background:var(--marigold); border-radius:2px 2px 0 0; opacity:.85; }
.device-cable{
  width:2px; height:34px; background:rgba(238,240,233,0.25);
  margin:0 auto;
}
.device-box{
  background:var(--ink-soft);
  border:1px solid rgba(238,240,233,0.14);
  border-radius:4px;
  padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between;
  max-width:220px; margin:0 auto;
}
.device-box span{ font-size:0.76rem; color:var(--text-onink-soft); }
.pulse{ width:8px; height:8px; border-radius:50%; background:var(--marigold); }

/* =========================================================
   Traction / architecture — asymmetric rule-divided columns
========================================================= */
.arch{ background:var(--ink); color:var(--text-onink); }
.arch .kicker{ color:#F1C685; }
.arch .section-head h2{ color:var(--text-onink); }
.arch .section-head .lede{ color:var(--text-onink-soft); }

.arch-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.arch-item{
  padding:32px clamp(20px,3vw,36px) 8px 0;
  border-top:1px solid var(--line-onink);
}
.arch-row .arch-item:not(:last-child){ border-right:1px solid var(--line-onink); }
.arch-item .icn{ width:30px; height:30px; margin-bottom:20px; }
.arch-item h3{ color:var(--text-onink); font-size:1.2rem; margin-bottom:12px; }
.arch-item p{ color:var(--text-onink-soft); font-size:0.97rem; }

@media (max-width:820px){
  .arch-row{ grid-template-columns:1fr; }
  .arch-row .arch-item:not(:last-child){ border-right:none; }
}

/* =========================================================
   Impact
========================================================= */
.impact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.impact-figure{
  background:var(--ink);
  color:var(--paper-high);
  padding:clamp(40px,5vw,56px) clamp(28px,4vw,40px);
  border-radius:4px;
}
.impact-figure strong{
  font-family:var(--serif);
  font-size:clamp(3.4rem,7vw,5.2rem);
  color:var(--marigold);
  display:block; line-height:1;
}
.impact-figure span{
  display:block; margin-top:12px;
  color:var(--text-onink-soft);
  font-size:0.98rem;
}
.impact-list{ margin-top:26px; display:grid; gap:22px; }
.impact-list li{ list-style:none; display:flex; gap:16px; }
.impact-list .icn{ width:24px; height:24px; flex:none; margin-top:2px; }
.impact-list strong{ display:block; color:var(--ink); }
.impact-list span{ color:var(--text-soft); font-size:0.97rem; }

/* =========================================================
   Market table
========================================================= */
.market-table{
  width:100%; border-collapse:collapse;
  font-size:0.96rem;
}
.market-table th{
  text-align:left; font-family:var(--sans); font-weight:600;
  background:var(--ink); color:var(--text-onink);
  padding:16px 20px;
}
.market-table td{
  padding:20px; vertical-align:top;
  border-bottom:1px solid var(--line);
  color:var(--text-soft);
}
.market-table tr:last-child td{ border-bottom:none; }
.market-table td:first-child{ color:var(--ink); font-weight:600; font-family:var(--serif); font-size:1.05rem; }
.market-table td:last-child{ color:var(--marigold-deep); font-weight:600; white-space:nowrap; }
.table-scroll{ overflow-x:auto; border:1px solid var(--line); }
.table-scroll table{ min-width:720px; }

/* =========================================================
   Business model
========================================================= */
.model-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.model-card{ padding:clamp(28px,4vw,44px) clamp(28px,4vw,44px) clamp(28px,4vw,44px) 0; }
.model-card:first-child{ border-right:1px solid var(--line); padding-right:clamp(28px,4vw,44px); }
.model-card:last-child{ padding-left:clamp(28px,4vw,44px); }
.model-card h3{ font-size:1.3rem; color:var(--ink); margin-bottom:14px; }
.model-card p{ color:var(--text-soft); }
@media (max-width:760px){
  .model-grid{ grid-template-columns:1fr; }
  .model-card:first-child{ border-right:none; border-bottom:1px solid var(--line); padding:28px 0; }
  .model-card:last-child{ padding:28px 0; }
}

/* =========================================================
   Roadmap timeline
========================================================= */
.roadmap-track{
  position:relative;
  margin-top:12px;
}
.roadmap-line{
  position:absolute; left:0; right:0; top:11px;
  height:1px; background:var(--line);
}
.roadmap-items{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; position:relative;
}
.roadmap-item{ padding-top:34px; position:relative; }
.roadmap-item::before{
  content:""; position:absolute; top:0; left:0;
  width:22px; height:22px; border-radius:50%;
  background:var(--paper); border:2px solid var(--ink);
}
.roadmap-item.done::before{ background:var(--ink); }
.roadmap-item .when{
  font-family:var(--serif); color:var(--marigold-deep);
  font-size:1.02rem; display:block; margin-bottom:8px;
}
.roadmap-item p{ color:var(--text-soft); font-size:0.94rem; }

@media (max-width:860px){
  .roadmap-line{ display:none; }
  .roadmap-items{ grid-template-columns:1fr; gap:0; }
  .roadmap-item{ padding:24px 0 24px 34px; border-left:1px solid var(--line); }
  .roadmap-item::before{ top:24px; }
}

/* =========================================================
   Contact / footer
========================================================= */
.contact{ background:var(--ink); color:var(--text-onink); }
.contact .kicker{ color:#F1C685; }
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px);
}
.contact h2{ color:var(--text-onink); font-size:clamp(2rem,3.6vw,2.9rem); }
.contact .lede{ color:var(--text-onink-soft); margin-top:18px; max-width:44ch; }

.contact-details{ margin-top:36px; display:grid; gap:16px; }
.contact-details div{ display:flex; gap:14px; align-items:flex-start; }
.contact-details .icn{ width:20px; height:20px; margin-top:3px; flex:none; }
.contact-details a{ color:var(--text-onink); text-decoration:none; }
.contact-details a:hover{ color:var(--marigold); }
.contact-details span{ display:block; color:var(--text-onink-soft); font-size:0.85rem; }

.org-line{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line-onink);
  color:var(--text-onink-soft); font-size:0.92rem;
}

/* form */
.form{ display:grid; gap:16px; }
.field label{
  display:block; font-size:0.85rem; color:var(--text-onink-soft); margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%;
  background:var(--ink-soft);
  border:1px solid var(--line-onink);
  color:var(--text-onink);
  padding:13px 14px;
  border-radius:2px;
  font-family:var(--sans);
  font-size:0.98rem;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--marigold);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form .btn-primary{ justify-self:start; margin-top:6px; }
.form-note{ font-size:0.82rem; color:var(--text-onink-soft); margin-top:4px; }
.form-status{ font-size:0.9rem; margin-top:6px; min-height:1.2em; }
.form-status.ok{ color:#B7E4B0; }
.form-status.err{ color:#E4A6A6; }

.footer-bottom{
  border-top:1px solid var(--line-onink);
  padding:22px 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
  color:var(--text-onink-soft); font-size:0.85rem;
}

/* =========================================================
   Reveal-on-load (single orchestrated moment for hero only)
========================================================= */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }

@media (max-width:900px){
  .hero-grid, .solution-grid, .impact-grid, .contact-grid{
    grid-template-columns:1fr;
  }
  .hero-art{ order:-1; }
}