/* ============ TOKENS ============ */
:root{
  --paper:#F5F7FA; --mist:#EDF1F6; --ink:#0E1B2A; --navy:#0C2340;
  --brand:#E01E2C; --brand-dark:#B31522; --sap:#0A6ED1; --azure:#42B0FF;
  --slate-600:#47586E; --slate-500:#64748B; --slate-400:#94A3B8; --line:#E2E8F0;
  --radius:16px; --shadow:0 20px 60px rgba(14,27,42,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
/*html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:"IBM Plex Sans",sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}

img{max-width:100%;display:block}*/
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none}
::selection{background:rgba(224,30,44,.85);color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
/*.font-display{font-family:Syne,sans-serif}.font-head{font-family:Outfit,sans-serif}.font-mono{font-family:"JetBrains Mono",monospace}*/

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;transform:translateY(112%);animation:rise 1s cubic-bezier(.16,1,.3,1) forwards}
.line-mask:nth-child(1)>span{animation-delay:.25s}
.line-mask:nth-child(2)>span{animation-delay:.4s}
.line-mask:nth-child(3)>span{animation-delay:.55s}
@keyframes rise{to{transform:translateY(0)}}

/* ============ HEADER ============ */
header{position:fixed;inset:0 0 auto;z-index:50;transition:.4s}
header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 4px 24px rgba(14,27,42,.06)}
.hd-in{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hd-logo{display:flex;align-items:center;gap:14px}
.hd-logo img.ffx{height:42px;width:auto}
.hd-logo img.sapp{height:36px;width:auto}
nav.desk{display:flex;gap:30px}
nav.desk button{font-family:Outfit;font-size:14px;font-weight:500;color:var(--slate-600);transition:color .2s}
nav.desk button:hover{color:var(--brand)}
.hd-right{display:flex;align-items:center;gap:16px}
.hd-phone{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--slate-600)}
.hd-phone .dot{width:6px;height:6px;border-radius:50%;background:#10B981}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-family:Outfit;font-weight:600;transition:all .25s;cursor:pointer;text-align:center}
.btn-red{background:var(--brand);color:#fff;box-shadow:0 10px 30px rgba(224,30,44,.35)}
.btn-red:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn-red:active{transform:scale(.96)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-sm{padding:10px 24px;font-size:14px}
.btn-lg{padding:16px 32px;font-size:16px}
#menuBtn{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff}
#mobNav{display:none}
#mobNav.open{display:block;background:#fff;border-top:1px solid var(--line);box-shadow:var(--shadow);padding:8px 24px 28px}
#mobNav button{display:block;width:100%;text-align:left;padding:16px 0;border-bottom:1px solid #F1F5F9;font-weight:700;font-size:20px;color:var(--ink)}
#mobNav .btn{width:100%;margin-top:20px}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding:140px 0 80px}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(14,27,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,27,42,.05) 1px,transparent 1px);background-size:72px 72px}
.grid-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,transparent,var(--paper))}
.blob{position:absolute;border-radius:50%;filter:blur(130px)}
.b1{width:480px;height:480px;background:rgba(224,30,44,.1);top:-160px;left:25%}
.b2{width:400px;height:400px;background:rgba(10,110,209,.1);top:80px;right:0}
.hero-grid{position:relative;display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
.pill{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;box-shadow:0 2px 12px rgba(14,27,42,.05)}
.pill img{height:26px;width:auto}
.pill span{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--slate-500)}
h1 {
    font-family: Syne, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(30px, 5vw, 60px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.02em !important;
    margin-top: 32px !important;
}
h1 span {
    font-weight: inherit !important;
}
.outline-txt{-webkit-text-stroke:1.5px rgba(14,27,42,.85);color:transparent}
.sap-grad{background:linear-gradient(100deg,#0A6ED1,#42B0FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.red-grad{background:linear-gradient(100deg,#E01E2C,#F2603C);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:32px;font-size:17px;line-height:1.7;color:var(--slate-600);max-width:560px}
.hero-cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.hero-visual{position:relative}
.hero-frame{position:relative;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 30px 80px rgba(14,27,42,.25)}
.hero-frame img{height:540px;width:100%;object-fit:cover}
.hero-frame .ov{position:absolute;inset:0;background:linear-gradient(to top,var(--navy),rgba(12,35,64,.2),transparent)}
.hero-frame .cap{position:absolute;left:20px;right:20px;bottom:20px;display:flex;justify-content:space-between;align-items:flex-end}
.hero-frame .cap .lbl{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--azure)}
.hero-frame .cap .ttl{font-family:Outfit;font-weight:600;font-size:19px;color:#fff;margin-top:4px}
.live-dot{position:relative;width:12px;height:12px;flex:none}
.live-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:#34D399;animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#34D399}
@keyframes ping{75%,100%{transform:scale(2.4);opacity:0}}
.float-chip{position:absolute;top:-20px;right:24px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 20px;box-shadow:0 16px 40px rgba(14,27,42,.15);animation:rise .9s cubic-bezier(.16,1,.3,1) 1.3s both}
.float-chip .lbl{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--slate-400)}
.float-chip .ttl{font-family:Outfit;font-weight:600;font-size:14px;margin-top:4px}

/* ============ MARQUEE ============ */
.marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:20px 0}
.mq-track{display:flex;width:max-content;gap:40px;align-items:center;animation:mq 48s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:40px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--slate-500);white-space:nowrap}
.mq-item b{color:var(--brand);font-weight:400}
.fade-l,.fade-r{position:absolute;top:0;bottom:0;width:96px;z-index:2;pointer-events:none}
.fade-l{left:0;background:linear-gradient(to right,#fff,transparent)}
.fade-r{right:0;background:linear-gradient(to left,#fff,transparent)}

/* ============ STATS ============ */
.stats{padding:40px 0; background-color: #F7F8FB;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 24px;box-shadow:0 2px 12px rgba(14,27,42,.04)}
.stat .num{font-weight:800;font-size:44px;letter-spacing:-.02em}
.stat .num i{font-style:normal;color:var(--brand)}
.stat .lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate-500);margin-top:10px}

/* ============ TECH STRIP ============ */
.tech {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
.tech .grid-bg {
  opacity: .7;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
}
.tech .grid-bg::after { display: none; }

.tech-in {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 64px 20px;
  flex-wrap: wrap;
}

.tech img.b1logo {
  height: 56px;
  width: auto;
}

.tech p {
  color: #CBD5E1;
  font-size: 15px;
  line-height: 1.7;
  max-width: 460px;
  margin-top: 20px;
}

.tech-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 20px 24px;
  backdrop-filter: blur(6px);
}

.tech-card img {
  height: 54px;
  width: auto;
}

.tech-card .sep {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,.15);
}

.tech-card .txt {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--azure);
  line-height: 2;
}

/* ============ RESPONSIVE FIXES FOR MOBILE ============ */
@media(max-width: 768px) {
  .tech-in {
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 20px;
    gap: 24px;
  }

  .tech p {
    max-width: 100%;
    font-size: 14px;
    margin-top: 14px;
  }

  .tech img.b1logo {
    height: 44px;
  }

  .tech-card {
    width: 100%;
    justify-content: flex-start;
    padding: 16px 20px;
    gap: 16px;
  }

  .tech-card img {
    height: 42px;
  }

  .tech-card .sep {
    height: 38px;
  }
}

@media(max-width: 480px) {
  .tech-card {
    flex-direction: row;
    align-items: center;
  }
}

/* ============ SECTIONS ============ */
section.blk{padding:96px 0; background-color: #EBF0F4;}
.sec-label{/* */font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--brand)}
h2{/* font-family:Syne,sans-serif;*/font-weight:700;font-size:clamp(24px,3.4vw,38px);letter-spacing:-.02em;margin-top:18px;line-height:1.15}
.sec-head-split{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.sec-head-split p{max-width:440px;color:var(--slate-600);font-size:16px;line-height:1.7}

/* ============ MANIFESTO ============ */
#manifesto{background:#fff}
.man-top{display:grid;grid-template-columns:8fr 4fr;gap:40px;align-items:end}
.man-img{position:relative;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:var(--shadow)}
.man-img img{height:220px;width:100%;object-fit:cover}
.man-img .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,35,64,.9),transparent 60%)}
.man-img .lbl{position:absolute;left:16px;bottom:16px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--azure)}
.chapters{margin-top:64px;border-top:1px solid var(--line)}
.chapter{display:grid;grid-template-columns:3fr 4fr 5fr;gap:24px;padding:52px 0;border-bottom:1px solid var(--line);align-items:start;transition:padding .3s}
.chapter:nth-child(even){padding-left:80px}
.chapter .num{font-weight:800;font-size:72px;line-height:1;-webkit-text-stroke:1px rgba(14,27,42,.3);color:transparent;transition:.4s}
.chapter:hover .num{-webkit-text-stroke-color:rgba(224,30,44,.9)}
.chapter h3{font-family:Outfit;font-weight:600;font-size:22px}
.chapter p{color:var(--slate-600);line-height:1.7;font-size:15.5px}

/* ============ MODULES ============ */
#modules{background:var(--mist)}
.mod-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 2px 12px rgba(14,27,42,.04);transition:all .3s}
.mod:hover{transform:translateY(-6px);border-color:rgba(224,30,44,.4);box-shadow:0 18px 44px rgba(224,30,44,.12)}
.mod.wide{grid-column:span 2}
.mod .ico{width:48px;height:48px;border-radius:12px;background:rgba(10,110,209,.1);display:flex;align-items:center;justify-content:center;color:var(--sap)}
.mod .tag{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--slate-400)}
.mod h3{font-family:Outfit;font-weight:600;font-size:19px;margin-top:24px}
.mod p{color:var(--slate-600);font-size:14.5px;line-height:1.65;margin-top:12px}



/* ============ INDUSTRIES ============ */
#industries{background:#fff}
.ind-grid{margin-top:56px;display:grid;grid-template-columns:7fr 5fr;gap:40px}
.ind-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:22px 0;border-bottom:1px solid var(--line);color:var(--slate-500);transition:all .3s;text-align:left}
.ind-row .l{display:flex;align-items:center;gap:20px}
.ind-row .idx{font-size:12px;color:var(--slate-400)}
.ind-row .nm{font-family:Outfit;font-weight:600;font-size:22px}
.ind-row .thumb{display:none}
.ind-row:hover,.ind-row.active{color:var(--ink);padding-left:16px}
.ind-row .arr{opacity:0;transition:.3s;color:var(--brand);font-size:20px}
.ind-row.active .arr{opacity:1}
.ind-preview{position:sticky;top:110px}
.ind-preview .frame{position:relative;aspect-ratio:4/5;border:1px solid var(--line);border-radius:4px;overflow:hidden;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);box-shadow:var(--shadow)}
.ind-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.ind-preview img.on{opacity:1}
.ind-preview .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,35,64,.95),transparent 45%)}
.ind-preview .cap{position:absolute;left:24px;bottom:24px;color:#fff}
.ind-preview .cap .lbl{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--azure)}
.ind-preview .cap .nm{font-weight:700;font-size:24px;margin-top:8px}

/* ============ CASE STUDIES ============ */
#results{background:var(--paper)}
.cs-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cs{display:block}
.cs .frame{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);background:#fff;box-shadow:0 2px 12px rgba(14,27,42,.05);transition:all .4s}
.cs:hover .frame{border-color:rgba(224,30,44,.4);box-shadow:0 18px 44px rgba(224,30,44,.14)}
.cs img{aspect-ratio:16/9;width:100%;object-fit:cover;transition:transform .7s}
.cs:hover img{transform:scale(1.05)}
.cs .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,35,64,.8),transparent 50%)}
.cs .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:60px;height:60px;border-radius:50%;background:rgba(224,30,44,.95);display:flex;align-items:center;justify-content:center;opacity:.9;transition:.4s}
.cs:hover .play{transform:translate(-50%,-50%) scale(1.1);opacity:1}
.cs .play svg{width:22px;height:22px;fill:#fff;margin-left:4px}
.cs .tagchip{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.92);border-radius:999px;padding:4px 12px;font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.cs h3{font-family:Outfit;font-weight:600;font-size:19px;margin-top:18px}
.cs .sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-500);margin-top:6px}

/* ============ ROI ============ */
#roi{background:#fff}
.roi-grid{margin-top:56px;display:grid;grid-template-columns:7fr 5fr;gap:32px}
.roi-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:36px}
.roi-row .top{display:flex;justify-content:space-between;align-items:center}
.roi-row label{font-family:Outfit;font-weight:500;font-size:16px}
.roi-val{font-size:14px;background:rgba(224,30,44,.1);border:1px solid rgba(224,30,44,.25);border-radius:999px;padding:4px 16px;color:var(--brand)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;margin-top:20px;background:linear-gradient(to right,var(--brand) var(--fill,50%),rgba(14,27,42,.12) var(--fill,50%));outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 2px 10px rgba(224,30,44,.35)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 2px 10px rgba(224,30,44,.35)}
.rng-lbls{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--slate-400);margin-top:8px}
.roi-sys{margin-top:40px}
.roi-sys .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.sys-opt{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px;font-size:14px;font-weight:500;color:var(--slate-600);transition:all .25s;text-align:left}
.sys-opt:hover{border-color:var(--ink);color:var(--ink)}
.sys-opt.sel{border-color:var(--brand);background:rgba(224,30,44,.1);color:var(--ink);box-shadow:0 8px 24px rgba(224,30,44,.15)}
.roi-out{position:relative;background:var(--navy);border-radius:4px;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);padding:40px;color:#fff}
.roi-out .lbl{/**/font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--azure)}
.roi-out .big{/**/font-weight:800;font-size:44px;margin-top:32px}
.roi-out .big small{font-family:Outfit;font-size:16px;font-weight:500;color:var(--slate-400);margin-left:8px}
.roi-out .cap{color:#CBD5E1;font-size:14px;margin-top:8px}
.roi-out .two{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding-top:32px}
.roi-out .two .v{font-weight:700;font-size:26px}
.roi-out .two .v.az{color:var(--azure)}.roi-out .two .v.gd{color:#F59E0B}
.roi-out .two .d{font-size:12px;color:var(--slate-400);margin-top:4px;line-height:1.6}
.roi-out .disc{border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding-top:24px;font-size:10px;line-height:1.8;color:var(--slate-400)}

/* ============ PROCESS ============ */
#process{background:var(--mist)}
.proc-grid{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 2px 12px rgba(14,27,42,.04);transition:all .3s;position:relative}
.step:hover{transform:translateY(-6px);border-color:rgba(224,30,44,.4)}
.step .n{font-size:12px;color:var(--brand)}
.step h3{font-family:Outfit;font-weight:600;font-size:17px;margin-top:16px}
.step p{color:var(--slate-600);font-size:13.5px;line-height:1.6;margin-top:10px}

/* ============ LEAD FORM ============ */
#demo{background:#fff}
.demo-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px}
.demo-left .lbl{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--brand)}
.demo-left h2{margin-top:18px}
.demo-left>p{color:var(--slate-600);line-height:1.7;margin-top:24px;font-size:16px}
.ticks{list-style:none;margin-top:32px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--slate-600);font-size:15.5px;padding:6px 0}
.ticks svg{width:18px;height:18px;color:#10B981;flex:none;margin-top:2px}
.contact-rows{margin-top:40px;border-top:1px solid var(--line);padding-top:32px;display:grid;gap:16px}
.c-row{display:flex;align-items:center;gap:16px;font-family:Outfit;font-weight:600;font-size:18px;transition:color .2s}
.c-row:hover{color:var(--brand)}
.c-row .ic{width:44px;height:44px;border-radius:50%;background:var(--mist);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.c-row .ic svg{width:18px;height:18px}
.addr{display:flex;gap:16px;font-size:14px;color:var(--slate-600);line-height:1.7}
.addr strong{color:var(--ink)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:var(--shadow)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f-field label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-500);margin-bottom:8px}
.f-field input,.f-field select,.f-field textarea{width:100%;border:1px solid #CBD5E1;border-radius:12px;background:#fff;padding:14px;font-family:"IBM Plex Sans";font-size:14px;color:var(--ink);outline:none;transition:all .2s}
.f-field textarea{resize:none}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(224,30,44,.15)}
.f-field .err{display:none;color:var(--brand);font-size:12px;margin-top:6px}
.f-field.bad input,.f-field.bad select{border-color:var(--brand)}
.f-field.bad .err{display:block}
.span2{grid-column:span 2}
/* slot picker */
.slot-box{margin-top:28px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px}
.slot-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.slot-head .t{display:flex;align-items:center;gap:8px;font-family:Outfit;font-weight:600;font-size:16px}
.slot-head .t svg{width:18px;height:18px;color:var(--brand)}
.slot-head .m{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-400)}
.dates{display:flex;gap:8px;overflow-x:auto;padding:16px 2px 8px;scrollbar-width:thin}
.dchip{flex:none;min-width:66px;display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid #CBD5E1;background:#fff;border-radius:12px;padding:10px 12px;transition:all .2s;color:var(--slate-600)}
.dchip small,.dchip em{font-style:normal;font-size:9px;letter-spacing:.15em;text-transform:uppercase;opacity:.8}
.dchip b{font-family:Outfit;font-size:18px}
.dchip:hover{border-color:var(--ink)}
.dchip.sel{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(224,30,44,.3)}
.times{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.tchip{border:1px solid #CBD5E1;background:#fff;border-radius:10px;padding:10px 4px;font-size:12px;color:var(--slate-600);transition:all .2s}
.tchip:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.tchip.sel{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(224,30,44,.3)}
.tchip:disabled{border-color:var(--line);background:#F1F5F9;color:var(--slate-400);text-decoration:line-through;cursor:not-allowed}
.slot-msg{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--slate-400);margin-top:10px;display:none}
.slot-err{display:none;color:var(--brand);font-size:12px;margin-top:10px}
.form-card .btn-red{width:100%;margin-top:28px;padding:17px;font-size:16px}
.form-note{text-align:center;font-size:10px;color:var(--slate-400);margin-top:14px}
/* success */
.success{display:none;min-height:420px;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.35);border-radius:20px;padding:40px}
.success .big-ic{width:64px;height:64px;border-radius:50%;background:rgba(16,185,129,.15);display:flex;align-items:center;justify-content:center;color:#059669}
.success .big-ic svg{width:30px;height:30px}
.success h3{font-weight:700;font-size:24px;margin-top:22px}
.success p{color:var(--slate-600);margin-top:12px;max-width:380px;line-height:1.7;font-size:14.5px}
.success .btn-red{margin-top:28px;width:auto;padding:12px 28px;font-size:14px}

/* ============ FOOTER ============ */
footer{background:var(--mist);border-top:1px solid var(--line);padding:64px 0 32px}
.ft-grid{display:grid;grid-template-columns:5fr 2fr 5fr;gap:48px}
.ft-logos{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ft-logos img.f{height:44px}.ft-logos img.s{height:48px}
.ft-brand p{color:var(--slate-600);font-size:14px;line-height:1.7;margin-top:22px;max-width:380px}
.ft-h{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--slate-500)}
.ft-links{list-style:none;margin-top:20px;display:grid;gap:12px;padding: 0;}
.ft-links button{color:var(--slate-600);font-size:14px;transition:color .2s}
.ft-links button:hover{color:var(--brand)}
.ft-contact{margin-top:20px;font-size:14px;color:var(--slate-600);display:grid;gap:8px}
.ft-contact a:hover{color:var(--brand)}
.ft-addrs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;font-size:13.5px;color:var(--slate-600);line-height:1.7}
.ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:56px;padding-top:28px}
.ft-bot p{font-size:12px;color:var(--slate-500)}
.ft-bot .tm{font-size:11px;color:var(--slate-400);max-width:520px;line-height:1.6}

/* whatsapp float */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;background:#1FA855;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(31,168,85,.4);transition:transform .3s}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:28px;height:28px;fill:#fff}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#1FA855;animation:pring 2.2s cubic-bezier(.16,1,.3,1) infinite}
@keyframes pring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  nav.desk,.hd-phone,.hd-right .sapp{display:none}
  #menuBtn{display:flex;align-items:center;justify-content:center}
  .hero-grid,.man-top,.ind-grid,.roi-grid,.demo-grid{grid-template-columns:1fr}
  .mod-grid{grid-template-columns:1fr 1fr}
  .mod.wide{grid-column:span 2}
  .stats-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:1fr 1fr}
  .cs-grid{grid-template-columns:1fr 1fr}
  .ind-preview{display:none}
  .ind-row .thumb{display:block;width:64px;height:44px;object-fit:cover;border-radius:4px}
  .chapter{grid-template-columns:1fr}
  .chapter .num{font-size:56px}
  .chapter:nth-child(even){padding-left:0}
  .ft-grid{grid-template-columns:1fr}
  .hero-frame img{height:380px}
}
@media(max-width:640px){
  .hd-logo img.sapp{display:none}
  .hd-right .btn-red{display:none}
  .mod-grid,.proc-grid,.cs-grid{grid-template-columns:1fr}
  .mod.wide{grid-column:span 1}
  .f-grid{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .times{grid-template-columns:repeat(3,1fr)}
  .roi-sys .grid3{grid-template-columns:1fr}
  .roi-out .two{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat .num{font-size:34px}
  section.blk{padding:64px 0}
  .hero{padding-top:110px}
  .float-chip{right:12px;padding:10px 14px;max-width:200px;text-align:right}
  .float-chip .ttl{font-size:11px}
  .cs-grid{grid-template-columns:1fr}
}

/* Base Icon Style (Default: SAP Blue) */
.mod-grid .mod .ico {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;                /* 48px */
  height: 3rem !important;               /* 48px */
  border-radius: 0.75rem !important;      /* 12px */
  background-color: rgba(0, 143, 211, 0.1) !important; /* Blue Tint */
  color: #008FD3 !important;             /* SAP Blue Icon */
  transition: all 0.3s ease !important;
}

/* Ensure SVG inherits text color for strokes */
.mod-grid .mod .ico svg {
  width: 1.25rem !important;             /* 20px SVG */
  height: 1.25rem !important;
  stroke: currentColor !important;
  transition: stroke 0.3s ease !important;
}

/* Mouse Hover State: Turn Icon & Background RED */
.mod-grid .mod:hover .ico {
  transform: scale(1.1) !important;      /* Slight zoom */
  background-color: rgba(224, 30, 44, 0.1) !important; /* Light Red Tint */
  color: #E01E2C !important;            /* Brand Red Icon */
}

.mod-grid .mod:hover .ico svg {
  stroke: #E01E2C !important;            /* Forces SVG lines to turn Red */
}