/* =====================================================
   SAFZ INNOVATIONS — LIGHT THEME recolor
   Clean light palette, Magneto-style orange accent.
   ===================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* SURFACES — light theme */
  --bg:        #FFFFFF;
  --bg-2:      #F8FAFC;
  --surf-1:    #FFFFFF;
  --surf-2:    #F8FAFC;
  --surf-3:    #F1F5F9;

  /* BORDERS — subtle to strong */
  --line-1:    #E2E8F0;
  --line-2:    #CBD5E1;
  --line-3:    #94A3B8;

  /* TEXT — dark on light */
  --t-1:       #0F172A;
  --t-2:       #334155;
  --t-3:       #64748B;
  --t-4:       #94A3B8;

  /* ACCENT — single. Magneto orange. */
  --accent:        #EA580C;
  --accent-soft:   #EA580C;
  --accent-deep:   #C2410C;
  --accent-glow:   rgba(234,88,12,0.25);
  --accent-bg:     #FFF1E6;

  /* CTA — same orange for light theme */
  --cta:           #EA580C;
  --cta-soft:      #EA580C;
  --cta-deep:      #C2410C;
  --cta-glow:      rgba(234,88,12,0.25);

  /* SEMANTIC */
  --ok:        #34D399;
  --warn:      #FBBF24;
  --err:       #F87171;

  /* RADIUS */
  --r-1:       8px;
  --r-2:       12px;
  --r-3:       16px;
  --r-4:       22px;
  --r-pill:    999px;

  /* MOTION */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    0.2s;
  --t-med:     0.4s;
  --t-slow:    0.7s;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  color:#334155;
  background:#FFFFFF;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:var(--accent);color:#fff}

/* SCROLLBAR */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#F8FAFC}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5,h6{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  color:#0F172A;
  letter-spacing:-0.025em;
  line-height:1.1;
}
h1{font-size:clamp(2.4rem, 4.6vw, 3.8rem);font-weight:800;letter-spacing:-0.04em;line-height:1.05}
h2{font-size:clamp(2rem, 3.6vw, 3rem);font-weight:700;letter-spacing:-0.035em;line-height:1.08;font-feature-settings:"ss01","ss02"}
h3{font-size:clamp(1.3rem, 2vw, 1.6rem);font-weight:700;letter-spacing:-0.015em}
h4{font-size:1.1rem;font-weight:700;letter-spacing:-0.015em}
p{color:var(--t-2);line-height:1.65}

a{color:inherit;text-decoration:none;transition:color var(--t-fast) var(--ease)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block;max-width:100%}

.mono{
  font-family:'JetBrains Mono',monospace;
  font-feature-settings:"ss01","ss02";
  letter-spacing:0;
}

/* ===== EYEBROW (mono uppercase tag) ===== */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  color:#EA580C;
  padding:6px 14px;
  border:1px solid #FED7AA;
  border-radius:var(--r-pill);
  background:#FFF1E6;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;
  background:#EA580C;
  box-shadow:0 0 8px rgba(234,88,12,0.35);
  animation:pulse 1.8s ease-in-out infinite;
}
.eyebrow.mute{color:var(--t-3);background:#F1F5F9;border-color:#E2E8F0}
.eyebrow.mute .dot{background:var(--t-3);box-shadow:none}
.eyebrow.warm{color:#EA580C;background:#FFF1E6;border-color:#FED7AA}
.eyebrow.warm .dot{background:#EA580C;box-shadow:0 0 8px rgba(234,88,12,0.35)}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;font-size:0.95rem;
  padding:13px 22px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:all var(--t-med) var(--ease);
  position:relative;
}
.btn .arr{display:inline-block;transition:transform var(--t-med) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

.btn-primary{
  background:#EA580C;
  color:#FFFFFF;
  border:none;
  box-shadow:0 8px 22px rgba(234,88,12,0.25);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(234,88,12,0.35);background:#C2410C}

.btn-ghost{
  background:transparent;
  color:#0F172A;
  border-color:#CBD5E1;
}
.btn-ghost:hover{background:#F8FAFC;border-color:#EA580C;color:#EA580C}

.btn-accent{
  background:#FFF1E6;
  color:#EA580C;
  border-color:#FED7AA;
}
.btn-accent:hover{background:#FDDCB5;color:#C2410C;border-color:#EA580C}

/* ===== LAYOUT PRIMITIVES ===== */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
@media(max-width:768px){.wrap{padding:0 20px}}

.sec{padding:96px 0}
@media(max-width:900px){.sec{padding:64px 0}}

/* ===== SCROLL PROGRESS ===== */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:101;
  background:linear-gradient(90deg, #EA580C 0%, #C2410C 100%);
  transition:width 0.1s linear;
}

/* ===== NAV ===== */
nav#topnav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  transition:all var(--t-med) var(--ease);
  background:transparent;
}
nav#topnav.scrolled{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid #E2E8F0;
  padding:12px 28px;
}
@media(max-width:768px){nav#topnav,nav#topnav.scrolled{padding:12px 20px}}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{
  width:36px;height:36px;border-radius:9px;
  background:linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
  display:grid;place-items:center;
  position:relative;
  box-shadow:0 4px 14px rgba(234,88,12,0.25);
}
.brand-mark::before{
  content:"";position:absolute;inset:1px;border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events:none;
}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1rem;font-weight:700;
  color:#0F172A;letter-spacing:-0.02em;
}
.brand-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:0.6rem;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#64748B;margin-top:2px;
}

.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links li a{
  font-size:0.92rem;font-weight:500;
  color:#334155;
  position:relative;
  transition:color var(--t-fast) var(--ease);
}
.nav-links li a::after{
  content:"";position:absolute;bottom:-6px;left:0;
  width:0;height:1.5px;background:#EA580C;
  transition:width var(--t-med) var(--ease);
}
.nav-links li a:hover{color:#0F172A}
.nav-links li a:hover::after,.nav-links li a.active::after{width:100%}
.nav-links li a.active{color:#0F172A}

.nav-cta{
  background:#EA580C;color:#FFFFFF!important;
  padding:9px 18px;border-radius:var(--r-pill);
  font-size:0.86rem!important;font-weight:600!important;
  transition:all var(--t-fast) var(--ease)!important;
}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:#C2410C;transform:translateY(-1px);box-shadow:0 8px 20px rgba(234,88,12,0.3)}

.hamb{
  display:none;width:38px;height:38px;border-radius:9px;
  background:rgba(15,23,42,0.04);border:1px solid #E2E8F0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.hamb span{width:16px;height:1.5px;background:#0F172A;border-radius:1px}

@media(max-width:980px){
  .nav-links{display:none}
  .hamb{display:flex}
}

/* MOBILE MENU */
.mob-menu{
  position:fixed;top:0;right:-100%;width:min(340px,84vw);height:100vh;z-index:200;
  background:#FFFFFF;padding:80px 24px 24px;
  transition:right var(--t-slow) var(--ease);
  border-left:1px solid #E2E8F0;
}
.mob-menu.open{right:0}
.mob-menu a{
  display:block;padding:14px 0;font-size:1.05rem;font-weight:500;
  color:#334155;border-bottom:1px solid #E2E8F0;
}
.mob-menu .close-x{
  position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;
  background:#F8FAFC;color:#0F172A;font-size:18px;
  border:1px solid #E2E8F0;display:grid;place-items:center;
}
.mob-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,0.3);z-index:150;
  opacity:0;pointer-events:none;transition:opacity var(--t-med) var(--ease);
}
.mob-overlay.open{opacity:1;pointer-events:all}

/* =====================================================
   HERO
   ===================================================== */
#hero{
  position:relative;
  min-height:88vh;
  padding:120px 0 70px;
  display:flex;align-items:center;
  background:#FFFFFF;
  overflow:hidden;
  isolation:isolate;
}

/* Subtle orange radial glow */
#hero::before{
  content:"";position:absolute;
  top:-10%;right:20%;
  width:60%;height:60%;
  background:radial-gradient(circle at 80% -10%, rgba(234,88,12,0.06), transparent 50%);
  filter:blur(40px);opacity:1;
  pointer-events:none;z-index:0;
}

.hero-grid{
  position:relative;z-index:1;width:100%;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:72px;align-items:center;
  max-width:1240px;margin:0 auto;padding:0 28px;
}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:48px}}
@media(max-width:768px){.hero-grid{padding:0 20px}}

.hero-eye{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:#64748B;
  padding:7px 14px;
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:var(--r-pill);
  margin-bottom:28px;
}
.hero-eye .live{
  width:6px;height:6px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 10px var(--ok);
  animation:pulse 1.6s ease-in-out infinite;
}

#hero h1{
  font-size:clamp(2.6rem, 5.4vw, 4.2rem);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1.0;
  color:#0F172A;
  margin-bottom:24px;
}
#hero h1 .accent{
  color:#EA580C;
  font-weight:800;
}

.hero-sub{
  font-size:1.15rem;
  line-height:1.65;
  color:#475569;
  max-width:50ch;
  margin-bottom:36px;
}
.hero-sub strong{color:#0F172A;font-weight:600}

.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:42px}

.hero-trust{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:28px;
  border-top:1px solid #E2E8F0;
}
.trust-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.66rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;
  color:#94A3B8;
}
.trust-flags{display:flex;gap:6px}
.trust-flag{
  width:26px;height:26px;border-radius:50%;
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  display:grid;place-items:center;font-size:13px;
  transition:transform var(--t-fast) var(--ease);
}
.trust-flag:hover{transform:translateY(-2px)}

/* HERO MOCKUP — dashboard preview */
.hero-mock{position:relative}
.hero-mock-card{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:var(--r-3);
  overflow:hidden;
  box-shadow:0 18px 36px rgba(15,23,42,0.08);
  position:relative;
}
.hero-mock-card::before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(135deg, rgba(234,88,12,0.12), transparent 40%);
  border-radius:var(--r-3);z-index:-1;
  filter:blur(20px);opacity:0.6;
}

.mock-bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  background:#F8FAFC;
  border-bottom:1px solid #E2E8F0;
}
.mock-bar .dot{width:9px;height:9px;border-radius:50%;background:#CBD5E1}
.mock-bar .dot.r{background:#FF6B6B}
.mock-bar .dot.y{background:#FFB770}
.mock-bar .dot.g{background:var(--ok)}
.mock-bar .url{
  margin-left:14px;
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;
  color:#64748B;
  background:#F1F5F9;
  padding:3px 10px;border-radius:6px;
}

.mock-body{padding:18px;display:grid;gap:12px}

.mock-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mock-kpi{
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:10px;padding:14px;
  position:relative;
}
.mock-kpi::before{
  content:"";position:absolute;top:0;left:0;width:3px;height:100%;
  background:var(--kpi-color, #EA580C);opacity:0.7;
}
.mock-kpi.warn::before{background:#FBBF24}
.mock-kpi-lbl{
  font-family:'JetBrains Mono',monospace;
  font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;
  color:#64748B;margin-bottom:6px;
}
.mock-kpi-val{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.6rem;font-weight:700;
  color:#0F172A;line-height:1;letter-spacing:-0.02em;
}
.mock-kpi-delta{
  font-size:0.66rem;color:var(--ok);font-weight:500;margin-top:4px;
}
.mock-kpi-delta.warn{color:#D97706}

.mock-chart{
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:10px;padding:16px;
}
.mock-chart-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;
}
.mock-chart-title{font-size:0.78rem;color:#0F172A;font-weight:600}
.mock-chart-tabs{display:flex;gap:5px}
.mock-tab{
  font-family:'JetBrains Mono',monospace;font-size:0.6rem;
  color:#64748B;
  padding:3px 7px;border-radius:5px;
  background:#F1F5F9;
}
.mock-tab.active{background:#FFF1E6;color:#EA580C}

.mock-svg{width:100%;height:100px}

.mock-rows{
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:10px;
  overflow:hidden;
}
.mock-row{
  display:grid;grid-template-columns:1fr 1fr 70px;gap:10px;align-items:center;
  padding:8px 14px;font-size:0.74rem;
}
.mock-row + .mock-row{border-top:1px solid #E2E8F0}
.mock-row-id{font-family:'JetBrains Mono',monospace;color:#0F172A;font-weight:500}
.mock-row-name{color:#64748B}
.mock-pill{
  display:inline-block;padding:2px 8px;border-radius:99px;
  font-family:'JetBrains Mono',monospace;font-size:0.58rem;font-weight:600;
  letter-spacing:0.04em;text-align:center;
}
.mock-pill.ok{background:rgba(52,211,153,0.14);color:#059669}
.mock-pill.proc{background:#EBF0FF;color:#4F6BFF}
.mock-pill.alert{background:rgba(248,113,113,0.14);color:var(--err)}

/* =====================================================
   MARQUEE — trust strip (KEPT, recolored)
   ===================================================== */
.marquee{
  background:#F8FAFC;
  border-top:1px solid #E2E8F0;
  border-bottom:1px solid #E2E8F0;
  padding:18px 0;overflow:hidden;
  position:relative;
}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;width:120px;height:100%;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg, #F8FAFC, transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg, #F8FAFC, transparent)}
.marquee-track{
  display:flex;gap:48px;
  animation:scroll-left 36s linear infinite;
  width:max-content;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
  color:#64748B;
}
.marquee-track span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.marquee-track .flag{font-size:1rem}
.marquee-track .sep{color:#94A3B8}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =====================================================
   SECTION HEAD — consistent across all sections
   ===================================================== */
.sh{margin-bottom:48px;max-width:760px}
.sh.center{margin-left:auto;margin-right:auto;text-align:center}
.sh h2{margin:18px 0 14px}
.sh h2 .accent{color:#EA580C}
.sh h2 .ital{font-style:italic;font-weight:600;color:#EA580C}
.sh p{font-size:1.05rem;color:#475569;max-width:60ch;line-height:1.65}
.sh.center p{margin-left:auto;margin-right:auto}

/* =====================================================
   FLAGSHIP (POPilot showcase) — #F8FAFC background
   ===================================================== */
#flagship{
  position:relative;background:#FFFFFF;
  padding:96px 0;overflow:hidden;
  border-top:1px solid #E2E8F0;
  border-bottom:1px solid #E2E8F0;
}
#flagship::before{
  content:"";position:absolute;
  top:-20%;left:50%;transform:translateX(-50%);
  width:60%;height:60%;
  background:radial-gradient(ellipse at center, rgba(234,88,12,0.04), transparent 60%);
  filter:blur(80px);opacity:0.6;pointer-events:none;
}

.flag-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;
}
@media(max-width:980px){.flag-grid{grid-template-columns:1fr;gap:48px}}

.flag-feats{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:32px 0 32px;
}
@media(max-width:480px){.flag-feats{grid-template-columns:1fr}}
.flag-feat{
  padding:16px;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:var(--r-2);
  transition:all var(--t-med) var(--ease);
}
.flag-feat:hover{background:#FFFFFF;border-color:#CBD5E1;box-shadow:0 8px 20px rgba(15,23,42,0.06);transform:translateY(-2px)}
.flag-feat-ico{
  width:32px;height:32px;border-radius:8px;
  background:#FFF1E6;
  display:grid;place-items:center;color:#EA580C;
  margin-bottom:10px;
}
.flag-feat h4{font-size:0.95rem;font-weight:600;color:#0F172A;margin-bottom:4px}
.flag-feat p{font-size:0.85rem;color:#64748B;line-height:1.5}

.flag-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Flagship visual — dashboard preview card */
.flag-visual{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:var(--r-3);
  padding:24px;overflow:hidden;
  position:relative;
  box-shadow:0 18px 36px rgba(15,23,42,0.08);
}
.flag-visual::before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(135deg, rgba(234,88,12,0.08), transparent 50%);
  border-radius:var(--r-3);z-index:-1;
  filter:blur(24px);opacity:0.6;
}

.flag-vis-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;padding-bottom:16px;
  border-bottom:1px solid #E2E8F0;
}
.flag-vis-title{display:flex;align-items:center;gap:11px}
.flag-vis-logo{
  width:38px;height:38px;border-radius:9px;
  background:linear-gradient(135deg, #4F6BFF, #3D5BD9);
  display:grid;place-items:center;color:#fff;
}
.flag-vis-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:1rem;color:#0F172A;
  letter-spacing:-0.015em;
}
.flag-vis-by{
  font-family:'JetBrains Mono',monospace;
  font-size:0.6rem;color:#64748B;
  letter-spacing:0.12em;text-transform:uppercase;
  margin-top:1px;
}
.flag-vis-status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;
  color:#059669;
  padding:4px 10px;border-radius:99px;
  background:rgba(52,211,153,0.10);
  border:1px solid rgba(52,211,153,0.22);
}
.flag-vis-status .dot{
  width:5px;height:5px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px var(--ok);
  animation:pulse 1.6s ease-in-out infinite;
}

.flag-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.flag-kpi{
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:10px;padding:13px;
}
.flag-kpi-lbl{
  font-family:'JetBrains Mono',monospace;font-size:0.6rem;
  color:#64748B;text-transform:uppercase;letter-spacing:0.14em;
  margin-bottom:5px;
}
.flag-kpi-val{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.6rem;font-weight:700;color:#0F172A;
  line-height:1;letter-spacing:-0.02em;
}
.flag-kpi-trend{font-size:0.66rem;color:#059669;margin-top:4px;font-weight:500}
.flag-kpi-trend.warn{color:#D97706}

.flag-chart{
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:10px;padding:16px;margin-bottom:12px;
}
.flag-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.flag-chart-title{color:#0F172A;font-weight:600;font-size:0.84rem}
.flag-chart-meta{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:#64748B}
.flag-chart-meta .up{color:#059669}

.flag-rows{
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:10px;
  overflow:hidden;
}
.flag-rows-head{
  display:grid;grid-template-columns:1.2fr 1fr 0.9fr 80px;gap:10px;
  padding:8px 12px;
  font-family:'JetBrains Mono',monospace;font-size:0.6rem;
  color:#64748B;text-transform:uppercase;letter-spacing:0.12em;
  border-bottom:1px solid #E2E8F0;
}
.flag-row{
  display:grid;grid-template-columns:1.2fr 1fr 0.9fr 80px;gap:10px;align-items:center;
  padding:9px 12px;font-size:0.76rem;
}
.flag-row + .flag-row{border-top:1px solid #E2E8F0}
.flag-row-id{font-family:'JetBrains Mono',monospace;color:#0F172A;font-weight:500}
.flag-row-vendor{color:#64748B}
.flag-row-amt{color:#0F172A;font-family:'JetBrains Mono',monospace}

/* =====================================================
   CAPABILITIES — 4 pillar cards (#FFFFFF background)
   ===================================================== */
#capabilities{padding:96px 0;background:#F8FAFC;position:relative}

.cap-head{
  display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;
  margin-bottom:48px;
}
@media(max-width:900px){.cap-head{grid-template-columns:1fr;gap:20px;align-items:start}}

.cap-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:18px;
}
@media(max-width:900px){.cap-grid{grid-template-columns:1fr}}

.cap-card{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:14px;
  padding:30px;
  position:relative;
  transition:all var(--t-med) var(--ease);
  overflow:hidden;
}
.cap-card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--cap-c, #EA580C);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease);
}
.cap-card:hover{
  border-color:#CBD5E1;
  background:#FFFFFF;
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(15,23,42,0.06);
}
.cap-card:hover::before{transform:scaleX(1)}

.cap-num{
  position:absolute;top:24px;right:24px;
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;
  color:#94A3B8;letter-spacing:0.15em;
}

.cap-icon{
  width:52px;height:52px;border-radius:12px;
  background:var(--cap-bg, #FFF1E6);
  color:var(--cap-c, #EA580C);
  display:grid;place-items:center;
  margin-bottom:18px;
  transition:transform var(--t-med) var(--ease);
}
.cap-card:hover .cap-icon{transform:scale(1.05) rotate(-4deg)}

.cap-tag{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--cap-c, #EA580C);
  margin-bottom:8px;
}

.cap-card h3{margin-bottom:10px}
.cap-card p{color:#475569;font-size:0.95rem;line-height:1.55;margin-bottom:18px}

.cap-list{list-style:none;display:grid;gap:7px;margin-bottom:18px}
.cap-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:0.88rem;color:#475569;
}
.cap-list li svg{flex-shrink:0;margin-top:3px;color:var(--cap-c, #EA580C)}

.cap-link{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;font-size:0.88rem;
  color:var(--cap-c, #EA580C);
}
.cap-link svg{transition:transform var(--t-med) var(--ease)}
.cap-card:hover .cap-link svg{transform:translateX(3px)}

/* Capabilities stat strip */
.cap-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:48px;
  padding:32px 0;
  border-top:1px solid #E2E8F0;
}
.cap-strip-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex:1;
  position:relative;
}
.cap-strip-item + .cap-strip-item::before{
  content:"";position:absolute;left:0;top:10%;height:80%;
  width:1px;background:#CBD5E1;
}
.cs-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:1.5rem;
  color:#EA580C;
  line-height:1;letter-spacing:-0.02em;
}
.cs-lbl{
  font-family:'JetBrains Mono',monospace;
  font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;
  color:#64748B;
}
@media(max-width:600px){
  .cap-strip{flex-wrap:wrap;gap:24px}
  .cap-strip-item + .cap-strip-item::before{display:none}
}

/* =====================================================
   PRODUCTS (#F8FAFC background)
   ===================================================== */
#products{padding:96px 0;background:#FFFFFF;border-top:1px solid #E2E8F0}
#products .sh::before{
  content:"";display:block;
  width:60px;height:2px;
  background:#EA580C;
  margin-bottom:16px;
  border-radius:2px;
}

.prod-grid{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:14px;
}
@media(max-width:1200px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.prod-grid{grid-template-columns:1fr}}

.prod-card{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:14px;
  padding:24px;
  display:flex;flex-direction:column;gap:14px;
  transition:all var(--t-med) var(--ease);
  position:relative;overflow:hidden;
  min-height:300px;
}
.prod-card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--prod-c, #EA580C);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease);
}
.prod-card:hover{
  border-color:#CBD5E1;background:#FFFFFF;
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(15,23,42,0.08);
}
.prod-card:hover::before{transform:scaleX(1)}

.prod-card.featured{
  background:#FFFFFF;
  border-color:#E2E8F0;
}
.prod-card.featured::after{
  content:"RISING FLAGSHIP";
  position:absolute;top:18px;right:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.58rem;font-weight:600;letter-spacing:0.14em;
  color:#EA580C;
  background:#FFF1E6;
  padding:3px 8px;border-radius:99px;
  border:1px solid #FED7AA;
}

.prod-icon{
  width:44px;height:44px;border-radius:11px;
  background:var(--prod-bg, #FFF1E6);
  color:var(--prod-c, #EA580C);
  display:grid;place-items:center;
}

.prod-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--prod-c, #EA580C);
  margin-bottom:-6px;
}

.prod-card h3{font-size:1.25rem;font-weight:700;color:#0F172A;letter-spacing:-0.02em}
.prod-card p{font-size:0.9rem;color:#475569;line-height:1.55;flex:1}

.prod-actions{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:14px;border-top:1px solid #E2E8F0;
}
.prod-why{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;font-size:0.82rem;
  color:#FFFFFF;
  background:var(--prod-c, #EA580C);
  padding:7px 14px;border-radius:99px;
  border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  transition:all var(--t-fast) var(--ease);
  box-shadow:0 4px 12px rgba(15,23,42,0.1);
}
.prod-why:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 8px 20px rgba(15,23,42,0.15)}
.prod-demo{
  font-size:0.84rem;font-weight:600;
  color:#64748B;
  display:inline-flex;align-items:center;gap:4px;
  transition:color var(--t-fast) var(--ease);
}
.prod-demo:hover{color:var(--prod-c, #EA580C)}

/* Custom build CTA card (5th cell in product grid) */
.prod-cta-card{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:14px;
  padding:24px 20px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.prod-cta-card::before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(135deg, rgba(234,88,12,0.06), rgba(79,107,255,0.04), transparent);
  border-radius:14px;z-index:-1;filter:blur(24px);opacity:0.5;
}
.prod-cta-card .pcb-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;
  letter-spacing:0.16em;text-transform:uppercase;
  color:#EA580C;margin-bottom:8px;
}
.prod-cta-card h3{font-size:1.15rem;color:#0F172A;margin-bottom:8px;letter-spacing:-0.02em}
.prod-cta-card p{font-size:0.88rem;color:#475569;line-height:1.55;margin-bottom:18px}

/* =====================================================
   SERVICES (#FFFFFF background)
   ===================================================== */
#services{padding:96px 0;background:#F8FAFC}
#services .sh::before{
  content:"";display:block;
  width:60px;height:2px;
  background:#EA580C;
  margin-bottom:16px;
  border-radius:2px;
}

.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}

.svc-card{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:14px;
  padding:22px;
  display:flex;align-items:flex-start;gap:14px;
  transition:all var(--t-med) var(--ease);
}
.svc-card:hover{border-color:#CBD5E1;box-shadow:0 18px 36px rgba(15,23,42,0.06);transform:translateY(-4px)}
.svc-ico{
  flex-shrink:0;width:38px;height:38px;border-radius:9px;
  background:#FFF1E6;
  color:#EA580C;
  display:grid;place-items:center;
}
.svc-card h4{font-size:0.95rem;font-weight:600;color:#0F172A;margin-bottom:3px}
.svc-card p{font-size:0.84rem;color:#64748B;line-height:1.5}

/* =====================================================
   WHY SAFZ (#F8FAFC background)
   ===================================================== */
#why{padding:96px 0;background:#FFFFFF;border-top:1px solid #E2E8F0;position:relative;overflow:hidden}
#why::before{
  content:"";position:absolute;top:30%;right:-10%;width:50%;height:50%;
  background:radial-gradient(circle, rgba(234,88,12,0.04), transparent 70%);
  filter:blur(80px);opacity:0.5;pointer-events:none;
}

.why-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;
}
@media(max-width:1000px){.why-grid{grid-template-columns:1fr;gap:48px}}

.why-pts{display:grid;gap:14px}
.why-pt{
  display:flex;gap:14px;padding:18px;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:var(--r-2);
  transition:all var(--t-med) var(--ease);
}
.why-pt:hover{border-color:#CBD5E1;box-shadow:0 8px 20px rgba(15,23,42,0.06);transform:translateY(-2px)}
.why-pt-ico{
  flex-shrink:0;width:38px;height:38px;border-radius:9px;
  background:#FFF1E6;color:#EA580C;
  display:grid;place-items:center;
}
.why-pt h4{font-size:0.98rem;font-weight:600;color:#0F172A;margin-bottom:3px}
.why-pt p{font-size:0.88rem;color:#64748B;line-height:1.5}

.why-stats{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:14px;
  padding:36px;
  position:relative;
  box-shadow:0 12px 28px rgba(15,23,42,0.06);
}
.why-stats::before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(135deg, rgba(234,88,12,0.06), transparent 60%);
  border-radius:14px;z-index:-1;filter:blur(20px);opacity:0.5;
}
.why-stats-h{
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#64748B;margin-bottom:24px;
}
.why-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.why-stat-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2rem, 4vw, 2.8rem);font-weight:700;
  color:#0F172A;line-height:1;letter-spacing:-0.025em;margin-bottom:6px;
}
.why-stat-num .unit{color:#EA580C;font-weight:600}
.why-stat-lbl{font-size:0.88rem;color:#64748B;line-height:1.4}
.why-stat-divider{grid-column:1/-1;height:1px;background:#E2E8F0;margin:0;border:none}

/* =====================================================
   PROCESS (#FFFFFF background)
   ===================================================== */
#process{padding:96px 0;background:#F8FAFC}

.proc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  position:relative;
}
.proc-grid::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg, transparent, #CBD5E1, transparent);
}
@media(max-width:900px){.proc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.proc-grid{grid-template-columns:1fr}}

.proc-step{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:14px;
  padding:24px;
  transition:all var(--t-med) var(--ease);
}
.proc-step:hover{border-color:#CBD5E1;box-shadow:0 18px 36px rgba(15,23,42,0.06);transform:translateY(-4px)}
.proc-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:2.4rem;
  color:#EA580C;
  line-height:1;margin-bottom:14px;letter-spacing:-0.04em;
}
.proc-step h4{font-size:1.05rem;font-weight:600;color:#0F172A;margin-bottom:6px}
.proc-step p{font-size:0.86rem;color:#64748B;line-height:1.55}

/* =====================================================
   PORTFOLIO (#F8FAFC background)
   ===================================================== */
#portfolio{padding:96px 0;background:#FFFFFF;border-top:1px solid #E2E8F0}

.port-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
@media(max-width:900px){.port-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.port-grid{grid-template-columns:1fr}}

.port-card{
  position:relative;
  height:280px;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:14px;
  overflow:hidden;cursor:pointer;
  transition:all var(--t-med) var(--ease);
}
.port-card:hover{transform:translateY(-4px);border-color:#CBD5E1;box-shadow:0 18px 36px rgba(15,23,42,0.08)}

.port-bg{
  position:absolute;inset:0;
  background:var(--port-grad, linear-gradient(135deg, #C2410C, #EA580C));
  opacity:0.85;
}
.port-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0,0,0,0.7) 100%);
}
.port-icon{
  position:absolute;top:18px;right:18px;
  width:42px;height:42px;border-radius:10px;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(10px);
  display:grid;place-items:center;color:#fff;z-index:2;
}
.port-meta{
  position:absolute;left:20px;right:20px;bottom:20px;color:#fff;z-index:2;
}
.port-tag{
  font-family:'JetBrains Mono',monospace;font-size:0.62rem;
  letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.85);margin-bottom:5px;
}
.port-meta h3{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.2rem;color:#fff;margin-bottom:3px;
  letter-spacing:-0.02em;
}
.port-meta p{font-size:0.82rem;color:rgba(255,255,255,0.8);line-height:1.4}

/* =====================================================
   CTA BANNER (#FFFFFF background)
   ===================================================== */
#cta{padding:96px 0;background:#F8FAFC;border-top:1px solid #E2E8F0}

.cta-banner{
  position:relative;
  max-width:960px;margin:0 auto;padding:64px 48px;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:var(--r-4);
  text-align:center;overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(135deg, rgba(234,88,12,0.06), rgba(79,107,255,0.04), transparent);
  border-radius:var(--r-4);z-index:-1;filter:blur(36px);opacity:0.6;
}
.cta-banner::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(234,88,12,0.06) 0%, transparent 60%);
  pointer-events:none;
}
.cta-banner > *{position:relative;z-index:1}
.cta-banner h2{margin:14px 0 14px;font-size:clamp(1.8rem, 3.2vw, 2.6rem)}
.cta-banner p{font-size:1.05rem;color:#475569;max-width:54ch;margin:0 auto 30px;line-height:1.65}
.cta-banner .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:680px){.cta-banner{padding:48px 24px}}

/* =====================================================
   CONTACT (#F8FAFC background)
   ===================================================== */
#contact{padding:96px 0;background:#FFFFFF}

.contact-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start;
}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}}

.contact-info-sub{
  font-size:1rem;color:#475569;line-height:1.65;
  margin:14px 0 32px;max-width:42ch;
}

.cp-grid{display:grid;gap:11px}
.cp-card{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:#FFFFFF;border:1px solid #E2E8F0;
  border-radius:var(--r-2);
  transition:all var(--t-med) var(--ease);
}
.cp-card:hover{border-color:#CBD5E1;transform:translateX(2px);box-shadow:0 8px 20px rgba(15,23,42,0.06)}
.cp-ico{
  flex-shrink:0;width:38px;height:38px;border-radius:9px;
  background:#FFF1E6;color:#EA580C;
  display:grid;place-items:center;
}
.cp-card h5{
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;
  letter-spacing:0.14em;text-transform:uppercase;
  color:#64748B;font-weight:500;margin-bottom:2px;
}
.cp-card p,.cp-card a{font-size:0.94rem;color:#0F172A;font-weight:500}
.cp-card a:hover{color:#EA580C}

.c-form{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:14px;
  padding:32px;
  position:relative;
  box-shadow:0 12px 28px rgba(15,23,42,0.06);
}
.c-form::before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(135deg, rgba(234,88,12,0.04), transparent 60%);
  border-radius:14px;z-index:-1;filter:blur(20px);opacity:0.5;
}
.c-form-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.4rem;font-weight:700;color:#0F172A;
  letter-spacing:-0.02em;margin-bottom:6px;
}
.c-form-sub{font-size:0.9rem;color:#64748B;margin-bottom:24px}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}
.fg{margin-bottom:12px;display:flex;flex-direction:column;gap:5px}
.fg label{
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;
  letter-spacing:0.14em;text-transform:uppercase;
  color:#64748B;font-weight:500;
}
.fg input,.fg select,.fg textarea{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:0.92rem;
  padding:11px 14px;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:var(--r-2);
  color:#0F172A;
  transition:all var(--t-fast) var(--ease);
}
.fg input::placeholder,.fg textarea::placeholder{color:#94A3B8}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  outline:none;border-color:#EA580C;
  background:#FFFFFF;
  box-shadow:0 0 0 3px rgba(234,88,12,0.15);
}
.fg select option{background:#FFFFFF;color:#0F172A}
.fg textarea{resize:vertical;min-height:110px}

.c-submit{
  width:100%;margin-top:6px;padding:14px;
  background:#EA580C;
  color:#FFFFFF;
  border-radius:var(--r-pill);
  font-weight:700;font-size:0.96rem;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:all var(--t-fast) var(--ease);
  box-shadow:0 8px 22px rgba(234,88,12,0.25);
}
.c-submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(234,88,12,0.35);background:#C2410C}

/* =====================================================
   FOOTER — intentionally DARK (page convention)
   ===================================================== */
footer{
  background:#0F172A;
  color:#94A3B8;
  padding:64px 0 28px;
  border-top:none;
}
footer::before{
  content:"";display:block;
  height:2px;
  background:linear-gradient(90deg, transparent, #EA580C, transparent);
}

.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

.footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.footer-brand .brand-mark{width:40px;height:40px}
.footer-brand .fb-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.1rem;font-weight:700;color:#FFFFFF;
}
.footer-brand .fb-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
  color:#64748B;margin-top:2px;
}
.footer-about{font-size:0.88rem;color:#94A3B8;line-height:1.6;max-width:42ch;margin-bottom:20px}

.socials{display:flex;gap:7px}
.soc-btn{
  width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  color:#CBD5E1;
  display:grid;place-items:center;
  font-size:0.84rem;font-weight:600;
  transition:all var(--t-fast) var(--ease);
}
.soc-btn:hover{background:#EA580C;border-color:#EA580C;color:#fff;transform:translateY(-2px)}

.footer-col h5{
  font-family:'JetBrains Mono',monospace;font-size:0.66rem;
  letter-spacing:0.16em;text-transform:uppercase;
  color:#FFFFFF;font-weight:600;margin-bottom:16px;
}
.footer-col ul{list-style:none;display:grid;gap:9px}
.footer-col ul li a{font-size:0.88rem;color:#CBD5E1}
.footer-col ul li a:hover{color:#FFFFFF}

.footer-bot{
  padding-top:28px;border-top:1px solid rgba(255,255,255,0.1);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  color:#64748B;font-size:0.82rem;
}
.footer-bot .made{font-family:'JetBrains Mono',monospace;font-size:0.74rem;letter-spacing:0.06em}
.footer-bot .made .heart{color:#EA580C}

/* =====================================================
   SCROLL REVEALS
   ===================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.8s var(--ease), transform 0.8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* =====================================================
   SALES SHEET OVERLAY — topbar recolored to light
   ===================================================== */
.ss-page{
  position:fixed;inset:0;z-index:300;background:#fff;
  display:none;flex-direction:column;
  opacity:0;transition:opacity 0.35s var(--ease);
}
.ss-page.open{display:flex;opacity:1}
.ss-topbar{
  flex-shrink:0;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  color:#0F172A;
  padding:11px 22px;
  display:grid;grid-template-columns:auto 1fr auto;
  gap:24px;align-items:center;
  border-bottom:1px solid #E2E8F0;
  position:sticky;top:0;z-index:5;
}
.ss-back{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px 6px 7px;border-radius:var(--r-pill);
  background:transparent;
  border:1.5px solid #CBD5E1;
  color:#0F172A;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:500;font-size:0.85rem;cursor:pointer;
  transition:all var(--t-fast) var(--ease);
}
.ss-back:hover{border-color:#EA580C;color:#EA580C;transform:translateX(-2px)}
.ss-back-arrow{
  width:24px;height:24px;border-radius:50%;
  background:#F8FAFC;
  display:grid;place-items:center;
  transition:background var(--t-fast) var(--ease);
}
.ss-back:hover .ss-back-arrow{background:#FFF1E6}
.ss-back-brand{display:flex;flex-direction:column;line-height:1.05}
.ss-back-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:0.92rem;letter-spacing:-0.015em;
  color:#0F172A;
}
.ss-back-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:0.55rem;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  color:#64748B;margin-top:1px;
}
.ss-topbar-title{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:0;
}
.ss-product-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;
  color:#EA580C;
}
.ss-product-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:1.05rem;letter-spacing:-0.015em;color:#0F172A;
}
.ss-demo-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:#EA580C;
  color:#FFFFFF;
  padding:8px 16px;border-radius:var(--r-pill);
  font-size:0.84rem;font-weight:600;text-decoration:none;
  white-space:nowrap;
  transition:all var(--t-fast) var(--ease);
  box-shadow:0 4px 14px rgba(234,88,12,0.25);
}
.ss-demo-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(234,88,12,0.35);background:#C2410C}
.ss-demo-cta svg{transition:transform var(--t-fast) var(--ease)}
.ss-demo-cta:hover svg{transform:translateX(3px)}
.ss-scroll{flex:1;overflow-y:auto;background:#fff;scroll-behavior:smooth}
.ss-scroll-inner{max-width:100%}
@media(max-width:768px){
  .ss-topbar{padding:9px 12px;gap:10px}
  .ss-back-brand{display:none}
  .ss-back{padding:6px;width:34px;height:34px;justify-content:center;border-radius:50%}
  .ss-back .ss-back-arrow{background:transparent;width:auto;height:auto}
  .ss-product-eyebrow{display:none}
  .ss-product-name{font-size:0.92rem}
  .ss-demo-cta{padding:7px 12px;font-size:0.76rem}
}

/* =====================================================
   HERO BACKGROUND — subtle radial accent
   ===================================================== */
#hero::after{
  content:"";position:absolute;
  bottom:-20%;left:-10%;
  width:60%;height:60%;
  background:radial-gradient(ellipse at center, rgba(234,88,12,0.04) 0%, transparent 60%);
  filter:blur(90px);opacity:0.6;
  pointer-events:none;z-index:0;
}

/* Subtle noise grain overlay on hero (very faint on light) */
#hero .hero-grid::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:200px 200px;
  pointer-events:none;z-index:0;
  opacity:0.3;
}

/* =====================================================
   FOCUS-VISIBLE — keyboard navigation indicators
   ===================================================== */
:focus-visible{
  outline:2px solid #EA580C;
  outline-offset:2px;
  border-radius:4px;
}
.btn:focus-visible{
  outline:2px solid #EA580C;
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(234,88,12,0.15);
}
.nav-cta:focus-visible{outline-color:#EA580C}
.ss-back:focus-visible,.ss-demo-cta:focus-visible{outline-color:#EA580C;outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
  border-color:#EA580C;
  box-shadow:0 0 0 3px rgba(234,88,12,0.15);
}

/* =====================================================
   PREFERS-REDUCED-MOTION
   ===================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  .hero-mock-card .mock-kpi-delta,
  .trust-flag:hover,.cap-card:hover,.svc-card:hover,
  .proc-step:hover,.port-card:hover,
  .prod-card:hover,.why-pt:hover,.cp-card:hover{
    transform:none;
  }
}

/* =====================================================
   BACKDROP-FILTER WEBKIT FALLBACK
   ===================================================== */
.btn-ghost{
  -webkit-backdrop-filter:blur(10px);
}

/* =====================================================
   MOBILE SAFARI 100dvh FIX
   ===================================================== */
@supports(height:100dvh){
  .mob-menu{height:100dvh}
}

/* =====================================================
   SECTION SOFT TRANSITIONS (removed dark gradients)
   ===================================================== */
#flagship::after{
  content:"";position:absolute;bottom:-1px;left:0;right:0;height:80px;
  background:linear-gradient(to bottom, transparent, #F8FAFC);
  pointer-events:none;z-index:1;
}
#capabilities::before{
  content:"";position:absolute;top:0;left:0;right:0;height:60px;
  background:linear-gradient(to bottom, #FFFFFF, #F8FAFC);
  pointer-events:none;
}