:root{
  --ink:#10241a;
  --muted:#66766c;
  --green-950:#0d2d1c;
  --green-900:#123c24;
  --green-800:#174f2d;
  --green-700:#24623a;
  --green-600:#337548;
  --brand:#5a9144;
  --lime:#a0b958;
  --lime-soft:#dbe8ad;
  --cream:#f7f9f2;
  --white:#ffffff;
  --line:#e4eadf;
  --shadow:0 24px 80px rgba(17,61,35,.12);
  --radius:24px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto;position:relative}
.section-pad{padding:112px 0}
.ambient{position:fixed;z-index:-1;border-radius:50%;filter:blur(10px);pointer-events:none;opacity:.6}
.ambient-one{width:420px;height:420px;right:-240px;top:160px;background:radial-gradient(circle,rgba(160,185,88,.22),transparent 70%)}
.ambient-two{width:360px;height:360px;left:-240px;top:720px;background:radial-gradient(circle,rgba(74,135,80,.12),transparent 72%)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);border-bottom:1px solid rgba(228,234,223,.75);backdrop-filter:blur(18px);transition:box-shadow .25s ease,background .25s ease}
.site-header.scrolled{box-shadow:0 12px 36px rgba(18,60,36,.08);background:rgba(255,255,255,.94)}
.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:156px;height:66px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:700;color:#415248}
.nav-links a{transition:color .2s ease,transform .2s ease}
.nav-links a:hover{color:var(--green-700)}
.nav-cta{padding:12px 18px;border-radius:999px;background:var(--green-800);color:#fff!important;box-shadow:0 10px 28px rgba(23,79,45,.2)}
.nav-cta:hover{transform:translateY(-1px)}
.nav-toggle{display:none;border:0;background:transparent;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:25px;height:2px;background:var(--green-900);margin:5px;border-radius:2px;transition:.25s}

.hero{padding-top:84px;min-height:720px;display:flex;align-items:center;background:linear-gradient(180deg,#fff 0%,#fbfcf8 100%);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(34,83,50,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(34,83,50,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 75%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:78px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #dfe8d8;background:#f8fbf4;border-radius:999px;color:var(--green-700);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.eyebrow.light{background:#fff;color:var(--brand)}
.eyebrow.inverted{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#dceab4}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(160,185,88,.16)}
.hero h1,.section-head h2,.split-copy h2,.faq-intro h2,.cta-copy h2{font-family:'Manrope',sans-serif;letter-spacing:-.045em;line-height:1.05;margin:22px 0 20px;color:var(--green-950)}
.hero h1{font-size:clamp(52px,6.1vw,82px);max-width:760px}
.hero h1 span{background:linear-gradient(135deg,var(--green-600),var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:18px;line-height:1.75;color:#596960;max-width:640px;margin:0}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:14px;font-weight:800;font-size:15px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--green-800),var(--green-600));box-shadow:0 16px 36px rgba(23,79,45,.22)}
.btn-primary:hover{box-shadow:0 20px 42px rgba(23,79,45,.28)}
.btn-secondary{border:1px solid #dfe7db;background:#fff;color:var(--green-800)}
.hero-meta{display:flex;gap:32px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line);max-width:560px}
.hero-meta div{display:flex;flex-direction:column;gap:1px}.hero-meta strong{font-family:'Manrope';font-size:14px;color:var(--green-900)}.hero-meta span{font-size:12px;color:#819087}

.hero-visual{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}
.glow-ring{position:absolute;width:510px;height:510px;border-radius:50%;background:radial-gradient(circle at 45% 45%,rgba(156,186,91,.34),rgba(52,119,72,.13) 38%,transparent 70%);filter:blur(6px)}
.dashboard-shell{width:640px;max-width:100%;background:#f8faf6;border:1px solid #dce5d8;border-radius:28px;box-shadow:0 35px 90px rgba(26,75,44,.18);overflow:hidden;transform:perspective(1200px) rotateY(-4deg) rotateX(2deg)}
.dash-topbar{height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e5ebe1}
.dash-brand,.dash-user{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px;color:#2b4334}.dash-brand img{width:27px;height:27px;object-fit:contain}.dash-user{font-size:10px;color:#66766c}.status-dot{width:7px;height:7px;border-radius:50%;background:#8db54d;box-shadow:0 0 0 4px rgba(141,181,77,.13)}
.dash-body{display:grid;grid-template-columns:58px 1fr;min-height:455px}.dash-sidebar{background:#153b24;display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:28px}.dash-sidebar span{width:21px;height:21px;border-radius:6px;background:rgba(255,255,255,.13)}.dash-sidebar .active{background:#99b453;box-shadow:0 0 0 6px rgba(153,180,83,.12)}
.dash-content{padding:24px}.dash-heading{display:flex;justify-content:space-between;align-items:flex-start}.dash-heading small{font-size:8px;letter-spacing:.13em;color:#86948b;font-weight:800}.dash-heading h3{font:800 17px 'Manrope';margin:4px 0 0}.dash-heading button{border:1px solid #dfe6dc;background:#fff;color:#577062;border-radius:9px;padding:7px 10px;font-size:9px;font-weight:800}
.metric-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;margin-top:18px}.metric-card{background:#fff;border:1px solid #e4eae1;border-radius:13px;padding:14px;min-height:93px;display:flex;flex-direction:column}.metric-card span{font-size:9px;color:#819087}.metric-card strong{font:800 17px 'Manrope';margin:6px 0}.metric-card small{font-size:8px;color:#7f8d84}.metric-card.featured{background:linear-gradient(135deg,#19492a,#2d7040);border:0;color:#fff}.metric-card.featured span,.metric-card.featured small{color:#d2e4d5}
.chart-card{margin-top:10px;background:#fff;border:1px solid #e4eae1;border-radius:13px;padding:14px 16px 10px}.chart-head{display:flex;justify-content:space-between;align-items:center}.chart-head div{display:flex;gap:6px;align-items:center}.chart-head span{font-size:9px;color:#819087}.chart-head strong{font-size:9px;color:#2f4d3a}.chart-head b{font:800 13px 'Manrope';color:#294635}.bar-chart{height:94px;display:flex;align-items:end;gap:9px;padding:14px 7px 0;border-bottom:1px solid #edf1eb}.bar-chart i{display:block;width:100%;height:var(--h);min-height:8px;border-radius:5px 5px 2px 2px;background:#dce8ce;position:relative;overflow:hidden}.bar-chart i:after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:#7fa351}.bar-chart i.today{background:#c8dda7}.bar-chart i.today:after{background:#3c7a49}.chart-labels{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;font-size:7px;text-align:center;color:#96a299;padding-top:5px}
.bottom-grid{display:grid;grid-template-columns:1.55fr .75fr;gap:10px;margin-top:10px}.mini-panel{background:#fff;border:1px solid #e4eae1;border-radius:13px;padding:12px}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.panel-title strong{font-size:9px}.panel-title span{font-size:7px;color:#678c5b}.product-row{display:grid;grid-template-columns:22px 1fr auto;gap:7px;align-items:center;padding:6px 0}.product-row+ .product-row{border-top:1px solid #eef1ec}.product-row em{width:19px;height:19px;border-radius:6px;background:#f1f6ea;display:grid;place-items:center;font-size:8px;font-style:normal;color:#608251}.product-row div{display:flex;flex-direction:column}.product-row b{font-size:8px}.product-row small{font-size:6.5px;color:#8b978f}.product-row>strong{font-size:8px}.stock-panel{display:flex;flex-direction:column}.stock-ring{margin:auto;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#719648 0 94%,#e9eee5 94%);position:relative}.stock-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}.stock-ring div{position:relative;text-align:center;z-index:1;display:flex;flex-direction:column}.stock-ring strong{font:800 11px 'Manrope'}.stock-ring small{font-size:6.5px;color:#7d8d82}
.float-card{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border:1px solid rgba(223,231,219,.9);border-radius:14px;padding:10px 13px;box-shadow:0 15px 35px rgba(26,68,41,.12);display:flex;align-items:center;gap:10px;z-index:2}.float-card>span{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:#eaf3dd;color:#4d7b39;font-weight:900}.float-card div{display:flex;flex-direction:column}.float-card small{font-size:8px;color:#849188}.float-card strong{font:800 11px 'Manrope'}.float-sales{left:-18px;bottom:64px}.float-stock{right:-5px;top:80px}

.trust-strip{border-block:1px solid var(--line);background:#fbfcf8}.trust-inner{min-height:80px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;color:#789083;font-size:13px}.trust-inner>span{font-weight:600;color:#9aa69e}.trust-inner strong{font:800 13px 'Manrope';color:#3e5c49}.trust-inner i{width:4px;height:4px;border-radius:50%;background:#aec078}
.section-head{max-width:720px;margin-bottom:52px}.section-head.centered{text-align:center;margin-inline:auto;margin-bottom:56px}.section-head h2,.split-copy h2,.faq-intro h2{font-size:clamp(38px,4.2vw,58px)}.section-head p,.split-copy>p,.faq-intro>p{font-size:17px;color:#69786f;line-height:1.75}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;min-height:286px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden}.feature-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-90px;top:-90px;background:radial-gradient(circle,rgba(160,185,88,.16),transparent 70%)}.feature-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(31,80,46,.1);border-color:#cedabc}.icon-wrap{width:48px;height:48px;border-radius:14px;background:#eff5e8;border:1px solid #e1ebd8;display:grid;place-items:center;color:#507b3f;font-size:20px;font-weight:800}.feature-card h3{font:800 20px 'Manrope';margin:20px 0 10px;color:#173825}.feature-card p{margin:0;color:#708077;font-size:14px;line-height:1.7}.feature-card a{margin-top:auto;padding-top:22px;font-size:13px;color:#558542;font-weight:800}

.insight-section{background:var(--green-950);color:#fff;overflow:hidden;position:relative}.insight-section:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;left:-260px;bottom:-350px;background:radial-gradient(circle,rgba(157,184,87,.16),transparent 70%)}.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.insight-visual{min-height:580px;position:relative;display:flex;justify-content:center;align-items:center}.phone-card{width:360px;background:#f7f9f5;color:#10241a;border-radius:34px;padding:23px 22px 27px;border:8px solid #102d1b;box-shadow:0 28px 70px rgba(0,0,0,.28);transform:rotate(-2deg)}.phone-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800}.phone-top img{width:28px;height:28px;object-fit:contain}.phone-top b{letter-spacing:2px;color:#7b8a80}.phone-greeting{margin-top:28px;padding:20px;border-radius:20px;background:linear-gradient(145deg,#174f2d,#2d7041);color:#fff;display:flex;flex-direction:column}.phone-greeting small{color:#bdd2c0;font-size:11px}.phone-greeting strong{font:800 28px 'Manrope';margin:7px 0}.phone-greeting span{font-size:10px;color:#dbe9d8}.phone-chart{height:130px;margin-top:20px;background:#fff;border:1px solid #e4eae1;border-radius:18px;padding:18px 14px;display:flex;align-items:end;gap:8px}.phone-chart span{flex:1;height:var(--v);background:linear-gradient(#9cb65b,#497f43);border-radius:5px 5px 2px 2px}.phone-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.phone-cards div{background:#fff;border:1px solid #e4eae1;border-radius:16px;padding:14px}.phone-cards small{display:block;color:#819087;font-size:9px}.phone-cards strong{font:800 16px 'Manrope'}.phone-list{margin-top:18px}.phone-list>b{font:800 11px 'Manrope'}.phone-list p{display:flex;justify-content:space-between;gap:12px;margin:8px 0 0;padding:10px 0;border-bottom:1px solid #e6ebe3;font-size:9px}.phone-list p span{color:#68766d}.phone-list p strong{font-size:9px}.orbit{position:absolute;padding:11px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);font-size:11px;font-weight:800;color:#dce8d8}.orbit-a{left:2%;top:16%}.orbit-b{right:0;bottom:18%}
.split-copy .eyebrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#c8dda1}.split-copy h2{color:#fff}.split-copy>p{color:#b6c5bb}.check-list{list-style:none;padding:0;margin:34px 0;display:grid;gap:21px}.check-list li{display:flex;gap:14px}.check-list li>span{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;background:#9fb958;color:#173922;font-weight:900}.check-list strong{font:800 15px 'Manrope'}.check-list p{margin:4px 0 0;color:#aebdb3;font-size:13px}.text-link{display:inline-flex;align-items:center;gap:9px;color:#a9c463;font-weight:800;font-size:14px}.text-link span{transition:transform .2s ease}.text-link:hover span{transform:translateX(4px)}

.numbers-section{background:#f4f7ef;border-bottom:1px solid #e1e8dc}.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr)}.number-item{padding:42px 28px;border-left:1px solid #e1e8dc}.number-item:last-child{border-right:1px solid #e1e8dc}.number-item strong{display:block;font:800 34px 'Manrope';color:#1a4f2e;letter-spacing:-.04em}.number-item span{display:block;font:800 13px 'Manrope';text-transform:uppercase;letter-spacing:.09em;color:#729157;margin:4px 0}.number-item p{margin:0;color:#839087;font-size:12px}
.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.usecase-card{display:flex;align-items:flex-start;gap:16px;border:1px solid var(--line);background:linear-gradient(145deg,#fff,#fbfcf8);border-radius:20px;padding:23px;transition:.25s}.usecase-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(24,71,40,.08)}.usecase-icon{width:47px;height:47px;flex:0 0 47px;border-radius:15px;background:#edf4e5;display:grid;place-items:center;font-size:20px}.usecase-card h3{font:800 17px 'Manrope';margin:0 0 6px}.usecase-card p{margin:0;color:#718078;font-size:13px;line-height:1.65}
.workflow-section{background:#f9fbf6;border-top:1px solid #edf1e9}.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.workflow-step{padding:22px 36px 8px;position:relative}.workflow-step:first-child{padding-left:0}.workflow-step:last-child{padding-right:0}.workflow-step>span{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid #dce5d6;color:#4f7b3f;font:800 13px 'Manrope';box-shadow:0 10px 24px rgba(25,71,41,.07)}.step-line{position:absolute;left:84px;right:-4px;top:45px;height:1px;background:linear-gradient(90deg,#b8c8a7,#e2e8de)}.workflow-step:last-child .step-line{display:none}.workflow-step h3{font:800 20px 'Manrope';margin:24px 0 8px}.workflow-step p{margin:0;color:#718078;font-size:14px;max-width:290px}
.faq-section{background:#fff}.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}.faq-intro{position:sticky;top:130px;align-self:start}.faq-intro .text-link{margin-top:18px;color:#5a8746}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item button{width:100%;border:0;background:transparent;display:flex;justify-content:space-between;gap:20px;align-items:center;text-align:left;padding:23px 0;color:#193a27;font:800 16px 'Manrope';cursor:pointer}.faq-item button b{font-size:21px;color:#7f9965}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}.faq-answer p{overflow:hidden;margin:0;color:#6d7a72;font-size:14px;line-height:1.75}.faq-item.open .faq-answer{grid-template-rows:1fr}.faq-item.open .faq-answer p{padding:0 35px 21px 0}

.cta-section{padding-top:40px}.cta-panel{min-height:390px;background:radial-gradient(circle at 90% 15%,rgba(171,198,100,.3),transparent 32%),linear-gradient(135deg,#0f3520,#1d5732 62%,#367543);border-radius:34px;padding:64px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;color:#fff;box-shadow:0 30px 70px rgba(17,61,35,.18)}.cta-copy{max-width:720px;position:relative;z-index:2}.cta-copy h2{color:#fff;font-size:clamp(38px,4.6vw,60px);max-width:690px}.cta-copy p{color:#c6d5ca;font-size:17px}.cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn-white{background:#fff;color:#174f2d;box-shadow:0 16px 38px rgba(0,0,0,.13)}.btn-ghost{border:1px solid rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.06)}.replace-note{display:block;margin-top:17px;color:rgba(229,239,231,.58);font-size:10px}.cta-mark{width:330px;height:330px;display:grid;place-items:center;opacity:.13;transform:rotate(-7deg);margin-right:-40px}.cta-mark img{width:100%;filter:brightness(0) invert(1)}
.site-footer{background:#0c2618;color:#c8d4cb;padding:72px 0 28px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:44px}.footer-brand img{width:170px;filter:brightness(1.35)}.footer-brand p{color:#81958a;font-size:13px;margin-top:13px}.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:10px}.footer-grid strong{color:#fff;font:800 13px 'Manrope';margin-bottom:7px}.footer-grid a,.footer-grid span{color:#8fa097;font-size:12px;transition:color .2s}.footer-grid a:hover{color:#d5e2bd}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.08);padding-top:24px;margin-top:56px;color:#708279;font-size:11px}
.back-top{position:fixed;right:20px;bottom:20px;width:43px;height:43px;border-radius:13px;background:#174f2d;color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(18,60,36,.22);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:45}.back-top.show{opacity:1;visibility:visible;transform:none}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.09s}.delay-2{transition-delay:.18s}.delay-3{transition-delay:.27s}

/* --------------------------------------------------------------------------
   RESPONSIVE SYSTEM
   Breakpoints are designed for large desktop, laptop, tablet and mobile.
   -------------------------------------------------------------------------- */

/* Prevent min-content sizing from creating sideways scroll on narrow screens. */
main, section, .container, .hero-grid, .split-grid, .hero-copy, .hero-visual,
.dashboard-shell, .dash-content, .metric-card, .chart-card, .mini-panel,
.feature-card, .usecase-card, .workflow-step, .faq-list, .faq-item,
.cta-copy, .footer-grid > * { min-width: 0; }

body { min-width: 0; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.hero-copy, .split-copy, .section-head, .faq-intro, .cta-copy { overflow-wrap: anywhere; }

/* Large screens */
@media (min-width: 1440px) {
  :root { --max: 1280px; }
  .hero-grid { grid-template-columns: .92fr 1.08fr; gap: 92px; }
  .dashboard-shell { width: 700px; }
  .hero-visual { min-height: 610px; }
}

/* Laptop / small desktop */
@media (max-width: 1199px) {
  :root { --max: 1080px; }
  .hero-grid { gap: 48px; grid-template-columns: .95fr 1.05fr; }
  .hero h1 { font-size: clamp(48px, 5.7vw, 68px); }
  .dashboard-shell { width: 590px; }
  .float-sales { left: -8px; }
  .float-stock { right: -2px; }
  .split-grid { gap: 58px; }
  .faq-grid { gap: 56px; }
  .cta-panel { padding: 56px; }
}

/* Tablet landscape / compact laptop */
@media (max-width: 1023px) {
  .container { width: min(var(--max), calc(100% - 48px)); }
  .section-pad { padding: 92px 0; }

  .hero { min-height: auto; padding-top: 72px; padding-bottom: 84px; }
  .hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .hero-copy { text-align: center; max-width: 780px; margin-inline: auto; }
  .hero-lead, .hero-meta { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { width: 100%; min-height: 525px; }
  .dashboard-shell { width: min(700px, 88vw); transform: none; }
  .glow-ring { width: min(520px, 70vw); height: min(520px, 70vw); }

  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid { grid-template-columns: 1fr; gap: 52px; }
  .split-copy { max-width: 760px; margin-inline: auto; }
  .insight-visual { min-height: 540px; }

  .numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number-item:nth-child(2) { border-right: 1px solid #e1e8dc; }
  .number-item:nth-child(n+3) { border-top: 1px solid #e1e8dc; }

  .usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: 1fr; gap: 42px; }
  .faq-intro { position: static; max-width: 760px; }

  .cta-panel { padding: 48px; }
  .cta-mark { width: 250px; height: 250px; margin-right: -80px; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2 / 4; }
}

/* Tablet portrait + mobile navigation */
@media (max-width: 820px) {
  .container { width: min(var(--max), calc(100% - 32px)); }
  .section-pad { padding: 76px 0; }

  .nav-wrap { height: 72px; }
  .brand img { width: 132px; height: 56px; }
  .nav-toggle { display: block; z-index: 60; }
  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.985);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(18,60,36,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav-links a { padding: 12px 13px; border-radius: 10px; }
  .nav-cta { text-align: center; margin-top: 4px; }

  .hero { padding-top: 54px; padding-bottom: 70px; }
  .hero h1 { font-size: clamp(44px, 10vw, 62px); }
  .hero-lead { font-size: 16px; }
  .hero-meta { justify-content: center; gap: clamp(14px, 5vw, 30px); }
  .hero-visual { min-height: 445px; margin-top: 4px; }
  .dashboard-shell { width: min(680px, 100%); border-radius: 22px; }
  .dash-body { grid-template-columns: 46px minmax(0, 1fr); }
  .dash-sidebar { gap: 12px; padding-top: 22px; }
  .dash-sidebar span { width: 17px; height: 17px; }
  .dash-content { padding: 16px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card.featured { grid-column: 1 / -1; }
  .bottom-grid { grid-template-columns: 1.45fr .75fr; }
  .float-sales { left: 0; bottom: 6px; }
  .float-stock { right: 0; top: 32px; }

  .trust-inner { padding: 18px 0; min-height: auto; gap: 12px 16px; }
  .trust-inner i { display: none; }

  .section-head { margin-bottom: 38px; }
  .section-head.centered { margin-bottom: 42px; }
  .feature-grid, .usecase-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }

  .workflow-grid { grid-template-columns: 1fr; gap: 8px; }
  .workflow-step,
  .workflow-step:first-child,
  .workflow-step:last-child { padding: 12px 0 24px 68px; }
  .workflow-step > span { position: absolute; left: 0; top: 8px; }
  .step-line { left: 23px; top: 58px; bottom: -18px; width: 1px; height: auto; right: auto; }
  .workflow-step:last-child .step-line { display: none; }
  .workflow-step p { max-width: none; }

  .numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number-item { padding: 30px 22px; }

  .phone-card { width: min(360px, 88vw); }
  .insight-visual { min-height: 505px; }
  .orbit-a { left: 1%; }
  .orbit-b { right: 1%; }

  .cta-panel { padding: 40px 28px; min-height: 430px; border-radius: 28px; }
  .cta-copy { max-width: 620px; }
  .cta-mark { position: absolute; right: -62px; bottom: -70px; width: 250px; height: 250px; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 7px; }
  .back-top { right: 14px; bottom: 14px; }
}

/* Mobile */
@media (max-width: 640px) {
  .container { width: calc(100% - 28px); }
  .section-pad { padding: 64px 0; }

  .hero { padding-top: 40px; padding-bottom: 58px; }
  .eyebrow { font-size: 10px; padding: 7px 10px; letter-spacing: .1em; }
  .hero h1 { font-size: clamp(40px, 12.6vw, 54px); margin-top: 18px; }
  .hero-lead { font-size: 15.5px; line-height: 1.68; }
  .hero-actions { flex-direction: column; width: 100%; gap: 10px; margin-top: 28px; }
  .btn { width: 100%; min-height: 50px; padding-inline: 18px; }
  .hero-meta { width: 100%; justify-content: space-between; gap: 8px; margin-top: 28px; padding-top: 22px; }
  .hero-meta > div { flex: 1 1 0; align-items: center; text-align: center; }

  .hero-visual { min-height: 370px; }
  .dashboard-shell { width: 100%; border-radius: 18px; box-shadow: 0 24px 55px rgba(26,75,44,.16); }
  .glow-ring { width: 330px; height: 330px; max-width: 92vw; max-height: 92vw; }
  .dash-topbar { height: 48px; padding: 0 12px; }
  .dash-brand { font-size: 10px; }
  .dash-brand img { width: 23px; height: 23px; }
  .dash-user { font-size: 8px; }
  .dash-body { grid-template-columns: 34px minmax(0, 1fr); min-height: 315px; }
  .dash-sidebar { padding-top: 18px; gap: 10px; }
  .dash-sidebar span { width: 13px; height: 13px; border-radius: 4px; }
  .dash-content { padding: 10px; }
  .dash-heading h3 { font-size: 12px; }
  .dash-heading small { font-size: 6.5px; }
  .dash-heading button { padding: 5px 7px; font-size: 7px; }
  .metric-grid { gap: 6px; margin-top: 10px; }
  .metric-card { padding: 9px; min-height: 70px; border-radius: 10px; }
  .metric-card span { font-size: 7.5px; }
  .metric-card strong { font-size: 12px; margin: 4px 0; }
  .metric-card small { font-size: 6.5px; }
  .chart-card { margin-top: 7px; padding: 9px 9px 7px; border-radius: 10px; }
  .chart-head span, .chart-head strong { font-size: 7px; }
  .chart-head b { font-size: 10px; }
  .bar-chart { height: 72px; gap: 5px; padding: 10px 3px 0; }
  .chart-labels { gap: 5px; font-size: 5.5px; }
  .bottom-grid { display: none; }
  .float-card { display: none; }

  .section-head h2, .split-copy h2, .faq-intro h2 { font-size: clamp(32px, 9.4vw, 42px); }
  .section-head p, .split-copy > p, .faq-intro > p { font-size: 15px; }
  .feature-card { padding: 23px; border-radius: 18px; }
  .feature-card h3 { font-size: 18px; }

  .insight-visual { min-height: 445px; }
  .phone-card { width: min(350px, 92vw); padding: 19px 16px 22px; border-width: 6px; border-radius: 28px; }
  .phone-greeting { margin-top: 22px; padding: 17px; }
  .phone-greeting strong { font-size: 24px; }
  .phone-chart { height: 112px; }
  .orbit { display: none; }
  .check-list { margin: 28px 0; gap: 18px; }

  .numbers-grid { grid-template-columns: 1fr; }
  .number-item,
  .number-item:nth-child(2),
  .number-item:nth-child(n+3) { border-right: 1px solid #e1e8dc; border-top: 1px solid #e1e8dc; }
  .number-item:first-child { border-top: 0; }

  .usecase-card { padding: 20px; }
  .faq-item button { font-size: 15px; padding: 20px 0; }
  .faq-item.open .faq-answer p { padding-right: 0; }

  .cta-section { padding-top: 24px; }
  .cta-panel { padding: 34px 22px 145px; min-height: 0; align-items: flex-start; border-radius: 24px; }
  .cta-copy h2 { font-size: clamp(34px, 10vw, 45px); }
  .cta-copy p { font-size: 15px; }
  .cta-actions { flex-direction: column; }
  .cta-mark { width: 205px; height: 205px; right: -42px; bottom: -48px; }

  .site-footer { padding-top: 58px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand, .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { margin-top: 38px; }
}

/* Small phones */
@media (max-width: 420px) {
  .container { width: calc(100% - 24px); }
  .brand img { width: 118px; }
  .nav-wrap { height: 66px; }
  .nav-links { top: calc(100% + 6px); padding: 10px; border-radius: 15px; }

  .hero h1 { font-size: clamp(37px, 12.3vw, 48px); }
  .hero-meta strong { font-size: 12px; }
  .hero-meta span { font-size: 10px; }

  .hero-visual { min-height: 335px; }
  .dash-body { grid-template-columns: 30px minmax(0,1fr); min-height: 290px; }
  .dash-sidebar span { width: 11px; height: 11px; }
  .dash-content { padding: 8px; }
  .metric-card { min-height: 64px; padding: 8px; }
  .metric-card strong { font-size: 11px; }
  .chart-card { padding: 8px; }
  .bar-chart { height: 65px; }

  .phone-card { width: min(330px, 94vw); }
  .phone-list p { gap: 6px; }
  .phone-list p span, .phone-list p strong { font-size: 8px; }

  .workflow-step,
  .workflow-step:first-child,
  .workflow-step:last-child { padding-left: 60px; }
  .workflow-step > span { width: 42px; height: 42px; }
  .step-line { left: 20px; top: 52px; }

  .cta-panel { padding-inline: 19px; }
}

/* Very small phones / embedded webviews */
@media (max-width: 360px) {
  .container { width: calc(100% - 20px); }
  .hero h1 { font-size: 36px; }
  .hero-lead { font-size: 14.5px; }
  .hero-meta { flex-wrap: wrap; }
  .hero-meta > div { flex-basis: 30%; }

  .hero-visual { min-height: 305px; }
  .dash-user { display: none; }
  .dash-body { grid-template-columns: 26px minmax(0,1fr); min-height: 265px; }
  .dash-sidebar { padding-top: 15px; gap: 8px; }
  .dash-sidebar span { width: 10px; height: 10px; }
  .dash-heading button { display: none; }
  .metric-card small { display: none; }
  .bar-chart { height: 58px; }
  .chart-labels { display: none; }

  .phone-card { width: 100%; }
  .phone-greeting strong { font-size: 22px; }
  .phone-cards strong { font-size: 14px; }
  .usecase-card { gap: 12px; }
  .usecase-icon { width: 42px; height: 42px; flex-basis: 42px; }
}

/* Landscape phones: reduce vertical bulk without sacrificing width. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 950px) {
  .hero { padding-top: 36px; padding-bottom: 46px; }
  .hero-grid { gap: 34px; }
  .hero-visual { min-height: 390px; }
  .section-pad { padding: 60px 0; }
}

/* Keep hover-only motion off touch screens. */
@media (hover: none) {
  .feature-card:hover, .usecase-card:hover, .btn:hover, .nav-cta:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}