:root{
    --white:#FFFFFF;
    --ivory:#FAF6EE;
    --peach:#F3DACE;
    --peach-soft:#F8E6DC;
    --peach-deep:#E8BFAB;
    --ink:#4A3A31;
    --brown:#7C6858;
    --brown-light:#A2907F;
    --bamboo:#6E8F63;
    --bamboo-deep:#516B49;
    --line: rgba(74,58,49,0.09);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--white);
    color:var(--ink);
    font-family:'Nunito',sans-serif;
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  a{color:inherit;}
  img{display:block; max-width:100%;}
  .wrap{max-width:1220px; margin:0 auto; padding:0 40px;}
  .eyebrow{
    font-family:'Nunito',sans-serif;
    font-size:12.5px;
    font-weight:800;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--bamboo-deep);
    display:flex; align-items:center; gap:9px;
    margin-bottom:16px;
  }
  .eyebrow::before{content:''; width:18px; height:2px; border-radius:2px; background:var(--peach-deep);}
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    line-height:1.1;
    color:var(--ink);
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Nunito',sans-serif; font-weight:700; font-size:14.5px;
    padding:18px 32px;
    border-radius:100px;
    cursor:pointer;
    border:1.5px solid transparent;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease;
    text-decoration:none;
    letter-spacing:0.01em;
  }
  .btn-primary{ background:var(--ink); color:var(--white); box-shadow:0 10px 22px -10px rgba(74,58,49,.4);}
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -12px rgba(74,58,49,.45);}
  .btn-outline{ background:var(--white); color:var(--ink); border-color:var(--peach-deep);}
  .btn-outline:hover{ transform:translateY(-2px); border-color:var(--ink);}

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transition:transform .4s ease;
  }
  header.hide{ transform:translateY(-100%); }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 40px; max-width:1220px; margin:0 auto;}
  .logo{ display:flex; align-items:center; gap:9px; font-family:'Fraunces',serif; font-size:19px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
  .logo svg{width:20px; height:20px; color:var(--bamboo-deep);}
  .logo .tag{font-family:'Nunito',sans-serif; font-size:10px; font-weight:800; color:var(--brown-light); letter-spacing:.1em; margin-left:2px;}
  .navlinks{ display:flex; gap:32px; font-size:14px; font-weight:600;}
  .navlinks a{ text-decoration:none; opacity:0.7; transition:opacity .25s;}
  .navlinks a:hover{opacity:1;}
  .navcta a{padding:11px 22px; font-size:13px;}

  /* ---------- HERO ---------- */
  .hero{ background:var(--white); padding-top:150px;}
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    align-items:center;
    column-gap:96px;
    max-width:1220px; margin:0 auto; padding:0 40px 80px;
  }
  .hero-product{ grid-column:1; }
  .hero-content{ grid-column:2; }
  .hero h1{ font-size:clamp(36px,4.4vw,54px); margin-bottom:22px;}
  .hero h1 .accent{ color:var(--bamboo-deep); font-style:italic;}
  .hero p.sub{ font-size:17px; color:var(--brown); max-width:460px; margin-bottom:34px; font-weight:500; line-height:1.65;}
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
  .trust-line{
    font-size:13.5px; font-weight:700; color:var(--brown); letter-spacing:.01em;
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  }
  .trust-line .sep{color:var(--peach-deep); font-weight:800;}
  .hero-product img{
    display:block; width:100%; height:auto; object-fit:contain;
    filter:drop-shadow(0 46px 42px rgba(74,58,49,0.16));
  }

  .strip{
    background:var(--ivory); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .strip .wrap{
    display:flex; justify-content:space-between; align-items:center;
    padding:15px 40px; flex-wrap:wrap; gap:10px;
    font-size:12.5px; font-weight:700; letter-spacing:0.03em; color:var(--brown);
  }

  /* ---------- SECTION GENERIC ---------- */
  section{ padding:104px 0; }
  .section-head{ max-width:620px; margin-bottom:52px;}
  .section-head h2{ font-size:clamp(28px,3.2vw,40px); }
  .section-head p{ font-size:16px; color:var(--brown); margin-top:16px; max-width:520px; font-weight:500;}
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{ opacity:1; transform:translateY(0);}

  /* ---------- FEATURES ---------- */
  .features{ background:var(--white);}
  .feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .feature-card{
    background:var(--ivory); border-radius:18px; padding:28px 22px;
    box-shadow:0 6px 18px -14px rgba(74,58,49,.18);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .feature-card:hover{ transform:translateY(-3px); box-shadow:0 16px 26px -18px rgba(74,58,49,.3);}
  .feature-icon{ width:30px; height:30px; margin-bottom:16px; color:var(--bamboo-deep);}
  .feature-card h3{ font-family:'Nunito',sans-serif; font-size:15px; font-weight:800; margin-bottom:6px; color:var(--ink);}
  .feature-card p{ font-size:13.5px; color:var(--brown);}

  /* ---------- SHOWCASE ---------- */
  .showcase-row{
    display:grid; grid-template-columns:1fr 1fr; gap:74px; align-items:center;
    padding:60px 0; border-top:1px solid var(--line);
  }
  .showcase-row:first-of-type{border-top:none;}
  .showcase-row.rev{ direction:rtl; }
  .showcase-row.rev > *{ direction:ltr; }
  .showcase-row .imgframe{ background:var(--ivory); border-radius:22px; padding:20px;}
  .showcase-row img{ border-radius:12px; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
  .showcase-row img:hover{ transform:scale(1.02);}
  .showcase-text .index{ font-family:'Nunito',sans-serif; color:var(--bamboo-deep); font-weight:800; font-size:12.5px; letter-spacing:.1em; margin-bottom:12px; display:block; text-transform:uppercase;}
  .showcase-text h3{ font-size:26px; margin-bottom:14px;}
  .showcase-text p{ color:var(--brown); font-size:15px; margin-bottom:20px; max-width:420px; font-weight:500;}
  .spec-list{ list-style:none; display:flex; flex-direction:column; gap:10px;}
  .spec-list li{ font-size:14.5px; display:flex; gap:10px; align-items:baseline; color:var(--ink); font-weight:600;}
  .spec-list li::before{ content:'✓'; color:var(--bamboo-deep); font-weight:800; flex:none; font-size:13px;}

  /* ---------- USE CASES ---------- */
  .usecases{ background:var(--ivory);}
  .usecases .section-head{margin-bottom:34px;}
  .usecase-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px;}
  .usecase-item{
    background:var(--white); border-radius:16px; padding:22px 14px;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
    font-weight:700; font-size:13px; color:var(--ink);
    box-shadow:0 6px 16px -14px rgba(74,58,49,.2);
  }
  .usecase-item .ic{width:22px; height:22px; color:var(--bamboo-deep); flex:none;}

  /* ---------- STATS / INVENTORY ---------- */
  .stats-section{ background:var(--white);}
  .stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}
  .stat-card{
    background:var(--ivory); border-radius:20px; padding:30px 24px; text-align:left;
    box-shadow:0 6px 18px -14px rgba(74,58,49,.18);
  }
  .stat-card .ic{width:24px; height:24px; color:var(--bamboo-deep); margin-bottom:14px;}
  .stat-card .num{ font-family:'Fraunces',serif; font-size:36px; font-weight:600; color:var(--ink);}
  .stat-card .lbl{ font-size:12.5px; font-weight:700; color:var(--brown); text-transform:uppercase; letter-spacing:.05em; margin-top:6px;}
  .avail-badge{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--white); border:1.5px solid var(--peach-deep); border-radius:100px;
    padding:11px 20px; font-size:13px; font-weight:800; color:var(--ink);
  }
  .avail-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--bamboo); animation:pulse 1.8s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(110,143,99,.4);}70%{box-shadow:0 0 0 8px rgba(110,143,99,0);}100%{box-shadow:0 0 0 0 rgba(110,143,99,0);}}

  /* ---------- LOGISTICS ---------- */
  .logistics{background:var(--ivory);}
  .logistics-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .logi-item{ background:var(--white); border-radius:18px; padding:28px 24px; box-shadow:0 6px 16px -14px rgba(74,58,49,.16);}
  .logi-item .lg-num{ font-family:'Nunito',sans-serif; font-weight:800; font-size:12px; color:var(--bamboo-deep); margin-bottom:12px; display:block; letter-spacing:.06em; text-transform:uppercase;}
  .logi-item h3{ font-size:18px; margin-bottom:8px; font-family:'Fraunces',serif; font-weight:500;}
  .logi-item p{ font-size:14px; color:var(--brown); font-weight:500;}

  /* ---------- BUYERS ---------- */
  .buyers{ background:var(--white);}
  .buyer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
  .buyer-card{
    border-radius:16px; padding:20px 16px; background:var(--ivory);
    display:flex; align-items:center; gap:12px;
    box-shadow:0 6px 16px -14px rgba(74,58,49,.16);
  }
  .buyer-card h3{ font-size:13.5px; font-weight:800; font-family:'Nunito',sans-serif; color:var(--ink); line-height:1.25;}
  .buyer-card .bicon{ width:22px; height:22px; color:var(--bamboo-deep); flex:none;}

  /* ---------- PRICING CTA ---------- */
  .pricing-cta{
    background:var(--peach-soft);
    text-align:center; padding:90px 0; position:relative; overflow:hidden;
  }
  .pricing-cta::before{
    content:''; position:absolute; width:380px; height:380px; background:rgba(255,255,255,.4);
    border-radius:45% 55% 60% 40% / 50% 45% 55% 50%; top:-170px; right:-130px;
  }
  .pricing-cta::after{
    content:''; position:absolute; width:260px; height:260px; background:var(--peach-deep);
    opacity:.35; border-radius:60% 40% 34% 66% / 52% 60% 40% 48%; bottom:-120px; left:-90px;
  }
  .pricing-cta h2{ font-size:clamp(26px,3.2vw,38px); margin-bottom:18px; position:relative;}
  .pricing-cta p{ color:var(--brown); font-size:15.5px; max-width:440px; margin:0 auto 34px; font-weight:600; position:relative;}
  .pricing-cta .btn{position:relative;}

  /* ---------- CONTACT ---------- */
  .contact{ background:var(--white);}
  .contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px;}
  .contact-info{background:var(--ivory); border-radius:24px; padding:42px 36px;}
  .contact-info h2{ font-size:clamp(26px,3vw,36px); margin-bottom:18px;}
  .contact-info p{ color:var(--brown); font-size:15px; margin-bottom:30px; max-width:400px; font-weight:500;}
  .contact-detail{ display:flex; flex-direction:column; gap:16px;}
  .contact-detail div{ border-top:1px solid var(--line); padding-top:14px;}
  .contact-detail .k{ font-size:11.5px; font-weight:800; color:var(--bamboo-deep); text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px;}
  .contact-detail .v{ font-size:14.5px; color:var(--ink); font-weight:600;}
  form{ display:flex; flex-direction:column; gap:20px;}
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .field{ display:flex; flex-direction:column; gap:7px;}
  .field label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--brown-light);}
  .field input, .field textarea, .field select{
    background:var(--white); border:1.5px solid var(--line); border-radius:12px;
    color:var(--ink); font-family:'Nunito',sans-serif; font-size:15px; font-weight:600; padding:13px 16px;
    outline:none; transition:border-color .3s;
    appearance:none; -webkit-appearance:none;
  }
  .field select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C6858' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  }
  .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--bamboo); }
  .field textarea{resize:vertical; min-height:90px;}
  .field input::placeholder, .field textarea::placeholder{color:var(--brown-light); font-weight:500;}
  form .btn{ align-self:flex-start; margin-top:6px;}

  footer{
    background:var(--ivory); color:var(--brown); border-top:1px solid var(--line);
    padding:30px 0; font-size:13px; font-weight:600;
  }
  .footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}

  /* ---------- STICKY CTA ---------- */
  .sticky-cta{
    position:fixed; bottom:26px; right:26px; z-index:90;
    display:flex; align-items:center; gap:9px;
    background:var(--ink); color:var(--white);
    padding:15px 22px; border-radius:100px;
    box-shadow:0 20px 36px -16px rgba(74,58,49,.5);
    font-size:13.5px; font-weight:700;
    cursor:pointer; text-decoration:none;
    opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
    transition:all .4s cubic-bezier(.2,.8,.2,1);
  }
  .sticky-cta.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .sticky-cta:hover{ transform:translateY(-2px);}
  .sticky-cta .dot{width:7px;height:7px;border-radius:50%;background:#9BC98F; animation:pulse 1.8s infinite;}

  /* ---------- FLOATING PRODUCT (desktop only) ---------- */
  .floating-product{
    position:fixed; left:28px; bottom:26px; z-index:85;
    width:78px; height:78px; border-radius:16px;
    background:var(--white); padding:8px;
    box-shadow:0 16px 32px -14px rgba(74,58,49,.35);
    opacity:0; transform:translateX(-16px) scale(.94);
    transition:opacity .5s ease, transform .5s ease;
    pointer-events:none;
  }
  .floating-product.show{ opacity:1; transform:translateX(0) scale(1);}
  .floating-product img{ width:100%; height:100%; object-fit:cover; border-radius:10px;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px){
    .wrap{padding:0 24px;}
    .nav{padding:16px 24px;}
    .navlinks{display:none;}
    .hero-grid{
      display:flex; flex-direction:column;
      grid-template-columns:none; padding:0 24px 60px; gap:0;
    }
    .hero-product{ order:1; width:100%; margin:0 0 28px; }
    .hero-content{ order:2; width:100%; }
    .hero p.sub{ margin-bottom:26px; }
    .hero{padding-top:110px;}
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .showcase-row, .showcase-row.rev{ grid-template-columns:1fr; direction:ltr; gap:28px;}
    .usecase-grid{grid-template-columns:repeat(3,1fr);}
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .logistics-grid{grid-template-columns:1fr; gap:14px;}
    .buyer-grid{grid-template-columns:repeat(2,1fr);}
    .contact-grid{grid-template-columns:1fr; gap:34px;}
    .form-row{grid-template-columns:1fr;}
    section{padding:64px 0;}
    .floating-product{display:none;}
  }
  @media (max-width:560px){
    .feature-grid, .stat-grid, .buyer-grid{grid-template-columns:1fr;}
    .usecase-grid{grid-template-columns:repeat(2,1fr);}
    .sticky-cta{right:16px; bottom:16px; padding:12px 18px; font-size:12.5px;}
    .contact-info{padding:30px 24px;}
  }
  /* Canonical mobile hero reorder — forces image before content regardless of
     any earlier cascade rules. !important is intentional here: this is the
     single source of truth for hero order on mobile. */
  @media (max-width: 768px) {
    .hero-grid {
      display: flex !important;
      flex-direction: column !important;
    }
    .hero-product {
      order: 1 !important;
      width: 100% !important;
    }
    .hero-content {
      order: 2 !important;
      width: 100% !important;
    }
    .hero-product img {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
      position: static !important;
      transform: none !important;
    }
  }

/* CTA buttons are real buttons so embedded preview hosts cannot rewrite them as outbound links. */
button.btn,
button.sticky-cta {
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}