:root{
  --brand:#8BC91F; --brand-d:#6FA916; --brand-2:#A6E22A; --brand-soft:#f1fbe0;
  --lime-pop:#C6F24E;
  --ink:#111315; --ink2:#20242a; --muted:#6b7280;
  --line:#ececec; --soft:#f7f8f6; --white:#fff;
  --shadow:0 18px 50px rgba(17,19,21,.10);
  --glow:0 14px 34px rgba(139,201,31,.35);
  --head:"Outfit","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,Arial,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--body); color:var(--ink); line-height:1.6; background:#fff; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5{ font-family:var(--head); letter-spacing:-.01em; }
img{ max-width:100%; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
section{ position:relative; }
h2{ font-size:32px; line-height:1.18; font-weight:800; text-wrap:balance; }
.lead{ color:var(--muted); font-size:16.5px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 28px; border-radius:13px; font-family:var(--head); font-weight:700; font-size:15px; cursor:pointer; border:0; transition:.18s ease; }
.btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0e1a06; box-shadow:var(--glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 44px rgba(139,201,31,.46); }
.btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand-d); }
.btn-light{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.btn-light:hover{ background:#fff; color:var(--ink); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.arrow{ font-size:17px; line-height:1; transition:.2s; }
.btn:hover .arrow{ transform:translateX(3px); }

.pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px; font-family:var(--head); font-weight:700; font-size:12.5px; letter-spacing:.02em; }
.eyebrow{ color:var(--brand-d); background:var(--brand-soft); border:1px solid #ddf3ba; }
.stitle{ text-align:center; max-width:680px; margin:0 auto 14px; }
.stitle .lead{ margin-top:12px; }

/* ===== HEADER ===== */
header.site{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:.2s; }
.nav{ display:flex; align-items:center; justify-content:space-between; min-height:112px; gap:20px; }
.logo{ display:flex; align-items:center; }
.logo img{ height:136px; width:auto; display:block; }
.topnav{ display:flex; gap:2px; flex:1; justify-content:center; }
.topnav > a{ padding:9px 15px; font-size:14.5px; font-weight:600; color:var(--ink2); border-radius:10px; font-family:var(--head); white-space:nowrap; }
.topnav > a:hover, .topnav > a.active{ color:var(--brand-d); background:var(--brand-soft); }
.htop{ display:flex; align-items:center; gap:10px; }
.login{ display:inline-flex; align-items:center; padding:10px 18px; border:1.5px solid var(--line); border-radius:12px; font-family:var(--head); font-weight:700; color:var(--ink2); font-size:13.5px; transition:.18s; white-space:nowrap; }
.login:hover{ border-color:var(--brand); color:var(--brand-d); }
.login.solid{ background:var(--ink); color:#fff; border-color:var(--ink); }
.login.solid:hover{ background:#000; }
.menu-btn{ display:none; background:none; border:0; font-size:26px; cursor:pointer; color:var(--ink); }
@media(max-width:1100px){ .topnav{ display:none; } .menu-btn{ display:block; } }
@media(max-width:640px){ .login span.lbl{ display:none } }

.drawer{ position:fixed; inset:0 0 0 auto; width:290px; background:#fff; box-shadow:-10px 0 50px rgba(0,0,0,.22); transform:translateX(100%); transition:.26s; z-index:100; padding:24px; overflow:auto; }
.drawer.open{ transform:translateX(0); }
.drawer a{ display:block; padding:13px 4px; border-bottom:1px solid var(--line); font-family:var(--head); font-weight:600; }
.drawer .x{ float:right; font-size:28px; cursor:pointer; }

/* ===== HERO ===== */
.hero{ background:var(--ink); color:#fff; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(620px 420px at 12% 8%, rgba(166,226,42,.30), transparent 60%),
    radial-gradient(560px 420px at 92% 18%, rgba(198,242,78,.16), transparent 55%); }
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.04fr 1fr; gap:54px; align-items:center; padding:88px 24px 96px; min-height:600px; }
.hpill{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.18); }
.hpill .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-2); box-shadow:0 0 0 4px rgba(166,226,42,.25); }
.hero h1{ font-size:46px; line-height:1.1; font-weight:800; margin:20px 0 18px; letter-spacing:-.02em; }
.hero h1 span{ color:var(--brand-2); }
.hero p{ color:#cbd0d6; font-size:17px; line-height:1.7; margin-bottom:30px; max-width:520px; }
.hcta{ display:flex; gap:14px; flex-wrap:wrap; }
.htrust{ display:flex; gap:26px; margin-top:34px; flex-wrap:wrap; }
.htrust div{ display:flex; flex-direction:column; }
.htrust b{ font-family:var(--head); font-size:24px; font-weight:800; color:var(--brand-2); }
.htrust small{ color:#9aa1a9; font-size:12.5px; }

.photo-card{ position:relative; border-radius:26px; overflow:hidden; box-shadow:0 50px 100px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.10); aspect-ratio:4/4.6; background:linear-gradient(135deg,#1a1f14,#2c3a1a); }
.photo-card > img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-card .glass{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(17,19,21,.75)); }
.photo-card .cap{ position:absolute; left:20px; bottom:20px; right:20px; padding-right:104px; }
@media(max-width:980px){ .photo-card .cap{ padding-right:20px; } }
.photo-card .cap .live{ display:inline-flex; align-items:center; gap:7px; background:rgba(139,201,31,.94); color:#0e1a06; font-family:var(--head); font-weight:800; font-size:11.5px; padding:5px 12px; border-radius:999px; margin-bottom:10px; }
.photo-card .cap .live i{ width:7px; height:7px; border-radius:50%; background:#0e1a06; }
.photo-card .cap b{ display:block; font-family:var(--head); font-size:19px; color:#fff; }
.photo-card .cap span{ font-size:13px; color:#d8dce0; }
.photo-thumb{ position:absolute; bottom:-22px; right:-18px; width:128px; height:128px; border-radius:18px; overflow:hidden; border:4px solid #fff; box-shadow:0 22px 44px rgba(0,0,0,.32); background:var(--brand); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:980px){ .photo-thumb{ display:none; } }
.device{ position:relative; }
.screen{ background:#181c14; border:1px solid rgba(255,255,255,.10); border-radius:22px; padding:18px; box-shadow:0 40px 80px rgba(0,0,0,.5); }
.screen .bar{ display:flex; gap:6px; margin-bottom:14px; }
.screen .bar i{ width:11px; height:11px; border-radius:50%; background:#3a4030; }
.menu-head{ display:flex; justify-content:space-between; align-items:center; background:linear-gradient(120deg,var(--brand),var(--brand-2)); border-radius:13px; padding:14px 16px; margin-bottom:12px; }
.menu-head .t{ font-family:var(--head); font-weight:800; font-size:17px; color:#0e1a06; }
.menu-head .badge{ background:rgba(14,26,6,.18); color:#0e1a06; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }
.mitem{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px 12px; margin-bottom:9px; }
.mitem .ph{ width:42px; height:42px; border-radius:9px; display:grid; place-items:center; font-size:21px; background:rgba(255,255,255,.07); }
.mitem .nm{ flex:1; }
.mitem .nm b{ font-family:var(--head); font-size:14px; color:#fff; display:block; }
.mitem .nm span{ font-size:11.5px; color:#8b9488; }
.mitem .pr{ font-family:var(--head); font-weight:800; color:var(--brand-2); font-size:15px; }
.float{ position:absolute; background:#fff; color:var(--ink); border-radius:14px; padding:11px 15px; box-shadow:0 18px 40px rgba(0,0,0,.28); display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:700; font-size:13px; }
.float .ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#fff; font-size:15px; background:var(--brand); }
.float.f1{ top:-18px; right:-14px; } .float.f2{ bottom:-16px; left:-18px; }
@media(max-width:980px){ .float{ display:none; } .hero .wrap{ grid-template-columns:1fr; } .hero h1{ font-size:34px; } }

/* ===== PAGE HERO (inner pages) ===== */
.phero{ background:var(--ink); color:#fff; padding:64px 24px; text-align:center; overflow:hidden; position:relative; }
.phero::before{ content:""; position:absolute; inset:0; background:radial-gradient(560px 320px at 50% -10%, rgba(166,226,42,.28), transparent 60%); }
.phero .wrap{ position:relative; }
.phero h1{ font-size:36px; font-weight:800; margin:14px 0 12px; }
.phero p{ color:#cbd0d6; max-width:600px; margin:0 auto; font-size:16px; }

/* ===== TRUST STRIP ===== */
.tstrip{ background:var(--soft); border-bottom:1px solid var(--line); }
.tstrip .wrap{ display:flex; align-items:center; justify-content:center; gap:38px; padding:20px 24px; flex-wrap:wrap; color:#8a9088; font-family:var(--head); font-weight:700; font-size:13.5px; }

/* ===== SOLUTION CARDS ===== */
.solgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.solcard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px; transition:.2s; }
.solcard:hover{ box-shadow:var(--shadow); transform:translateY(-4px); border-color:#ddf3ba; }
.solcard .ic{ width:52px; height:52px; border-radius:14px; background:var(--brand-soft); border:1px solid #ddf3ba; display:grid; place-items:center; font-size:24px; margin-bottom:16px; }
.solcard h3{ font-size:17px; margin-bottom:8px; }
.solcard p{ color:var(--muted); font-size:14px; margin-bottom:14px; }
.solcard a{ font-family:var(--head); font-weight:700; font-size:13.5px; color:var(--brand-d); }
@media(max-width:900px){ .solgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .solgrid{ grid-template-columns:1fr; } }

/* ===== CONTENT ROWS ===== */
.content{ padding:60px 0; }
.crow{ display:grid; grid-template-columns:1fr 1fr; gap:58px; align-items:center; padding:44px 0; }
.crow .pic{ border-radius:24px; aspect-ratio:4/3; display:grid; place-items:center; font-size:74px; color:#fff; position:relative; box-shadow:var(--shadow); overflow:hidden; }
.crow .pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.crow .pic::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 55%); pointer-events:none; }
.p1{ background:linear-gradient(135deg,#141a10,var(--brand-d)); }
.p2{ background:linear-gradient(135deg,var(--brand-d),var(--brand-2)); }
.p3{ background:linear-gradient(135deg,#10241a,#0f766e); }
.p4{ background:linear-gradient(135deg,#1a1a1a,#3a3a3a); }
.crow.rev .pic{ order:2; }
.crow .num{ font-family:var(--head); font-weight:800; color:var(--brand-d); font-size:14px; letter-spacing:.08em; }
.crow h2{ font-size:28px; margin:8px 0 18px; }
.crow .sub{ display:flex; gap:13px; margin-bottom:16px; }
.crow .sub .ck{ flex:none; width:26px; height:26px; border-radius:8px; background:var(--brand-soft); color:var(--brand-d); display:grid; place-items:center; font-weight:800; font-size:14px; margin-top:2px; }
.crow .sub h3{ font-size:16.5px; margin-bottom:3px; }
.crow .sub p{ color:var(--muted); font-size:14.5px; }
@media(max-width:900px){ .crow{ grid-template-columns:1fr; gap:30px; } .crow.rev .pic{ order:0; } }

/* ===== FEATURES ===== */
.features{ padding:64px 0; }
.fgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
.fcard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; transition:.2s; }
.fcard:hover{ box-shadow:var(--shadow); transform:translateY(-4px); border-color:#ddf3ba; }
.fcard .ic{ width:50px; height:50px; border-radius:13px; background:var(--brand-soft); border:1px solid #ddf3ba; color:var(--brand-d); display:grid; place-items:center; font-size:23px; margin-bottom:14px; }
.fcard h4{ font-size:15.5px; margin-bottom:6px; }
.fcard p{ color:var(--muted); font-size:13.5px; }
@media(max-width:900px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .fgrid{ grid-template-columns:1fr; } }

/* ===== STAT STRIP ===== */
.stats{ background:var(--ink); color:#fff; padding:44px 0; }
.stats .wrap{ display:flex; justify-content:center; gap:56px; flex-wrap:wrap; text-align:center; }
.stats b{ display:block; font-family:var(--head); font-size:30px; font-weight:800; color:var(--brand-2); }
.stats span{ color:#9aa1a9; font-size:13px; }

/* ===== SECTOR CARDS ===== */
.secgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
.seccard{ background:var(--soft); border:1px solid var(--line); border-radius:18px; padding:26px 22px; }
.seccard .ic{ font-size:30px; margin-bottom:12px; }
.seccard h3{ font-size:16px; margin-bottom:8px; }
.seccard p{ color:var(--muted); font-size:13.5px; }
@media(max-width:900px){ .secgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .secgrid{ grid-template-columns:1fr; } }

/* ===== STEPS ===== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px; counter-reset:stepnum; }
.step{ position:relative; padding-top:8px; }
.step .n{ font-family:var(--head); font-weight:800; font-size:38px; color:var(--brand-soft); -webkit-text-stroke:1.5px var(--brand-d); margin-bottom:10px; }
.step h4{ font-size:15.5px; margin-bottom:6px; }
.step p{ color:var(--muted); font-size:13.5px; }
@media(max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ===== CTA BAND ===== */
.ctaband{ padding:64px 0; text-align:center; }
.ctaband h2{ margin-bottom:12px; }
.ctaband p{ color:var(--muted); max-width:560px; margin:0 auto 28px; }

.promo{ background:var(--ink); color:#fff; text-align:center; padding:56px 0; overflow:hidden; }
.promo::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% -10%, rgba(166,226,42,.28), transparent 60%); }
.promo .wrap{ position:relative; }
.promo h2{ margin-bottom:10px; color:#fff; } .promo p{ color:#cbd0d6; max-width:560px; margin:0 auto; }

/* ===== FAQ ===== */
.faqsec{ padding:64px 0; }
.faq{ max-width:860px; margin:36px auto 0; }
.qa{ border:1px solid var(--line); border-radius:16px; margin-bottom:12px; padding:0 20px; transition:.18s; }
.qa.open{ border-color:#ddf3ba; box-shadow:var(--shadow); }
.qa .q{ cursor:pointer; padding:19px 0; font-family:var(--head); font-weight:700; font-size:16px; display:flex; justify-content:space-between; gap:14px; align-items:center; }
.qa .q::after{ content:"+"; color:var(--brand-d); font-size:22px; line-height:1; transition:.2s; }
.qa.open .q::after{ content:"–"; }
.qa .ans{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.qa.open .ans{ max-height:600px; }
.qa .ans p{ color:var(--muted); font-size:14.5px; padding:0 0 19px; }

/* ===== CONTACT ===== */
.offer{ padding:64px 0; background:var(--soft); }
.offer .row{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; margin-top:32px; }
.oform{ background:#fff; border-radius:20px; padding:32px; box-shadow:var(--shadow); }
.oform label{ font-family:var(--head); font-size:13px; font-weight:700; color:var(--ink2); display:block; margin:14px 0 6px; }
.oform label:first-child{ margin-top:0; }
.oform input, .oform textarea{ width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font-size:15px; font-family:inherit; transition:.16s; }
.oform input:focus, .oform textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(139,201,31,.14); }
.oform .btn{ width:100%; margin-top:20px; }
.callbox{ background:linear-gradient(135deg,var(--ink),#262b21); color:#fff; border-radius:20px; padding:32px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.callbox::before{ content:""; position:absolute; inset:0; background:radial-gradient(400px 240px at 90% 0%, rgba(166,226,42,.28), transparent 60%); }
.callbox h4{ font-size:19px; margin-bottom:18px; position:relative; }
.callbox a{ display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2); padding:14px 16px; border-radius:13px; font-family:var(--head); font-weight:700; margin-bottom:12px; font-size:15.5px; position:relative; transition:.16s; }
.callbox a:hover{ background:rgba(255,255,255,.18); }
@media(max-width:820px){ .offer .row{ grid-template-columns:1fr; } }
.formok{ background:var(--brand-soft); border:1px solid #ddf3ba; color:#3d5c0e; padding:16px 18px; border-radius:12px; font-size:14.5px; margin-bottom:18px; }
.formerr{ background:#fdecea; border:1px solid #f5c2c0; color:#b3261e; padding:16px 18px; border-radius:12px; font-size:14.5px; margin-bottom:18px; }

/* ===== FOOTER ===== */
.ftop{ background:linear-gradient(120deg,var(--ink),#20281a); color:#fff; }
.ftop .wrap{ display:flex; align-items:center; justify-content:space-between; padding:36px 24px; gap:18px; flex-wrap:wrap; }
.ftop .h{ font-family:var(--head); font-size:13px; font-weight:700; opacity:.85; letter-spacing:.06em; }
.ftop .s{ font-family:var(--head); font-size:25px; font-weight:800; }
.ftop .btn{ background:var(--brand-2); color:#0e1a06; }
.ftop .btn:hover{ background:#b8ec3c; }
footer.site{ background:var(--ink); color:#9aa1a9; padding:48px 0 0; font-size:14px; }
.fcols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; }
.fcols .flogo img{ height:60px; width:auto; margin-bottom:14px; filter:brightness(0) invert(1); }
footer.site h5{ color:#fff; font-family:var(--head); font-size:12.5px; letter-spacing:.06em; margin-bottom:14px; }
footer.site ul{ list-style:none; } footer.site li{ margin-bottom:9px; }
footer.site a:hover{ color:var(--brand-2); }
.subfoot{ border-top:1px solid #2a2f26; margin-top:36px; padding:20px 0; }
.subfoot .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; color:#6b7268; font-size:12.5px; }
@media(max-width:820px){ .fcols{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .fcols{ grid-template-columns:1fr; } h2{ font-size:26px; } }