:root{
    --ink:#1E1712;
    --ink-soft:#5B4C43;
    --ink-faint:#8A7A70;
    --paper:#F1E4DE;
    --paper-raised:#E7D3C9;
    --paper-line: rgba(30,23,18,0.14);
    --pulp:#A11350;
    --pulp-bright:#E8236F;
    --molasses:#8F5D22;
    --leaf:#5E7048;
    --shadow: rgba(30,17,10,0.16);

    --tone-hero: radial-gradient(120% 90% at 78% 8%, rgba(232,35,111,0.22), transparent 60%), var(--paper);
    --tone-origin: radial-gradient(120% 90% at 10% 0%, rgba(94,112,72,0.10), transparent 55%), var(--paper);
    --tone-vision: radial-gradient(130% 90% at 90% 100%, rgba(94,112,72,0.20), transparent 60%), var(--paper);
    --tone-product: radial-gradient(120% 90% at 15% 10%, rgba(232,35,111,0.24), transparent 55%), var(--paper);
    --tone-rnd: radial-gradient(120% 90% at 20% 0%, rgba(94,112,72,0.16), transparent 55%), radial-gradient(120% 90% at 90% 100%, rgba(143,93,34,0.16), transparent 55%), var(--paper);
    --tone-impact: radial-gradient(120% 90% at 85% 0%, rgba(143,93,34,0.22), transparent 58%), var(--paper);
    --tone-contact: var(--ink);
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#F1E4DE;
      --ink-soft:#CBB8AE;
      --ink-faint:#8C7A70;
      --paper:#17110D;
      --paper-raised:#241A14;
      --paper-line: rgba(241,228,222,0.14);
      --pulp:#FF5C93;
      --pulp-bright:#FF82AC;
      --molasses:#D89A52;
      --leaf:#9CB07A;
      --shadow: rgba(0,0,0,0.5);

      --tone-hero: radial-gradient(120% 90% at 78% 8%, rgba(255,92,147,0.16), transparent 60%), var(--paper);
      --tone-origin: radial-gradient(120% 90% at 10% 0%, rgba(156,176,122,0.08), transparent 55%), var(--paper);
      --tone-vision: radial-gradient(130% 90% at 90% 100%, rgba(156,176,122,0.14), transparent 60%), var(--paper);
      --tone-product: radial-gradient(120% 90% at 15% 10%, rgba(255,92,147,0.16), transparent 55%), var(--paper);
      --tone-rnd: radial-gradient(120% 90% at 20% 0%, rgba(156,176,122,0.12), transparent 55%), radial-gradient(120% 90% at 90% 100%, rgba(216,154,82,0.12), transparent 55%), var(--paper);
      --tone-impact: radial-gradient(120% 90% at 85% 0%, rgba(216,154,82,0.16), transparent 58%), var(--paper);
      --tone-contact: #0D0906;
    }
  }
  :root[data-theme="dark"]{
    --ink:#F1E4DE;
    --ink-soft:#CBB8AE;
    --ink-faint:#8C7A70;
    --paper:#17110D;
    --paper-raised:#241A14;
    --paper-line: rgba(241,228,222,0.14);
    --pulp:#FF5C93;
    --pulp-bright:#FF82AC;
    --molasses:#D89A52;
    --leaf:#9CB07A;
    --shadow: rgba(0,0,0,0.5);

    --tone-hero: radial-gradient(120% 90% at 78% 8%, rgba(255,92,147,0.16), transparent 60%), var(--paper);
    --tone-origin: radial-gradient(120% 90% at 10% 0%, rgba(156,176,122,0.08), transparent 55%), var(--paper);
    --tone-vision: radial-gradient(130% 90% at 90% 100%, rgba(156,176,122,0.14), transparent 60%), var(--paper);
    --tone-product: radial-gradient(120% 90% at 15% 10%, rgba(255,92,147,0.16), transparent 55%), var(--paper);
    --tone-rnd: radial-gradient(120% 90% at 20% 0%, rgba(156,176,122,0.12), transparent 55%), radial-gradient(120% 90% at 90% 100%, rgba(216,154,82,0.12), transparent 55%), var(--paper);
    --tone-impact: radial-gradient(120% 90% at 85% 0%, rgba(216,154,82,0.16), transparent 58%), var(--paper);
    --tone-contact: #0D0906;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:17px;
    line-height:1.6;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  .backdrop{
    position:fixed;
    inset:0;
    z-index:-1;
    background: var(--tone-hero);
    transition: background 900ms ease;
  }
  body[data-tone="origin"] .backdrop{ background: var(--tone-origin); }
  body[data-tone="vision"] .backdrop{ background: var(--tone-vision); }
  body[data-tone="product"] .backdrop{ background: var(--tone-product); }
  body[data-tone="rnd"] .backdrop{ background: var(--tone-rnd); }
  body[data-tone="impact"] .backdrop{ background: var(--tone-impact); }
  body[data-tone="contact"] .backdrop{ background: var(--tone-contact); }

  h1,h2,h3{
    font-family:"Fraunces", ui-serif, Georgia, serif;
    font-weight:500;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }

  .logo-header{ height:30px; width:auto; display:block; }
  .logo-hero{ height:clamp(64px, 9vw, 108px); width:auto; display:block; }

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 64px);
  }

  section{ position:relative; padding: clamp(64px,10vw,120px) 0; }

  .eyebrow{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:11.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color: var(--pulp);
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:16px; height:1px;
    background: var(--pulp);
    display:inline-block;
  }
  section[data-tone="contact"] .eyebrow{ color: var(--pulp-bright); }

  /* ---------- language toggle ---------- */
  .lang-toggle{
    display:flex;
    border:1px solid var(--paper-line);
    border-radius:999px;
    padding:3px;
    gap:2px;
  }
  .lang-btn{
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    letter-spacing:0.06em;
    padding:5px 12px;
    border-radius:999px;
    border:none;
    background:transparent;
    color: var(--ink-faint);
    cursor:pointer;
    transition: background 180ms ease, color 180ms ease;
  }
  .lang-btn.active{ background: var(--pulp); color:#FBEFE6; }
  .lang-btn:hover:not(.active){ color: var(--ink); }
  .lang-btn:focus-visible{ outline:2px solid var(--pulp-bright); outline-offset:2px; }
  body.lang-en .lang-hide-en{ display:none; }

  .reveal{ opacity:0; transform:translateY(18px); transition: opacity 700ms ease, transform 700ms ease; }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100svh;
    display:flex;
    align-items:center;
    padding-top: clamp(90px, 14vw, 140px);
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(32px, 6vw, 72px);
    align-items:center;
    width:100%;
  }
  .hero h1{
    font-size: clamp(3.6rem, 9vw, 6.4rem);
    line-height:0.94;
    letter-spacing:-0.01em;
  }
  .hero h1 em{ font-style:italic; color:var(--pulp); font-weight:400; }
  .tagline-en{
    font-family:"Fraunces", serif;
    font-style:italic;
    font-weight:400;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    color: var(--ink-soft);
    margin-top:20px;
    max-width:30ch;
  }
  .tagline-vi{
    font-size:0.95rem;
    color: var(--ink-faint);
    margin-top:8px;
  }
  .hero p.lede{
    margin-top:28px;
    max-width:46ch;
    color: var(--ink-soft);
    font-size:1.05rem;
  }
  .cta-row{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
  .btn{
    font-family:"Work Sans", sans-serif;
    font-weight:600;
    font-size:0.92rem;
    padding:14px 26px;
    border-radius:999px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid transparent;
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
  }
  .btn:focus-visible{ outline:2px solid var(--pulp-bright); outline-offset:3px; }
  .btn-primary{ background: var(--pulp); color:#FBEFE6; box-shadow: 0 10px 24px -12px var(--shadow); }
  .btn-primary:hover{ background: var(--pulp-bright); transform:translateY(-2px); }
  .btn-ghost{ border-color: var(--paper-line); color: var(--ink); }
  .btn-ghost:hover{ border-color: var(--pulp); color:var(--pulp); }

  .hero-art{ display:flex; justify-content:center; }
  canvas#fruit{ width:100%; max-width:380px; height:auto; filter: drop-shadow(0 24px 40px var(--shadow)); }

  /* ---------- farm banner ---------- */
  .banner-section{ padding:0; }
  .banner-frame{
    position:relative;
    min-height: clamp(340px, 52vw, 560px);
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  .banner-frame img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 38%;
  }
  .banner-frame::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(0deg, rgba(15,9,6,0.86) 0%, rgba(15,9,6,0.42) 42%, rgba(15,9,6,0.05) 75%);
  }
  .banner-copy{
    position:relative; z-index:1;
    padding: clamp(28px,5vw,56px) clamp(20px,5vw,64px) clamp(32px,5vw,56px);
    color:#F7EAE3;
    max-width:900px;
  }
  .banner-copy .eyebrow{ color:#FFA8C7; }
  .banner-copy .eyebrow::before{ background:#FFA8C7; }
  .banner-copy h2{
    color:#FBF3EE;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height:1.02;
  }
  .banner-copy .sub{
    font-family:"Fraunces", serif;
    font-style:italic;
    font-weight:400;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    color: rgba(247,234,227,0.82);
    margin-top:14px;
  }

  /* ---------- shared prose ---------- */
  .kicker-heading{ font-size: clamp(2rem, 4vw, 3rem); max-width:16ch; }
  .col-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); margin-top:36px; align-items:start;}
  .prose{ max-width:60ch; color: var(--ink-soft); }
  .prose p + p{ margin-top:16px; }
  .pull-quote{
    font-family:"Fraunces", serif;
    font-style:italic;
    font-weight:400;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--pulp);
    line-height:1.3;
    margin:36px 0 0;
    max-width:22ch;
  }

  /* ---------- market stats ---------- */
  .stat-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    margin-top:56px;
    background: var(--paper-line);
    border:1px solid var(--paper-line);
  }
  .stat{ background: var(--paper); padding: 26px 22px; }
  .stat-highlight{ background: var(--paper-raised); }
  .stat-num{
    font-family:"Fraunces", serif;
    font-weight:500;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--ink);
  }
  .stat-highlight .stat-num{ color: var(--pulp); }
  .stat-label{ color: var(--ink-soft); font-size:0.86rem; margin-top:8px; line-height:1.4; }
  .stat-source{
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    letter-spacing:0.03em;
    color: var(--ink-faint);
    margin-top:14px;
  }

  /* ---------- pillars (vision) ---------- */
  .pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:56px; }
  .pillar{
    background: var(--paper-raised);
    border:1px solid var(--paper-line);
    padding:28px 24px;
    border-radius: 28px 12px 28px 12px;
  }
  .pillar .num{
    font-family:"IBM Plex Mono", monospace;
    font-size:11px; letter-spacing:0.1em; color:var(--leaf); text-transform:uppercase;
  }
  .pillar h3{ font-size:1.3rem; margin-top:10px; }
  .pillar p{ color:var(--ink-soft); margin-top:10px; font-size:0.96rem; }

  /* ---------- product showcase ---------- */
  .product-showcase{
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(28px,5vw,64px);
    align-items:center;
    margin-top:44px;
  }
  .product-photo{
    width:100%;
    height:auto;
    display:block;
    border-radius: 10% 46% 10% 46% / 6% 30% 6% 30%;
    box-shadow: 0 34px 64px -30px var(--shadow);
  }
  .blob-grid.compact{ grid-template-columns:1fr; gap:14px; margin-top:0; }
  .blob-grid.compact .blob-card{ padding:22px 24px; }

  /* ---------- product blobs ---------- */
  .blob-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
  .blob-card{
    background: var(--paper-raised);
    border:1px solid var(--paper-line);
    padding:32px 26px;
    text-align:left;
    box-shadow: 0 18px 40px -28px var(--shadow);
  }
  .blob-card:nth-child(1){ border-radius: 62% 38% 55% 45% / 45% 40% 60% 55%; }
  .blob-card:nth-child(2){ border-radius: 40% 60% 45% 55% / 55% 45% 55% 45%; }
  .blob-card:nth-child(3){ border-radius: 55% 45% 40% 60% / 40% 55% 45% 60%; }
  .blob-card .mark{
    font-family:"Fraunces", serif; font-style:italic; font-size:2.4rem; color:var(--pulp); line-height:1;
  }
  .blob-card h3{ font-size:1.08rem; margin-top:14px; letter-spacing:0.01em; }
  .blob-card p{ color:var(--ink-soft); margin-top:8px; font-size:0.94rem; }

  /* ---------- standards & compliance ---------- */
  .cred-block{ margin-top:56px; }
  .cred-block h3.label{
    font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:0.1em; color:var(--leaf); text-transform:uppercase;
  }
  .cred-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
  .cred{ display:flex; gap:12px; padding-top:18px; border-top:1px solid var(--paper-line); }
  .cred-icon{ flex:none; width:22px; height:22px; margin-top:2px; }
  .cred-icon circle{ fill:none; stroke:var(--leaf); stroke-width:1.6; }
  .cred-icon path{ fill:none; stroke:var(--leaf); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .cred-title{ font-weight:600; font-size:0.96rem; }
  .cred-caption{ color:var(--ink-soft); font-size:0.86rem; margin-top:4px; line-height:1.4; }
  .cred-forward{
    font-family:"Fraunces", serif; font-style:italic; font-weight:400;
    color:var(--ink-faint); font-size:0.94rem; margin-top:22px; max-width:56ch;
  }
  .process-note{
    margin-top:28px;
    padding:18px 22px;
    border:1px dashed var(--paper-line);
    max-width:64ch;
  }
  .process-note .process-label{
    font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ink-faint);
  }
  .process-note p.process-text{ color:var(--ink-soft); font-size:0.88rem; margin-top:8px; line-height:1.55; }

  .ingredients{ margin-top:64px; }
  .ingredients h3.label{
    font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:0.1em; color:var(--molasses); text-transform:uppercase;
  }
  .ing-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; list-style:none; padding:0; }
  .ing-list li{ padding:18px 0; border-top:1px solid var(--paper-line); }
  .ing-list .name{ font-weight:600; }
  .ing-list p{ color:var(--ink-soft); font-size:0.92rem; margin-top:6px; }

  /* ---------- R&D value chain ---------- */
  .chain-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-top:44px;
  }
  .chain-card{
    background: var(--paper-raised);
    border:1px solid var(--paper-line);
    border-top:3px solid var(--chain-accent, var(--pulp));
    padding:28px 26px;
  }
  .chain-card .source-label{
    font-family:"IBM Plex Mono", monospace;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color: var(--chain-accent, var(--pulp));
  }
  .chain-card h3{ font-size:1.25rem; margin-top:10px; }
  .chain-card .desc{ color:var(--ink-soft); font-size:0.92rem; margin-top:8px; }
  .sku-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; list-style:none; padding:0; }
  .sku-chip{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.76rem;
    letter-spacing:0.01em;
    padding:6px 13px;
    border-radius:999px;
    border:1px solid var(--paper-line);
    color: var(--ink-soft);
    background: var(--paper);
  }
  .sku-chip.flagship{ background: var(--chain-accent, var(--pulp)); color:#FBEFE6; border-color: transparent; font-weight:600; }
  .chain-note{
    font-family:"Fraunces", serif;
    font-style:italic;
    font-weight:400;
    color: var(--ink-soft);
    font-size:1.05rem;
    max-width:52ch;
    margin-top:36px;
  }

  /* ---------- roadmap ---------- */
  .timeline{ margin-top:56px; border-left:1px solid var(--paper-line); padding-left:32px; display:flex; flex-direction:column; gap:38px; }
  .tl-item{ position:relative; }
  .tl-item::before{
    content:"";
    position:absolute; left:-38px; top:4px;
    width:11px; height:11px; border-radius:50%;
    background: var(--pulp);
    box-shadow: 0 0 0 4px var(--paper);
  }
  .tl-item .stage{ font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.1em; color:var(--molasses); text-transform:uppercase; }
  .tl-item h3{ font-size:1.25rem; margin-top:8px; }
  .tl-item p{ color:var(--ink-soft); margin-top:6px; max-width:52ch; }

  .impact-note{
    margin-top:44px;
    background: var(--paper-raised);
    border-left:3px solid var(--leaf);
    padding:22px 26px;
    max-width:58ch;
  }
  .impact-note p{ color:var(--ink-soft); }

  /* ---------- contact ---------- */
  .contact-section{ color:#F1E4DE; }
  .contact-section .eyebrow{ color: var(--pulp-bright); }
  .contact-section h2{ color:#F7EAE3; }
  .contact-section p.prose{ color: rgba(247,234,227,0.72); }
  .contact-grid{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-top:48px; }
  .mailto{
    font-family:"Fraunces", serif; font-style:italic; font-size: clamp(1.6rem,3vw,2.3rem);
    color:#F7EAE3; text-decoration:none; border-bottom:2px solid var(--pulp-bright); padding-bottom:4px;
  }
  .mailto:hover{ color: var(--pulp-bright); }
  .contact-fine{ color: rgba(247,234,227,0.55); font-size:0.85rem; margin-top:10px; }
  .contact-hotline{ margin-top:14px; font-family:"IBM Plex Mono", monospace; font-size:0.95rem; color: rgba(247,234,227,0.85); letter-spacing:0.02em; }
  .contact-hotline a{ color:#F7EAE3; text-decoration:none; border-bottom:1px solid var(--pulp-bright); padding-bottom:2px; }
  .contact-hotline a:hover{ color: var(--pulp-bright); }
  footer{
    border-top:1px solid rgba(247,234,227,0.14);
    margin-top:80px; padding-top:28px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    font-family:"IBM Plex Mono", monospace; font-size:11.5px; letter-spacing:0.06em; color:rgba(247,234,227,0.5);
    text-transform:uppercase;
  }

  @media (max-width:860px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-art{ order:-1; }
    .col-2{ grid-template-columns:1fr; }
    .pillars{ grid-template-columns:1fr; }
    .blob-grid{ grid-template-columns:1fr; }
    .ing-list{ grid-template-columns:1fr; }
    .contact-grid{ align-items:flex-start; }
    .product-showcase{ grid-template-columns:1fr; }
    .product-photo{ max-width:340px; margin:0 auto; }
    .banner-section h2{ font-size: clamp(2rem, 8vw, 3rem) !important; }
    .stat-row{ grid-template-columns:1fr; }
    .chain-grid{ grid-template-columns:1fr; }
    .cred-row{ grid-template-columns:1fr; }
  }