/* ============================================================
   HABTON — IT & Marketing Solutions · UAE & India
   Shared design system
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --black:#000000;
  --ink:#0c1420;
  --ink-2:#3c4e62;
  --muted:#6b7e92;

  --blue:#1278c5;
  --blue-700:#0e5f9f;
  --blue-800:#0a4a7d;
  --blue-900:#07344f;
  --blue-400:#4aa3e0;
  --blue-300:#8fc4ea;
  --blue-tint:#eef6fd;
  --blue-tint-2:#dfeefb;

  --paper:#f5f8fb;
  --paper-2:#eaf1f8;
  --white:#ffffff;
  --footer:#07121d;

  --line:#dce7f1;
  --line-2:#c2d6e6;

  --shadow-sm:0 1px 2px rgba(12,20,32,.04), 0 6px 18px rgba(12,20,32,.05);
  --shadow-md:0 14px 40px rgba(10,74,125,.12), 0 3px 10px rgba(12,20,32,.05);
  --shadow-blue:0 24px 64px rgba(8,58,95,.30);

  --r:16px;
  --r-lg:22px;
  --maxw:1200px;
  --ease:cubic-bezier(.4,0,.15,1);

  --plus-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 11v10M11 16h10' stroke='rgba(18,120,197,0.07)' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --plus-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 11v10M11 16h10' stroke='rgba(255,255,255,0.12)' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--white);
  line-height:1.65;font-weight:420;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--blue);color:#fff}

/* ---------- TYPE ---------- */
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif;color:var(--ink);line-height:1.08;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem);font-weight:900;letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,3.9vw,2.95rem)}
h3{font-size:clamp(1.3rem,2.3vw,1.7rem)}
.lead{font-size:1.1rem;color:var(--ink-2);line-height:1.7;max-width:60ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:.74rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--blue);
}
.eyebrow::before{content:"";width:16px;height:16px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%231278c5' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.eyebrow.on-blue{color:#bfe0fb}
.eyebrow.on-blue::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23bfe0fb' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.text-blue{color:var(--blue)}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}
.pad{padding:92px 0}
.pad-sm{padding:64px 0}
.bg-paper{background:var(--paper)}
.bg-tint{background:var(--blue-tint)}
.center{text-align:center}
.shead{max-width:720px;margin-bottom:54px}
.shead.center{margin-left:auto;margin-right:auto}
.shead.center .eyebrow{justify-content:center}
.shead h2{margin-top:16px}
.shead p{margin-top:16px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:.95rem;padding:.9rem 1.5rem;border-radius:11px;letter-spacing:-.01em;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .2s,border-color .2s;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-sm{padding:.6rem 1.05rem;font-size:.88rem;border-radius:9px}
.btn-lg{padding:1.05rem 1.8rem;font-size:1rem}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(18,120,197,.26)}
.btn-primary:hover{background:var(--blue-700);transform:translateY(-2px);box-shadow:0 14px 28px rgba(18,120,197,.32)}
.btn-ghost{color:var(--ink);border:1.6px solid var(--line-2);background:#fff}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue-800)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.2)}
.btn-onblue-ghost{color:#fff;border:1.6px solid rgba(255,255,255,.42)}
.btn-onblue-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}
.arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.92rem;color:var(--blue)}
.link-arrow svg{width:17px;height:17px;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(12,20,32,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center}
.brand-logo{height:38px;width:auto}
.menu{display:flex;align-items:center;gap:2px}
.menu a{font-size:.93rem;font-weight:500;color:var(--ink-2);padding:.55rem .9rem;border-radius:9px;transition:color .2s,background .2s;position:relative}
.menu a:hover{color:var(--ink);background:var(--blue-tint)}
.menu a[aria-current="page"]{color:var(--blue);font-weight:600}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.15rem;height:2px;background:var(--blue);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:14px}
.hamb{display:none;width:44px;height:44px;border-radius:10px;border:1.5px solid var(--line);
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.hamb span{width:19px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.hamb.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamb.open span:nth-child(2){opacity:0}
.hamb.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:74px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
  transform:translateY(-120%);transition:transform .35s var(--ease);z-index:99;padding:10px 0 22px}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{display:block;padding:14px 28px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.05rem;border-bottom:1px solid var(--line)}
.mobile-menu a[aria-current="page"]{color:var(--blue)}
.mobile-menu .btn{margin:16px 28px 0;justify-content:center}

/* ---------- HERO (generic page hero) ---------- */
.page-hero{position:relative;overflow:hidden;padding:84px 0 72px;background:var(--blue-tint)}
.page-hero::before{content:"";position:absolute;inset:0;background:var(--plus-ink);background-size:32px 32px;opacity:.9}
.page-hero .wrap{position:relative}
.page-hero .eyebrow{margin-bottom:20px}
.page-hero h1{max-width:16ch}
.page-hero p{margin-top:22px;font-size:1.15rem}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--muted);margin-bottom:22px;font-family:'Space Mono',monospace}
.crumbs a:hover{color:var(--blue)}
.crumbs span{opacity:.5}

/* ---------- HOME HERO ---------- */
.home-hero{position:relative;overflow:hidden;padding:72px 0 86px}
.home-hero::before{content:"";position:absolute;inset:0;background:var(--plus-ink);background-size:32px 32px;z-index:0}
.home-hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.tagpill{display:inline-flex;align-items:center;gap:.5rem;font-family:'Space Mono',monospace;font-size:.72rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-800);
  background:var(--blue-tint);border:1px solid #d3e8fa;padding:.45rem .85rem;border-radius:100px;margin-bottom:24px}
.tagpill .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(18,120,197,.18)}
.home-hero h1 .accent{color:var(--blue);position:relative;white-space:nowrap}
.home-hero h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.08em;background:var(--blue);opacity:.26;border-radius:2px}
.home-hero p.lead{margin-top:24px;font-size:1.18rem}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-stats{display:flex;margin-top:46px;border-top:1px solid var(--line);padding-top:24px;flex-wrap:wrap}
.hero-stats .stat{padding-right:30px;margin-right:30px;border-right:1px solid var(--line)}
.hero-stats .stat:last-child{border:none;margin:0;padding:0}
.hero-stats .num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:-.02em;color:var(--ink)}
.hero-stats .lbl{font-family:'Space Mono',monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:3px}

/* hero visual: service tiles collage */
.hero-vis{position:relative;aspect-ratio:1/1.02}
.hero-panel{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(155deg,#1a86d6,#1278c5 48%,#0b5490);box-shadow:var(--shadow-blue)}
.hero-panel::before{content:"";position:absolute;inset:0;background:var(--plus-white);background-size:30px 30px;opacity:.9}
.hero-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 80% 10%,rgba(255,255,255,.2),transparent 55%)}
.cross-frame{position:absolute;inset:18px;z-index:3;pointer-events:none}
.cross-frame i{position:absolute;width:15px;height:15px;opacity:.85}
.cross-frame i::before,.cross-frame i::after{content:"";position:absolute;background:rgba(255,255,255,.65)}
.cross-frame i::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.cross-frame i::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
.cross-frame .tl{top:0;left:0}.cross-frame .tr{top:0;right:0}.cross-frame .bl{bottom:0;left:0}.cross-frame .br{bottom:0;right:0}
.hero-tiles{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px;padding:40px;z-index:2}
.htile{background:rgba(255,255,255,.95);border-radius:14px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 14px 30px rgba(6,40,70,.25);transition:transform .4s var(--ease)}
.htile:hover{transform:translateY(-5px)}
.htile .ic{width:40px;height:40px;border-radius:11px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center}
.htile .ic svg{width:21px;height:21px}
.htile .t{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.92rem;color:var(--ink);line-height:1.2}
.htile .s{font-size:.72rem;color:var(--muted);margin-top:3px}
.htile.span2{grid-column:span 2}
.htile.tall{grid-row:span 1}

/* ---------- MARQUEE STRIP ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.strip .wrap{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px 28px;flex-wrap:wrap}
.strip .k{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink-2);display:flex;align-items:center;gap:9px}
.strip .plus{color:var(--line-2);font-family:'Space Mono',monospace}

/* ---------- SERVICE CARDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#cfe3f5}
.card .ic{width:50px;height:50px;border-radius:13px;background:var(--blue-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:.35s var(--ease)}
.card:hover .ic{background:var(--blue);color:#fff;transform:translateY(-3px)}
.card .ic svg{width:25px;height:25px}
.card h3{font-size:1.15rem;margin-bottom:9px}
.card p{font-size:.94rem;color:var(--ink-2);line-height:1.6}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.card .tags span{font-family:'Space Mono',monospace;font-size:.68rem;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);padding:.25rem .6rem;border-radius:100px}
/* crosshair corners on hover */
.xmark::before,.xmark::after{content:"";position:absolute;width:9px;height:9px;opacity:0;transition:opacity .35s}
.xmark::before{top:-1px;left:-1px;border-top:2px solid var(--blue);border-left:2px solid var(--blue);border-top-left-radius:3px}
.xmark::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue);border-bottom-right-radius:3px}
.xmark:hover::before,.xmark:hover::after{opacity:1}

/* numbered / plain feature row */
.feat{display:flex;gap:16px;align-items:flex-start}
.feat .fi{width:44px;height:44px;border-radius:12px;background:var(--blue-tint);color:var(--blue);flex:none;display:flex;align-items:center;justify-content:center}
.feat .fi svg{width:22px;height:22px}
.feat h4{font-size:1.08rem;margin-bottom:5px}
.feat p{font-size:.93rem;color:var(--ink-2)}

/* ---------- PROBLEM / SOLUTION ---------- */
.ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ps{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative;overflow:hidden}
.ps .pain{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:.95rem}
.ps .pain .x{width:24px;height:24px;border-radius:7px;background:#fdecec;color:#d9544e;flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ps .pain .x svg{width:14px;height:14px}
.ps .arrow{height:28px;display:flex;align-items:center;color:var(--line-2);margin:14px 0 14px 12px}
.ps .arrow svg{width:20px;height:20px}
.ps .fix{display:flex;gap:10px;align-items:flex-start}
.ps .fix .c{width:24px;height:24px;border-radius:7px;background:var(--blue-tint);color:var(--blue);flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ps .fix .c svg{width:14px;height:14px}
.ps .fix b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);display:block;margin-bottom:3px}
.ps .fix span{font-size:.9rem;color:var(--ink-2)}

/* ---------- WHY / VALUE GRID ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.wcell{padding:36px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s}
.wcell:hover{background:var(--blue-tint)}
.wcell:nth-child(3n){border-right:none}
.why-grid .wcell:nth-last-child(-n+3){border-bottom:none}
.wcell .wic{width:50px;height:50px;border-radius:13px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 8px 18px rgba(18,120,197,.26);transition:transform .35s var(--ease)}
.wcell:hover .wic{transform:translateY(-4px) rotate(-4deg)}
.wcell .wic svg{width:25px;height:25px}
.wcell h4{font-size:1.12rem;margin-bottom:8px}
.wcell p{font-size:.92rem;color:var(--ink-2)}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.step{position:relative;padding:0 22px}
.step:not(:last-child)::after{content:"";position:absolute;top:26px;left:calc(50% + 30px);right:calc(-50% + 30px);height:2px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.step-num{width:54px;height:54px;border-radius:15px;background:#fff;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;margin-bottom:20px;color:var(--blue);transition:.35s var(--ease)}
.step-num svg{width:24px;height:24px}
.step-num .idx{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-family:'Space Mono',monospace;font-weight:700;font-size:.64rem;display:flex;align-items:center;justify-content:center;border:2px solid var(--paper)}
.step:hover .step-num{border-color:var(--blue);background:var(--blue-tint);transform:translateY(-3px)}
.step h4{font-size:1.06rem;margin-bottom:7px}
.step p{font-size:.9rem;color:var(--ink-2)}

/* ---------- PRODUCT BLOCKS ---------- */
.prod{border-radius:24px;overflow:hidden;margin-bottom:30px;position:relative}
.prod-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.prod .pcopy{padding:52px 48px}
.prod-tag{font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.prod-title{display:flex;align-items:center;gap:14px;margin:16px 0 8px;flex-wrap:wrap}
.prod-title h3{font-size:2.3rem;font-weight:900;letter-spacing:-.03em}
.prod .badge{width:52px;height:52px;flex:none;border-radius:14px;object-fit:contain}
.ext-link{font-family:'Space Mono',monospace;font-size:.8rem;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);padding:.3rem .7rem;border-radius:100px;transition:.25s}
.ext-link svg{width:13px;height:13px}
.pdesc{font-size:1rem;line-height:1.65;margin:12px 0 22px;max-width:46ch}
.flist{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.flist li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem}
.flist .fi{flex:none;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.flist .fi svg{width:15px;height:15px}
.pvis{position:relative;display:flex;align-items:center;justify-content:center;padding:44px;min-height:340px}
/* blue product variant */
.prod.blue{background:linear-gradient(160deg,#1782d0,#1278c5 42%,#0b5490);box-shadow:var(--shadow-blue);color:#fff}
.prod.blue::before{content:"";position:absolute;inset:0;background:var(--plus-white);background-size:30px 30px;opacity:.6;pointer-events:none}
.prod.blue .prod-tag{color:#bfe0fb}
.prod.blue .prod-title h3{color:#fff}
.prod.blue .ext-link{border-color:rgba(255,255,255,.4);color:#eaf4fd}
.prod.blue .ext-link:hover{background:rgba(255,255,255,.12);border-color:#fff}
.prod.blue .pdesc{color:#dbeefb}
.prod.blue .flist .fi{background:rgba(255,255,255,.16);color:#fff}
.prod.blue .flist li{color:#eaf4fd}
.prod.blue .flist b{color:#fff}
.prod.blue .pvis{background:rgba(4,40,72,.26)}
/* light product variant */
.prod.light{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.prod.light .prod-tag{color:var(--blue)}
.prod.light .pdesc{color:var(--ink-2)}
.prod.light .ext-link{color:var(--blue-700)}
.prod.light .ext-link:hover{background:var(--blue-tint);border-color:var(--blue)}
.prod.light .flist .fi{background:var(--blue-tint);color:var(--blue)}
.prod.light .flist li{color:var(--ink-2)}
.prod.light .flist b{color:var(--ink)}
.prod.light .pvis{background:linear-gradient(160deg,#eef6fd,#e2eefa);border-left:1px solid var(--line)}

/* mock device/card bits reused in product visuals */
.mock-card{width:100%;max-width:330px;background:#fff;border-radius:16px;box-shadow:var(--shadow-md);border:1px solid var(--line);overflow:hidden;position:relative;z-index:2}
.mock-top{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.mock-top .t{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.82rem;color:var(--ink)}
.mock-top .dots{display:flex;gap:5px}.mock-top .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.mock-body{padding:16px}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.kpi{background:var(--blue-tint);border-radius:9px;padding:9px 10px}
.kpi .n{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.02rem;color:var(--blue-800)}
.kpi .l{font-family:'Space Mono',monospace;font-size:.5rem;text-transform:uppercase;letter-spacing:.05em;color:var(--blue-700);margin-top:1px}
.mock-chart{display:flex;align-items:flex-end;gap:7px;height:74px;border-bottom:2px solid var(--line);margin-bottom:12px}
.mock-chart .bar{flex:1;background:linear-gradient(180deg,#4aa3e0,#1278c5);border-radius:5px 5px 0 0}
.mock-row{display:flex;align-items:center;gap:10px;background:var(--blue-tint);border-radius:9px;padding:9px 11px}
.mock-row .ic{width:26px;height:26px;border-radius:7px;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.mock-row .ic svg{width:15px;height:15px}
.mock-row .tt{font-size:.74rem;color:var(--ink-2);line-height:1.3}
.mock-row .tt b{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--ink);display:block;font-size:.78rem}
/* nfc card for taphab */
.nfc-card{width:66%;max-width:280px;aspect-ratio:1.585/1;border-radius:18px;background:linear-gradient(135deg,#fff,#eaf3fb);
  box-shadow:0 30px 60px rgba(4,30,54,.45);padding:20px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-6deg);position:relative;z-index:3}
.nfc-card .chip{width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,#e9c46a,#d9a441)}
.nfc-card .wave{width:22px;height:22px;color:var(--blue)}
.nfc-card .nm{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.02rem;color:var(--ink)}
.nfc-card .rl{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.06em;color:var(--blue-700);text-transform:uppercase;margin-top:2px}
.nfc-card .tap{display:flex;align-items:center;gap:7px;margin-top:12px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.76rem;color:var(--blue)}

/* ---------- STATS BAND ---------- */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.stats-band .sc{padding:34px 26px;border-right:1px solid var(--line);text-align:center}
.stats-band .sc:last-child{border-right:none}
.stats-band .n{font-family:'Montserrat',sans-serif;font-weight:900;font-size:2.3rem;color:var(--blue);letter-spacing:-.03em}
.stats-band .l{font-size:.86rem;color:var(--ink-2);margin-top:4px}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(155deg,#1782d0,#1278c5 46%,#0b4f8c);color:#fff;border-radius:26px;padding:62px 56px;text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;background:var(--plus-white);background-size:32px 32px;opacity:.7}
.cta-band>*{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:#dbeefb;max-width:52ch;margin:16px auto 0;font-size:1.1rem}
.cta-band .row{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* ---------- ABOUT bits ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.tags-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.tags-row span{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--ink-2);border:1px solid var(--line-2);background:#fff;padding:.42rem .78rem;border-radius:100px}
.map-card{aspect-ratio:1/.92;border-radius:var(--r-lg);overflow:hidden;position:relative;background:linear-gradient(155deg,#1a86d6,#0b5490);box-shadow:var(--shadow-blue)}
.map-card::before{content:"";position:absolute;inset:0;background:var(--plus-white);background-size:30px 30px;opacity:.9}
.map-pins{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:40px;z-index:2;flex-wrap:wrap}
.pin{background:#fff;border-radius:14px;padding:16px 20px;box-shadow:0 14px 30px rgba(4,30,54,.3);text-align:center}
.pin .flag{font-size:1.6rem}
.pin .c{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1rem;color:var(--ink);margin-top:4px}
.pin .city{font-size:.78rem;color:var(--muted)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
.cmethods{display:flex;flex-direction:column;gap:12px}
.cm{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:.3s var(--ease)}
.cm:hover{border-color:var(--blue);transform:translateX(4px);box-shadow:var(--shadow-sm)}
.cm .cmic{width:46px;height:46px;border-radius:12px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.cm .cmic svg{width:22px;height:22px}
.cm>span:last-child{display:flex;flex-direction:column}
.cm .k{display:block;font-family:'Space Mono',monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cm .v{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);margin-top:2px}
.office-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.office{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.office .flag{font-size:1.5rem}
.office h4{font-size:1.05rem;margin:8px 0 6px}
.office p{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.formcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px;box-shadow:var(--shadow-md)}
.formcard h3{font-size:1.3rem;margin-bottom:6px}
.formcard .sub{font-size:.9rem;color:var(--ink-2);margin-bottom:26px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-family:'Space Mono',monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:.78rem .9rem;transition:.25s;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(18,120,197,.1)}
.field textarea{resize:vertical;min-height:120px}
.formcard .btn{width:100%;justify-content:center;margin-top:6px;font-size:1rem;padding:.98rem}
.form-note{font-size:.78rem;color:var(--muted);text-align:center;margin-top:14px}
.form-ok{display:none;align-items:center;gap:10px;background:var(--blue-tint);border:1px solid #cfe6fa;color:var(--blue-800);border-radius:10px;padding:12px 14px;font-size:.88rem;margin-top:16px}
.form-ok.show{display:flex}.form-ok svg{width:18px;height:18px;flex:none;color:var(--blue)}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--footer);color:#c6d6e4;position:relative;overflow:hidden;padding:64px 0 28px}
.site-footer::before{content:"";position:absolute;inset:0;background:var(--plus-white);background-size:32px 32px;opacity:.5;pointer-events:none}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:38px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);position:relative}
.foot-brand .fb-logo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.foot-brand .fb-logo img{height:36px;width:auto}
.foot-brand .fb-logo span{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.3rem;color:#fff;letter-spacing:-.02em}
.foot-brand p{font-size:.9rem;color:#8ba3bb;max-width:34ch;line-height:1.6}
.foot-loc{display:flex;gap:16px;margin-top:18px}
.foot-loc .l{display:flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.85rem;color:#c6d6e4}
.foot-loc .l .flag{font-size:1.1rem}
.foot-col h5{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:16px}
.foot-col a{display:block;font-size:.91rem;color:#c6d6e4;padding:6px 0;transition:.2s;width:fit-content}
.foot-col a:hover{color:var(--blue-400)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;flex-wrap:wrap;gap:14px;position:relative}
.foot-bottom p{font-size:.82rem;color:#7a92aa}
.foot-social{display:flex;gap:10px}
.foot-social a{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#c6d6e4;transition:.25s}
.foot-social a:hover{border-color:var(--blue-400);color:#fff;transform:translateY(-2px)}
.foot-social svg{width:17px;height:17px}

/* ---------- REVEAL + FAB ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.fab{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:14px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(18,120,197,.4);z-index:90;opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:.35s var(--ease)}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab:hover{background:var(--blue-700);transform:translateY(-3px)}.fab svg{width:22px;height:22px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:42px}
  .hero-vis{max-width:460px;margin:0 auto;width:100%}
  .prod-inner{grid-template-columns:1fr}
  .prod .pvis{order:-1;min-height:300px}
  .grid-3,.ps-grid,.grid-4{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .wcell:nth-child(3n){border-right:1px solid var(--line)}
  .wcell:nth-child(2n){border-right:none}
  .why-grid .wcell:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .why-grid .wcell:nth-last-child(-n+2){border-bottom:none}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px 0}
  .step:not(:last-child)::after{display:none}
  .stats-band{grid-template-columns:repeat(2,1fr)}
  .stats-band .sc:nth-child(2){border-right:none}
  .stats-band .sc:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:680px){
  .menu,.nav-cta .btn{display:none}
  .hamb{display:flex}
  .pad{padding:64px 0}.pad-sm{padding:48px 0}
  .wrap{padding:0 20px}
  .grid-3,.grid-2,.ps-grid,.grid-4,.office-cards{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .wcell{border-right:none!important}
  .why-grid .wcell{border-bottom:1px solid var(--line)!important}
  .why-grid .wcell:last-child{border-bottom:none!important}
  .steps{grid-template-columns:1fr;gap:30px}
  .stats-band{grid-template-columns:1fr}
  .stats-band .sc{border-right:none;border-bottom:1px solid var(--line)}
  .stats-band .sc:last-child{border-bottom:none}
  .prod .pcopy{padding:36px 26px}
  .prod-title h3{font-size:1.9rem}
  .cta-band{padding:44px 26px}
  .frow{grid-template-columns:1fr}
  .hero-stats .stat{padding-right:20px;margin-right:20px}
  .foot-grid{grid-template-columns:1fr}
  .hero-tiles{padding:26px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}