/* =====================================================
   Fintectual — Shared Minimalist Design System

   1. COLOR   — unchanged from the original palette (navy/teal
      on a near-white surface). Every rule below still reads its
      color from these same tokens.
   2. SPACING — an 8-point grid. --space-1 = 8px; every step is a
      multiple of 8, plus a single --space-05 half-step (4px) for
      the tightest icon/label gaps. Layout margin/padding/gap
      throughout this file resolve to one of these tokens instead
      of ad-hoc pixel values.
   3. TYPE    — Inter, on a consolidated size ramp (2xs→9xl) so
      every heading/label/body size in the site is one of a fixed
      set of steps rather than dozens of one-off sizes.
   4. MOTION  — one duration/easing pair reused by every hover
      transition and card animation, so interaction feels uniform
      site-wide.
   ===================================================== */
:root{
  /* ---- 1. Color (unchanged) ---- */
  --navy:#002f81;
  --navy-ink:#001a4d;
  --teal:#006f73;
  --ink:#0a0e17;
  --text-muted:#68708a;
  --text-faint:#9099b0;
  --surface:#ffffff;
  --surface-alt:#fafbfd;
  --border:#e6e9f0;
  --border-strong:#d3d9e6;
  --radius:10px;

  /* ---- 2. Spacing — 8pt grid ---- */
  --space-0:0;
  --space-05:4px;   /* half-step: icon/label micro-gaps only */
  --space-1:8px;
  --space-1-5:12px;
  --space-2:16px;
  --space-2-5:20px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-7:56px;
  --space-8:64px;
  --space-9:72px;
  --space-10:80px;
  --space-11:88px;
  --space-12:96px;
  --space-15:120px;

  /* ---- 3. Type scale ---- */
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:13px;
  --text-base:14px;
  --text-md:15px;
  --text-lg:16px;
  --text-xl:18px;
  --text-2xl:19px;
  --text-3xl:21px;
  --text-4xl:24px;
  --text-5xl:28px;
  --text-6xl:32px;
  --text-7xl:36px;
  --text-8xl:44px;
  --text-9xl:52px;
  --leading-tight:1.15;
  --leading-snug:1.3;
  --leading-normal:1.6;
  --leading-relaxed:1.65;

  /* ---- 4. Motion ---- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:.15s;
  --dur-base:.22s;
  --shadow-hover:0 12px 28px rgba(10,14,23,.10);
  --shadow-card:0 1px 2px rgba(10,14,23,.04);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--surface);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Inter',sans-serif;letter-spacing:-0.02em;font-weight:700;line-height:var(--leading-tight);}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-3);}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--navy);}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--teal);border-radius:2px;}

/* ===== NAV ===== */
header.site-nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border);}
.nav-inner{max-width:1180px;margin:0 auto;padding:var(--space-2) var(--space-3);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);}
.brand{display:flex;align-items:center;gap:var(--space-1-5);}
.brand img{height:44px;width:auto;}
.brand-name{font-size:var(--text-3xl);font-weight:800;color:var(--navy);letter-spacing:-0.02em;}
nav.links{display:flex;align-items:center;gap:var(--space-4);}
nav.links a{font-size:var(--text-base);font-weight:600;color:var(--ink);opacity:0.72;transition:opacity .2s, color .2s;}
nav.links a:hover,nav.links a.current{opacity:1;color:var(--navy);}
.dropdown{position:relative;}
.dropdown-panel{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(10,14,23,0.10);padding:var(--space-1);width:270px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px);transition:all .18s ease;}
.dropdown:hover .dropdown-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown-panel a{display:flex;flex-direction:column;gap:2px;padding:var(--space-1) var(--space-1-5);border-radius:8px;opacity:1;}
.dropdown-panel a:hover{background:var(--surface-alt);}
.dropdown-panel a strong{font-size:var(--text-sm);color:var(--navy);font-weight:700;}
.dropdown-panel a small{font-size:var(--text-xs);color:var(--text-muted);font-weight:500;}
.dropdown-panel a.current{background:var(--surface-alt);}
.nav-cta{background:var(--navy);color:#fff;font-weight:700;font-size:var(--text-base);padding:var(--space-1-5) var(--space-2-5);border-radius:8px;white-space:nowrap;transition:background .15s;}
.nav-cta:hover{background:var(--navy-ink);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero{padding:var(--space-8) 0 var(--space-7);border-bottom:1px solid var(--border);}
.page-hero .hero-tag{display:inline-flex;align-items:center;gap:var(--space-1);border:1px solid var(--border-strong);color:var(--text-muted);font-size:var(--text-xs);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:var(--space-1) var(--space-1-5);border-radius:100px;margin-bottom:var(--space-2-5);}
.page-hero .hero-tag b{color:var(--navy);}
.page-hero h1{font-size:var(--text-8xl);line-height:1.14;margin-bottom:var(--space-2);color:var(--ink);letter-spacing:-0.03em;max-width:760px;}
.page-hero h1 span{color:var(--teal);}
.page-hero p.lead{font-size:var(--text-xl);color:var(--text-muted);max-width:600px;margin-bottom:var(--space-4);line-height:1.65;}

/* ===== HOME HERO ===== */
.hero{padding:var(--space-12) 0 var(--space-11);border-bottom:1px solid var(--border);}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-8);align-items:center;}
.hero-tag{display:inline-flex;align-items:center;gap:var(--space-1);border:1px solid var(--border-strong);color:var(--text-muted);font-size:var(--text-xs);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:var(--space-1) var(--space-1-5);border-radius:100px;margin-bottom:var(--space-3);}
.hero-tag b{color:var(--navy);}
.hero h1{font-size:var(--text-9xl);line-height:1.1;margin-bottom:var(--space-2-5);color:var(--ink);letter-spacing:-0.03em;}
.hero h1 span{color:var(--teal);}
.hero p.lead{font-size:var(--text-xl);color:var(--text-muted);max-width:480px;margin-bottom:var(--space-4);line-height:1.65;}
.hero-actions{display:flex;gap:var(--space-1-5);flex-wrap:wrap;margin-bottom:var(--space-6);}
.btn{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:700;font-size:var(--text-md);padding:var(--space-1-5) var(--space-3);border-radius:9px;transition:all .15s ease;cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-ink);}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--border-strong);}
.btn-outline:hover{border-color:var(--navy);color:var(--navy);}
.btn-sm{padding:var(--space-1) var(--space-2);font-size:var(--text-sm);}
.hero-meta{display:flex;gap:var(--space-4);flex-wrap:wrap;border-top:1px solid var(--border);padding-top:var(--space-3);}
.hero-meta div{display:flex;flex-direction:column;gap:3px;}
.hero-meta strong{font-size:var(--text-3xl);font-weight:800;color:var(--navy);}
.hero-meta span{font-size:var(--text-xs);color:var(--text-muted);}

/* Device / console frame (reused hero visual) */
.device-frame{border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(10,14,23,0.08);}
.device-topbar{display:flex;align-items:center;gap:6px;padding:var(--space-1-5) var(--space-2);border-bottom:1px solid var(--border);background:var(--surface-alt);}
.device-topbar span:not(.dtb-label){width:8px;height:8px;border-radius:50%;background:var(--border-strong);flex:none;}
.device-topbar .dtb-label{margin-left:var(--space-1);font-size:var(--text-xs);color:var(--text-faint);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.device-body{padding:var(--space-2-5);}
.device-media{padding:var(--space-1-5);background:var(--surface-alt);}
.device-media img{width:100%;height:auto;border-radius:8px;border:1px solid var(--border);display:block;}
.ds-row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2);}
.ds-row-top strong{font-size:var(--text-base);color:var(--ink);}
.status-pill{display:inline-flex;align-items:center;gap:6px;background:#eaf6f5;color:var(--teal);font-size:var(--text-2xs);font-weight:700;padding:4px var(--space-1);border-radius:100px;}
.status-pill i{width:6px;height:6px;border-radius:50%;background:var(--teal);}
.ds-line{display:flex;justify-content:space-between;font-size:var(--text-sm);padding:var(--space-1-5) 0;border-bottom:1px solid var(--border);}
.ds-line span{color:var(--text-muted);}
.ds-line b{color:var(--ink);font-weight:600;}
.ds-line:last-of-type{border-bottom:none;}
.ds-bars{display:flex;align-items:end;gap:5px;height:44px;margin-top:var(--space-2);}
.ds-bars span{flex:1;background:var(--border-strong);border-radius:3px 3px 1px 1px;}
.ds-bars span.on{background:var(--navy);}

/* ===== SECTION SHELL ===== */
section{padding:var(--space-11) 0;}
.section-head{max-width:620px;margin-bottom:var(--space-6);}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:var(--text-6xl);margin:var(--space-1-5) 0 var(--space-1-5);color:var(--ink);}
.section-head p{color:var(--text-muted);font-size:var(--text-lg);margin-bottom:var(--space-1-5);}
.section-head p:last-child{margin-bottom:0;}
.page-hero p.lead:last-of-type,.hero p.lead:last-of-type{margin-bottom:var(--space-4);}
.page-hero p.lead:not(:last-of-type),.hero p.lead:not(:last-of-type){margin-bottom:var(--space-1-5);}
.alt{background:var(--surface-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

/* ===== KPI STRIP ===== */
.kpi-strip{padding:var(--space-5) 0;border-bottom:1px solid var(--border);background:var(--surface-alt);}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-1-5);}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2-5) var(--space-2);text-align:center;}
.kpi-num{font-size:var(--text-5xl);font-weight:800;color:var(--navy);line-height:1;margin-bottom:var(--space-1);}
.kpi-label{font-size:var(--text-xs);color:var(--text-muted);line-height:1.4;}

/* ===== TRUST STRIP ===== */
.trust-strip{padding:var(--space-5) 0;border-bottom:1px solid var(--border);}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
.trust-item{padding-left:var(--space-2);border-left:2px solid var(--border-strong);}
.trust-item strong{display:block;font-size:var(--text-md);color:var(--ink);margin-bottom:2px;}
.trust-item span{font-size:var(--text-xs);color:var(--text-muted);}

/* ===== PRODUCT / FEATURE GRID (bordered table style) ===== */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.product-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.product-card{background:#fff;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1-5);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .15s;}
.product-grid.cols-2 .product-card:nth-child(2n){border-right:none;}
.product-grid.cols-2 .product-card:nth-last-child(-n+2){border-bottom:none;}
.product-grid:not(.cols-2) .product-card:nth-child(3n){border-right:none;}
.product-grid:not(.cols-2) .product-card:nth-last-child(-n+3){border-bottom:none;}
.product-card:hover{background:var(--surface-alt);}
.p-icon{width:40px;height:40px;border:1px solid var(--border-strong);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:800;font-size:var(--text-md);}
.p-cat{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--teal);margin-top:4px;}
.p-name{font-size:var(--text-xl);font-weight:700;color:var(--ink);margin-top:2px;}
.p-desc{font-size:var(--text-sm);color:var(--text-muted);flex-grow:1;}
.p-tags{font-size:var(--text-xs);color:var(--text-faint);}
.p-tags b{color:var(--text-muted);font-weight:600;}
.p-link{font-size:var(--text-sm);font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:6px;margin-top:4px;}
.p-link:hover{text-decoration:underline;}

/* ===== COMPARE / OLD-NEW ===== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.compare-card{padding:var(--space-4);}
.compare-card.old{background:#fff;border-right:1px solid var(--border);}
.compare-card.new{background:var(--navy-ink);color:#fff;}
.compare-card h3{font-size:var(--text-xl);margin-bottom:var(--space-2);}
.compare-card ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-1-5);}
.compare-card li{display:flex;gap:var(--space-1);font-size:var(--text-base);align-items:flex-start;}
.compare-card.old li{color:var(--text-muted);}
.compare-card.new li{color:#c3cce8;}
.x-mark,.check-mark{flex-shrink:0;width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);margin-top:1px;}
.x-mark{border:1px solid var(--border-strong);color:var(--text-faint);}
.check-mark{background:rgba(255,255,255,0.14);color:#5be8e5;}

/* ===== STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.step{padding:var(--space-3) var(--space-3);border-right:1px solid var(--border);}
.step:last-child{border-right:none;}
.step-num{font-size:var(--text-sm);font-weight:800;color:var(--teal);margin-bottom:var(--space-1-5);}
.step h3{font-size:var(--text-md);margin-bottom:var(--space-1);}
.step p{font-size:var(--text-sm);color:var(--text-muted);}

/* ===== WHY / VALUE PROPS ===== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.why-card{padding:0 var(--space-4);border-left:1px solid var(--border);}
.why-card:first-child{padding-left:0;border-left:none;}
.why-card h3{font-size:var(--text-lg);margin-bottom:var(--space-1);color:var(--ink);}
.why-card p{font-size:var(--text-sm);color:var(--text-muted);}
.why-num{font-size:var(--text-sm);font-weight:800;color:var(--teal);margin-bottom:var(--space-1-5);}

/* ===== INDUSTRIES / TAG ROW ===== */
.ind-row{display:flex;flex-wrap:wrap;gap:var(--space-1-5);}
.ind-badge{flex:1;min-width:220px;padding:var(--space-2) var(--space-2-5);border:1px solid var(--border);border-radius:10px;}
.ind-badge strong{display:block;font-size:var(--text-base);margin-bottom:3px;}
.ind-badge span{font-size:var(--text-xs);color:var(--text-muted);}

/* ===== HARDWARE / SPEC TABLE ===== */
.hw-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:var(--space-3);}
.hw-card{padding:var(--space-3);border-right:1px solid var(--border);}
.hw-card:last-child{border-right:none;}
.hw-media{display:flex;align-items:center;justify-content:center;height:210px;background:var(--surface-alt);border:1px solid var(--border);border-radius:12px;margin-bottom:var(--space-2-5);overflow:hidden;}
.hw-media img{max-height:180px;max-width:88%;width:auto;object-fit:contain;}
.hw-top{display:flex;align-items:center;gap:var(--space-1-5);margin-bottom:var(--space-2);}
.hw-icon{width:44px;height:56px;border:1px solid var(--border-strong);border-radius:9px;position:relative;flex-shrink:0;}
.hw-icon::after{content:"";position:absolute;inset:6px 6px 14px 6px;background:var(--surface-alt);border-radius:3px;}
.hw-icon::before{content:"";position:absolute;bottom:6px;left:6px;right:6px;height:4px;background:var(--border-strong);border-radius:2px;}
.hw-title strong{display:block;font-size:var(--text-lg);color:var(--ink);}
.hw-title span{font-size:var(--text-xs);color:var(--teal);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}
.hw-specs{list-style:none;display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-2);}
.hw-specs li{display:flex;justify-content:space-between;font-size:var(--text-sm);border-bottom:1px solid var(--border);padding-bottom:var(--space-1);}
.hw-specs li b{color:var(--ink);font-weight:600;}
.hw-specs li span:first-child{color:var(--text-muted);}
.hw-tags{display:flex;flex-wrap:wrap;gap:var(--space-1);}
.hw-tag{border:1px solid var(--border-strong);color:var(--text-muted);font-size:var(--text-2xs);font-weight:700;padding:5px var(--space-1);border-radius:100px;}
.hw-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;}
table.hw-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);background:#fff;}
table.hw-table th,table.hw-table td{padding:var(--space-1-5) var(--space-2);text-align:left;border-bottom:1px solid var(--border);}
table.hw-table th{background:var(--surface-alt);color:var(--navy);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.04em;font-weight:700;}
table.hw-table tr:last-child td{border-bottom:none;}
table.hw-table td:first-child{color:var(--text-muted);font-weight:600;}

/* ===== PRICING ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.price-card{padding:var(--space-4);border-right:1px solid var(--border);}
.price-card:last-child{border-right:none;}
.price-card.hi{background:var(--navy-ink);color:#fff;}
.price-card .pc-tier{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--teal);margin-bottom:var(--space-1);}
.price-card.hi .pc-tier{color:#5be8e5;}
.price-card .pc-amt{font-size:var(--text-6xl);font-weight:800;margin-bottom:4px;}
.price-card .pc-sub{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-2-5);}
.price-card.hi .pc-sub{color:#a9b6dc;}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-1);}
.price-card li{font-size:var(--text-sm);color:var(--text-muted);}
.price-card.hi li{color:#dbe3f7;}

/* ===== CTA BOX ===== */
.cta-box{border:1px solid var(--border-strong);border-top:3px solid var(--navy);border-radius:14px;padding:var(--space-6) var(--space-6);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;}
.cta-box h2{font-size:var(--text-5xl);margin-bottom:var(--space-1);color:var(--ink);}
.cta-box p{color:var(--text-muted);font-size:var(--text-md);}
.cta-actions{display:flex;gap:var(--space-1-5);flex-wrap:wrap;}

/* ===== FORM ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);}
.form-field{display:flex;flex-direction:column;gap:var(--space-1);}
.form-field.full{grid-column:span 2;}
.form-field label{font-size:var(--text-xs);font-weight:700;color:var(--ink);}
.form-field input,.form-field select,.form-field textarea{border:1px solid var(--border-strong);border-radius:8px;padding:var(--space-1-5) var(--space-1-5);font-family:inherit;font-size:var(--text-base);color:var(--ink);background:#fff;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--navy);}
.form-field textarea{resize:vertical;min-height:110px;}

/* ===== SIMPLE CARD LIST (offices, values, timeline) ===== */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.info-card{padding:var(--space-4);border-right:1px solid var(--border);}
.info-card:last-child{border-right:none;}
.info-card h3{font-size:var(--text-lg);margin-bottom:6px;}
.info-card p{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:4px;}

/* ===== FOOTER ===== */
footer{background:var(--navy-ink);color:#aebbdc;padding:var(--space-8) 0 0;}
.footer-grid{display:grid;grid-template-columns:1.3fr 0.8fr 0.8fr 1.3fr;gap:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand{display:flex;align-items:center;gap:var(--space-1-5);margin-bottom:var(--space-2);}
.footer-brand .logo-chip{background:#fff;border-radius:8px;padding:6px var(--space-1);display:flex;align-items:center;}
.footer-brand img{height:26px;display:block;}
.footer-brand strong{font-size:var(--text-2xl);font-weight:800;color:#fff;letter-spacing:-0.02em;}
footer p.tagline{font-size:var(--text-sm);color:#8b9ac2;max-width:280px;margin-bottom:var(--space-2);}
footer h4{color:#fff;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-2);font-weight:700;}
footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-1-5);}
footer ul a{font-size:var(--text-sm);color:#9aa8cf;transition:color .2s;}
footer ul a:hover{color:#fff;}
.office-block{margin-bottom:var(--space-2);}
.office-block strong{display:block;color:#fff;font-size:var(--text-sm);margin-bottom:4px;}
.office-block span{display:block;font-size:var(--text-sm);color:#8b9ac2;line-height:1.55;}
.contact-line{display:flex;gap:var(--space-1);font-size:var(--text-sm);color:#c3cce8;margin-bottom:6px;align-items:center;}
.bottom-bar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2-5) 0;flex-wrap:wrap;gap:var(--space-1);font-size:var(--text-xs);color:#7683a8;}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:var(--text-7xl);}
  .page-hero h1{font-size:var(--text-6xl);}
  nav.links{display:none;}
  .nav-toggle{display:block;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .kpi-grid{grid-template-columns:repeat(3,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid .product-card:nth-child(3n){border-right:1px solid var(--border);}
  .product-grid .product-card:nth-child(2n){border-right:none;}
  .product-grid .product-card:nth-last-child(-n+3){border-bottom:1px solid var(--border);}
  .product-grid .product-card:nth-last-child(-n+2){border-bottom:none;}
  .why-grid{grid-template-columns:1fr;gap:var(--space-3);}
  .why-card{padding-left:var(--space-2-5);border-left:2px solid var(--border);}
  .why-card:first-child{padding-left:var(--space-2-5);border-left:2px solid var(--border);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .compare{grid-template-columns:1fr;}
  .compare-card.old{border-right:none;border-bottom:1px solid var(--border);}
  .steps{grid-template-columns:1fr 1fr;}
  .step{border-bottom:1px solid var(--border);}
  .hw-grid{grid-template-columns:1fr;}
  .hw-card{border-right:none;border-bottom:1px solid var(--border);}
  .pricing-grid{grid-template-columns:1fr;}
  .price-card{border-right:none;border-bottom:1px solid var(--border);}
  .info-grid{grid-template-columns:1fr;}
  .info-card{border-right:none;border-bottom:1px solid var(--border);}
}
@media(max-width:600px){
  .product-grid{grid-template-columns:1fr;}
  .product-card{border-right:none !important;border-bottom:1px solid var(--border) !important;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-box{flex-direction:column;text-align:center;}
  .form-grid{grid-template-columns:1fr;}
  .form-field.full{grid-column:span 1;}
  .steps{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
}

/* =====================================================
   LIVE DEMO — Retail Performance (FuelOne reporting preview)
   ===================================================== */
.demo-toolbar{display:flex;gap:var(--space-2);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--space-3);}
.demo-field{display:flex;flex-direction:column;gap:6px;}
.demo-field label{font-size:var(--text-2xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);}
.demo-field select{border:1px solid var(--border-strong);border-radius:8px;padding:var(--space-1) var(--space-4) var(--space-1) var(--space-1-5);font-family:inherit;font-size:var(--text-sm);color:var(--ink);background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%2368708a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;appearance:none;cursor:pointer;min-width:150px;}
.demo-field select:focus{outline:none;border-color:var(--navy);}
.demo-status{font-size:var(--text-xs);color:var(--text-muted);display:flex;align-items:center;gap:var(--space-1);margin-left:auto;}
.demo-status .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;}
.demo-status .dot.err{background:#c0392b;}
.demo-status .dot.loading{animation:demoPulse 1.2s infinite;}
@keyframes demoPulse{0%,100%{opacity:1;}50%{opacity:.3;}}

.demo-panel{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:var(--space-2-5);overflow:hidden;background:#fff;}
.demo-panel-hdr{padding:var(--space-2-5) var(--space-3);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--space-1);}
.demo-panel-hdr h3{font-size:var(--text-lg);color:var(--ink);}
.demo-panel-hdr span{font-size:var(--text-xs);color:var(--text-muted);font-weight:500;}
.demo-panel .demo-toolbar{padding:var(--space-2-5) var(--space-3) 0;margin-bottom:6px;}
.demo-table-wrap{overflow-x:auto;}
table.demo-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);}
table.demo-table th{background:var(--surface-alt);color:var(--navy);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.04em;font-weight:700;padding:var(--space-1-5) var(--space-2);text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;}
table.demo-table th:first-child{text-align:left;}
table.demo-table td{padding:var(--space-1-5) var(--space-2);text-align:right;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;color:var(--ink);}
table.demo-table td:first-child{text-align:left;font-weight:600;}
table.demo-table tr:last-child td{border-bottom:none;}
.demo-pos{color:#0d8a4f;}
.demo-neg{color:#c0392b;}
.demo-note{font-size:var(--text-xs);color:var(--text-muted);padding:var(--space-1-5) var(--space-3) var(--space-2-5);line-height:1.6;}
.demo-note code{background:var(--surface-alt);padding:1px 6px;border-radius:4px;font-size:var(--text-xs);}
.demo-disclaimer{font-size:var(--text-xs);color:var(--text-faint);text-align:center;margin-top:var(--space-1);}

.demo-pill-row{display:flex;gap:var(--space-1);flex-wrap:wrap;padding:var(--space-2-5) var(--space-3) 0;}
.demo-pill{font-size:var(--text-xs);font-weight:700;padding:var(--space-1) var(--space-2);border-radius:100px;border:1px solid var(--border-strong);color:var(--text-muted);cursor:pointer;background:#fff;transition:all .15s;}
.demo-pill:hover{border-color:var(--navy);color:var(--navy);}
.demo-pill.active{background:var(--navy);border-color:var(--navy);color:#fff;}

.demo-tabs{display:flex;gap:2px;background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;padding:3px;}
.demo-tabs span{padding:var(--space-1) var(--space-1-5);border-radius:6px;font-size:var(--text-xs);font-weight:700;color:var(--text-muted);cursor:pointer;transition:all .15s;user-select:none;}
.demo-tabs span.active{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(10,14,23,.10);}

.demo-chart-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--space-2);padding:var(--space-2-5) var(--space-3) var(--space-3);}
.demo-chart-card{border:1px solid var(--border);border-radius:10px;padding:var(--space-2) var(--space-2);background:var(--surface-alt);}
.demo-chart-hdr{font-size:var(--text-xs);font-weight:700;color:var(--ink);margin-bottom:var(--space-1);}
.demo-legend{display:flex;gap:var(--space-1-5);flex-wrap:wrap;margin-bottom:var(--space-1);}
.demo-legend-item{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-muted);}
.demo-legend-swatch{width:12px;height:2px;border-radius:1px;flex-shrink:0;}
.demo-legend-swatch.bar{width:9px;height:9px;border-radius:2px;}
.demo-chart-wrap{position:relative;}
.demo-chart-wrap svg{width:100%;height:auto;display:block;overflow:visible;}
.demo-chart-empty{font-size:var(--text-xs);color:var(--text-faint);text-align:center;padding:var(--space-4) var(--space-1);}
.demo-tooltip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--border-strong);border-radius:8px;padding:var(--space-1) var(--space-1-5);font-size:var(--text-xs);color:var(--ink);box-shadow:0 12px 28px rgba(10,14,23,.14);opacity:0;transition:opacity .1s;z-index:20;white-space:nowrap;}
.demo-tooltip .tt-title{font-weight:700;color:var(--text-muted);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.demo-tooltip .tt-row{display:flex;align-items:center;gap:var(--space-1);}
.demo-tooltip .tt-key{width:8px;height:8px;border-radius:2px;flex-shrink:0;}
.demo-tooltip .tt-val{font-weight:700;margin-left:auto;padding-left:var(--space-1-5);font-variant-numeric:tabular-nums;}

@media(max-width:980px){
  .demo-chart-grid{grid-template-columns:1fr;}
  .demo-status{margin-left:0;}
}

/* ===== NAV — Market Data link ===== */
.nav-live-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);display:inline-block;margin-right:var(--space-1);animation:navLivePulse 1.8s infinite;}
@keyframes navLivePulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* =====================================================
   HERO LIVE WIDGET — compact live-data card (replaces the
   FuelOne transaction mockup in the homepage hero)
   ===================================================== */
.hero-live-body{padding:var(--space-2-5);}
.hero-live-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-2xs);font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--space-1-5);}
.hero-live-badge i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:navLivePulse 1.8s infinite;}
.hero-live-heading{font-size:var(--text-4xl);line-height:1.18;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin-bottom:var(--space-1-5);}
.hero-live-meta{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--border);}
.hero-live-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-1);margin-bottom:var(--space-2);}
.hero-live-stat{display:flex;flex-direction:column;gap:3px;}
.hero-live-stat .l{font-size:var(--text-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);}
.hero-live-stat .v{font-size:var(--text-lg);font-weight:800;color:var(--ink);}
.hero-live-stat .v.demo-pos{color:#0d8a4f;}
.hero-live-stat .v.demo-neg{color:#c0392b;}
.hero-live-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:700;color:var(--navy);margin-top:var(--space-2);}
.hero-live-link:hover{text-decoration:underline;}

/* ===== MARKET DATA PAGE — page-level wrapper for the full report ===== */
.market-data-shell{padding-top:var(--space-1-5);}

/* =====================================================
   OIL INDUSTRY DATA — homepage preview section
   ===================================================== */
.oid-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--space-7);align-items:center;}
.oid-copy p{color:var(--text-muted);font-size:var(--text-md);line-height:1.65;margin-bottom:var(--space-2-5);}
.oid-points{list-style:none;display:flex;flex-direction:column;gap:var(--space-1-5);margin-bottom:var(--space-3);}
.oid-points li{font-size:var(--text-sm);color:var(--text-muted);line-height:1.6;padding-left:var(--space-2);border-left:2px solid var(--border-strong);}
.oid-points li strong{color:var(--ink);}
.oid-chart-card{border:1px solid var(--border);border-radius:14px;padding:var(--space-3) var(--space-3) var(--space-2-5);background:var(--surface-alt);}
.oid-chart-card h3{font-size:var(--text-lg);color:var(--ink);}
.oid-chart-card #oid-chart-sub{font-size:var(--text-xs);color:var(--text-muted);}
.oid-chart-card .demo-chart-wrap{min-height:220px;}
@media(max-width:980px){
  .oid-grid{grid-template-columns:1fr;gap:var(--space-4);}
}

/* =====================================================
   INTERACTION — hover effects & card motion
   One shared duration/easing pair (--dur-base / --ease) drives
   every hover transition below, so interaction feels like one
   system rather than a per-component afterthought.

   Standalone cards (their own border, not clipped by a shared
   "overflow:hidden" grid container) get a full lift + shadow.
   Cards that live inside a divided, border-shared, overflow:hidden
   grid (Products, Compare, Steps, Hardware, Pricing, Info) instead
   get an inset accent + background tint - a translateY lift there
   would clip against the container's rounded corners.
   ===================================================== */
.kpi-card,.oid-chart-card,.ind-badge,.demo-panel,.demo-chart-card{
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.kpi-card:hover,.oid-chart-card:hover,.ind-badge:hover,.demo-panel:hover,.demo-chart-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:var(--border-strong);
}

.product-card,.compare-card,.step,.hw-card,.price-card,.info-card{
  transition:background var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
  position:relative;
}
.product-card:hover,.compare-card:hover,.step:hover,.hw-card:hover,.price-card:hover,.info-card:hover{
  background:var(--surface-alt);
  box-shadow:inset 0 -3px 0 var(--navy);
}
.compare-card.new:hover,.price-card.hi:hover{background:var(--navy-ink);box-shadow:inset 0 -3px 0 var(--teal);}
.product-card:hover .p-name,.step:hover h3,.hw-card:hover .hw-title strong,.info-card:hover h3{color:var(--navy);}
.product-card .p-icon,.hw-icon{transition:transform var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);}
.product-card:hover .p-icon{transform:translateY(-2px);border-color:var(--navy);}

.btn{transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.nav-cta{transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.nav-cta:hover{transform:translateY(-1px);}
.p-link,.hero-live-link{transition:gap var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.p-link:hover,.hero-live-link:hover{gap:9px;text-decoration:none;}
.p-icon{transition:transform var(--dur-base) var(--ease);}
.device-frame{transition:box-shadow var(--dur-base) var(--ease);}
.device-frame:hover{box-shadow:0 30px 70px rgba(10,14,23,.12);}