/* ============================================================
   NooKeto — Design System & Stylesheet
   Technology · Health · Longevity
   ============================================================ */

/* --- DESIGN TOKENS --- */
:root{
  /* Core brand palette */
  --ink:#0a0f0c;
  --ink-2:#0f1714;
  --ink-3:#13201b;
  --paper:#f7faf7;
  --paper-pure:#ffffff;

  /* Green spectrum — light → dark */
  --green-900:#0c2a1e;
  --green-700:#13573a;
  --green-500:#1f8a54;
  --green-400:#2fae66;
  --green-300:#52d486;
  --green-200:#8ef0b0;
  --lime:#b6f24a;

  /* Gradients */
  --grad-dark:linear-gradient(150deg,#0a0f0c 0%,#0d1a13 55%,#0c2a1e 100%);
  --grad-green:linear-gradient(120deg,#13573a 0%,#1f8a54 45%,#52d486 100%);
  --grad-lime:linear-gradient(110deg,#2fae66 0%,#b6f24a 100%);
  --grad-veil:linear-gradient(180deg,rgba(10,15,12,0) 0%,rgba(10,15,12,0.85) 100%);

  /* Text */
  --txt-dark:#0a0f0c;
  --txt-light:#eef5ef;
  --txt-muted-light:#9fb6a6;
  --txt-muted-dark:#566a5d;

  /* Borders */
  --border-dark:rgba(142,240,176,0.14);
  --border-light:rgba(10,15,12,0.10);

  /* Radii */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-xl:32px;

  /* Layout & type */
  --maxw:1080px;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  /* Image blend filters */
  --img-filter:saturate(0.78) contrast(1.05) brightness(0.96);
  --img-veil-dark:linear-gradient(150deg,rgba(8,18,12,0.86) 0%,rgba(10,30,20,0.62) 50%,rgba(12,42,30,0.78) 100%);
  --img-veil-green:linear-gradient(180deg,rgba(12,42,30,0.10),rgba(8,15,12,0.80));
  --img-tint-green:rgba(31,138,84,0.28);
}

/* --- RESET & BASE --- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--txt-dark);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-0.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}

/* --- ACCESSIBILITY --- */
.skip-link{position:absolute;top:-100%;left:16px;background:var(--lime);color:var(--ink);padding:12px 24px;border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:600;font-size:14px;z-index:100;transition:top .2s}
.skip-link:focus{top:0}
*:focus-visible{outline:2px solid var(--green-400);outline-offset:2px}
button:focus-visible,.btn-primary:focus-visible,.btn-ghost:focus-visible,.nav-cta:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* --- TYPOGRAPHY --- */
.h-hero{font-size:clamp(40px,6vw,68px)}
.h-section{font-size:clamp(28px,4vw,42px)}
.eyebrow{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--green-300)}

/* --- LAYOUT --- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 28px}

/* --- ALTERNATING SEGMENT SYSTEM --- */
.seg-dark{background:var(--grad-dark);color:var(--txt-light);padding:96px 0;position:relative;overflow:hidden}
.seg-light{background:var(--paper);color:var(--txt-dark);padding:90px 0}
.seg-green{background:var(--grad-green);color:var(--ink);padding:80px 0}

/* Soft tech "glow" field */
.seg-dark .glow{position:absolute;width:620px;height:620px;background:radial-gradient(circle,rgba(47,174,102,0.30),transparent 65%);filter:blur(20px);pointer-events:none;z-index:0}
.seg-dark>.wrap{position:relative;z-index:2}

/* --- NAV --- */
nav{position:sticky;top:0;z-index:50;background:rgba(10,15,12,0.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-dark)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--txt-light)}
.logo span{background:var(--grad-lime);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:30px}
.nav-links a{color:var(--txt-muted-light);font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--green-300)}
.nav-cta{background:var(--grad-lime);color:var(--ink);padding:10px 20px;border-radius:100px;font-size:14px;font-weight:600;transition:transform .2s}
.nav-cta:hover{transform:translateY(-2px)}
.mobile-toggle{display:none;background:none;border:none;color:var(--txt-light);font-size:24px;cursor:pointer}

/* --- BUTTONS --- */
.btn-primary{background:var(--grad-lime);color:var(--ink);padding:15px 28px;border-radius:100px;font-weight:600;font-size:15px;display:inline-block;transition:transform .2s}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(238,245,239,0.3);color:var(--txt-light);padding:15px 28px;border-radius:100px;font-weight:500;font-size:15px;transition:border-color .2s;display:inline-block}
.btn-ghost:hover{border-color:var(--green-300)}
.seg-green .btn-primary{background:var(--ink);color:var(--lime)}

/* --- HERO --- */
.hero{position:relative;color:var(--txt-light);overflow:hidden;padding:120px 0 130px;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;filter:var(--img-filter) brightness(0.7) saturate(0.6)}
.hero-veil{position:absolute;inset:0;z-index:-1;background:var(--img-veil-dark)}
.hero::after{content:"";position:absolute;top:-25%;right:-8%;width:560px;height:560px;z-index:-1;background:radial-gradient(circle,rgba(47,174,102,0.30),transparent 65%);filter:blur(20px)}
.hero-inner{position:relative;max-width:660px}
.hero h1{font-size:clamp(40px,6vw,66px);margin:20px 0 24px}
.hero h1 em{font-style:normal;background:var(--grad-lime);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;color:#d4e4d8;max-width:540px;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:40px;margin-top:54px;flex-wrap:wrap}
.hero-stats .stat .n{font-family:var(--font-display);font-size:30px;color:var(--lime)}
.hero-stats .stat .l{font-size:13px;color:#bcd0c2}

/* --- SECTION HEAD --- */
.section-head{max-width:560px;margin-bottom:48px}
.section-head h2{font-size:clamp(28px,4vw,42px);margin:14px 0 16px;color:var(--ink)}
.section-head .eyebrow{color:var(--green-500)}
.section-head p{color:var(--txt-muted-dark);font-size:17px}
.seg-dark .section-head h2{color:var(--txt-light)}
.seg-dark .section-head p{color:var(--txt-muted-light)}

/* --- PILLAR CARDS --- */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar{background:var(--paper-pure);border:1px solid var(--border-light);border-radius:var(--r-lg);overflow:hidden;transition:transform .25s,box-shadow .25s}
.pillar:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(12,42,30,0.12)}
.pillar-img{position:relative;height:180px;overflow:hidden}
.pillar-img img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter) brightness(0.92);transition:transform .5s}
.pillar-img::after{content:"";position:absolute;inset:0;background:var(--img-tint-green);mix-blend-mode:multiply}
.pillar-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(10,20,15,0.55))}
.pillar:hover .pillar-img img{transform:scale(1.05)}
.pillar-body{padding:26px 26px 30px}
.pillar h3{font-size:21px;margin-bottom:10px;color:var(--ink)}
.pillar p{font-size:15px;color:var(--txt-muted-dark)}
.pillar .more{display:inline-block;margin-top:14px;font-weight:600;font-size:14px;color:var(--green-500)}

/* --- FEATURE BAND (photo background + numbers) --- */
.feature{position:relative;color:var(--txt-light);padding:100px 0;overflow:hidden;isolation:isolate}
.feature-bg{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;filter:var(--img-filter) brightness(0.55) saturate(0.5)}
.feature-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(8,15,12,0.92) 0%,rgba(10,30,20,0.78) 60%,rgba(12,42,30,0.5) 100%)}
.feature-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feature h2{font-size:clamp(28px,4vw,40px);margin:14px 0 20px}
.feature h2 em{font-style:normal;color:var(--green-300)}
.feature p{color:#cfe0d4;font-size:16px;margin-bottom:18px}

/* --- NUMBERS PANEL --- */
.numbers{background:rgba(19,32,27,0.72);backdrop-filter:blur(6px);border:1px solid var(--border-dark);border-radius:var(--r-lg);padding:32px}
.num-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border-dark)}
.num-row:last-child{border-bottom:none}
.num-row .k{font-size:14px;color:#bcd0c2}
.num-row .v{font-family:var(--font-display);font-size:24px;color:var(--green-300)}
.num-row .v.lime{color:var(--lime)}

/* --- REASON ROW (food item + reasoning) --- */
.food-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.reason-row{display:grid;grid-template-columns:84px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--border-light);align-items:center}
.reason-row .thumb{width:84px;height:84px;border-radius:var(--r-md);overflow:hidden;position:relative;flex-shrink:0}
.reason-row .thumb img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter) saturate(0.55) brightness(0.95);transition:filter .4s,transform .4s}
.reason-row .thumb::after{content:"";position:absolute;inset:0;background:var(--img-tint-green);mix-blend-mode:multiply;transition:opacity .4s}
.reason-row:hover .thumb img{filter:var(--img-filter) saturate(1) brightness(1);transform:scale(1.06)}
.reason-row:hover .thumb::after{opacity:0}
.reason-row .item{font-family:var(--font-display);font-size:18px;color:var(--ink)}
.reason-row .why{font-size:14px;color:var(--txt-muted-dark);margin-top:2px}

/* Reason row without thumbnail (text-only) */
.reason-row-text{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--border-light);align-items:baseline}
.reason-row-text .item{font-family:var(--font-display);font-size:19px;color:var(--ink)}
.reason-row-text .why{font-size:15px;color:var(--txt-muted-dark)}

/* --- ABOUT TEASER --- */
.about-band{background:var(--grad-dark);color:var(--txt-light);padding:90px 0;position:relative;overflow:hidden}
.about-inner{display:grid;grid-template-columns:0.8fr 1.2fr;gap:54px;align-items:center;position:relative;z-index:2}
.about-photo{border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:3/4}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter) brightness(0.95)}
.about-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,20,15,0.45));mix-blend-mode:multiply}
.about-band h2{font-size:clamp(26px,4vw,38px);margin:14px 0 18px}
.about-band h2 em{font-style:normal;color:var(--green-300)}
.about-band p{color:#cfe0d4;font-size:16px;margin-bottom:16px}
.about-band .more{color:var(--lime);font-weight:600;font-size:15px}

/* --- CALLOUT / CAUTION BOX --- */
.callout{background:linear-gradient(135deg,#fff7e6,#fdeccb);border-left:4px solid var(--green-500);border-radius:var(--r-md);padding:26px 30px}
.callout strong{color:var(--green-700)}
.callout p{font-size:15px;color:#5a4a2a;line-height:1.7}

/* --- RESEARCH CITATION BLOCK --- */
.citation{border:1px solid var(--border-light);border-radius:var(--r-md);padding:20px 24px;margin-bottom:14px}
.citation .source{font-weight:600;font-size:15px;color:var(--ink)}
.citation .finding{font-size:14px;color:var(--txt-muted-dark);margin-top:6px}
.citation a{color:var(--green-500);font-weight:500;font-size:14px}

/* --- CTA BAND --- */
.cta-band{background:var(--grad-green);color:var(--ink);padding:80px 0;text-align:center}
.cta-band h2{font-size:clamp(30px,5vw,46px);margin-bottom:18px;color:#06150e}
.cta-band p{font-size:18px;color:var(--green-900);margin-bottom:30px}

/* --- FOOTER --- */
footer{background:var(--ink);color:var(--txt-muted-light);padding:60px 0 36px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-grid h4{color:var(--txt-light);font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px}
.foot-grid a{display:block;color:var(--txt-muted-light);font-size:14px;padding:5px 0;transition:color .2s}
.foot-grid a:hover{color:var(--green-300)}
.foot-brand p{margin-top:14px;font-size:14px;max-width:280px}
.foot-bottom{border-top:1px solid var(--border-dark);padding-top:24px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-bottom a{color:var(--txt-muted-light);transition:color .2s}
.foot-bottom a:hover{color:var(--green-300)}

/* --- CONTENT PROSE (for inner pages) --- */
.prose{max-width:720px}
.prose h2{font-size:clamp(24px,3.5vw,36px);margin:48px 0 18px;color:var(--ink)}
.prose h3{font-size:clamp(20px,2.5vw,26px);margin:36px 0 14px;color:var(--ink)}
.prose p{font-size:16px;color:var(--txt-muted-dark);margin-bottom:18px;line-height:1.75}
.prose ul,.prose ol{margin:14px 0 24px 20px}
.prose li{font-size:16px;color:var(--txt-muted-dark);margin-bottom:8px;line-height:1.65}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose a{color:var(--green-500);font-weight:500;border-bottom:1px solid transparent;transition:border-color .2s}
.prose a:hover{border-bottom-color:var(--green-500)}

/* --- RESPONSIVE --- */
@media(max-width:860px){
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:rgba(10,15,12,0.96);padding:20px 28px;gap:16px}
  .mobile-toggle{display:block}
  .pillar-grid{grid-template-columns:1fr}
  .feature-inner{grid-template-columns:1fr}
  .about-inner{grid-template-columns:1fr}
  .food-list{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .reason-row-text{grid-template-columns:1fr;gap:4px}
  .hero{padding:80px 0 90px}
  .hero-stats{gap:24px}
  .about-photo{max-width:320px;margin:0 auto}
}

@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr}
  .hero-stats{flex-direction:column;gap:16px}
}