/* ==========================================================================
   NG One — Stylesheet
   Split out from markup on purpose: one file to touch for design changes,
   markup files stay clean.
   ========================================================================== */

:root{
  --ink:#12241A;
  --ink-soft:#4B5C52;
  --paper:#FBFDFB;
  --mist:#EAF3EC;
  --line:#DCE6DF;
  --green:#1E8E4F;
  --green-deep:#0F5C34;
  --green-tint:#E4F3E9;
  --orange:#FF8A3D;
  --orange-deep:#E4701F;
  --white:#FFFFFF;
  --linkedin:#0A66C2;
  --max:1180px;
  --radius:14px;
  --space-fluid: clamp(1.25rem, 3vw, 3rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
h1,h2,h3{
  font-family:'Sora', 'Inter', sans-serif;
  color:var(--ink);
  line-height:1.15;
  margin:0;
}
a{color:inherit;text-decoration:none;}
.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--space-fluid);
}
section{padding-block: clamp(3rem, 8vw, 6.5rem);}

/* ---------- thin tricolor rule (brand device, reused everywhere) ---------- */
.tri-rule{
  display:flex;
  width:100%;
  height:4px;
  border-radius:4px;
  overflow:hidden;
}
.tri-rule span{flex:1;}
.tri-rule .o{background:var(--orange);}
.tri-rule .w{background:var(--white);}
.tri-rule .g{background:var(--green);}
.tri-rule.compact{width:64px;height:3px;}

/* ---------- NAV ---------- */
header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(251,253,251,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:0.9rem;
}
.logo{display:flex; flex-direction:column; gap:6px;}
.logo-text{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:-0.01em;
}
.logo-text .ng{color:var(--green-deep);}
.logo-text .one{color:var(--orange-deep);}

nav.links{display:flex; align-items:center; gap:clamp(1.1rem, 2vw, 2.2rem);}
nav.links a{
  font-size:0.95rem;
  font-weight:600;
  color:var(--ink-soft);
  padding:0.4rem 0.1rem;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
nav.links a:hover{color:var(--green-deep); border-color:var(--orange);}

.nav-cta{
  padding:0.6rem 1.2rem;
  background:var(--green);
  color:#fff;
  border-radius:999px;
  font-weight:600;
  font-size:0.9rem;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--green-deep);}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.hamburger span{width:24px;height:2px;background:var(--ink);border-radius:2px;}

.mobile-panel{
  display:none;
  flex-direction:column;
  gap:0.2rem;
  padding-block:0.5rem 1.2rem;
  border-top:1px solid var(--line);
}
.mobile-panel a{
  padding:0.75rem 0.2rem;
  font-weight:600;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-panel.open{display:flex;}

/* ---------- HERO (premium pass) ---------- */
.hero{position:relative; overflow:hidden;}

.hero::before{
  content:"";
  position:absolute;
  top:-120px; left:-160px;
  width:560px; height:560px;
  background:radial-gradient(circle, rgba(30,142,79,0.10) 0%, rgba(30,142,79,0) 70%);
  z-index:0;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  bottom:-180px; right:-140px;
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(255,138,61,0.10) 0%, rgba(255,138,61,0) 70%);
  z-index:0;
  pointer-events:none;
}

.hero .container{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:center;
}

.eyebrow-line{display:flex; align-items:center; gap:10px; margin-bottom:1.4rem;}

.hero-copy{
  opacity:0;
  transform:translateY(14px);
  animation: heroIn .7s ease forwards;
}
.hero-art{
  opacity:0;
  transform:translateY(14px) scale(0.98);
  animation: heroIn .8s ease forwards;
  animation-delay:.12s;
}
@keyframes heroIn{ to{ opacity:1; transform:none; } }

.hero h1{
  font-size:clamp(2.5rem, 5vw, 4rem);
  font-weight:700;
  letter-spacing:-0.02em;
  max-width:15ch;
}
.hero p.lede{
  margin-top:1.3rem;
  font-size:clamp(1.05rem, 1.3vw, 1.2rem);
  color:var(--ink-soft);
  max-width:44ch;
}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:2.2rem;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0.95rem 1.7rem;
  border-radius:999px;
  font-weight:600;
  font-size:0.98rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--green);
  color:#fff;
  box-shadow:0 10px 24px -8px rgba(15,92,52,0.55);
}
.btn-primary:hover{background:var(--green-deep); transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(15,92,52,0.6);}
.btn-ghost{border:1.5px solid var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--orange); color:var(--orange-deep); transform:translateY(-2px);}
.btn svg{width:18px; height:18px;}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:1.4rem;
  padding:0.55rem 1rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:0.82rem;
  font-weight:600;
  color:var(--ink-soft);
  box-shadow:0 10px 24px -12px rgba(18,36,26,0.25);
}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--green);}

.hero-art{width:100%;}

/* ---------- BANNER (now fills with a real image, edge-to-edge) ---------- */
.banner-wrap{padding-block: clamp(1.5rem, 4vw, 2.5rem) 0;}
.banner-slot{
  width:100%;
  aspect-ratio: 16 / 5;
  min-height:140px;
  border-radius: var(--radius);
  border:2px dashed #C9D8CE;
  background: repeating-linear-gradient(135deg, rgba(30,142,79,0.05) 0 18px, rgba(255,138,61,0.05) 18px 36px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.5rem;
  overflow:hidden;           /* NEW: clips the image to the rounded box */
}
/* NEW: once a real image is present, drop the dashed placeholder padding
   so the photo can run edge-to-edge instead of floating in the middle. */
.banner-slot:has(img){
  padding:0;
  border-style:solid;
  border-color:transparent;
}
.banner-slot .label{color:var(--ink-soft); font-weight:600; font-size:clamp(0.85rem, 1.4vw, 1rem);
  width:100%; height:100%;
}
.banner-slot .label small{display:block; font-weight:400; margin-top:4px; color:#7C8B81;}
/* NEW: the actual banner photo fills the whole slot and crops neatly -
   no gaps, no stretching, whatever the source image's proportions are. */
.banner-slot .label img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
  display:block;
}

/* ---------- SECTION HEADS ---------- */
.section-head{max-width:640px; margin-bottom: clamp(2rem, 4vw, 3rem);}
.section-head h2{font-size:clamp(1.7rem, 3vw, 2.4rem); font-weight:700;}
.section-head p{margin-top:0.8rem; color:var(--ink-soft); font-size:1.05rem;}
.section-head .tri-rule.compact{margin-bottom:1rem;}

/* ---------- APP SHOWCASE (screenshots now fill each phone screen) ---------- */
.showcase{background:var(--mist);}
.phone-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:clamp(1.2rem, 2.4vw, 2rem);
}
.phone-card{display:flex; flex-direction:column; align-items:center; gap:0.9rem;}
.phone-frame{
  width:100%;
  max-width:250px;
  aspect-ratio: 9 / 19;
  background:var(--ink);
  border-radius:34px;
  padding:10px;
  box-shadow:0 18px 40px rgba(18,36,26,0.18);
}
.phone-screen{
  width:100%;
  height:100%;
  border-radius:24px;
  background:linear-gradient(165deg, var(--green-tint) 0%, #ffffff 55%, #FFEBDA 100%);
  position:relative;
  overflow:hidden;          /* clips the screenshot to the rounded screen */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
}
/* NEW: no padding once a real screenshot is loaded, so it fills the whole
   phone screen instead of sitting small in the middle with gaps. */
.phone-screen:has(img){padding:0;}
/* NEW: screenshot fills the entire screen area edge-to-edge, cropped
   neatly to match the rounded phone corners - this is the actual fix
   for "chhota area, bada gap". */
.phone-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius:inherit;
  display:block;
}
.phone-screen .placeholder-text{font-size:0.78rem; color:var(--ink-soft); font-weight:600; line-height:1.4;}
.phone-caption{font-weight:600; font-size:0.92rem; color:var(--ink); text-align:center;}
.phone-caption span{display:block; font-weight:400; font-size:0.8rem; color:var(--ink-soft); margin-top:2px;}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
}
.about-copy p{color:var(--ink-soft); font-size:1.05rem; max-width:52ch;}
.about-copy p + p{margin-top:1rem;}

.pillar-list{display:flex; flex-direction:column;}
.pillar{
  padding-block:1.4rem;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns: 4px 1fr;
  gap:1.2rem;
}
.pillar:last-child{border-bottom:1px solid var(--line);}
.pillar .rule{border-radius:4px;}
.pillar:nth-child(1) .rule{background:var(--green);}
.pillar:nth-child(2) .rule{background:var(--orange);}
.pillar:nth-child(3) .rule{background:var(--ink);}
.pillar h3{font-size:1.08rem; font-weight:700;}
.pillar p{margin-top:0.4rem; color:var(--ink-soft); font-size:0.96rem;}

/* ---------- FOUNDER (untouched - do not modify) ---------- */
.founder-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap:clamp(2rem, 5vw, 3.5rem);
  align-items:center;
}
.founder-portrait{
  width:100%;
  max-width:280px;
  aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(160deg, var(--green-tint), #FFF3E8);
  border:2px dashed #C9D8CE;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--ink-soft);
  font-weight:600;
  font-size:0.88rem;
  padding:1rem;
  margin-inline:auto;
  overflow:hidden;
  position:relative;
}
.founder-portrait img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  padding:0;
}
.founder-portrait:has(img) .placeholder-label{ display:none; }
.founder-copy .quote-mark{
  font-family:'Sora', sans-serif;
  font-size:3rem;
  color:var(--orange);
  line-height:1;
}
.founder-name-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:1rem;
  flex-wrap:wrap;
}
.founder-name{font-size:1.3rem; font-weight:700;}

.linkedin-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:7px;
  background:var(--linkedin);
  flex-shrink:0;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 10px -3px rgba(10,102,194,0.5);
}
.linkedin-link:hover{transform:translateY(-2px) scale(1.05); box-shadow:0 8px 16px -4px rgba(10,102,194,0.6);}
.linkedin-link svg{width:16px; height:16px;}

.founder-role{color:var(--ink-soft); font-size:0.95rem; margin-top:2px;}
.founder-note{
  margin-top:1rem;
  padding:0.9rem 1rem;
  background:var(--green-tint);
  border-radius:10px;
  font-size:0.9rem;
  color:var(--green-deep);
  font-weight:600;
}

/* ---------- VISION BAND ---------- */
.vision{background:var(--green-deep); color:#fff; text-align:center;}
.vision .tri-rule.compact{margin-inline:auto; margin-bottom:1.4rem;}
.vision h2{color:#fff; font-size:clamp(1.6rem, 3.4vw, 2.5rem); max-width:820px; margin-inline:auto; font-weight:600; line-height:1.3;}
.vision p.support{margin-top:1.2rem; color:#CFE7D9; max-width:560px; margin-inline:auto; font-size:1rem;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:#D9E3DC; padding-block: clamp(3rem, 6vw, 4rem) 1.6rem;}
.footer-top{display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:clamp(2rem, 4vw, 3rem);}
.footer-brand .logo-text .ng{color:#fff;}
.footer-brand .logo-text .one{color:var(--orange);}
.footer-brand p{margin-top:0.9rem; color:#9FB1A6; font-size:0.92rem; max-width:34ch;}
.footer-col h4{font-family:'Sora', sans-serif; font-size:0.9rem; font-weight:700; color:#fff; margin-bottom:0.9rem;}
.footer-col a{display:block; padding-block:0.4rem; font-size:0.92rem; color:#9FB1A6;}
.footer-col a:hover{color:var(--orange);}
.footer-bottom{
  margin-top:clamp(2.5rem, 5vw, 3.5rem);
  padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:0.85rem;
  color:#8AA093;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  nav.links{display:none;}
  .hamburger{display:flex;}
  .hero .container{grid-template-columns:1fr;}
  .hero-art{max-width:360px; margin-inline:auto;}
  .about-grid{grid-template-columns:1fr;}
  .founder-grid{grid-template-columns:1fr; text-align:center;}
  .founder-name-row{justify-content:center;}
  .founder-copy .quote-mark{margin-inline:auto;}
  .founder-note{margin-inline:auto;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width: 600px){
  .footer-top{grid-template-columns:1fr;}
  .cta-row{flex-direction:column; align-items:stretch;}
  .btn{justify-content:center;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
  .hero-copy, .hero-art{opacity:1 !important; transform:none !important; animation:none !important;}
}