:root{ --accent-a:#2E6BFF; --navy:#0F2747; --bg:#F4F7FB; --surface:#FFFFFF; --surface-soft:#F8FAFD; --text:#10233E; --muted:#5D6B7E; }
*{box-sizing:border-box;}
#how-it-works,#passport,#security,#workflow,#no-lock-in{scroll-margin-top:86px;}
body{margin:0;background:var(--bg,#F4F7FB);}

@keyframes scRing{0%{transform:scale(.34);opacity:0;}14%{opacity:.5;}100%{transform:scale(1.55);opacity:0;}}
@keyframes scScan{0%{top:6%;opacity:0;}12%{opacity:.95;}88%{opacity:.95;}100%{top:92%;opacity:0;}}
@keyframes scFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes scPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,107,255,.22);}70%,100%{box-shadow:0 0 0 7px rgba(15,39,71,0);}}
@keyframes scSeal{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}
@keyframes scSpin{to{transform:rotate(360deg);}}
@keyframes scBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes scReveal{from{transform:translateY(24px);}to{transform:translateY(0);}}

/* hover states (converted from the design's style-hover directives) */
.sc-navlink{cursor:pointer;transition:color .18s ease;}
.sc-navlink:hover{color:#FFFFFF;}
.sc-btn-nav{transition:transform .18s ease,box-shadow .18s ease;}
.sc-btn-nav:hover{transform:translateY(-1px);box-shadow:0 0 38px rgba(46,107,255,.5);}
.sc-btn-primary{transition:transform .18s ease,box-shadow .18s ease;}
.sc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(46,107,255,.55);}
.sc-btn-secondary{transition:border-color .18s ease,background .18s ease;}
.sc-btn-secondary:hover{border-color:rgba(46,107,255,.6);background:rgba(46,107,255,.08);}
.sc-card{transition:transform .2s ease,border-color .2s ease;border:1px solid rgba(15,39,71,.08);border-radius:16px;background:linear-gradient(180deg,rgba(15,39,71,.026),rgba(15,39,71,.004));}
.sc-card:hover{transform:translateY(-4px);border-color:rgba(46,107,255,.38);}
.sc-btn-cta{transition:transform .18s ease,box-shadow .18s ease;}
.sc-btn-cta:hover{transform:translateY(-2px);box-shadow:0 0 52px rgba(46,107,255,.6);}

/* responsive — stack the two/three-column grids on smaller screens */
@media (max-width:1060px){
  .sc-process{grid-template-columns:repeat(2,1fr)!important;}
}
@media (max-width:860px){
  .sc-hero{grid-template-columns:1fr!important;}
  .sc-hero-visual{order:-1;max-width:360px;margin:0 auto;}
  .sc-steps{grid-template-columns:1fr!important;}
  .sc-dpp{grid-template-columns:1fr!important;}
  .sc-process{grid-template-columns:1fr!important;}
  .sc-split{grid-template-columns:1fr!important;}
}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{animation:none!important;}
  .sc-ring,.sc-scan,.sc-float,.sc-pulse,.sc-blink{animation:none!important;}
}

.sc-card--pad26{padding:26px;}
.sc-card--pad28{padding:28px;}
.sc-card--pad22x26{padding:22px 26px;}
.sc-panel{border:1px solid rgba(46,107,255,.22);border-radius:18px;background:#FFFFFF;box-shadow:0 32px 84px rgba(0,0,0,.5);overflow:hidden;position:relative;}
.sc-panel-header{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid rgba(15,39,71,.07);background:rgba(15,39,71,.015);}
.sc-spec-list{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(15,39,71,.08);}
.sc-spec-row{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid rgba(15,39,71,.08);}
.sc-spec-row--wrap{padding:17px 0;flex-wrap:wrap;}
.sc-status-chip{margin-top:16px;padding:13px 15px;border:1px solid rgba(46,107,255,.3);border-radius:10px;background:rgba(46,107,255,.06);display:flex;align-items:center;gap:10px;color:var(--accent-a,#2E6BFF);}
.sc-note{padding:18px 22px;border-left:2px solid var(--accent-a,#2E6BFF);background:rgba(46,107,255,.05);border-radius:0 12px 12px 0;}