:root{
  --bg:#031D3A;
  --bg-2:#042342;
  --bg-3:#063159;
  --text:#FFFFFF;
  --muted:#A0B7D0;
  --line:#0A2B4A;
  --accent:#926F34; /* Optima gold */
  --accent-2:#DFBD69; /* lighter gold */
  --success:#22c55e;
  --danger:#ef4444;
  --radius:14px;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-heading:"Beautifully Delicious", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}

.container{width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(16px, 5vw, 32px)}

/* Typography */
/* Place the licensed Beautifully Delicious webfont at assets/fonts/BeautifullyDelicious.woff2 */
@font-face{
  font-family:"Beautifully Delicious";
  src:url("/assets/fonts/BeautifullyDelicious.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
h1,h2,h3,.display,.section-head h2,.cta-title{
  font-family:var(--font-heading);
  font-weight:400;
}

/* Orbs */
.bg-orb{position:fixed; filter:blur(70px); opacity:.55; pointer-events:none; z-index:0}
.orb-1{width:520px; height:520px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(146,111,52,.6), rgba(223,189,105,.15) 40%, transparent 65%); top:-160px; right:-80px}
.orb-2{width:420px; height:420px; border-radius:50%; background:radial-gradient(circle at 60% 60%, rgba(146,111,52,.5), rgba(223,189,105,.1) 45%, transparent 70%); bottom:-120px; left:-80px}

/* Header */
.site-header{position:relative; z-index:60; padding-top:12px}
.floating-nav{display:flex; align-items:center; justify-content:center; gap:18px; height:76px; padding:0 18px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:saturate(140%) blur(10px); position:sticky; top:12px}
.topbar{max-width:520px; margin:0 auto; position:relative; overflow:hidden; animation:topbar-in .8s cubic-bezier(.22,1,.36,1)}
.topbar::before{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg, transparent 0%, rgba(146,111,52,.35) 40%, rgba(223,189,105,.45) 60%, transparent 100%); mix-blend-mode:screen; opacity:0; transform:translateX(-40%)}
.topbar::after{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(120deg, rgba(146,111,52,.55), rgba(223,189,105,.35), rgba(146,111,52,.55)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.35}
.topbar.sheen::before{opacity:.45; transition:opacity .6s ease}
@keyframes topbar-in{from{transform:translateY(-10px) scale(.98); opacity:.0} to{transform:none; opacity:1}}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.5px}
.brand .logo{height:115px; width:auto}
.brand-foot .logo{height:115px}





.site-nav{position:fixed; top:0; right:-100%; width:min(320px, 90vw); height:100vh; backdrop-filter:blur(18px); background:rgba(3,29,58,.9); border-left:1px solid rgba(255,255,255,.08); box-shadow:-20px 0 60px rgba(0,0,0,.55); transition:right .35s cubic-bezier(.22,1,.36,1), opacity .35s ease; z-index:80; display:flex; align-items:center; justify-content:center; pointer-events:none; visibility:hidden; opacity:0}
.site-nav.open{right:0; pointer-events:auto; visibility:visible; opacity:1}
.site-nav ul{list-style:none; padding:0; margin:0; width:100%; display:grid; gap:18px; text-align:center}
.site-nav li{margin:0}
.site-nav a{display:inline-flex; justify-content:center; align-items:center; gap:8px; font-weight:600; color:#F3F8FF; text-decoration:none; padding:12px 0; transition:color .2s ease}
.site-nav a:hover{color:var(--accent-2)}
.site-nav::before{content:""; position:absolute; inset:12% 10%; border-radius:26px; border:1px solid rgba(255,255,255,.08); opacity:.6}
.site-nav::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(146,111,52,.22), transparent 60%); opacity:.7}
.nav-open{overflow:hidden}
html{scroll-behavior:smooth}
.floating-nav .btn{height:36px; padding:0 14px}
.scrolled .floating-nav{transform:translateY(-2px) scale(.98); box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:999px; text-decoration:none; font-weight:600; border:1px solid transparent; transition:all .25s cubic-bezier(.22,1,.36,1)}
.btn-lg{height:56px; padding:0 32px; font-size:16px}
.btn-xl{height:56px; padding:0 24px; font-size:16px}
.btn-solid{color:#ffffff; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 10px 30px rgba(146,111,52,.2)}
.btn-solid:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(146,111,52,.28)}
.btn-solid:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn-outline{border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); color:var(--text)}
.btn-outline:hover{background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border-color:rgba(255,255,255,.32); color:var(--text)}
.btn-pulse{animation:cta-pulse 2.8s ease-in-out infinite; position:relative}
 .btn-pulse::after{content:""; position:absolute; inset:-4px; border-radius:inherit; border:1px solid rgba(255,255,255,.18); opacity:0; transition:opacity .3s ease}
 .btn-pulse:hover::after{opacity:.6}
@keyframes cta-pulse{0%{box-shadow:0 0 0 0 rgba(146,111,52,.3)}70%{box-shadow:0 0 0 16px rgba(146,111,52,0)}100%{box-shadow:0 0 0 0 rgba(146,111,52,0)}}

/* Page progress bar */
#progressBar{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); width:0; z-index:70}
.btn-ghost{border-color:var(--line); color:var(--text); background:transparent}
.btn-ghost:hover{border-color:var(--accent); color:var(--text)}
.text-link{display:inline-flex; align-items:center; gap:8px; color:#F3F8FF; text-decoration:none; font-weight:600}
.text-link::after{content:"→"; transition:transform .2s ease}
.text-link:hover::after{transform:translateX(4px)}

/* CTA Center - pour centrer les boutons avec espacement */
.cta-center{display:flex; justify-content:center; margin-top:40px}

/* Hero */
.hero{padding:clamp(48px, 8vw, 80px) 0 0; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url('Optima H.jpg') center/cover no-repeat; opacity:0.35; z-index:-1; filter:brightness(1) saturate(1.15)}
.hero::after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(3,29,58,0.6) 0%, rgba(3,29,58,0.7) 60%, rgba(3,29,58,0.75) 100%); z-index:-1}
.hero-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:center; justify-items:center}
.hero-copy{text-align:center; max-width:760px; margin:0 auto}
.eyebrow{color:var(--accent-2); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:12px; margin:0 0 12px}
.kickers{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; justify-content:center}
@media (min-width: 981px){
  .kickers{margin-bottom:20px; gap:16px}
}
.badge{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); color:#F3F8FF; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.badge-ghost{background:transparent}
.display{font-size:clamp(36px, 5vw, 56px); line-height:1.05; margin:0 0 12px; letter-spacing:-.02em}
.chip{display:inline-flex; align-items:center; padding:6px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.02)}
.chip-glow{position:relative}
.chip-glow::after{content:""; position:absolute; inset:-1px; border-radius:inherit; background:radial-gradient(160% 120% at 0% 0%, rgba(146,111,52,.5), transparent 40%), radial-gradient(140% 120% at 100% 100%, rgba(223,189,105,.45), transparent 50%); filter:blur(12px); opacity:.5; z-index:-1}
.hero h1{font-size:clamp(24px, 4.5vw, 36px); line-height:1.25; margin:0 0 12px; max-width:900px}
.subhead{color:#D6E6FF; font-size:clamp(14px, 2.2vw, 16px); margin:0 0 16px}
.hero-note{margin:0 0 24px; font-size:16px; color:#e0d9cc; max-width:640px; text-align:center}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; row-gap:16px; justify-content:center}
.partners{margin-top:16px}
.hero-logos{justify-content:flex-start}

.hero h1,.hero .subhead,.hero-note,.hero-ctas{opacity:0; transform:translateY(18px)}
.hero.in-view h1,.hero.in-view .subhead,.hero.in-view .hero-note,.hero.in-view .hero-ctas{animation:fade-slide 1s ease forwards}
.hero.in-view .subhead{animation-delay:.15s}
.hero.in-view .hero-note{animation-delay:.3s}
.hero.in-view .hero-ctas{animation-delay:.45s}

/* Hero visual dashboard */
.dashboard{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px}
.card{background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); border:1px solid var(--line); border-radius:var(--radius); padding:16px; position:relative}
.card span{color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em}
.hero-dashboard .card{--float-delay:0s; animation:float-card 12s ease-in-out infinite alternate; animation-delay:var(--float-delay)}
.hero-dashboard .card:nth-child(2){--float-delay:1.5s}
.hero-dashboard .card:nth-child(3){--float-delay:3s}
.hero-dashboard .card:nth-child(4){--float-delay:4.5s}
.kpi-card .bars{display:flex; gap:10px; align-items:flex-end; height:98px; margin-top:10px}
.kpi-card .bars i{display:block; width:16px; height:calc(var(--h) + 10px); background:linear-gradient(180deg, rgba(146,111,52,.85), rgba(223,189,105,.55)); border-radius:6px}
.kpi-value{font-size:28px; font-weight:800; color:var(--accent-2); margin:8px 0 4px}
.kpi-target{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.dashboard-note{font-size:12px; color:var(--muted); text-align:center; margin-top:16px; font-style:italic}
.donut{display:grid; place-items:center}
.donut svg{width:100px; height:100px}
.donut-track{fill:transparent; stroke:#0C355D; stroke-width:7}
.donut-segment{fill:transparent; stroke:url(#gold); stroke-width:7; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%}
.donut-label{text-align:center; font-size:12px}
.card.list ul{margin:10px 0 0; padding-left:18px}

.score-card{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.score-meter{position:relative; width:96px; height:96px; display:grid; place-items:center}
.score-meter svg{width:96px; height:96px; transform:rotate(-90deg)}
.score-track{fill:transparent; stroke:#26282d; stroke-width:4.5}
.score-progress{fill:transparent; stroke:var(--accent); stroke-width:4.5; stroke-linecap:round; stroke-dasharray:226; stroke-dashoffset:45; transition:stroke-dashoffset 1.2s ease}
.score-value{position:absolute; font-weight:800; font-size:18px; letter-spacing:-.02em; color:#F3F8FF}
.score-caption{margin:0; font-size:13px; color:#D6E6FF}

/* Hero dashboard tilt + curve */
.hero-dashboard{transform:perspective(2000px) rotateX(var(--rx,22deg)) rotateZ(var(--rz,-12deg)) translateY(var(--ty,140px)) scale(var(--sc,.9)) rotateY(var(--ry,0deg)); transform-origin:50% 20%; transition:transform .9s cubic-bezier(.22,1,.36,1)} 


/* Appear animations */
[data-anim]{--stagger: .06s}
[data-anim] [data-anim-item]{opacity:0; transform:translateY(16px); filter:blur(4px)}
[data-anim].in [data-anim-item]{opacity:1; transform:none; filter:none; transition:opacity .6s ease, transform .6s ease, filter .6s ease}
[data-anim].in [data-anim-item]:nth-child(1){transition-delay:calc(var(--stagger)*1)}
[data-anim].in [data-anim-item]:nth-child(2){transition-delay:calc(var(--stagger)*2)}
[data-anim].in [data-anim-item]:nth-child(3){transition-delay:calc(var(--stagger)*3)}
[data-anim].in [data-anim-item]:nth-child(4){transition-delay:calc(var(--stagger)*4)}

/* Hero visual layer order */
.hero-visual{position:relative; z-index:2}

/* Dashboard style tuned for gold accent & dark theme */
.hero .card{background:linear-gradient(180deg, rgba(3,29,58,.9), rgba(3,29,58,.82)); border:1px solid rgba(255,255,255,.06)}
.hero .card span, .hero .card li{color:#D6E6FF}
.hero .kpi-card .bars i{background:linear-gradient(180deg, rgba(146,111,52,.95), rgba(223,189,105,.65))}
.hero .donut-track{stroke:#0C355D}
.hero .donut-label{color:#F3F8FF}

/* Sparkles around Smart IA chip */
.chip-glow::before, .chip-glow::after{content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.2) 60%, transparent 70%); filter:blur(.3px)}
.chip-glow::before{top:-8px; left:-10px; animation:spark 3.2s ease-in-out infinite}
.chip-glow::after{bottom:-8px; right:-10px; animation:spark 4s ease-in-out infinite .6s}
@keyframes spark{0%,100%{transform:translate(0,0) scale(.8); opacity:.5}50%{transform:translate(6px,-4px) scale(1.2); opacity:1}}

@keyframes float-card{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.01)}100%{transform:translateY(5px) scale(.995)}}
@keyframes fade-slide{0%{opacity:0; transform:translateY(18px)}100%{opacity:1; transform:translateY(0)}}
@keyframes chat-pop{0%{opacity:0; transform:translateY(12px) scale(.95)}100%{opacity:1; transform:none}}

/* Trust */
.trust{padding:24px 0 12px}
.trust-kicker{color:var(--muted); text-align:center; margin-bottom:12px}
.logo-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.logo-pill{border:1px dashed var(--line); border-radius:999px; padding:8px 14px; color:#C7DAF2}

/* Pain */
.pain{padding:64px 0}
@media (min-width: 981px){
  .pain{padding:120px 0 88px 0}
}
.section-head{text-align:center; margin-bottom:26px}
.pain-grid2{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pain-card{position:relative; border:1px solid var(--line); background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); border-radius:18px; padding:22px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column; gap:10px}
.pain-card:hover{transform:translateY(-2px); box-shadow:0 18px 60px rgba(146,111,52,.18)}
.pain-symbol{width:72px; height:72px; border-radius:20px; background:linear-gradient(180deg, rgba(223,189,105,.16), rgba(223,189,105,.04)); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; margin-bottom:12px; position:relative; overflow:hidden}
.pain-symbol::before{content:''; position:absolute; inset:4px; border-radius:inherit; background:radial-gradient(circle at 20% 15%, rgba(223,189,105,.28), transparent 65%); opacity:.65}
.pain-symbol svg{position:relative; z-index:1; width:40px; height:40px; stroke:var(--accent-2); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.pain-symbol svg .fill{fill:rgba(223,189,105,.18)}
.pain-card .copy{flex:1; display:flex; flex-direction:column; gap:8px}
.pain-card .copy h5{margin:0; font-size:18px}
.pain-card .copy p{margin:0; color:#D6E6FF}





/* Agitation */
.agitate{padding:28px 0}
.agitate-wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border:1px solid rgba(255,255,255,.06); border-radius:18px; background:radial-gradient(70% 70% at 50% -20%, rgba(146,111,52,.18), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg-3)); padding:16px}
.stat{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); gap:8px}
.stat-val{font-size:34px; font-weight:900; letter-spacing:-.02em; background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.stat-label{color:#D6E6FF; text-align:center; font-size:14px; line-height:1.4}
.stat-source{color:rgba(160,183,208,.6); text-align:center; font-size:10px; font-style:italic; line-height:1.3; margin-top:4px}
.agitate-note{grid-column:1/-1; text-align:center; color:#F3F8FF; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px; font-size:15px; line-height:1.5}

/* Solution intro */
.solution{padding:32px 0}
.solution .section-head{text-align:center; margin-bottom:20px}
.sol-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.sol-card{position:relative; display:flex; flex-direction:column; align-items:stretch; gap:18px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); border-radius:22px; padding:28px 28px 32px; overflow:hidden}
.sol-card::after{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:12px 12px; opacity:.08; pointer-events:none}
.sol-card h4{margin:0; font-size:20px}
.sol-card p{margin:0; color:#D6E6FF; line-height:1.6}
.sol-card .muted{color:#D6E6FF}
.sol-card > *{position:relative; z-index:2}
.sol-card::before{content:""; position:absolute; inset:2px; border-radius:inherit; background:radial-gradient(circle at top right, rgba(146,111,52,.12), transparent 65%); opacity:0; transition:opacity .4s ease}
.sol-card:hover::before{opacity:.5}
.sol-list{margin:0; padding-left:18px}
.sol-list li{margin:4px 0}

/* Flow diagram */
.sol-flow{min-height:0}
.sol-flow .flow-diagram{position:relative; width:100%; max-width:420px; height:150px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.04); margin:18px auto 0; padding:18px}
.flow-diagram .hub{position:absolute; left:50%; top:14px; width:28px; height:28px; transform:translateX(-50%); border-radius:50%; background:linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow:0 10px 30px rgba(146,111,52,.35)}
.flow-diagram .node{position:absolute; bottom:12px; width:20px; height:20px; border-radius:50%; background:#052447; border:1px solid rgba(255,255,255,.06)}
.flow-diagram .n1{left:22%}
.flow-diagram .n2{left:50%; transform:translateX(-50%)}
.flow-diagram .n3{right:22%}
.flow-diagram .line{position:absolute; height:2px; background:linear-gradient(90deg, rgba(146,111,52,.5), rgba(223,189,105,.6)); top:calc(14px + 28px/2 + 8px);}
.flow-diagram .l1{left:calc(50% - 14px); width:calc(50% - 14px - 22%)}
.flow-diagram .l2{left:22%; width:calc(50% - 22%)}
.flow-diagram .l3{left:50%; width:calc(50% - 22%); transform:translateX(-50%)}

/* Graph */
.sol-graph{min-height:220px}
.graph{width:100%; height:auto; margin-top:6px}
.graph .line{stroke-dasharray:800; stroke-dashoffset:800}
.graph .dot{fill:url(#gline); filter:drop-shadow(0 0 10px rgba(146,111,52,.45))}
.sol-card.in .graph .line{animation:draw 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Highlight (finance) */
.sol-highlight{background:radial-gradient(60% 60% at 70% -10%, rgba(146,111,52,.25), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg-3)); padding-bottom:72px}
.sol-highlight .cubes{position:absolute; inset:auto 24px 24px auto; max-width:160px; width:40vw; height:120px; background:
  linear-gradient(135deg, rgba(146,111,52,.2) 25%, transparent 26%) 0 0/60px 60px,
  linear-gradient(225deg, rgba(146,111,52,.2) 25%, transparent 26%) 0 0/60px 60px,
  linear-gradient(315deg, rgba(146,111,52,.2) 25%, transparent 26%) 0 0/60px 60px,
  linear-gradient(45deg, rgba(146,111,52,.2) 25%, transparent 26%) 0 0/60px 60px;
  filter:blur(2px) saturate(120%);
  opacity:.32;
  pointer-events:none;
}

/* Chat */
.sol-chat .chat{position:relative; right:auto; bottom:auto; width:min(280px, 100%); margin:18px 0 0; transform:none;}
.sol-chat .chat::after{content:""; position:absolute; inset:-10px; border-radius:24px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); opacity:.35; z-index:-1}
.bubble{border-radius:14px; padding:10px 12px; margin:8px 0; font-size:13px; line-height:1.35; box-shadow:0 10px 30px rgba(0,0,0,.45)}
.bubble.sys{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06)}
.bubble.usr{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:black; font-weight:700}
.sol-card .bubble{opacity:0; transform:translateY(8px)}
.sol-card.in .bubble{opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease}
.sol-card.in.sol-chat .chat .bubble{animation:chat-pop .9s ease forwards}
.sol-card.in.sol-chat .chat .bubble:nth-child(1){animation-delay:.15s}
.sol-card.in.sol-chat .chat .bubble:nth-child(2){animation-delay:.3s}
.sol-card.in.sol-chat .chat .bubble:nth-child(3){animation-delay:.45s}

/* Split */
.split{padding:56px 0}
.split h2{margin:0 0 10px}
.section-lead{color:#D6E6FF; margin:0 0 24px}
.cards-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.contrast{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));}
.list-bad li::marker{content:"✕ "; color:var(--danger)}
.list-good li::marker{content:"✓ "; color:var(--success)}

/* Comparison (Avant / Après) */
.comparison{padding:64px 0}
.comp-head{text-align:center; margin-bottom:32px}
.pill-badge{display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:#F3F8FF; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12px}
.pain .pill-badge{border:none !important}
.pain .section-head h2::after,
.pain .section-head h2::before,
.pain .pill-badge::after,
.pain .pill-badge::before,
.pain .section-head::after,
.pain .section-head::before{display:none !important; content:none !important}
.pain .section-head,
.pain .section-head h2,
.pain .section-head .pill-badge{border-bottom:none !important; border:none !important}
.pain[data-anim] .section-head h2::after,
.pain[data-anim] .section-head h2::before,
.pain[data-anim].in .section-head h2::after,
.pain[data-anim].in .section-head h2::before{display:none !important; content:none !important}
.pain .container .section-head h2::after,
.pain .container .section-head h2::before{display:none !important; content:none !important}
.comparison h2{margin:8px 0}
.comp-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}

\n
.comp-card{position:relative; border-radius:22px; padding:24px 20px; background:linear-gradient(180deg, rgba(3,29,58,.94), rgba(3,29,58,.88)); border:1px solid rgba(255,255,255,.06); overflow:hidden}
.comp-card::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(120deg, rgba(146,111,52,.6), rgba(223,189,105,.35), rgba(146,111,52,.6)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.35; pointer-events:none}
.comp-card::after{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:12px 12px; opacity:.25; pointer-events:none}
\n
.comp-card{transition:transform .35s ease, box-shadow .35s ease}
.comp-card:hover{transform:translateY(-6px); box-shadow:0 22px 60px rgba(0,0,0,.38)}
.comp-card h3{margin:0 0 16px; font-size:20px; font-weight:700}
.comp-list{list-style:none; margin:0; padding:0}
.comp-list li{display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:12px; transition:all .2s ease}
.comp-list.bad li:hover{transform:translateX(4px); background:rgba(255,107,107,.05)}
.comp-list.good li:hover{transform:translateX(4px); background:rgba(52,211,153,.05)}
.comp-list li + li{margin-top:8px}
.comp-list.bad li::before{content:"✕"; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; background:linear-gradient(180deg, #3b0f12, #1a0a0b); color:#ff6b6b; font-weight:800; font-size:16px; box-shadow:0 0 0 1px rgba(255,107,107,.3) inset; flex-shrink:0}
.comp-list.good li::before{content:"✓"; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; background:linear-gradient(180deg, #0d2a1b, #0a1711); color:#34d399; font-weight:800; font-size:16px; box-shadow:0 0 0 1px rgba(52,211,153,.3) inset; flex-shrink:0}
.comp-card.after{background:linear-gradient(180deg, rgba(3,29,58,.94), rgba(3,29,58,.88)), radial-gradient(60% 40% at 50% 0%, rgba(146,111,52,.22), transparent 60%)}
.comp-card.before{background:linear-gradient(180deg, rgba(3,29,58,.94), rgba(3,29,58,.88)), radial-gradient(60% 40% at 50% 0%, rgba(239,68,68,.12), transparent 60%)}

/* Animations for comparison */
[data-anim].reveal-left{opacity:0; transform:translateX(-26px)}
[data-anim].reveal-right{opacity:0; transform:translateX(26px)}
[data-anim].in.reveal-left,[data-anim].in.reveal-right{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
[data-anim].in.reveal-right{transition-delay:.06s}

/* Pillars */
.pillars{padding:6px 0}
.offer-grid{display:grid; grid-template-columns:1.15fr 1.15fr 1fr; gap:24px; align-items:start}
/* Brand variables (gold) */
.pillars{--pill-bg: var(--bg-2); --pill-text: var(--text); --pill-muted: var(--muted); --pill-accent: var(--accent); --pill-border: var(--line)}
.offer-title{grid-column:1 / span 2; grid-row:1; align-self:end; text-align:center}
.offer-title h2{font-size:clamp(26px,4vw,32px); line-height:1.2; font-weight:400; color:var(--pill-text); margin:0 0 32px; text-align:center}
.offer-title .accent{color:var(--pill-accent)}
/* Cards */
.offer-card{border:1px solid var(--pill-border); border-radius:16px; background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); color:var(--pill-text); overflow:hidden; transition:transform .28s ease, box-shadow .28s ease; height:auto; min-height:0; padding-bottom:6px}
.offer-card:hover{transform:translateY(-4px) scale(1.01); box-shadow:0 18px 60px rgba(146,111,52,.16)}
.offer-card::after{content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,.05); transform:scale(.94); opacity:0; transition:transform .35s ease, opacity .35s ease; pointer-events:none}
.offer-card:hover::after{transform:scale(1); opacity:.9}
.offer-card .pill-body{padding:20px}
.offer-card .pill-body h4{font-size:20px; font-weight:700; margin:0 0 12px}
@media (min-width: 981px){
  .offer-card .pill-body h4{margin:0 0 14px}
}
.offer-card .pill-body p{font-size:15px; color:var(--pill-muted); margin:0}
.pill-visual{display:flex; align-items:center; justify-content:center; height:120px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-bottom:1px solid var(--pill-border)}
.pillar-icon{font-size:48px; filter:grayscale(1) opacity(0.7); transition:filter .3s ease}
.offer-card:hover .pillar-icon{filter:grayscale(0) opacity(1)}
/* Positions (desktop) */
.card-r1{grid-column:3; grid-row:1}
.card-l1{grid-column:1; grid-row:2}
.card-c1{grid-column:2; grid-row:2}
.card-r2{grid-column:3; grid-row:2}
.card-l2{grid-column:1; grid-row:3}
.card-c2{grid-column:2; grid-row:3}
.offer-aside{grid-column:1 / -1; grid-row:4; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; text-align:center; width:100%; margin-top:20px}
.pill-cta{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 18px; border-radius:999px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#ffffff; font-weight:600; text-decoration:none; box-shadow:0 10px 30px rgba(146,111,52,.2); transition:transform .2s ease, box-shadow .2s ease; margin:0 auto}
.pill-cta:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(146,111,52,.28)}
/* Heights exact */
.offer-card{height:auto}
.card-l2{height:auto}
.pill-card{position:relative; border:1px solid rgba(255,255,255,.06); border-radius:20px; background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease}
.pill-card:hover{transform:translateY(-2px); box-shadow:0 14px 50px rgba(146,111,52,.18)}
.pill-visual{height:120px; position:relative; border-bottom:1px solid var(--pill-border); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.pill-body{padding:14px}
.pill-body h4{margin:0 0 6px}
.pill-body p{margin:0; color:#D6E6FF}

/* Chat visual */
.pv-chat{padding:16px 14px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.pv-chat .chat-row{height:18px; width:72%; border-radius:10px; background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06))}
.pv-chat .chat-row.small{margin-top:10px; width:46%}
.pv-chat .chat-input{position:absolute; left:14px; right:14px; bottom:14px; height:36px; border-radius:999px; border:1px solid var(--pill-border); background:#0f1311; display:flex; align-items:center; padding:0 10px}
.pv-chat .cursor{width:18px; height:12px; border-radius:6px; background:var(--pill-accent); filter:drop-shadow(0 0 8px rgba(146,111,52,.3))}
.pv-chat .send{margin-left:auto; width:18px; height:18px; border-radius:50%; background:var(--pill-accent)}

/* Suitable chips visual */
.pv-suitable{background:linear-gradient(180deg, rgba(146,111,52,.18), rgba(146,111,52,.08)); display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:12px}
.pv-suitable .chip{display:inline-flex; align-items:center; justify-content:center; min-width:140px; height:32px; padding:0 14px; border-radius:999px; border:1px solid rgba(146,111,52,.3); color:#F3F8FF; background:linear-gradient(180deg, rgba(146,111,52,.25), rgba(146,111,52,.12)); transform:rotate(0); font-size:13px; text-align:center; white-space:nowrap}

/* Blueprint visual */
.pv-blueprint{background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
  radial-gradient(80% 80% at 70% -10%, rgba(146,111,52,.18), transparent 60%);
}
.bp-node{position:absolute; width:14px; height:14px; border-radius:50%; background:linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow:0 6px 16px rgba(146,111,52,.3)}
.bp-node.a{left:20%; top:38%}
.bp-node.b{left:50%; top:22%}
.bp-node.c{left:76%; top:56%}
.bp-line{position:absolute; height:2px; background:linear-gradient(90deg, rgba(146,111,52,.6), rgba(223,189,105,.6))}
.bp-line.l1{left:20%; right:24%; top:46%}
.bp-line.l2{left:50%; right:24%; top:30%}

/* Bars visual */
.pv-bars{position:relative; display:grid; align-content:center; gap:12px; padding:22px 20px 26px; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); overflow:hidden}
.pv-bars::before{content:""; position:absolute; inset:12px 14px; border-radius:18px; background:radial-gradient(circle at top left, rgba(146,111,52,.25), transparent 55%); opacity:.65}
.pv-bars::after{content:""; position:absolute; inset:-40% -60% auto; height:120%; background:linear-gradient(120deg, rgba(255,255,255,.18), transparent 70%); opacity:.35; transform:rotate(-12deg)}
.pv-bars i{position:relative; display:block; height:12px; border-radius:999px; width:0; background:linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow:0 8px 18px rgba(146,111,52,.25)}
.pill-card.in .pv-bars i{animation:fill .9s ease forwards}
.pill-card.in .pv-bars i:nth-child(2){animation-delay:.18s}
.pill-card.in .pv-bars i:nth-child(3){animation-delay:.32s}
@keyframes fill{to{width:var(--w)}}

/* Badge visual */
.pv-badge{display:grid; place-items:center}
.badge-chip{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:999px; color:black; font-weight:800; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 10px 30px rgba(146,111,52,.3)}

/* Stars visual */
.pv-stars{display:flex; align-items:center; gap:8px; padding:0 14px}
.pv-stars .star{width:16px; height:16px; background:conic-gradient(from 0deg, var(--accent), var(--accent-2)); -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/></svg>') center/contain no-repeat; mask:inherit; filter:drop-shadow(0 0 6px rgba(146,111,52,.25))}
.pv-stars .nps{margin-left:auto; font-weight:800; color:#F3F8FF}

/* Graph visual */
.pv-graph{position:relative; display:grid; place-items:center; padding:18px; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); overflow:hidden}
.pv-graph::before{content:""; position:absolute; inset:14px 18px 24px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.05)}
.pv-graph::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 18%, rgba(146,111,52,.28), transparent 55%); opacity:.55}
.pv-graph svg{width:92%; height:auto; position:relative}
.pl-line{stroke-dasharray:520; stroke-dashoffset:520}
.pill-card.in .pl-line{animation:draw 1.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Steps visual */
.pv-steps{display:flex; align-items:center; justify-content:center; gap:12px}
.step-dot{width:12px; height:12px; border-radius:50%; background:linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow:0 6px 16px rgba(146,111,52,.3)}
.step-line{width:36px; height:3px; background:linear-gradient(90deg, rgba(146,111,52,.6), rgba(223,189,105,.6)); border-radius:3px}

@media (max-width: 980px){
  .offer-grid{grid-template-columns:repeat(2,1fr); gap:20px}
  .offer-title{grid-column:1 / -1}
  .card-r1,.card-l1,.card-c1,.card-r2,.card-l2,.card-c2,.offer-aside{grid-column:auto; grid-row:auto}
  .offer-aside{align-items:center; justify-content:center}
  .offer-card{height:auto; padding:20px}
  .offer-card .pill-body{padding:16px}
  .card-l2{height:auto}
}
@media (max-width: 620px){
  .offer-grid{grid-template-columns:1fr; gap:24px}
  .offer-card{height:auto}
  .pillars{padding:6px 0}
  .offer-title{margin-bottom:24px}
}
@media (max-width: 620px){
  .pill-grid{grid-template-columns:1fr}
}

/* AI */
.ai{padding:56px 0}
.ai-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center}
.ai-diagram{width:100%; height:auto; border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid var(--line)}
.bullets{margin:0; padding-left:18px}
.bullets li{margin:8px 0}

/* Process */
.hiw{padding:64px 0 0; position:relative}
.stack{position:relative; height:190vh}
.step-card{position:sticky; top:96px; height:clamp(440px, 60vh, 640px); margin:0 auto 40px; width:min(1140px, calc(100% - 32px)); border-radius:24px; border:1px solid rgba(255,255,255,.06); background:
  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
  radial-gradient(80% 80% at 80% -10%, rgba(146,111,52,.15), transparent 60%),
  linear-gradient(180deg, var(--bg-2), var(--bg-3));
  box-shadow:0 14px 48px rgba(0,0,0,.45);
  overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:1fr auto; gap:18px; padding:18px; transform-origin:50% 20%; transition:transform .5s ease, filter .5s ease}
.step-card::before{content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(146,111,52,.25), rgba(223,189,105,.15), rgba(146,111,52,.25)) top/100% 3px no-repeat,
  repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 80px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 80px);
  opacity:.35; pointer-events:none}
.step-card .no-bg{position:absolute; left:18px; top:-12px; font-size:180px; line-height:1; opacity:.035; font-weight:900; letter-spacing:.02em; pointer-events:none}
.step-card .step-body h3{margin:0 0 6px; font-size:26px}
.step-card .step-body p{margin:0 0 10px}
.step-card .step-body .bullets{list-style:none; padding:0; margin:10px 0 0}
.step-card .step-body .bullets li{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-radius:12px}
.step-card .step-body .bullets li::before{content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(180deg, var(--accent), var(--accent-2))}
.step-card .ui-card{position:relative; border-radius:16px; border:none; background:
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:14px; box-shadow:none}
.step-card .ui-card .tag{display:inline-block; font-weight:800; font-size:12px; padding:4px 10px; border-radius:999px; color:black; background:linear-gradient(135deg, var(--accent), var(--accent-2))}
.step-card .ui-card .rows{display:grid; gap:8px; margin-top:10px}
.step-card .ui-card .rows span{height:10px; border-radius:8px; background:linear-gradient(90deg, rgba(146,111,52,.4), rgba(223,189,105,.2))}
.step-card .ui-card .chart{height:120px; border-radius:14px; background:
  radial-gradient(80% 50% at 60% 0%, rgba(146,111,52,.25), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06)}
.step-card .ui-card .bubbles{display:flex; gap:8px; margin-top:10px}
.step-card .ui-card .bubbles i{flex:1; height:34px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06)}

/* Step images - desktop only */
.step-card .ui-card .step-image{display:none}
@media (min-width: 981px){
  .step-card .ui-card{display:flex; flex-direction:column}
  .step-card .ui-card .step-image{display:block; width:100%; height:auto; max-height:320px; object-fit:cover; border-radius:12px; margin-top:12px; flex:1; border:1px solid rgba(255,255,255,.08); box-shadow:0 4px 16px rgba(0,0,0,.2); transition:transform .3s ease, box-shadow .3s ease}
  .step-card:hover .ui-card .step-image{transform:translateY(-2px); box-shadow:0 6px 20px rgba(146,111,52,.25)}
}

/* New step card visual and CTA styles */
.step-visual{display:flex; align-items:center; justify-content:center; padding:40px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08)}
.step-icon{font-size:72px; filter:grayscale(1) opacity(0.6); transition:filter .3s ease}
.step-card:hover .step-icon{filter:grayscale(0) opacity(1)}
.step-cta{display:flex; justify-content:center; padding:20px 0; grid-column:1 / -1}

/* Layering: next card passe au-dessus */
.s1{z-index:3}
.s2{z-index:4}
.s3{z-index:5}
.step-card.covered{transform:scale(.965); filter:saturate(.9) brightness(.96)}
.step-card.active{box-shadow:0 34px 140px rgba(146,111,52,.26), 0 16px 56px rgba(0,0,0,.6)}
.step-card.hidden{opacity:0; visibility:hidden; pointer-events:none; transform:scale(.98)}

@media (max-width: 980px){
  .step-card{grid-template-columns:1fr; height:auto; min-height:72vh}
}

/* Cases */
.cases{padding:32px 0}
.case-scroller{display:grid; grid-auto-flow:column; grid-auto-columns: minmax(260px, 1fr); gap:16px; overflow:auto; padding-bottom:8px}
.case{border:1px solid var(--line); background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); border-radius:var(--radius); padding:16px; min-height:180px}
.muted{color:var(--muted)}
.small{font-size:12px}

/* Pricing */
.engagement{padding:56px 0; margin-top:56px}
.pricing{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px}
.price h3{margin-top:0}
.price-footer{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px}
.note{color:#D6E6FF}

/* Premium engagement section */
.engagement-premium{max-width:900px; margin:0 auto}
.engagement-hero{text-align:center; margin-bottom:48px}
.engagement-hero h3{font-size:32px; margin:0 0 8px; color:var(--text)}
.engagement-subtitle{color:var(--accent-2); font-size:14px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin:0 0 32px}

.engagement-features-card{background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); border:1px solid var(--line); border-radius:20px; padding:32px; position:relative; overflow:hidden}
.engagement-features-card::before{content:""; position:absolute; inset:0; background:radial-gradient(50% 50% at 50% 0%, rgba(146,111,52,.15), transparent 70%); pointer-events:none}

.features-visual{display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:24px}
.feature-dot{width:12px; height:12px; border-radius:50%; background:rgba(146,111,52,.3); transition:all .3s ease}
.feature-dot.active{background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 0 0 3px rgba(146,111,52,.2)}
.feature-line{width:60px; height:2px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:.6}

.engagement-features{list-style:none; padding:0; margin:0; display:grid; gap:16px}
.engagement-features li{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05)}
.engagement-features li:last-child{border-bottom:none}
.feature-icon{font-size:18px; width:24px; text-align:center}

.engagement-criteria-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:40px}
.criteria-card{background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); border:1px solid var(--line); border-radius:16px; padding:24px}
.criteria-card h4{display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:18px}
.criteria-icon{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:14px; font-weight:900}
.criteria-good .criteria-icon{background:linear-gradient(135deg, #22c55e, #16a34a); color:white}
.criteria-bad .criteria-icon{background:linear-gradient(135deg, #ef4444, #dc2626); color:white}
.criteria-card ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.criteria-card li{display:flex; align-items:center; gap:8px; font-size:15px}
.criteria-card li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.7}

.engagement-cta{text-align:center}
.engagement-cta .engagement-note{font-size:13px; color:var(--muted); margin:12px 0 0; font-style:italic}

/* Mobile responsive */
@media (max-width: 768px) {
  .engagement-criteria-grid{grid-template-columns:1fr; gap:16px}
  .engagement-features-card{padding:24px}
}

/* FAQ */
.faq{padding:170px 0 6px}
.faq details{border:1px solid var(--line); background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px}
.faq summary{cursor:pointer; font-weight:600}
.faq p{margin:12px 0 0; line-height:1.6}

/* FAQ mobile spacing */
@media (max-width: 980px){
  .faq{padding:64px 0 6px}
}
@media (max-width: 620px){
  .faq{padding:48px 0 6px}
}

/* Final CTA */
.final-cta{padding:64px 0}
.final-box{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:24px; padding:48px 28px; text-align:center; background:linear-gradient(180deg, var(--bg-2), var(--bg-3))}
.final-box::before{content:""; position:absolute; inset:-20%; background:
  radial-gradient(40% 60% at 30% 60%, rgba(146,111,52,.45), transparent 60%),
  radial-gradient(35% 55% at 70% 40%, rgba(223,189,105,.35), transparent 65%);
  filter:blur(30px) saturate(120%); opacity:.9; animation:blob 10s ease-in-out infinite alternate}
.final-box::after{content:""; position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 80px) repeat,
  linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 80px) repeat; opacity:.15}
@keyframes blob{from{transform:translate3d(-2%,0,0)} to{transform:translate3d(2%,0,0)}}
.cta-badge{display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); font-weight:800; letter-spacing:.06em}
.cta-title{margin:10px 0 6px; font-size:clamp(28px,4vw,44px); line-height:1.1}
.cta-sub{margin:0 auto 24px; max-width:720px; color:#D6E6FF}
.cta-actions{display:flex; justify-content:center; align-items:center; margin-top:8px; position:relative; z-index:1; width:100%}
.cta-actions .btn{margin:0 auto}
.cta-note{margin:16px 0 0; font-size:14px; color:var(--muted); opacity:.85; position:relative; z-index:1}
.cta-primary{display:inline-flex; align-items:center; gap:14px; min-height:52px; padding:0 22px 0 12px; border-radius:999px; background:#ffffff; color:#031D3A; font-weight:800; text-decoration:none; box-shadow:0 10px 30px rgba(146,111,52,.24); transition:transform .25s ease, box-shadow .25s ease}
.cta-primary .chip.left{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#031D3A; font-weight:900; transition:transform .25s ease}
.cta-primary:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(146,111,52,.34)}
.cta-primary:hover .chip.left{transform:translateX(4px)}

/* Footer */
.site-footer{position:relative; overflow:hidden; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); padding:24px 0 0}
.site-footer::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url('Optima F.jpg') center/cover no-repeat; opacity:0.12; z-index:1; filter:brightness(0.85) saturate(1.05)}
.site-footer::after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(3,29,58,0.88) 0%, rgba(3,29,58,0.92) 100%); z-index:1}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:16px; align-items:flex-start; position:relative; z-index:2}
.brand-foot{margin-bottom:4px}
.foot-heading{font-size:14px; font-weight:800; margin:0 0 8px; letter-spacing:.06em}
.foot-links{list-style:none; margin:8px 0 0; padding:0}
.foot-links li{margin:6px 0}
.foot-links a{color:var(--muted); text-decoration:none}
.foot-links a:hover{color:var(--text)}
.foot-brand .muted{max-width:460px}
.socials{display:flex; gap:8px; margin-top:10px}
.soc{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); color:#F3F8FF; text-decoration:none; font-weight:800}

/* Gradient band + watermark */
.footer-gradient{position:relative; height:clamp(300px, 50vw, 600px); margin-top:18px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(146,111,52,.2) 30%, rgba(223,189,105,.35) 100%); border-top:1px solid rgba(255,255,255,.06); overflow:hidden}
.footer-gradient::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 50% 120%, rgba(146,111,52,.4), transparent 70%)}
.footer-watermark{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:1; filter:blur(0); padding:30px}
.wm-text{font-weight:900; letter-spacing:.1em; font-size:clamp(80px, 35vw, 500px); line-height:.8; color:transparent; -webkit-text-stroke: 2.5px rgba(255,255,255,.5); background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3)); -webkit-background-clip:text; background-clip:text; opacity:.8; text-align:center; white-space:nowrap; text-transform:uppercase; width:100%; height:100%; display:flex; align-items:center; justify-content:center}

.foot-bottom{display:flex; justify-content:center; align-items:center; padding:12px 0 22px; position:relative; z-index:2}
.footer-copyright{display:flex; flex-direction:column; gap:4px; text-align:center}
@media (max-width: 980px){
  .footer-gradient{height:clamp(250px, 40vw, 400px)}
  .wm-text{font-size:clamp(60px, 30vw, 350px); letter-spacing:.08em}
  .footer-watermark{padding:25px}
}
@media (max-width: 620px){
  .footer-gradient{height:clamp(200px, 35vw, 350px)}
  .wm-text{font-size:clamp(50px, 25vw, 280px); letter-spacing:.06em; -webkit-text-stroke: 2px rgba(255,255,255,.5)}
  .footer-watermark{padding:20px}
  .foot-bottom{flex-direction:column; gap:12px; text-align:center}
  .footer-copyright{text-align:center}
}
@media (max-width: 480px){
  .footer-gradient{height:clamp(150px, 30vw, 300px)}
  .wm-text{font-size:clamp(40px, 20vw, 200px); letter-spacing:.05em; -webkit-text-stroke: 1.5px rgba(255,255,255,.5)}
  .footer-watermark{padding:15px}
  .offer-title{margin-bottom:20px}
}

/* Utilities */
h2{font-size:clamp(26px, 4vw, 32px); margin:0 0 10px}
h3{font-size:clamp(20px, 3.2vw, 24px)}
h4{font-size:clamp(18px, 2.8vw, 20px)}
h5{font-size:clamp(16px, 2.4vw, 18px); margin:0 0 4px}
p{margin:0}
ul{margin:0; padding-left:18px}

/* Responsive */
@media (max-width: 980px){
  .hero{padding:clamp(64px, 18vw, 96px) 0 0}
  .hero-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:center; justify-items:center}
  .hero-copy{text-align:center; max-width:760px; margin:0 auto}
  .kickers{justify-content:center}
  .hero-ctas{justify-content:center}
  .hero-ctas .btn{min-width:220px}
  .hero-note{max-width:640px; margin:0 auto 24px}
  .hero-dashboard{transform:none; margin:0 auto; max-width:min(460px, 100%); grid-template-columns:repeat(2, minmax(160px, 1fr)); gap:18px}
  .pain-grid2{grid-template-columns:repeat(2,1fr)}
  .sol-grid{grid-template-columns:1fr}
  .sol-card{padding:22px; min-height:auto}
  .sol-flow{padding-bottom:150px}
  .sol-chat{padding-bottom:150px}
  .flow-diagram{left:auto; right:auto; height:130px; max-width:360px; margin:16px auto 0}
  .sol-chat .chat{left:50%; right:auto; bottom:auto; width:min(260px, calc(100% - 32px)); transform:translateX(-50%)}
  .footer-grid{grid-template-columns:1fr}
  .ai-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}
  .lead-form{grid-template-columns: 1fr}
  .floating-nav{margin:0 auto}
  .comp-grid{grid-template-columns:1fr; gap:20px}
  .comp-card{padding:20px 18px}
  .agitate-wrap{grid-template-columns:1fr; gap:12px}
  .stat{padding:14px; gap:6px}
  .stat-label{font-size:13px}
  .stat-source{font-size:9px}
  .agitate-note{padding:14px; font-size:14px}
  .key-benefits{grid-template-columns:1fr}
  .pain-grid{grid-template-columns:1fr}
  .stack{height:240vh}
  .step-card{margin:0 auto 60px; height:clamp(420px, 70vh, 640px)}
  .sol-highlight .cubes{opacity:.25; right:-12px; bottom:-12px; transform:scale(.85)}
  .cta-center{margin-top:36px}
}
@media (max-width: 760px){
  .hero-ctas{flex-direction:column; align-items:stretch}
  .hero-ctas .btn{width:100%}
  .hero-ctas .text-link{display:flex; width:100%; justify-content:center}
  .hero-dashboard{grid-template-columns:repeat(2, minmax(140px, 1fr)); gap:14px}
  .hero-dashboard .card{padding:16px}
  .pain-grid2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .cards-2{grid-template-columns:1fr}
  .price-footer{flex-direction:column; align-items:flex-start; gap:10px}
  .cta-actions{flex-direction:column; align-items:center; width:100%}
  .cta-actions .btn{width:100%; max-width:400px}
  .cta-primary{width:100%; justify-content:center; min-height:48px; padding:0 18px}
  .final-box{padding:40px 24px}
  .sol-highlight{padding-bottom:120px}
  .sol-highlight .cubes{right:12px; left:12px; bottom:18px; width:auto; max-width:140px; margin:0 auto; opacity:.3}
  .sol-chat .chat{left:50%; right:auto; transform:translateX(-50%)}
}
@media (max-width: 620px){
  .nav{display:none}
  .hero h1{font-size:22px}
  .site-header{padding-top:8px}
  .floating-nav{height:64px; padding:0 14px; top:8px}
  .floating-nav .logo{height:100px}
  .pain{padding:88px 0}
  


  .cards-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column; gap:8px; text-align:center}
  .sol-grid{gap:18px}
  .sol-card{padding:18px; min-height:auto}
  .sol-flow{padding-bottom:160px}
  .sol-chat{padding-bottom:160px}
  .flow-diagram{height:120px; max-width:300px; margin:18px auto 0}
  .stack{height:280vh}
  .step-card{margin:0 auto 64px; height:clamp(420px, 74vh, 620px)}
  /* .site-nav{width:100%; right:-100%; border-left:none}
   */.site-nav.open{right:0}
  .sol-highlight .cubes{left:50%; right:auto; bottom:20px; max-width:120px; height:90px; transform:translateX(-50%); opacity:.3}
  .cta-center{margin-top:32px}
}
@media (max-width: 480px){
  .hero{padding:56px 0 0}
  .hero h1{font-size:20px}
  .site-header{padding-top:6px}
  .floating-nav{height:60px; padding:0 12px; top:6px}
  .floating-nav .logo{height:90px}
  .pain{padding:80px 0}
  .kickers{justify-content:center; row-gap:8px}
  .hero-dashboard{max-width:320px; grid-template-columns:repeat(2, minmax(132px,1fr)); gap:12px}
  .hero-dashboard .card{padding:14px}
  .pill-icon{width:32px; height:32px}

  .price-footer{align-items:stretch}
  .cta-primary{padding:0 14px 0 6px}
  .final-box{padding:32px 18px}
  .stack{height:320vh}
  .step-card{margin:0 auto 70px; height:clamp(420px, 78vh, 600px)}
  .sol-card{padding:16px; min-height:auto}
  .sol-flow{padding-bottom:150px}
  .sol-chat{padding-bottom:152px}
  .flow-diagram{left:auto; right:auto; bottom:auto; height:110px; max-width:260px; margin:18px auto 0}
  .sol-chat .chat{left:50%; right:auto; bottom:auto; width:calc(100% - 24px); transform:translateX(-50%)}
  .sol-highlight .cubes{opacity:.35; filter:blur(3px)}
  .cta-center{margin-top:28px}
}
.hero-sky{position:absolute; inset:-10% -10% auto -10%; height:700px; background:
  radial-gradient(60% 120% at 20% 10%, rgba(146,111,52,.3), transparent 60%),
  radial-gradient(60% 120% at 80% 0%, rgba(223,189,105,.22), transparent 60%),
  radial-gradient(40% 80% at 50% 30%, rgba(255,255,255,.04), transparent 60%);
  filter:blur(22px) saturate(130%);
  opacity:.7;
}
.hero-sky::after{content:""; position:absolute; inset:-10% -10% -10% -10%; background:radial-gradient(120% 80% at 50% 10%, rgba(146,111,52,.12), transparent 60%); animation:sky-move 12s ease-in-out infinite alternate}
@keyframes sky-move{from{transform:translateY(0) rotate(0deg)} to{transform:translateY(8px) rotate(1deg)}}

@media (prefers-reduced-motion: reduce){
  .btn-pulse,.hero-dashboard .card,.hero.in-view h1,.hero.in-view .subhead,.hero.in-view .hero-note,.hero.in-view .hero-ctas,.sol-chat .chat .bubble{animation:none !important}
  .hero h1,.hero .subhead,.hero-note,.hero-ctas{opacity:1 !important; transform:none !important}
}








































.comp-list.good li{opacity:.95}











.solution-symbol{width:72px; height:72px; border-radius:20px; background:linear-gradient(180deg, rgba(223,189,105,.2), rgba(223,189,105,.05)); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; margin-bottom:12px; position:relative; overflow:hidden}
.solution-symbol::before{content:""; position:absolute; inset:4px; border-radius:inherit; background:radial-gradient(circle at 20% 15%, rgba(223,189,105,.32), transparent 65%); opacity:.55}
.solution-symbol svg{position:relative; z-index:1; width:42px; height:42px; stroke:var(--accent-2); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.solution-symbol .fill{fill:rgba(223,189,105,.22)}
.sol-card .copy{display:flex; flex-direction:column; gap:12px}
.pv-blueprint{position:relative; padding:20px; border-radius:inherit; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
  radial-gradient(80% 80% at 70% -10%, rgba(146,111,52,.18), transparent 60%);
 overflow:hidden}
.pv-blueprint .bp-node{position:absolute; width:12px; height:12px; border-radius:50%; background:linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow:0 6px 16px rgba(146,111,52,.3)}
.pv-blueprint .bp-node.bp-a{left:18%; top:58%}
.pv-blueprint .bp-node.bp-b{left:50%; top:28%}
.pv-blueprint .bp-node.bp-c{left:74%; top:50%}
.pv-blueprint .bp-connector{position:absolute; height:2px; background:linear-gradient(90deg, rgba(146,111,52,.6), rgba(223,189,105,.6)); border-radius:2px}
.pv-blueprint .bp-connector.bc-ab{left:20%; top:58%; width:34%}
.pv-blueprint .bp-connector.bc-bc{left:52%; top:44%; width:24%}

.pv-finance{position:relative; padding:22px; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); display:grid; gap:12px; overflow:hidden}
.pv-finance::before{content:""; position:absolute; inset:14px; border-radius:18px; border:1px solid rgba(255,255,255,.06); opacity:.6}
.pv-finance::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 20%, rgba(146,111,52,.25), transparent 55%); opacity:.4}
.pv-finance .ledger-bar{position:relative; z-index:1; height:12px; border-radius:8px; background:linear-gradient(90deg, rgba(223,189,105,.12), rgba(223,189,105,.02)); border:1px solid rgba(223,189,105,.18)}
.pv-finance .ledger-bar.b{width:85%; margin-left:10%}
.pv-finance .ledger-bar.c{width:65%; margin-left:20%}
.pv-finance .ledger-line{position:relative; z-index:1; height:2px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); width:90%; margin:0 auto; border-radius:2px}