* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
section[id] { scroll-margin-top: 90px; }
body { background:#fff; font-family:'Inter',system-ui,sans-serif; color:#0E161A; overflow-x:hidden; }
#sf-root ::selection { background:#EE5B8E; color:#0E161A; }

@keyframes sf-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes sf-marquee-rev { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@keyframes sf-float { 0%,100% { transform:translateY(0) rotate(var(--r,0deg)); } 50% { transform:translateY(-14px) rotate(var(--r,0deg)); } }
@keyframes sf-spin { to { transform:rotate(360deg); } }
@keyframes sf-mesh { 0% { transform:translate(0,0) scale(1); } 33% { transform:translate(6%,-4%) scale(1.15); } 66% { transform:translate(-5%,5%) scale(0.95); } 100% { transform:translate(0,0) scale(1); } }
@keyframes sf-draw { to { stroke-dashoffset:0; } }
@keyframes sf-scrolldot { 0% { transform:translateY(0); opacity:0; } 30% { opacity:1; } 100% { transform:translateY(16px); opacity:0; } }
@keyframes sf-fadein { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes sf-kenburns { 0% { transform:scale(1.05); } 100% { transform:scale(1.2); } }
@keyframes sf-loadbar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes sf-count-blink { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes sf-scan { 0% { left:-40%; } 100% { left:100%; } }

.sf-mag { transition:transform .35s cubic-bezier(.16,1,.3,1); }
.sf-modal-close, [data-toggle-btn] { transition:transform .16s cubic-bezier(.23,1,.32,1), background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.sf-modal-close:active, [data-toggle-btn]:active { transform:scale(0.94); }
#sf-root img { display:block; }

/* Shared page-chrome utility classes -- keep inline-style authoring pattern
   for one-off section styling, but factor the pieces every subpage repeats
   (nav, footer, buttons, page-hero) so they don't drift between pages. */
#sf-nav a.sf-navlink { color:inherit; text-decoration:none; }
#sf-nav a.sf-navlink.active { color:#126B94; }

.sf-btn-dark { text-decoration:none; color:#fff; font-weight:600; font-size:16px; padding:16px 26px; background:#0E161A; border-radius:100px; display:inline-flex; align-items:center; gap:11px; }
.sf-btn-light { text-decoration:none; color:#0E161A; font-weight:600; font-size:16px; padding:16px 26px; background:#fff; border:1.5px solid #D0DAD9; border-radius:100px; display:inline-flex; align-items:center; gap:10px; }
.sf-btn-orange { text-decoration:none; color:#fff; font-weight:600; font-size:16px; padding:15px 26px; background:#E15A2B; border-radius:100px; display:inline-flex; align-items:center; gap:10px; box-shadow:0 12px 30px rgba(225,90,43,.28); }

.sf-page-hero { position:relative; padding:170px 40px 90px; text-align:center; overflow:hidden; }
.sf-page-hero h1 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(38px,5.5vw,68px); line-height:1.05; letter-spacing:-1.6px; }
.sf-page-hero p { max-width:620px; margin:22px auto 0; font-size:17.5px; line-height:1.6; color:#4A5757; }

.sf-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:1.4px; color:#126B94; margin-bottom:18px; }
.sf-eyebrow span { width:22px; height:2px; background:#126B94; }

.sf-input { font-family:'Inter',system-ui,sans-serif; font-size:15px; padding:15px 18px; border:1.5px solid #E0E7E6; border-radius:13px; outline:none; transition:border-color .2s; width:100%; }

@media (max-width: 1100px) {
  [data-hero3d-wrap] { display:none !important; }
}
@media (max-width: 900px) {
  /* 3- and 4-column grids -- classed (.sf-grid-3/4) or plain inline -- step
     down to 2 columns on tablet, then 1 on phone (620px block below). Uses
     attribute selectors as a safety net for the many one-off inline grids
     across the site that never got an .sf-grid-N class. */
  .sf-grid-3, .sf-grid-4, .sf-cert-grid,
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:repeat(2,1fr) !important; }
  /* 2-column splits (hero image/copy pairs, form layouts) stack to 1. */
  .sf-grid-2,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns:1fr 1.05fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1.2fr"] { grid-template-columns:1fr !important; }
}
@media (max-width: 620px) {
  .sf-grid-3, .sf-grid-4, .sf-cert-grid,
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:1fr !important; }
}
@media (max-width: 700px) {
  /* Decorative floating hero chips have no side gutter to float in once the
     headline spans the full viewport width -- they'd sit on top of the text. */
  .sf-hero-pill { display:none !important; }
}

/* ---------- Cursor spotlight (site-wide ambient glow that trails the pointer) ---------- */
#sf-spotlight { position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none; z-index:2; opacity:0; transition:opacity .4s ease; background:radial-gradient(circle, rgba(238,91,142,.16), rgba(18,107,148,.07) 45%, transparent 72%); filter:blur(4px); will-change:transform; }
#sf-spotlight.sf-live { opacity:1; }

/* ---------- Mega-menu ---------- */
.sf-navlinks { position:relative; font-family:'Space Grotesk',sans-serif; font-weight:500; letter-spacing:-0.1px; }
.sf-navitem { position:relative; }
.sf-navitem > a, .sf-navitem > button { color:inherit; text-decoration:none; background:none; border:none; font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:8px 0; transition:color .2s ease; }
.sf-navitem > a:hover, .sf-navitem > button:hover { color:#E73975; }
.sf-navitem svg.sf-caret { width:9px; height:9px; transition:transform .35s cubic-bezier(.23,1,.32,1); opacity:.6; }
.sf-navitem.sf-open svg.sf-caret { transform:rotate(180deg); }
.sf-megapanel { position:fixed; top:72px; left:50%; transform:translate(-50%,4px) scale(.99); width:min(1040px, 92vw); background:#FAFBFA; border:1px solid #ECF0ED; border-radius:22px; box-shadow:0 34px 80px rgba(14,22,26,.18), 0 2px 10px rgba(14,22,26,.06); padding:30px; opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease; transform-origin:top center; z-index:950; display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:6px; }
.sf-navitem.sf-open .sf-megapanel { opacity:1; pointer-events:auto; transform:translate(-50%,0) scale(1); }
.sf-megapanel a.sf-megalink { display:flex; align-items:flex-start; gap:13px; padding:13px; border-radius:14px; text-decoration:none; color:#0E161A; transition:background .2s ease, transform .3s cubic-bezier(.23,1,.32,1); }
.sf-megapanel a.sf-megalink:hover { background:#fff; box-shadow:0 8px 20px rgba(14,22,26,.06); transform:translateY(-2px); }
.sf-megapanel a.sf-megalink .sf-megaicon { flex:none; width:38px; height:38px; border-radius:11px; background:#E7F2F5; color:#126B94; display:flex; align-items:center; justify-content:center; transition:transform .35s cubic-bezier(.23,1,.32,1), background-color .3s ease, color .3s ease; }
.sf-megapanel a.sf-megalink:hover .sf-megaicon { transform:scale(1.1) rotate(-6deg); background:#E73975; color:#fff; }
.sf-megapanel a.sf-megalink b { display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; }
.sf-megapanel a.sf-megalink span.sf-megadesc { display:block; margin-top:2px; font-size:12.5px; color:#7C8A8B; line-height:1.4; }

/* ---------- Mobile nav (hamburger + off-canvas panel) ---------- */
.sf-nav-toggle { display:none; position:relative; z-index:950; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; flex:none; border:none; background:none; padding:0; cursor:pointer; }
.sf-nav-toggle span { display:block; width:21px; height:2px; border-radius:2px; background:#0E161A; transition:transform .3s cubic-bezier(.23,1,.32,1), opacity .2s ease; }
#sf-nav.sf-nav-open .sf-nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#sf-nav.sf-nav-open .sf-nav-toggle span:nth-child(2) { opacity:0; }
#sf-nav.sf-nav-open .sf-nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
#sf-nav::before { content:''; position:fixed; inset:0; background:rgba(4,10,12,.4); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:930; }
#sf-nav.sf-nav-open::before { opacity:1; pointer-events:auto; }
@media (max-width: 900px) {
  .sf-nav-toggle { display:flex; }
  #sf-nav .sf-navlinks { position:fixed; top:0; right:0; bottom:0; width:min(360px,88vw); background:#fff; flex-direction:column; align-items:stretch !important; gap:0; padding:96px 28px 40px; overflow-y:auto; box-shadow:-20px 0 60px rgba(14,22,26,.14); transform:translateX(100%); transition:transform .35s cubic-bezier(.16,1,.3,1); z-index:940; }
  #sf-nav.sf-nav-open .sf-navlinks { transform:translateX(0); }
  .sf-navitem { border-bottom:1px solid #EEF3F3; }
  .sf-navitem > a, .sf-navitem > button { width:100%; justify-content:space-between; padding:16px 2px; font-size:16.5px; }
  .sf-navlinks > a { padding:16px 2px; border-bottom:1px solid #EEF3F3; }
  .sf-megapanel,
  .sf-navitem.sf-open .sf-megapanel { position:static; top:auto; left:auto; opacity:1; pointer-events:auto; transform:none !important; width:auto; max-width:none; box-shadow:none; border:none; border-radius:0; background:transparent; padding:0 0 14px; grid-template-columns:1fr; gap:2px; }
  .sf-megapanel { display:none; }
  .sf-navitem.sf-open .sf-megapanel { display:grid; }
  .sf-megapanel a.sf-megalink { padding:10px 8px; }
  .sf-megapanel a.sf-megalink:hover { background:#F4F7F8; box-shadow:none; transform:none; }
  #sf-nav > .sf-navlinks + div { gap:8px; }
}

/* ---------- Modal system ---------- */
.sf-modal-overlay { position:fixed; inset:0; z-index:2000; background:rgba(8,17,20,.55); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .35s cubic-bezier(.16,1,.3,1); display:flex; align-items:center; justify-content:center; padding:24px; }
.sf-modal-overlay.sf-live { opacity:1; pointer-events:auto; }
.sf-modal { position:relative; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; background:#EAF0F0; border-radius:26px; padding:44px; transform:translateY(28px) scale(.97); opacity:0; transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .35s ease; box-shadow:0 50px 100px rgba(0,0,0,.35); }
.sf-modal-overlay.sf-live .sf-modal { transform:translateY(0) scale(1); opacity:1; }
.sf-modal-close { position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%; border:none; background:#fff; color:#0E161A; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(14,22,26,.1); }
.sf-modal[data-modal-panel="how"] { max-width:640px; background:#082838; color:#fff; }

/* how-it-works animated explainer inside modal */
.sf-how-step { display:none; }
.sf-how-step.sf-active { display:block; animation:sf-fadein .5s cubic-bezier(.16,1,.3,1); }
.sf-how-dots { display:flex; gap:8px; justify-content:center; margin-top:26px; }
.sf-how-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); transition:background .25s ease, transform .25s ease; }
.sf-how-dot.sf-active { background:#EE5B8E; transform:scale(1.3); }
.sf-how-svg path.sf-draw { stroke-dasharray:600; stroke-dashoffset:600; animation:sf-draw 1.4s cubic-bezier(.5,0,.2,1) forwards; }

/* ---------- Services editorial row list ---------- */
.sf-service-row { display:flex; align-items:center; gap:24px; padding:26px 10px; border-bottom:1px solid #E4EBEA; text-decoration:none; color:#0E161A; transition:padding-left .3s cubic-bezier(.23,1,.32,1), background-color .3s ease; }
.sf-service-row:first-child { border-top:1px solid #E4EBEA; }
.sf-service-row:hover { padding-left:22px; background:#fff; }
.sf-service-num { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; color:#B8C6C5; width:26px; flex:none; }
.sf-service-icon { flex:none; width:52px; height:52px; border-radius:15px; background:#E7F2F5; color:#126B94; display:flex; align-items:center; justify-content:center; transition:transform .3s cubic-bezier(.23,1,.32,1), background-color .3s ease, color .3s ease; }
.sf-service-row:hover .sf-service-icon { transform:scale(1.08) rotate(-4deg); background:#126B94; color:#fff; }
.sf-service-text { flex:1; min-width:0; }
.sf-service-title { display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:21px; }
.sf-service-desc { display:block; margin-top:4px; font-size:14.5px; color:#5A6568; }
.sf-service-arrow { flex:none; width:40px; height:40px; border-radius:50%; border:1.5px solid #D0DAD9; display:flex; align-items:center; justify-content:center; font-size:16px; transition:transform .3s cubic-bezier(.23,1,.32,1), background-color .3s ease, border-color .3s ease, color .3s ease; }
.sf-service-row:hover .sf-service-arrow { transform:translateX(4px); background:#0E161A; color:#fff; border-color:#0E161A; }
@media (max-width: 700px) {
  .sf-service-row { gap:14px; }
  .sf-service-num { display:none; }
  .sf-service-title { font-size:17px; }
}

/* ---------- 3D hero composition ---------- */
.sf-hero3d { perspective:1400px; }
.sf-hero3d-stage { position:relative; transform-style:preserve-3d; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.sf-hero3d-layer { position:absolute; transition:transform .25s cubic-bezier(.16,1,.3,1); }

/* ---------- Section rhythm: white canvas + occasional full-bleed dark/image islands ---------- */
.sf-section-divider { border-top:1px solid #EEF3F3; }

/* ---------- Big image/illustration boxes (replaces plain icon rows) ---------- */
.sf-benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sf-sequence { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.sf-sequence::before { content:''; position:absolute; top:27px; left:calc(12.5% + 2px); right:calc(12.5% + 2px); height:2px; background:linear-gradient(90deg,#126B94,#EE5B8E,#126B94,#EE5B8E); z-index:0; opacity:.35; }
.sf-seq-item { position:relative; z-index:1; padding:0 18px 0 0; }
.sf-seq-num { position:relative; z-index:2; width:56px; height:56px; border-radius:50%; background:#fff; border:2px solid #E4EBEA; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; margin-bottom:20px; transition:transform .3s cubic-bezier(.23,1,.32,1), border-color .3s ease; }
.sf-seq-item:hover .sf-seq-num { transform:scale(1.08); }
.sf-seq-time { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:4px 10px; border-radius:100px; margin-bottom:10px; }
@media (max-width:900px) { .sf-sequence { grid-template-columns:1fr 1fr; row-gap:36px; } .sf-sequence::before { display:none; } }
@media (max-width:620px) { .sf-sequence { grid-template-columns:1fr; } }
.sf-benefit-box { position:relative; aspect-ratio:5/4; border-radius:26px; overflow:hidden; text-decoration:none; display:block; color:#fff; isolation:isolate; box-shadow:0 1px 0 rgba(14,22,26,.04); }
.sf-benefit-box .sf-bb-media { position:absolute; inset:0; z-index:0; }
.sf-benefit-box .sf-bb-media img { width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform .7s cubic-bezier(.16,1,.3,1); }
.sf-benefit-box .sf-bb-media.sf-bb-grad { background-size:100% 100%; }
.sf-benefit-box .sf-bb-media.sf-bb-grad svg { position:absolute; right:-10%; bottom:-8%; width:76%; height:auto; opacity:.9; transform:rotate(-6deg) scale(1); transition:transform .7s cubic-bezier(.16,1,.3,1); }
.sf-benefit-box .sf-bb-scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,17,20,0) 30%, rgba(8,17,20,.78) 100%); }
.sf-benefit-box .sf-bb-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; }
.sf-benefit-box .sf-bb-icon { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; margin-bottom:auto; }
.sf-benefit-box .sf-bb-title { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:21px; letter-spacing:-0.3px; }
.sf-benefit-box .sf-bb-desc { margin-top:6px; font-size:14px; line-height:1.5; color:rgba(255,255,255,.78); max-width:88%; }
.sf-benefit-box .sf-bb-arrow { position:absolute; top:22px; right:22px; z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .3s cubic-bezier(.23,1,.32,1), background-color .3s ease; }
.sf-benefit-box:hover .sf-bb-media img { transform:scale(1.14); }
.sf-benefit-box:hover .sf-bb-media.sf-bb-grad svg { transform:rotate(-2deg) scale(1.08); }
.sf-benefit-box:hover .sf-bb-arrow { transform:translate(4px,-4px); background:#fff; color:#0E161A; }
@media (max-width: 900px) { .sf-benefit-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 620px) { .sf-benefit-grid { grid-template-columns:1fr; } }

/* ---------- Trust / feature boxes (replaces checkmark bullet lists) ---------- */
.sf-trust-grid { display:grid; gap:16px; }
.sf-trust-box { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid #E4EBEA; border-radius:18px; padding:22px; transition:transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease, border-color .3s ease; }
.sf-trust-box:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(14,22,26,.08); border-color:#D0DAD9; }
.sf-trust-box .sf-tb-icon { flex:none; width:44px; height:44px; border-radius:12px; background:#E7F2F5; color:#126B94; display:flex; align-items:center; justify-content:center; transition:transform .3s cubic-bezier(.23,1,.32,1); }
.sf-trust-box:hover .sf-tb-icon { transform:scale(1.1) rotate(-4deg); }
.sf-trust-box b { display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; }
.sf-trust-box p { margin-top:4px; font-size:14px; color:#5A6568; line-height:1.5; }
.sf-trust-box--dark { background:rgba(4,10,12,.72); border:1px solid rgba(255,255,255,.14); }
.sf-trust-box--dark:hover { border-color:rgba(255,255,255,.3); box-shadow:0 20px 40px rgba(0,0,0,.4); }
.sf-trust-box--dark .sf-tb-icon { background:rgba(238,91,142,.16); color:#EE5B8E; }
.sf-trust-box--dark b { color:#fff; }
.sf-trust-box--dark p { color:#B9CED2; }

/* ---------- "Before / After" scattered card wall (replaces a plain comparison table) ---------- */
.sf-move-card { position:relative; background:#fff; border:1px solid #E4EBEA; border-radius:24px; padding:32px 28px; transform:rotate(var(--r,0deg)); transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease; box-shadow:0 16px 34px rgba(14,22,26,.05); }
.sf-move-card:hover { transform:rotate(0deg) translateY(-6px); box-shadow:0 30px 60px rgba(14,22,26,.12); border-color:#D0DAD9; z-index:2; }
.sf-move-tag { display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:1.4px; }
.sf-move-old .sf-move-tag { color:#B7C2C3; }
.sf-move-old p { margin-top:9px; font-size:15.5px; color:#9AA6A8; text-decoration:line-through; text-decoration-color:#D7DEDD; text-decoration-thickness:1.5px; line-height:1.55; }
.sf-move-arrow { display:flex; margin:16px 0; }
.sf-move-arrow svg { transform:rotate(var(--ar,0deg)); }
.sf-move-new .sf-move-tag { color:var(--ac,#126B94); }
.sf-move-new p { margin-top:9px; font-size:17px; font-weight:600; color:#0E161A; line-height:1.45; }
.sf-move-stat { background:#082838; border-color:transparent; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.sf-move-stat .sf-move-num { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:56px; letter-spacing:-2px; color:#EE5B8E; line-height:1; }
.sf-move-stat p { margin-top:12px; font-size:16px; color:#CFE4E6; line-height:1.55; }
@media (max-width: 620px) { .sf-move-card { transform:rotate(0deg); } }

/* ---------- HR / Employee split toggle ---------- */
.sf-audience-tabs { position:relative; display:flex; gap:4px; background:#EEF3F3; border-radius:100px; padding:6px; max-width:600px; margin:0 auto; isolation:isolate; }
.sf-audience-thumb { position:absolute; top:6px; bottom:6px; left:6px; width:calc((100% - 12px)/3); border-radius:100px; background:#33AAE1; z-index:0; box-shadow:0 10px 26px rgba(51,170,225,.35); transition:transform .5s cubic-bezier(.65,0,.35,1), background-color .4s ease, box-shadow .4s ease; }
.sf-audience-tab { position:relative; z-index:1; flex:1; border:none; cursor:pointer; font-family:'Inter',system-ui,sans-serif; padding:13px 16px; border-radius:100px; background:transparent; display:flex; align-items:center; justify-content:center; gap:9px; transition:color .3s ease; }
.sf-audience-tab .sf-at-icon { flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#7C8A8B; transition:color .3s ease, transform .4s cubic-bezier(.23,1,.32,1); }
.sf-audience-tab .sf-at-label { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; color:#5A6568; transition:color .3s ease; white-space:nowrap; }
.sf-audience-tab .sf-at-sub { display:none; }
.sf-audience-tab.sf-active .sf-at-icon { color:#fff; transform:scale(1.12) rotate(-6deg); }
.sf-audience-tab.sf-active .sf-at-label { color:#fff; }
@media (max-width: 620px) { .sf-audience-tabs { max-width:100%; } .sf-audience-tab { padding:12px 8px; gap:6px; } .sf-audience-tab .sf-at-label { font-size:12px; } }
@media (max-width: 460px) { .sf-audience-tab .sf-at-label { display:none; } .sf-audience-tab .sf-at-icon { width:20px; height:20px; } }

/* ---------- Step cards: icon flip on hover ---------- */
.sf-flip-card { background:#0F1F24; border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:34px; transition:transform .3s cubic-bezier(.23,1,.32,1), background-color .3s ease, border-color .3s ease; }
.sf-flip-card:hover { transform:translateY(-6px); background:#122A30; border-color:rgba(238,91,142,.3); }
.sf-flip-icon-wrap { width:56px; height:56px; perspective:800px; margin:22px 0 20px; }
.sf-flip-icon-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.23,1,.32,1); }
.sf-flip-card:hover .sf-flip-icon-inner { transform:rotateY(180deg); }
.sf-flip-icon-face { position:absolute; inset:0; backface-visibility:hidden; border-radius:15px; display:flex; align-items:center; justify-content:center; }
.sf-flip-icon-face.sf-face-front { background:rgba(238,91,142,.14); color:#EE5B8E; }
.sf-flip-icon-face.sf-face-back { background:#EE5B8E; color:#0E161A; transform:rotateY(180deg); }

/* ---------- Integration trust strip (highlighted, not plain checkmarks) ---------- */
.sf-trust-strip { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.sf-trust-chip { display:inline-flex; align-items:center; gap:12px; background:#082838; color:#fff; border-radius:16px; padding:16px 22px; box-shadow:0 16px 34px rgba(8,40,56,.16); }
.sf-trust-chip .sf-tc-icon { flex:none; width:36px; height:36px; border-radius:10px; background:rgba(238,91,142,.16); color:#EE5B8E; display:flex; align-items:center; justify-content:center; }
.sf-trust-chip span.sf-tc-text { font-size:14.5px; font-weight:600; }

/* ---------- Certification badges (prominent) ---------- */
.sf-cert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sf-cert-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:32px 26px; text-align:center; transition:transform .3s cubic-bezier(.23,1,.32,1), background-color .3s ease, border-color .3s ease; }
.sf-cert-card:hover { transform:translateY(-6px); background:rgba(255,255,255,.08); border-color:rgba(238,91,142,.35); }
.sf-cert-card .sf-cc-icon { width:88px; height:88px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.sf-cert-card .sf-cc-icon img { width:100%; height:100%; object-fit:contain; }
.sf-cert-card .sf-cc-name { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; color:#fff; }
.sf-cert-card .sf-cc-desc { margin-top:8px; font-size:13.5px; color:#9DB8BC; line-height:1.5; }

/* ---------- Apple-style pinned/scroll sections ---------- */
.sf-pin-section { position:relative; }
.sf-pin-media { position:sticky; top:0; height:100vh; width:100%; overflow:hidden; }
.sf-pin-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sf-pin-media .sf-pin-scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,10,12,.35) 0%, rgba(4,10,12,.15) 40%, rgba(4,10,12,.65) 100%); }
.sf-pin-copy { position:relative; z-index:2; height:100vh; display:flex; flex-direction:column; justify-content:center; padding:0 8vw; color:#fff; }
.sf-spec-details { overflow:hidden; }
@media (max-width: 900px) {
  /* The pin/stick illusion assumes the copy (heading + description + detail
     cards) fits within one viewport height. On narrow screens the detail
     grid stacks to 1 column and gets much taller, so it would overflow a
     fixed 100vh box and clip off-screen. Drop the sticky pin below tablet
     width and let the section flow normally instead. */
  .sf-pin-section { height:auto !important; }
  .sf-pin-media { position:relative; height:auto; min-height:100vh; }
  .sf-pin-copy { height:auto; padding-top:120px; padding-bottom:56px; }
}

/* ---------- Minimal footer ---------- */
.sf-footer-min { background:#082838; color:#B9CED2; padding:64px 40px 30px; }
.sf-footer-min .sf-fm-wrap { max-width:1200px; margin:0 auto; }
.sf-footer-min .sf-fm-top { display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:34px; }
.sf-footer-min .sf-fm-links { display:flex; gap:28px; flex-wrap:wrap; font-size:14.5px; }
.sf-footer-min .sf-fm-links a { color:#CFE4E6; text-decoration:none; font-weight:500; }
.sf-footer-min .sf-fm-links a:hover { color:#fff; }
.sf-footer-min .sf-fm-social { display:flex; gap:10px; }
.sf-footer-min .sf-fm-social a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; transition:background-color .25s ease, transform .25s ease; }
.sf-footer-min .sf-fm-social a:hover { background:#EE5B8E; color:#082838; transform:translateY(-2px); }
.sf-footer-min .sf-fm-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:#6E888B; }
.sf-footer-min .sf-fm-legal { display:flex; gap:20px; flex-wrap:wrap; }
.sf-footer-min .sf-fm-legal a { color:#6E888B; text-decoration:none; }
.sf-footer-min .sf-fm-legal a:hover { color:#CFE4E6; }
@media (max-width: 700px) { .sf-footer-min .sf-fm-bottom { flex-direction:column; align-items:flex-start; } }