/* =====================================================================
   Phytopact — English site, 4 full-screen sections
   - Phones / small tablets (<1100px): normal vertical flow.
   - Desktop (>=1100px): each section is exactly one viewport (100vw x 100vh).
     The 16:9 artwork is scaled to fit the screen ("contain") and the area
     outside it is filled by a blurred copy of the same artwork, so there is
     never a blank band. All positions / sizes are written in "u" units
     (1u = 1/2000 of the artwork width) and converted to calc() by build.py.
   ===================================================================== */
:root{
  --bg:#08221f; --accent:#46b880; --soft:#8fe3b4;
  --text:rgba(255,255,255,.90); --muted:rgba(255,255,255,.72);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}
.s-home{--bg-img:url(../img/bg1.jpg)}
.s-about{--bg-img:url(../img/bg2.jpg)}
.s-products{--bg-img:url(../img/bg3.jpg)}
.s-contact{--bg-img:url(../img/bg4.jpg)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}
.grad{background:linear-gradient(90deg,#e6fff1,#46b880);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------------- phones / tablets (default) ---------------- */
.hdr{position:sticky;top:0;z-index:50;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 12px;background:rgba(8,34,31,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.logo img{height:40px;width:auto}
.hdr nav ul{display:flex;flex-wrap:nowrap;gap:0;justify-content:center}
.hero .sub br{display:none}
.hdr nav a{display:block;padding:5px 10px;border-radius:99px;font-size:14px;white-space:nowrap;color:var(--muted)}
.hdr nav a.on{background:linear-gradient(180deg,#52c48c,#2a8f77);color:#fff;font-weight:600}
.dots,.bgfx,.stage-bg,.d-only{display:none}
.screen{position:relative;overflow:hidden;scroll-margin-top:96px;padding:34px 0 40px;
  background:radial-gradient(ellipse at 90% 0%,rgba(70,184,128,.18),transparent 55%),var(--bg)}
.screen+.screen{border-top:1px solid rgba(255,255,255,.06)}
.stage{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:0 20px}

h1,h2{font-weight:700;letter-spacing:-.01em;line-height:1.15}
.hero h1{font-size:clamp(32px,8.6vw,46px);margin-bottom:12px}
.hero .sub{font-size:clamp(17px,4.6vw,21px);line-height:1.45;font-weight:500;color:#fff;margin-bottom:12px}
.hero .lead{font-size:16px;color:var(--muted);margin-bottom:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tags li{padding:6px 16px;border-radius:99px;font-size:14px;font-weight:600;border:1.5px solid var(--accent)}
.tags .white{background:#f2f7f5;color:#08221f;border-color:#f2f7f5}
.tags .green{background:var(--accent);color:#062019}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 30px;border-radius:99px;font-weight:700;font-size:16px;border:1.5px solid var(--accent);transition:filter .2s,background .2s}
.btn.solid{background:linear-gradient(90deg,#9cf0c3,#46b880);color:#062019;border-color:transparent}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.m-art{margin-top:24px;aspect-ratio:1/1;border-radius:22px;background:var(--bg-img) 90% 50%/auto 100% no-repeat;-webkit-mask-image:linear-gradient(to right,transparent,#000 22%);mask-image:linear-gradient(to right,transparent,#000 22%)}

.about h1,.products h2,.contact h2{font-size:clamp(30px,8vw,40px);margin-bottom:8px}
.about .sub,.subt{font-size:clamp(16px,4.2vw,19px);color:var(--muted);margin-bottom:16px}
.about .para{font-size:15px;color:var(--muted);margin-bottom:18px}
.m-factory{aspect-ratio:600/370;border-radius:18px;margin-bottom:16px;border:1px solid rgba(70,184,128,.3);background:var(--bg-img) 49.3% 25.2%/333.3% auto no-repeat}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(70,184,128,.28);border-radius:14px;padding:12px 8px;text-align:center}
.stat b{display:block;font-size:28px;line-height:1.15;font-weight:700;color:#a6f3c8}
.stat small{font-size:16px;color:#fff;margin-left:2px;font-weight:600}
.stat span{display:block;font-size:13px;line-height:1.35;color:var(--muted);margin-top:3px}
.feat{display:inline-block;margin-top:10px;padding:7px 22px;border-radius:99px;background:linear-gradient(90deg,#8fe3b4,#46b880);color:#082a21;font-weight:700;font-size:16px}
.feat-d{font-size:15px;color:var(--muted);margin-top:5px}
.hint{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;color:#e9fff4}
.hint::before{content:"";width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}

.product-grid{display:grid;gap:16px}
.card{display:block;border:1px solid rgba(70,184,128,.32);border-radius:18px;padding:18px 16px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03))}
.pl h3{font-size:21px;font-weight:700;line-height:1.25}
.pile{height:96px;width:auto;margin:8px 0 4px}
.pl p{font-size:15px;line-height:1.5;color:var(--text)}
.pill{display:inline-flex;align-items:center;margin-top:10px;height:34px;padding:0 18px;border-radius:99px;background:linear-gradient(90deg,#8fe3b4,#46b880);color:#07271f;font-weight:700;font-size:14px}
.pr{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.16)}
.kv{font-size:15px;margin-top:4px}.kv b{color:rgba(255,255,255,.6);font-weight:500;margin-right:8px;display:inline-block;min-width:72px}
.purity strong{font-size:26px;color:#9cf0c3;margin-left:2px;font-weight:700}
.qa{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:8px}.qa b{color:#fff;font-weight:600}

.form{background:#f4f8f6;color:#12312d;border-radius:20px;padding:20px 16px;margin-bottom:16px}
.f-row{display:grid;gap:0 12px}
.fld{margin-bottom:12px;display:flex;flex-direction:column;gap:4px}
.fld label{font-size:14px;font-weight:600}
.fld input,.fld select{width:100%;height:44px;border:1.5px solid #c6d6d1;border-radius:8px;padding:0 12px;font-size:16px;color:#12312d;background:#fff}
.fld textarea{width:100%;height:150px;border:1.5px solid #c6d6d1;border-radius:8px;padding:10px 12px;font-size:16px;line-height:1.5;color:#12312d;background:#fff;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid rgba(70,184,128,.45);border-color:var(--accent)}
.note{font-size:13px;color:#2c6d5a;margin:0 0 10px;min-height:1.5em}
.btn-submit{width:100%;height:50px;border:0;border-radius:99px;background:#17806d;color:#fff;font-size:17px;font-weight:700;cursor:pointer}
.btn-submit:hover{background:#1b9983}
.info{background:rgba(8,34,31,.82);border:1px solid rgba(70,184,128,.32);border-radius:20px;padding:22px 18px}
.info-logo{height:60px;width:auto;margin-bottom:14px;padding-bottom:0}
.info-list{display:grid;gap:12px;border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
.info-list dt{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.info-list dd{font-size:16.5px;line-height:1.4;word-break:break-word}
.info-list a:hover{color:var(--soft)}
.copy{margin-top:20px;font-size:13px;color:rgba(255,255,255,.5)}

/* ---------------- desktop: one screen = one viewport ---------------- */
@media (min-width:1100px){
  :root{--u:min(.05vw,.0888889vh)}
  html{scroll-snap-type:y mandatory;scrollbar-width:none;scroll-behavior:auto}
  html::-webkit-scrollbar{display:none}
  body{overflow-x:hidden}
  .d-only{display:block}
  .m-only{display:none}
  .screen{height:100vh;min-height:0;padding:0;scroll-margin-top:0;scroll-snap-align:start;scroll-snap-stop:always;background:#08221f;border:0}
  .bgfx{display:block;position:absolute;inset:-6%;background:var(--bg-img) center/cover no-repeat;filter:blur(24px) brightness(.82)}
  .stage-bg,.stage{position:absolute;left:50%;top:50%;width:calc(2000 * var(--u));height:calc(1125 * var(--u));margin:calc(-562.5 * var(--u)) 0 0 calc(-1000 * var(--u));max-width:none;padding:0}
  .stage-bg{display:block;background:var(--bg-img) 0 0/100% 100% no-repeat;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect}

  /* header + page dots */
  .hdr{position:fixed;left:50%;top:50%;width:calc(2000 * var(--u));height:calc(122 * var(--u));margin:calc(-562.5 * var(--u)) 0 0 calc(-1000 * var(--u));padding:0;display:block;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
  .hdr>*{pointer-events:auto}
  .logo{position:absolute;left:calc(62 * var(--u));top:calc(12 * var(--u))}
  .logo img{height:calc(98 * var(--u))}
  .hdr nav{position:absolute;left:calc(441 * var(--u));top:calc(38 * var(--u))}
  .hdr nav ul{flex-wrap:nowrap;gap:0}
  .hdr nav a{display:flex;align-items:center;justify-content:center;height:calc(46 * var(--u));padding:0 calc(36 * var(--u));font-size:max(12px,calc(23 * var(--u)));font-weight:500;color:rgba(255,255,255,.92);border-radius:0;transition:color .2s}
  .hdr nav a:hover{color:var(--soft)}
  .hdr nav a.on{background:linear-gradient(180deg,#52c48c,#2a8f77);color:#fff;font-weight:600;border-radius:calc(23 * var(--u)) calc(23 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(70,184,128,.35)}
  .dots{display:flex;flex-direction:column;gap:14px;position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60}
  .dots a{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:transparent;transition:all .25s}
  .dots a.on{background:var(--accent);border-color:var(--accent);transform:scale(1.35)}
  .dots a:hover{border-color:var(--soft)}

  /* ---- 1  Home ---- */
  .hero-col{position:absolute;left:calc(110 * var(--u));top:calc(196 * var(--u));width:calc(1100 * var(--u))}
  .hero h1{font-size:calc(74 * var(--u));line-height:calc(84 * var(--u));margin:0;white-space:nowrap}
  .hero .sub{font-size:max(14px,calc(33 * var(--u)));line-height:calc(44 * var(--u));margin:calc(24 * var(--u)) 0 0;white-space:nowrap}
  .hero .lead{font-size:max(12px,calc(25 * var(--u)));line-height:calc(38 * var(--u));margin:calc(16 * var(--u)) 0 0;width:calc(900 * var(--u));color:rgba(255,255,255,.82)}
  .tags{gap:calc(16 * var(--u));margin:calc(30 * var(--u)) 0 0}
  .tags li{height:calc(50 * var(--u));padding:0 calc(24 * var(--u));display:flex;align-items:center;border-radius:calc(99 * var(--u));font-size:max(12px,calc(22 * var(--u)));border-width:1.5px}
  .btns{gap:calc(18 * var(--u));margin-top:calc(24 * var(--u))}
  .btn{height:calc(58 * var(--u));padding:0 calc(40 * var(--u));font-size:max(12px,calc(24 * var(--u)));border-radius:calc(99 * var(--u))}
  .btn.solid{box-shadow:0 0 calc(28 * var(--u)) rgba(70,184,128,.5)}
  .btn:hover{filter:brightness(1.1)}
  .btn.ghost:hover{border-color:var(--soft);color:var(--soft);filter:none}
  .m-art{display:none}

  /* ---- 2  About ---- */
  .about-col{position:absolute;left:calc(120 * var(--u));top:calc(236 * var(--u));width:calc(545 * var(--u))}
  .about h1{font-size:calc(64 * var(--u));line-height:calc(72 * var(--u));margin:0}
  .about .sub{font-size:max(14px,calc(30 * var(--u)));line-height:calc(40 * var(--u));margin:calc(8 * var(--u)) 0 0;color:#fff}
  .about .para{font-size:max(12px,calc(22 * var(--u)));line-height:calc(33 * var(--u));margin:calc(16 * var(--u)) 0 0;color:rgba(255,255,255,.80)}
  .m-factory{display:none}
  .stats{position:absolute;left:calc(142 * var(--u));top:calc(575 * var(--u));width:calc(1631 * var(--u));height:calc(127 * var(--u));margin:0;display:grid;gap:0;grid-template-columns:318fr 294fr 243fr 227fr 235fr 314fr;align-items:center}
  .stat{height:calc(100 * var(--u));display:flex;flex-direction:column;justify-content:center;background:none;border:0;border-radius:0;padding:0 calc(10 * var(--u));border-left:1.5px solid rgba(255,255,255,.16)}
  .stat:first-child{border-left:0}
  .stat b{font-size:calc(54 * var(--u));line-height:calc(58 * var(--u));font-weight:700;background:linear-gradient(90deg,#d9ffea,#46b880);-webkit-background-clip:text;background-clip:text;color:transparent}
  .stat small{font-size:max(14px,calc(30 * var(--u)));margin-left:calc(3 * var(--u));font-weight:600;-webkit-text-fill-color:#fff}
  .stat span{font-size:max(12px,calc(20 * var(--u)));line-height:calc(24 * var(--u));margin-top:calc(3 * var(--u));color:rgba(255,255,255,.88)}
  .feat{position:absolute;margin:0;display:flex;align-items:center;justify-content:center;padding:0 calc(30 * var(--u)) 0 0;font-size:max(12px,calc(28 * var(--u)));font-weight:700;color:#082a21;background:none}
  .feat-d{position:absolute;margin:0;display:flex;align-items:center;font-size:max(12px,calc(25 * var(--u)));color:rgba(255,255,255,.92)}
  .f1{left:calc(140 * var(--u));top:calc(731 * var(--u));width:calc(343 * var(--u));height:calc(79 * var(--u))}.d1{left:calc(534 * var(--u));top:calc(731 * var(--u));height:calc(79 * var(--u))}
  .f2{left:calc(136 * var(--u));top:calc(833 * var(--u));width:calc(351 * var(--u));height:calc(81 * var(--u))}.d2{left:calc(534 * var(--u));top:calc(833 * var(--u));height:calc(81 * var(--u))}
  .hint{position:absolute;left:calc(142 * var(--u));top:calc(1050 * var(--u));height:calc(38 * var(--u));margin:0;gap:calc(16 * var(--u));font-size:max(12px,calc(22 * var(--u)));z-index:2;transition:color .2s}
  .hint::before{width:calc(13 * var(--u));height:calc(13 * var(--u))}
  .hint:hover{color:var(--soft)}
  .copy{position:absolute;right:calc(130 * var(--u));top:calc(1058 * var(--u));margin:0;font-size:max(12px,calc(18 * var(--u)));z-index:2}

  /* ---- 3 / 4  shared titles ---- */
  .products h2,.contact h2{position:absolute;left:0;width:calc(1990 * var(--u));top:calc(136 * var(--u));margin:0;text-align:center;font-size:calc(58 * var(--u));line-height:calc(68 * var(--u))}
  .subt{position:absolute;left:0;width:calc(1880 * var(--u));top:calc(218 * var(--u));margin:0;text-align:center;font-size:max(12px,calc(28 * var(--u)));line-height:calc(38 * var(--u));color:rgba(255,255,255,.88)}
  .contact .subt{left:calc(380 * var(--u));width:calc(1085 * var(--u));top:calc(208 * var(--u));text-align:left;font-size:max(12px,calc(25 * var(--u)));line-height:calc(34 * var(--u))}

  /* ---- 3  Products ---- */
  .product-grid{display:block}
  .card{position:absolute;display:grid;grid-template-columns:calc(300 * var(--u)) 1fr;padding:0 0 0 calc(30 * var(--u));border-radius:calc(26 * var(--u));border:0;background:none;transition:box-shadow .25s,background .25s}
  .card:hover{background:rgba(70,184,128,.08);box-shadow:inset 0 0 0 1.5px rgba(126,224,174,.75)}
  .c1{left:calc(248 * var(--u));top:calc(288 * var(--u));width:calc(742 * var(--u));height:calc(274 * var(--u))}
  .c2{left:calc(1018 * var(--u));top:calc(288 * var(--u));width:calc(725 * var(--u));height:calc(274 * var(--u))}
  .c3{left:calc(248 * var(--u));top:calc(590 * var(--u));width:calc(742 * var(--u));height:calc(322 * var(--u))}
  .c4{left:calc(1018 * var(--u));top:calc(590 * var(--u));width:calc(725 * var(--u));height:calc(322 * var(--u))}
  .pl{display:flex;flex-direction:column;align-items:flex-start;padding:calc(18 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)) 0}
  .pl h3{font-size:max(12px,calc(29 * var(--u)));line-height:calc(36 * var(--u));white-space:nowrap}
  .pile{height:calc(84 * var(--u));margin:calc(8 * var(--u)) 0 calc(4 * var(--u)) calc(-2 * var(--u));filter:drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.4))}
  .c3 .pile,.c4 .pile{height:calc(120 * var(--u));margin:calc(12 * var(--u)) 0 calc(8 * var(--u)) calc(-2 * var(--u))}
  .pl p{font-size:max(12px,calc(21 * var(--u)));line-height:calc(28 * var(--u));margin:0;color:rgba(255,255,255,.88)}
  .pill{margin-top:auto;height:calc(36 * var(--u));padding:0 calc(22 * var(--u));font-size:max(12px,calc(20 * var(--u)))}
  .pr{margin:calc(24 * var(--u)) 0;padding:0 calc(12 * var(--u)) 0 calc(38 * var(--u));border-top:0;border-left:1.5px solid rgba(255,255,255,.16);display:flex;flex-direction:column}
  .kv{font-size:max(12px,calc(23 * var(--u)));line-height:calc(32 * var(--u));margin-top:calc(2 * var(--u))}
  .kv b{min-width:calc(112 * var(--u));font-size:max(12px,calc(21 * var(--u)))}
  .purity{margin-top:calc(6 * var(--u))}
  .purity strong{font-size:max(14px,calc(40 * var(--u)));line-height:calc(44 * var(--u));vertical-align:calc(-4 * var(--u))}
  .qa{margin-top:auto;font-size:max(12px,calc(20 * var(--u)));line-height:calc(28 * var(--u))}

  /* ---- 4  Contact ---- */
  .form{position:absolute;left:calc(253 * var(--u));top:calc(312 * var(--u));width:calc(742 * var(--u));height:calc(603 * var(--u));margin:0;padding:0;background:none;border-radius:0}
  .f-row{position:absolute;left:calc(48 * var(--u));width:calc(646 * var(--u));gap:0 calc(20 * var(--u))}
  .fld{margin:0;gap:calc(6 * var(--u))}
  .fld label{font-size:max(12px,calc(21 * var(--u)));line-height:calc(26 * var(--u));font-weight:600}
  .fld input,.fld select{height:calc(46 * var(--u));border-radius:calc(8 * var(--u));padding:0 calc(14 * var(--u));font-size:max(12px,calc(22 * var(--u)));border-width:1.5px}
  .fld textarea{height:calc(236 * var(--u));border-radius:calc(8 * var(--u));padding:calc(12 * var(--u)) calc(14 * var(--u));font-size:max(12px,calc(22 * var(--u)));line-height:calc(31 * var(--u));border-width:1.5px}
  .r1{top:calc(28 * var(--u))}.r2{top:calc(118 * var(--u))}.r3{top:calc(208 * var(--u))}.r4{top:calc(298 * var(--u))}
  .r1,.r2{grid-template-columns:1fr 1fr}
  .note{position:absolute;left:calc(48 * var(--u));top:calc(494 * var(--u));margin:0;font-size:max(12px,calc(19 * var(--u)));line-height:calc(26 * var(--u));min-height:0}
  .btn-submit{position:absolute;left:calc(48 * var(--u));top:calc(524 * var(--u));width:calc(646 * var(--u));height:calc(50 * var(--u));font-size:max(12px,calc(24 * var(--u)));border-radius:calc(99 * var(--u));box-shadow:0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(23,128,109,.35)}
  .info{position:absolute;left:calc(1036 * var(--u));top:calc(312 * var(--u));width:calc(704 * var(--u));height:calc(603 * var(--u));margin:0;padding:0;background:none;border:0;border-radius:0}
  .info-logo{position:absolute;left:calc(54 * var(--u));top:calc(30 * var(--u));height:calc(112 * var(--u));margin:0}
  .info-list{position:absolute;left:calc(54 * var(--u));top:calc(170 * var(--u));width:calc(600 * var(--u));gap:calc(16 * var(--u));padding-top:calc(22 * var(--u))}
  .info-list dt{font-size:max(12px,calc(19 * var(--u)));line-height:calc(26 * var(--u))}
  .info-list dd{font-size:max(12px,calc(27 * var(--u)));line-height:calc(36 * var(--u))}
}