/* app/static/css/landing.css */

/* ── HOMEPAGE COLOR THEME — v2 (bright, warm, Indian-inspired) ──────
   Scoped to THIS file only — landing.css is loaded exclusively by
   home.html (verified), so these :root custom properties have zero
   effect on any other page, and the shared --brand-primary/
   --brand-secondary tokens + all other shared CSS files are untouched.

   NON-NEGOTIABLE: no black/near-black/deep-navy is used as a large
   background surface anywhere below — every section/card/nav/footer
   background comes from the warm ivory/cream/soft-blue/soft-green
   family. Deep blue (--lp-blue-text) is used ONLY for typography,
   borders and small accents, never as a fill. */
:root{
  --lp-ivory:        #FFFDF8;
  --lp-cream:         #FFF7E8;
  --lp-cream-deep:    #FBEAD2;   /* footer base — still warm/light, just a touch deeper for grounding */
  --lp-saffron:       #E8890C;
  --lp-soft-saffron:  #F6B544;
  --lp-saffron-tint:  #FDF0DC;   /* pastel card background */
  --lp-terracotta:    #D96C3F;
  --lp-green:         #2E8B68;
  --lp-soft-green:    #EAF7F1;
  --lp-soft-blue:     #EAF3FA;
  --lp-blue-text:     #17324D;   /* deep blue — TEXT/borders/accents only, never a large fill */
  --lp-blue-accent:   #1D5A8A;   /* AA-safe blue for the "soft-blue" card category's icon/accent */
  --lp-saffron-text:  #92400E;   /* AA-safe amber for saffron-colored TEXT on light backgrounds */
  --lp-muted:         #5B7185;   /* secondary/body text with a warm-neutral blue-gray tint */
  --lp-border:        rgba(23,50,77,.10);
  --lp-shadow-sm:     0 6px 18px rgba(23,50,77,.08);
  --lp-shadow-md:     0 14px 34px rgba(23,50,77,.10);
  --lp-shadow-lg:     0 24px 56px rgba(23,50,77,.14);
}

/* NAV */
.lp-nav{background:rgba(255,253,248,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--lp-border);padding:0 5%;height:66px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:999;box-shadow:0 2px 16px rgba(23,50,77,.05);}
.brand-link{display:flex;align-items:center;gap:10px;text-decoration:none!important;}
.brand-name{font-size:1.25rem;font-weight:900;color:var(--lp-blue-text);letter-spacing:-0.5px;font-family:var(--font-head);}
.lp-nav-links{display:flex;gap:var(--sp-6);}
.lp-nav-links a{color:var(--lp-muted);font-size:var(--fs-sm);font-weight:600;text-decoration:none;transition:color .2s;}
.lp-nav-links a:hover{color:var(--lp-blue-text);}
/* Reskins the SHARED .btn-primary component to the saffron theme only
   within these homepage contexts (nav + hero) — components.css itself
   is untouched, so every other page's buttons are unaffected. The
   final-cta section already has its own override further down. */
.lp-nav .btn-primary,.hero .btn-primary{
  background:linear-gradient(135deg,var(--lp-saffron),var(--lp-terracotta));
  box-shadow:0 4px 14px rgba(232,137,12,.3);
}
@media (hover:hover) and (pointer:fine){
  .lp-nav .btn-primary:hover,.hero .btn-primary:hover{box-shadow:0 6px 20px rgba(232,137,12,.4);}
}
/* Outline buttons on the bright nav/hero (was white-on-dark; now a
   deep-blue outline on light) — used on "Login" and "Explore Live
   Classroom". */
.lp-btn-outline{border-color:rgba(23,50,77,.22)!important;color:var(--lp-blue-text)!important;background:rgba(255,255,255,.5)!important;}
@media (hover:hover) and (pointer:fine){
  .lp-btn-outline:hover{border-color:var(--lp-saffron)!important;color:var(--lp-saffron-text)!important;}
}

/* HERO — bright ivory/cream, no dark background */
.hero{background:linear-gradient(180deg,var(--lp-ivory) 0%,var(--lp-cream) 100%);
  min-height:91vh;display:flex;align-items:center;justify-content:center;
  padding:5rem 6%;position:relative;overflow:hidden;}
.hero-bg-orb{position:absolute;border-radius:50%;animation:heroFloat 8s ease-in-out infinite;filter:blur(4px);}
.hero-orb-1{width:700px;height:700px;background:radial-gradient(circle,rgba(232,137,12,.16) 0%,transparent 65%);top:-220px;right:-200px;}
.hero-orb-2{width:560px;height:560px;background:radial-gradient(circle,rgba(46,139,104,.13) 0%,transparent 65%);bottom:-180px;left:-160px;animation-delay:3s;}
@keyframes heroFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}
/* Two-column hero (text + a lightweight product-preview visual) —
   collapses to a single centered column on narrower viewports (see the
   media query at the bottom of this file). */
.hero-grid{position:relative;z-index:2;max-width:1180px;width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);align-items:center;}
.hero-content{text-align:left;}
.hero-badge{display:inline-block;background:rgba(232,137,12,.12);border:1px solid rgba(232,137,12,.35);
  color:var(--lp-saffron-text);padding:7px 20px;border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.3px;margin-bottom:var(--sp-5);}
.hero-h1{font-family:var(--font-head);font-size:clamp(2.4rem,4.2vw,3.7rem);font-weight:900;
  color:var(--lp-blue-text);line-height:1.08;margin:0 0 var(--sp-5);letter-spacing:-1.5px;}
.hero-h1 span{color:var(--lp-saffron-text);}
.hero-sub{font-size:clamp(.9rem,1.4vw,1.08rem);color:var(--lp-muted);
  max-width:560px;margin:0 0 var(--sp-6);line-height:1.75;}
.hero-btns{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:var(--sp-10);}
.stat-n{font-size:2.2rem;font-weight:900;color:var(--lp-saffron-text);font-family:var(--font-head);line-height:1;}
.stat-l{font-size:var(--fs-xs);color:var(--lp-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px;}

/* ── HERO VISUAL — product-preview mockup ──────────────────────────
   A lightweight, self-contained illustration of the real product (Live
   Classroom: teacher narration + progressive whiteboard sketch) — no
   image asset, no new dependency, purely CSS/SVG. A clean floating
   white card with a soft blue-tinted shadow (premium-light style,
   replacing the old dark-glass treatment). */
.hero-visual{position:relative;}
.hero-mock{background:#fff;border:1px solid var(--lp-border);border-radius:var(--r-xl);
  box-shadow:var(--lp-shadow-lg);padding:var(--sp-5);}
.hero-mock-bar{display:flex;align-items:center;gap:6px;margin-bottom:var(--sp-4);}
.hero-mock-dot{width:9px;height:9px;border-radius:50%;background:rgba(23,50,77,.14);}
.hero-mock-title{margin-left:8px;font-size:var(--fs-xs);color:var(--lp-muted);font-weight:700;letter-spacing:.3px;}
.hero-mock-body{display:flex;gap:var(--sp-4);align-items:flex-start;}
.hero-mock-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--lp-saffron),var(--lp-terracotta));
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  box-shadow:0 4px 16px rgba(232,137,12,.35);}
.hero-mock-msg{background:var(--lp-cream);border:1px solid var(--lp-border);
  border-radius:4px 14px 14px 14px;padding:10px 13px;font-size:var(--fs-sm);
  color:var(--lp-blue-text);line-height:1.6;flex:1;}
.hero-mock-board{margin-top:var(--sp-4);background:var(--lp-ivory);
  border:1px solid var(--lp-border);border-radius:var(--r-md);padding:var(--sp-4);}
.hero-mock-board svg{display:block;width:100%;height:auto;}
.hero-mock-live{display:flex;align-items:center;gap:6px;margin-top:var(--sp-3);
  font-size:var(--fs-xs);color:var(--lp-muted);font-weight:700;}
.hero-mock-pip{width:6px;height:6px;border-radius:50%;background:var(--lp-green);animation:pipGlow 2s infinite;}
@keyframes pipGlow{0%,100%{opacity:1}50%{opacity:.35}}

/* SECTIONS */
.lp-sec{padding:80px 5%;}
.lp-sec-light{background:var(--lp-ivory);}
/* Was ".lp-sec-dark" (near-black) — now a bright soft green→blue tinted
   band, giving visual rhythm against the ivory sections without ever
   going dark. Class renamed in home.html to match (lp-sec-alt). */
.lp-sec-alt{background:linear-gradient(180deg,var(--lp-soft-green) 0%,var(--lp-soft-blue) 100%);}
.lp-container{max-width:1200px;margin:0 auto;}
.lp-sec-h{font-family:var(--font-head);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:900;
  text-align:center;color:var(--lp-blue-text);letter-spacing:-1px;margin-bottom:var(--sp-2);}
.lp-sec-sub{text-align:center;color:var(--lp-muted);font-size:var(--fs-md);
  max-width:520px;margin:0 auto var(--sp-10);}

/* FEATURES GRID — each card gets one of 4 pastel category tints
   (cream / soft-blue / soft-green / soft-saffron), cycling in order;
   the icon tile + "Explore" text pick up a matching accent color. */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5);}
/* Cards are real links now (each feature routes to its real page) —
   reset link defaults so it keeps reading exactly like a card, not a
   link, while staying a proper <a> for keyboard/SEO/middle-click. */
.feat-card{padding:var(--sp-6);cursor:pointer;text-decoration:none!important;
  display:flex;flex-direction:column;border-color:var(--lp-border);box-shadow:var(--lp-shadow-sm);}
.features-grid .feat-card:nth-child(4n+1){background:var(--lp-cream);        --tint-fg:var(--lp-saffron-text);}
.features-grid .feat-card:nth-child(4n+2){background:var(--lp-soft-blue);    --tint-fg:var(--lp-blue-accent);}
.features-grid .feat-card:nth-child(4n+3){background:var(--lp-soft-green);   --tint-fg:var(--lp-green);}
.features-grid .feat-card:nth-child(4n)  {background:var(--lp-saffron-tint);--tint-fg:var(--lp-terracotta);}
.feat-icon{width:52px;height:52px;border-radius:var(--r-md);margin-bottom:var(--sp-4);
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--tint-fg,var(--lp-saffron-text));box-shadow:var(--lp-shadow-sm);}
.feat-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.feat-title{font-size:var(--fs-md);font-weight:700;color:var(--lp-blue-text);margin-bottom:var(--sp-1);}
.feat-desc{font-size:var(--fs-sm);color:var(--lp-muted);line-height:1.65;margin-bottom:var(--sp-3);flex:1;}
.feat-cta{font-size:var(--fs-xs);font-weight:700;color:var(--tint-fg,var(--lp-saffron-text));display:inline-flex;align-items:center;gap:4px;margin-top:auto;}
.feat-cta-arrow{transition:transform var(--t-fast) var(--ease);}
@media (hover:hover) and (pointer:fine){
  .feat-card:hover .feat-cta-arrow{transform:translateX(4px);}
  .feat-card:hover{box-shadow:var(--lp-shadow-md);}
}

/* SUBJECTS / TRUST — lives on the bright .lp-sec-alt band */
/* Trust badges surface the SAME "NCERT • Class 4 & 9 • Bilingual" claim
   already shown in the hero badge — no new claims introduced. */
.trust-badges{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-10);}
.trust-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:1px solid var(--lp-border);color:var(--lp-blue-text);
  padding:8px 16px;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:700;box-shadow:var(--lp-shadow-sm);}
.subjects-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);}
.subj-card{background:#fff;border:1px solid var(--lp-border);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--lp-shadow-sm);}
.subj-badge{display:inline-block;background:var(--lp-saffron);color:white;padding:4px 14px;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--sp-4);}
.subj-item{padding:8px 0;border-bottom:1px solid var(--lp-border);color:var(--lp-blue-text);font-size:var(--fs-sm);}
.subj-item:last-child{border-bottom:none;}

/* HOW IT WORKS */
.steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);position:relative;margin-top:var(--sp-8);}
.steps-row::before{content:'';position:absolute;top:36px;left:calc(16.7% + 24px);right:calc(16.7% + 24px);height:2px;background:linear-gradient(90deg,var(--lp-saffron),var(--lp-green));}
.step-card{text-align:center;}
.step-num{width:52px;height:52px;background:linear-gradient(135deg,var(--lp-saffron),var(--lp-terracotta));color:white;border-radius:50%;font-size:1.3rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-4);box-shadow:0 6px 20px rgba(232,137,12,.3);border:4px solid var(--lp-ivory);}
.step-title{font-size:var(--fs-md);font-weight:700;color:var(--lp-blue-text);margin-bottom:var(--sp-2);}
.step-desc{font-size:var(--fs-sm);color:var(--lp-muted);line-height:1.65;}

/* LEARNING EXPERIENCE FLOW ── Student → AI Teacher → Voice → Whiteboard →
   Practice → Progress. Same visual language as .steps-row (numbered/
   iconed nodes + connector), applied to a 6-node horizontal flow. */
.flow-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-8);}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);width:118px;text-align:center;}
.flow-ic{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--lp-border);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:var(--lp-shadow-sm);}
.flow-lbl{font-size:var(--fs-xs);font-weight:700;color:var(--lp-blue-text);}
.flow-arrow{color:var(--lp-terracotta);font-size:1.2rem;flex-shrink:0;padding-bottom:26px;opacity:.55;}

/* FINAL CTA — warm saffron→terracotta gradient card (a contained,
   rounded accent element, not a page-level background surface) */
.final-cta{background:linear-gradient(135deg,var(--lp-saffron),var(--lp-terracotta));
  border-radius:var(--r-xl);padding:var(--sp-12) var(--sp-8);text-align:center;
  max-width:900px;margin:0 auto;box-shadow:var(--lp-shadow-lg);}
.final-cta-h{font-family:var(--font-head);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;color:white;margin-bottom:var(--sp-2);letter-spacing:-.5px;}
.final-cta-sub{color:rgba(255,255,255,.9);font-size:var(--fs-md);margin-bottom:var(--sp-7);}
.final-cta .btn-primary{background:white;color:var(--lp-saffron-text);box-shadow:0 8px 24px rgba(23,50,77,.18);}
@media (hover:hover) and (pointer:fine){ .final-cta .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(23,50,77,.22);} }

/* FOOTER — warm deep-cream, still fully within the light palette */
.lp-footer{background:linear-gradient(180deg,var(--lp-cream) 0%,var(--lp-cream-deep) 100%);
  padding:var(--sp-12) 5% var(--sp-8);border-top:1px solid var(--lp-border);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-8);margin-bottom:var(--sp-8);}
.footer-tag{color:var(--lp-muted);font-size:var(--fs-sm);margin-top:var(--sp-2);line-height:1.65;max-width:280px;}
.footer-col-h{color:var(--lp-blue-text);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:var(--sp-4);}
.footer-links{display:flex;flex-direction:column;gap:var(--sp-3);}
.footer-links a{color:var(--lp-muted);font-size:var(--fs-sm);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:var(--lp-saffron-text);}
.footer-bottom{border-top:1px solid var(--lp-border);padding-top:var(--sp-6);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3);}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-content{text-align:center;}
  .hero-btns,.hero-stats{justify-content:center;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .hero-visual{max-width:440px;margin:0 auto;width:100%;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:768px){
  .subjects-grid,.steps-row{grid-template-columns:1fr;}
  .steps-row::before{display:none;}
  .hero-stats{gap:var(--sp-6);}
  .lp-nav-links{display:flex;overflow-x:auto;max-width:38vw;gap:var(--sp-4);scrollbar-width:none;-ms-overflow-style:none;}
  .lp-nav-links::-webkit-scrollbar{display:none;}
  .flow-arrow{display:none;}
  .flow-node{width:88px;}
  .final-cta{padding:var(--sp-8) var(--sp-5);}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-6);}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}