:root {
  --orange:#E27B2E; --orange-soft:#E9A567; --navy:#17263F; --navy-deep:#0b1424;
  --teal:#1CA39A; --teal-soft:#3fbfb4;
  --ink:#1c2a40; --muted:#5f6f86; --line:#eae4db; --bg:#faf6f1; --card:#ffffff;
}

/* HERO SECTION */
#ro-hero { position:relative; width:100%; height:92vh; min-height:600px; overflow:hidden; background:var(--navy-deep); }
#ro-canvas { position:absolute; top:0; right:0; bottom:0; left:0; display:block; }
.fade1 { position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; background:radial-gradient(120% 90% at 72% 25%, rgba(226,123,46,0.16), transparent 60%); }
.fade2 { position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; background:linear-gradient(90deg, rgba(11,20,36,0.82) 0%, rgba(11,20,36,0.34) 46%, rgba(11,20,36,0.06) 74%, transparent 100%); }
.hero-content { position:absolute; top:0; right:0; bottom:0; left:0; display:flex; flex-direction:column; justify-content:center; pointer-events:none; }
.hero-content .wrap { width:100%; }
.crumb { color:#8496b0; font-size:13px; margin-bottom:18px; } 
.crumb a:hover { color:#fff; } 
.crumb .sep { margin:0 8px; color:#4a5f82; }
.hero-eyebrow { color:var(--orange-soft); letter-spacing:4px; font-size:12px; font-weight:600; text-transform:uppercase; margin-bottom:14px; opacity:0; transform:translateY(20px); animation:rise .8s .2s forwards; }
.hero h1 { color:#fff; font-size:clamp(34px,5vw,60px); line-height:1.04; font-weight:800; max-width:660px; opacity:0; transform:translateY(24px); animation:rise .9s .35s forwards; }
.hero h1 .accent { color:var(--orange); }
.hero p.sub { color:#b7c3d6; font-size:clamp(15px,1.6vw,20px); max-width:540px; margin:22px 0 32px; opacity:0; transform:translateY(24px); animation:rise .9s .5s forwards; }
.hero .ctas { display:flex; gap:14px; flex-wrap:wrap; pointer-events:auto; opacity:0; transform:translateY(24px); animation:rise .9s .65s forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.scroll-cue { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); width:24px; height:40px; border:2px solid rgba(226,123,46,.5); border-radius:14px; pointer-events:none; }
.scroll-cue::after { content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; background:var(--orange); border-radius:2px; transform:translateX(-50%); animation:cue 1.6s infinite; }
@keyframes cue { 0%{opacity:0;top:8px;} 30%{opacity:1;} 100%{opacity:0;top:22px;} }

/* INTRO SECTION */
.intro { padding:96px 0 50px; }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.intro p { color:var(--muted); font-size:16.5px; margin:16px 0; }
.lead { font-size:19px; color:var(--navy); font-weight:600; line-height:1.5; }
@media(max-width:820px){ .intro-grid { grid-template-columns:1fr; gap:34px; } }

/* CAPABILITIES SECTION */
.caps { padding:60px 0; }
.caps .head { text-align:center; max-width:680px; margin:0 auto 50px; }
.caps .head p { color:var(--muted); margin-top:12px; }
.cgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.ccard { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px 24px; transition:transform .2s,box-shadow .2s,border-color .2s; }
.ccard:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(23,38,63,0.12); border-color:rgba(226,123,46,.35); }
.ccard.alt:hover { border-color:rgba(28,163,154,.4); }
.ccard .ic { width:48px; height:48px; border-radius:12px; background:linear-gradient(140deg,#E27B2E,#c25f18); display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:transform .25s; }
.ccard.alt .ic { background:linear-gradient(140deg,var(--teal),#127c75); }
.ccard .ic svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ccard:hover .ic { transform:scale(1.06) rotate(-3deg); }
.ccard h3 { font-size:17.5px; color:var(--navy); margin-bottom:8px; }
.ccard p { color:var(--muted); font-size:14px; }
@media(max-width:900px){ .cgrid { grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .cgrid { grid-template-columns:1fr; } }

/* JOURNEY STEPPER */
.journey { background:var(--bg); padding:100px 0; }
.journey .head { text-align:center; max-width:680px; margin:0 auto 24px; }
.journey .head p { color:var(--muted); margin-top:12px; }
.jtrack { position:relative; display:flex; justify-content:space-between; margin:52px 0 34px; }
.jtrack::before { content:""; position:absolute; top:23px; left:6%; right:6%; height:3px; background:var(--line); border-radius:3px; }
.jfill { position:absolute; top:23px; left:6%; height:3px; background:linear-gradient(90deg,var(--orange),var(--teal)); border-radius:3px; width:0; transition:width .5s cubic-bezier(.2,.7,.2,1); z-index:1; }
.jstep { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; cursor:pointer; flex:1; }
.jdot { width:48px; height:48px; border-radius:50%; background:var(--card); border:2px solid var(--line); color:var(--muted); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; transition:all .3s; }
.jstep.done .jdot { border-color:var(--orange); background:var(--orange); color:#fff; }
.jstep.active .jdot { border-color:var(--orange); background:var(--orange); color:#fff; transform:scale(1.14); box-shadow:0 8px 22px rgba(226,123,46,.4); }
.jstep .jlabel { margin-top:12px; font-size:13.5px; font-weight:700; color:var(--muted); text-align:center; transition:color .2s; }
.jstep.active .jlabel { color:var(--navy); }
.jpanel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 34px; min-height:150px; }
.jpanel .ptag { color:var(--orange); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.jpanel h3 { color:var(--navy); font-size:22px; margin:8px 0 10px; }
.jpanel p { color:var(--muted); font-size:15.5px; max-width:760px; }
@media(max-width:640px){ .jstep .jlabel { font-size:11px; } .jdot { width:40px; height:40px; font-size:15px; } }

/* OUTCOMES SECTION */
.outcomes { padding:90px 0; }
.outcomes .head { text-align:center; margin-bottom:44px; }
.ostats { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; }
.ostat .num { font-size:clamp(34px,4vw,52px); font-weight:800; color:var(--navy); }
.ostat .num span { color:var(--orange); }
.ostat .lbl { color:var(--muted); font-size:14.5px; margin-top:6px; }
@media(max-width:700px){ .ostats { grid-template-columns:1fr; gap:34px; } }

/* FAQ ACCORDION SECTION */
.faq { padding:40px 0 100px; }
.faq .head { text-align:center; margin-bottom:44px; }
.acc { max-width:820px; margin:0 auto; }
.item { border:1px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden; transition:border-color .2s; }
.item.open { border-color:rgba(226,123,46,.4); }
.q { cursor:pointer; padding:20px 24px; display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--navy); font-size:16px; }
.q .pl { color:var(--orange); font-size:22px; transition:transform .25s; line-height:1; }
.item.open .q .pl { transform:rotate(45deg); }
.ans { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.ans p { padding:0 24px 22px; color:var(--muted); font-size:15px; }

/* TESTIMONIAL STRIP */
.tstrip { position:relative; background:var(--navy-deep); padding:104px 0; color:#fff; overflow:hidden; }
.tstrip canvas { position:absolute; top:0; right:0; bottom:0; left:0; }
.tstrip .veil { position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; background:radial-gradient(circle at 50% 46%, rgba(11,20,36,0.2), rgba(11,20,36,0.86) 70%); }
.tstrip .wrap { position:relative; z-index:2; max-width:780px; text-align:center; }
.tstrip .mark { color:var(--orange); font-size:60px; font-weight:800; line-height:.5; }
.tstrip blockquote { font-size:clamp(19px,2.3vw,29px); font-weight:600; line-height:1.42; margin:20px 0; }
.tstrip .who-line { font-weight:700; } .tstrip .role { color:#8496b0; font-size:14px; }

/* CTA SECTION */
.cta { position:relative; background:var(--navy-deep); padding:104px 0; text-align:center; color:#fff; overflow:hidden; }
.cta canvas { position:absolute; top:0; right:0; bottom:0; left:0; }
.cta .veil { position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; background:linear-gradient(0deg, rgba(11,20,36,0.72), rgba(11,20,36,0.5)); }
.cta .wrap { position:relative; z-index:2; }
.cta h2 { font-size:clamp(28px,3.6vw,44px); font-weight:800; max-width:720px; margin:0 auto 16px; }
.cta p { color:#c3d0e2; max-width:560px; margin:0 auto 30px; }