/* ==========================================================
   MEDIX COLD CHAIN SOLUTIONS — style.css
   Edit colours in :root. Per-page looks live at the bottom,
   scoped with body[data-page="..."].
   ========================================================== */
:root{
  --blue:#0a63e8;--sky:#2fb4ff;--cyan:#12c9e8;--mint:#10c98f;--sun:#ffb547;--coral:#ff7a6b;--lilac:#8b7bff;
  --ink:#0b2a55;--muted:#5a6f8f;--bg:#f5fbff;--ice:#e6f5ff;--card:#fff;--line:rgba(11,42,85,.1);
  --r:26px;--sh:0 18px 50px rgba(20,90,180,.12);--sh2:0 8px 24px rgba(20,90,180,.1);
  --grad:linear-gradient(110deg,#0a63e8,#2fb4ff 55%,#10c98f);
  --tab-h:74px;--safe-b:env(safe-area-inset-bottom,0px);--ic2:var(--cyan);
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden;-webkit-tap-highlight-color:transparent;animation:pagein .6s ease both}
@keyframes pagein{from{opacity:0}}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{letter-spacing:-.04em;margin:0}p{line-height:1.75;color:var(--muted);margin:0 0 1em}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.sec{padding:96px 0;position:relative}
.eyebrow{display:inline-flex;gap:10px;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#0b7bc4}
.eyebrow:before{content:"";width:26px;height:3px;border-radius:3px;background:var(--grad)}
h2{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.04;margin:14px 0 16px}
.lead{font-size:1.08rem;max-width:620px}
.ic{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:none}
.ic .a{fill:var(--ic2);fill-opacity:.22;stroke:none}
.grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;border:0;font-weight:750;font-size:.92rem;cursor:pointer;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px)}.btn:active{transform:scale(.97)}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 12px 28px rgba(10,99,232,.28)}
.btn-w{background:#fff;color:var(--ink);box-shadow:var(--sh2)}
.btn-wa{background:#19c463;color:#fff;box-shadow:0 12px 28px rgba(25,196,99,.3)}
.btn-o{background:transparent;border:1.5px solid var(--line);color:var(--ink)}

/* header (desktop) */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.hdr .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.04em;line-height:1}
.brand img{height:58px;width:auto}
.nav{display:flex;gap:6px;align-items:center}
.nav a{padding:10px 14px;border-radius:999px;font-weight:700;font-size:.88rem;color:#2c4670;transition:.25s}
.nav a:hover{background:var(--ice)}.nav a.on{background:var(--ink);color:#fff}
.progress{position:fixed;left:0;top:0;height:3px;width:0;background:var(--grad);z-index:100}

/* mobile tab bar (app feel) */
.tabbar{display:none}
.fab{position:fixed;right:18px;bottom:24px;z-index:55;display:flex;flex-direction:column;gap:12px}
.fab a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.2);transition:.3s}
.fab a:hover{transform:scale(1.1) rotate(-6deg)}.fab .ic{width:26px;height:26px}
.fab .wa{background:#19c463}.fab .tel{background:var(--blue);display:none}
.fab .wa:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #19c463;animation:ping 2.2s infinite}.fab a{position:relative}
@keyframes ping{to{transform:scale(1.6);opacity:0}}

/* footer */
.ftr{background:linear-gradient(180deg,#e9f6ff,#d8eefc);padding:70px 0 30px;margin-top:40px;border-radius:44px 44px 0 0}
.ftr-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
.ftr h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.15em;color:#0b7bc4;margin-bottom:14px}
.ftr a{display:block;padding:5px 0;color:#33527d;font-weight:600;font-size:.92rem}.ftr a:hover{color:var(--blue)}
.ftr small{display:block;margin-top:40px;color:#5d7396;border-top:1px solid var(--line);padding-top:20px}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* accordion */
.acc{background:#fff;border-radius:20px;box-shadow:var(--sh2);border:1px solid var(--line);margin-bottom:12px;overflow:hidden;transition:box-shadow .3s}
.acc.open{box-shadow:var(--sh);border-color:rgba(10,99,232,.25)}
.acc-h{width:100%;display:flex;gap:14px;align-items:center;text-align:left;background:none;border:0;padding:20px 22px;cursor:pointer;font-weight:800;font-size:1.02rem}
.acc-h .ic:first-child{color:var(--blue);background:var(--ice);padding:9px;border-radius:14px;width:42px;height:42px}
.acc-h .pl{margin-left:auto;transition:transform .4s;color:var(--blue)}.acc.open .pl{transform:rotate(135deg)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.acc.open .acc-b{grid-template-rows:1fr}.acc-b>div{overflow:hidden}.acc-b .in{padding:0 22px 22px 78px}
.acc-b ul{margin:0;padding:0;list-style:none}.acc-b li{padding:8px 0 8px 26px;position:relative;color:var(--muted);line-height:1.6}
.acc-b li:before{content:"";position:absolute;left:0;top:15px;width:12px;height:12px;border-radius:50%;background:var(--grad)}

/* chips, cards */
.chips{display:flex;gap:10px;flex-wrap:wrap}.chip{padding:10px 16px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-weight:700;font-size:.86rem;cursor:pointer;transition:.25s}
.chip:hover{transform:translateY(-2px)}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh2);border:1px solid var(--line);padding:28px;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-8px);box-shadow:var(--sh)}
.badge{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--ice);color:var(--blue);margin-bottom:18px}.badge .ic{width:28px;height:28px}
.photo{border-radius:var(--r);overflow:hidden;position:relative;background:linear-gradient(135deg,#bfe6ff,#d9fff0)}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}.photo:hover img{transform:scale(1.07)}
.cta{margin:20px 0;border-radius:40px;padding:60px;background:var(--grad);color:#fff;display:flex;justify-content:space-between;gap:30px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden}
.cta h2{margin:0;max-width:640px}.cta p{color:#e6fbff;margin:10px 0 0}.cta:after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.14)}
.cta .btn{position:relative;z-index:2}
.marq{overflow:hidden;background:#fff;border-block:1px solid var(--line);padding:16px 0}
.marq div{display:flex;gap:46px;width:max-content;animation:mq 34s linear infinite;font-weight:800;color:#2c4670;white-space:nowrap}
.marq span{display:flex;gap:10px;align-items:center}.marq .ic{color:var(--blue)}@keyframes mq{to{transform:translateX(-50%)}}

/* page hero (inner pages) */
.phero{padding:70px 0 40px;position:relative;overflow:hidden}
.phero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:.98;margin:16px 0 18px;max-width:860px}

/* modal / bottom sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(11,42,85,.4);backdrop-filter:blur(6px);z-index:90;opacity:0;pointer-events:none;transition:.35s}
.sheet-bg.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;top:50%;z-index:91;width:min(720px,calc(100% - 28px));max-height:86vh;overflow:auto;background:#fff;border-radius:34px;padding:36px;transform:translate(-50%,-44%) scale(.94);opacity:0;pointer-events:none;transition:.45s cubic-bezier(.2,.8,.2,1)}
.sheet.open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.sheet .x{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;border:0;background:var(--ice);cursor:pointer}

/* ============ HOME ============ */
body[data-page=home] .hero{position:relative;overflow:hidden;background:radial-gradient(circle at 78% 30%,#cdeeff,transparent 55%),radial-gradient(circle at 5% 90%,#d3fbea,transparent 45%),linear-gradient(180deg,#f2faff,#fff)}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:690px;gap:20px;padding-block:40px}
.hero h1{font-size:clamp(2.8rem,5.8vw,5.4rem);line-height:.96;margin:20px 0}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.globe-box{position:relative;aspect-ratio:1;width:100%;max-width:640px;margin-left:auto;cursor:grab;touch-action:pan-y}
.globe-box:active{cursor:grabbing}.globe-box canvas{width:100%!important;height:100%!important;display:block}
.glass{position:absolute;background:rgba(255,255,255,.8);backdrop-filter:blur(14px);border:1px solid #fff;border-radius:20px;padding:12px 16px;box-shadow:var(--sh);font-size:.8rem;font-weight:700;animation:bob 6s ease-in-out infinite}
.glass b{display:block;font-size:1.5rem;letter-spacing:-.04em}.g1{left:0;top:14%}.g2{right:2%;bottom:12%;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-12px)}}
.gl-label{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:.72rem;font-weight:800;padding:6px 10px;border-radius:99px;transform:translate(-50%,-150%);white-space:nowrap;transition:opacity .3s}
.gl-hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:.74rem;font-weight:700;color:#5a7ca8}
.chain{background:linear-gradient(180deg,#fff,var(--ice))}
.chain-line{display:flex;justify-content:space-between;position:relative;margin:50px 0 34px}
.chain-line:before{content:"";position:absolute;left:5%;right:5%;top:34px;height:4px;background:#cfe6fa;border-radius:4px}
.chain-line .fill{position:absolute;left:5%;top:34px;height:4px;background:var(--grad);border-radius:4px;width:0;transition:width .6s}
.node{position:relative;z-index:2;background:none;border:0;cursor:pointer;text-align:center;width:20%}
.node i{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;margin:0 auto 10px;background:#fff;border:3px solid #cfe6fa;transition:.4s;color:var(--blue)}
.node.on i,.node:hover i{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.12);box-shadow:0 12px 30px rgba(10,99,232,.35)}
.node span{font-weight:800;font-size:.86rem}
.chain-panel{background:#fff;border-radius:30px;padding:34px;box-shadow:var(--sh);display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;min-height:250px}
.chain-panel h3{font-size:1.8rem;margin-bottom:10px}.deg{font-size:4rem;font-weight:900;letter-spacing:-.06em;line-height:1}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sol-card{display:block;position:relative;overflow:hidden;min-height:330px;color:#fff;border-radius:var(--r);padding:26px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .4s}
.sol-card:hover{transform:translateY(-10px) rotate(-.6deg)}.sol-card:before{content:"";position:absolute;inset:0;background:var(--bgc);z-index:0}
.sol-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;mix-blend-mode:luminosity;transition:.8s}.sol-card:hover img{transform:scale(1.1);opacity:.5}
.sol-card>*{position:relative}.sol-card p{color:#ecf8ff;font-size:.9rem;margin:6px 0 0}.sol-card .ic{width:40px;height:40px;margin-bottom:auto;background:rgba(255,255,255,.22);padding:8px;border-radius:14px;width:52px;height:52px;position:absolute;top:22px;left:22px}
.stat{text-align:center}.stat b{font-size:3rem;letter-spacing:-.06em;display:block}
.hscroll{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ============ ABOUT ============ */
body[data-page=about]{--bg:#fffaf3}
body[data-page=about] .phero{background:radial-gradient(circle at 85% 20%,#d3fbea,transparent 50%),radial-gradient(circle at 10% 100%,#ffe9c9,transparent 45%)}
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.story-stick{position:sticky;top:110px}
.vial{width:150px;margin:30px 0}.vial svg{width:100%;overflow:visible}
.step-s{display:flex;gap:20px;padding:26px 0;border-top:1px solid var(--line);opacity:.4;transition:.5s}.step-s.on{opacity:1}
.step-s b{font-size:2.6rem;letter-spacing:-.06em;color:var(--blue);min-width:88px}
.flip{perspective:1000px;height:300px;cursor:pointer}.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.flip.on .flip-in,.flip:hover .flip-in{transform:rotateY(180deg)}
.flip-f,.flip-b{position:absolute;inset:0;backface-visibility:hidden;border-radius:30px;padding:34px;display:flex;flex-direction:column;justify-content:flex-end}
.flip-f{background:linear-gradient(135deg,#0a63e8,#2fb4ff);color:#fff}.flip-b{background:linear-gradient(135deg,#10c98f,#a4f3d4);color:#063a2a;transform:rotateY(180deg)}
.flip-b p{color:#064e39}.flip h3{font-size:2rem}
.val{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.val button{border:0;text-align:left;padding:24px;border-radius:26px;cursor:pointer;background:var(--c);transition:.4s;min-height:150px;position:relative}
.val button:hover{transform:rotate(-1.5deg) scale(1.03)}.val b{font-size:1.15rem;display:block;margin:10px 0 4px}.val small{display:block;max-height:0;overflow:hidden;opacity:0;transition:.5s;line-height:1.55;color:#2c4670}.val button.on small{max-height:180px;opacity:1}

/* ============ SOLUTIONS ============ */
body[data-page=solutions]{--bg:#f0f9ff}
.tabs{position:sticky;top:76px;z-index:40;padding:14px 0;background:rgba(240,249,255,.9);backdrop-filter:blur(12px)}
.tabs .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tabs .chip{white-space:nowrap;display:flex;gap:8px;align-items:center}
.panel{display:none;animation:pin .6s both}.panel.on{display:block}@keyframes pin{from{opacity:0;transform:translateX(30px)}}
.panel-g{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:start;margin-top:34px}
.panel .photo{height:420px;position:sticky;top:160px}
.tag{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);padding:10px 14px;border-radius:16px;font-weight:800;font-size:.82rem}
.thermo{background:#fff;border-radius:34px;padding:40px;box-shadow:var(--sh);display:grid;grid-template-columns:.7fr 1.3fr;gap:40px;align-items:center}
.tube{position:relative;width:70px;height:300px;margin:auto;border-radius:40px;background:#eaf4fd;border:3px solid #cfe6fa;overflow:hidden}
.tube i{position:absolute;bottom:0;left:0;right:0;transition:height .5s,background .5s;background:var(--tc,#2fb4ff)}
.tempv{font-size:clamp(3rem,7vw,5.5rem);font-weight:900;letter-spacing:-.07em;line-height:1}
input[type=range]{width:100%;accent-color:var(--blue);height:30px;margin:14px 0}
.band{display:inline-block;padding:6px 12px;border-radius:99px;font-weight:800;font-size:.8rem;background:var(--ice);color:var(--blue);margin-bottom:10px}

/* ============ APPROACH ============ */
body[data-page=approach]{--bg:#f4fffb;background-image:linear-gradient(rgba(16,201,143,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(16,201,143,.09) 1px,transparent 1px);background-size:44px 44px}
.steps-r{display:flex;gap:10px;margin:36px 0 26px}.steps-r button{flex:1;border:0;background:#fff;padding:18px 10px;border-radius:20px;font-weight:800;cursor:pointer;box-shadow:var(--sh2);transition:.35s;position:relative;overflow:hidden}
.steps-r button.on{background:var(--ink);color:#fff;transform:translateY(-6px)}.steps-r button em{display:block;font-style:normal;font-size:.7rem;opacity:.6;letter-spacing:.14em}
.step-p{display:none;background:#fff;border-radius:36px;padding:44px;box-shadow:var(--sh);grid-template-columns:auto 1fr 1fr;gap:34px;align-items:start;animation:pin .6s both}.step-p.on{display:grid}
.bignum{font-size:8rem;font-weight:900;letter-spacing:-.08em;line-height:.8;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step-p h3{font-size:2rem;margin-bottom:10px}.step-p h5{margin:0 0 10px;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:#0b7bc4}
.brief{display:grid;grid-template-columns:1fr 1fr;gap:30px;background:#fff;border-radius:36px;padding:40px;box-shadow:var(--sh)}
.brief h4{margin:20px 0 10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:#0b7bc4}
.brief-out{background:#0b2a55;color:#dff1ff;border-radius:26px;padding:26px;white-space:pre-wrap;font-size:.92rem;line-height:1.7;min-height:280px}

/* ============ SECTORS ============ */
body[data-page=sectors]{--bg:#fff8fb}
body[data-page=sectors] .phero{background:radial-gradient(circle at 90% 10%,#e2dcff,transparent 45%),radial-gradient(circle at 0 90%,#ffe0dc,transparent 40%)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bento button{border:0;text-align:left;border-radius:32px;padding:28px;min-height:250px;cursor:pointer;background:var(--c);position:relative;overflow:hidden;transition:.45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;justify-content:flex-end}
.bento button:nth-child(1){grid-column:span 3;grid-row:span 2}.bento button:nth-child(2),.bento button:nth-child(3){grid-column:span 3}.bento button:nth-child(n+4){grid-column:span 2}
.bento button:hover{transform:scale(1.03) rotate(-.8deg);z-index:2}
.bento .ic{position:absolute;right:20px;top:20px;width:80px;height:80px;opacity:.9;color:rgba(11,42,85,.82)}
.bento h3{font-size:1.6rem;margin-bottom:6px}.bento p{margin:0;color:#2c4670;font-size:.92rem}.more{margin-top:14px;font-weight:800;font-size:.84rem;display:flex;gap:6px;align-items:center}
.sheet h3{font-size:2rem;margin:6px 0 10px}.sheet .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0}.sheet h5{margin:0 0 8px;color:#0b7bc4;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}
.sheet ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.8}

/* ============ CONTACT ============ */
body[data-page=contact]{--bg:#fff9f0}
body[data-page=contact] .phero{background:radial-gradient(circle at 80% 0,#bfe8ff,transparent 50%),radial-gradient(circle at 0 100%,#ffe3bd,transparent 50%)}
.ct-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.ct-quick a{background:#fff;border-radius:22px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:var(--sh2);transition:.3s;font-weight:800;font-size:.88rem}.ct-quick a:hover{transform:translateY(-5px)}
.ct-quick small{display:block;font-weight:600;color:var(--muted);font-size:.74rem;word-break:break-all}.ct-quick .ic{width:46px;height:46px;padding:11px;border-radius:15px;background:var(--ice);color:var(--blue)}
.ct-g{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.form{background:#fff;border-radius:36px;padding:38px;box-shadow:var(--sh)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:16px}.fld label{display:block;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#4a6590;margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;padding:14px 16px;border-radius:16px;border:1.5px solid #dbe9f6;background:#f8fcff;outline:0;transition:.25s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 5px rgba(10,99,232,.1)}.fld textarea{min-height:120px;resize:vertical}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}.acts .btn{width:100%}.acts .full{grid-column:1/-1}
.preview{position:sticky;top:100px}
.phone{background:#e7f7ea;border-radius:34px;padding:16px;box-shadow:var(--sh);border:8px solid #0b2a55}
.phone-top{background:#128c4a;color:#fff;margin:-16px -16px 14px;padding:16px 18px;font-weight:800;border-radius:20px 20px 0 0;display:flex;gap:10px;align-items:center}
.bubble{background:#dcf8c6;border-radius:18px 18px 4px 18px;padding:14px 16px;font-size:.88rem;line-height:1.6;white-space:pre-wrap;color:#17352a;min-height:200px;box-shadow:0 2px 6px rgba(0,0,0,.08);word-break:break-word}
.toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:99px;font-weight:700;opacity:0;pointer-events:none;transition:.4s;z-index:120}.toast.on{opacity:1;transform:translate(-50%,0)}
.hours{display:flex;gap:6px;margin:14px 0}.hours i{flex:1;height:44px;border-radius:12px;background:#e4eef8;display:grid;place-items:center;font-style:normal;font-size:.7rem;font-weight:800}.hours i.o{background:var(--mint);color:#fff}

.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.split[style]{}.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* ============ RESPONSIVE / APP MODE ============ */
@media(max-width:980px){
  .hero .wrap,.split,.pair,.story,.panel-g,.thermo,.chain-panel,.brief,.ct-g,.step-p,.ftr-g{grid-template-columns:1fr}
  .grid4,.ct-quick{grid-template-columns:1fr 1fr}.grid3,.val{grid-template-columns:1fr 1fr}
  .globe-box{margin:auto;max-width:460px}.panel .photo,.story-stick,.preview{position:relative;top:0}.bignum{font-size:5rem}
  .bento{grid-template-columns:1fr 1fr}.bento button,.bento button:nth-child(n){grid-column:span 1;grid-row:auto;min-height:210px}.bento button:nth-child(1){grid-column:span 2}
}
@media(max-width:760px){
  body{padding-bottom:calc(var(--tab-h) + var(--safe-b))}
  .sec{padding:56px 0}.wrap{width:calc(100% - 32px)}
  .hdr .wrap{height:64px}.nav,.nav-cta{display:none}.brand img{height:50px}
  .hdr:after{content:"";position:absolute;right:16px;top:12px;width:40px;height:40px}
  .hdr .callbtn{display:grid}
  .tabbar{display:flex;position:fixed;z-index:70;left:12px;right:12px;bottom:calc(10px + var(--safe-b));height:var(--tab-h);background:rgba(255,255,255,.9);backdrop-filter:blur(22px);border-radius:28px;box-shadow:0 14px 40px rgba(11,42,85,.22);border:1px solid #fff;padding:6px}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.64rem;font-weight:800;color:#6c82a3;border-radius:22px;position:relative;z-index:1;transition:.3s}
  .tabbar a .ic{width:25px;height:25px;transition:.35s}.tabbar a.on{color:var(--blue)}.tabbar a.on .ic{transform:translateY(-3px) scale(1.12)}
  .tabbar a.on:before{content:"";position:absolute;inset:0;background:var(--ice);border-radius:22px;z-index:-1;animation:pop .4s}
  @keyframes pop{from{transform:scale(.6);opacity:0}}
  .fab{bottom:calc(var(--tab-h) + 28px + var(--safe-b));right:14px}.fab a{width:48px;height:48px}.fab .tel{display:grid}
  .ftr{border-radius:32px 32px 0 0;padding-bottom:40px}
  .hero .wrap{min-height:0;padding-top:18px}.hero h1{font-size:2.7rem}
  .grid4,.ct-quick{grid-template-columns:1fr}.grid3,.val,.hscroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 2px 18px;scrollbar-width:none}
  .hscroll>*,.val>*,.grid3.snap>*{flex:0 0 82%;scroll-snap-align:center}
  .chain-line{margin:34px 0 20px}.node i{width:52px;height:52px}.chain-line:before,.chain-line .fill{top:26px}.node span{font-size:.68rem}
  .card{padding:22px}.cta{padding:34px 26px;border-radius:30px}
  .steps-r{overflow-x:auto}.steps-r button{min-width:96px}.step-p,.brief,.form,.thermo{padding:24px;border-radius:28px}
  .row2,.acts,.sheet .cols{grid-template-columns:1fr}.bento{grid-template-columns:1fr}.bento button:nth-child(n){grid-column:span 1}
  .sheet{top:auto;bottom:0;left:0;width:100%;max-height:88vh;border-radius:30px 30px 0 0;transform:translateY(100%);padding:28px 22px calc(28px + var(--safe-b))}.sheet.open{transform:none}
  .tabs{top:64px}.acc-b .in{padding:0 20px 20px}.phone{border-width:6px}.toast{bottom:120px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

.globe-fb{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bfe6ff 45%,#2fb4ff);box-shadow:0 0 80px rgba(47,180,255,.5);animation:bob 6s ease-in-out infinite}