/* Premium experience layer — loaded after the base theme. */
:root {
  --st-ink: #07130d;
  --st-green: #087f45;
  --st-mint: #32d583;
  --st-gold: #f2bd52;
  --st-glass: rgba(255, 255, 255, .1);
}

::selection { background: rgba(50, 213, 131, .3); }
:focus-visible { outline: 3px solid var(--st-gold); outline-offset: 4px; border-radius: 6px; }
.skip-link { position: fixed; left: 18px; top: -80px; z-index: 9999; background: #fff; color: #07130d; padding: 12px 18px; border-radius: 12px; font-weight: 700; box-shadow: 0 12px 30px rgba(0,0,0,.2); transition: top .2s ease; }
.skip-link:focus { top: 18px; }

.navbar { background: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.48); }
[data-theme=dark] .navbar { background: rgba(8,16,12,.82); border-bottom-color: rgba(255,255,255,.08); }
.brand-ico { box-shadow: 0 8px 20px rgba(0,108,53,.25); position: relative; isolation: isolate; }
.brand-ico::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(50,213,131,.35); border-radius: 14px; z-index: -1; animation: logo-pulse 3s ease-in-out infinite; }

.hero-premium { min-height: 780px; height: min(940px, 100svh); padding-top: var(--nh); background: #071b11; justify-content: stretch; }
.hero-premium .hero-vid { opacity: .17; transform: scale(1.04); }
.hero-premium .hero-ov { background: linear-gradient(110deg, rgba(3,17,10,.98) 0%, rgba(5,37,22,.94) 46%, rgba(7,25,42,.9) 100%); }
.hero-premium::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 68px 68px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%); mask-image: linear-gradient(to bottom, #000, transparent 92%); }
.hero-orb { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; filter: blur(1px); }
.hero-orb-a { width: 520px; height: 520px; right: 4%; top: 8%; background: radial-gradient(circle, rgba(50,213,131,.17), transparent 68%); animation: orb-drift-a 9s ease-in-out infinite; }
.hero-orb-b { width: 380px; height: 380px; left: -10%; bottom: -8%; background: radial-gradient(circle, rgba(242,189,82,.13), transparent 67%); animation: orb-drift-b 11s ease-in-out infinite; }
.hero-shell { width: min(1240px, calc(100% - 40px)); max-width: none; margin: 0 auto; padding: 58px 0 76px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(450px, .78fr); gap: clamp(44px, 7vw, 96px); align-items: center; text-align: left; }
.hero-copy { max-width: 670px; }
.hero-premium .hero-badge { margin: 0 0 24px; padding: 8px 14px; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.07); font-size: .75rem; animation: hero-rise .75s both; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-mint); box-shadow: 0 0 0 6px rgba(50,213,131,.12), 0 0 18px rgba(50,213,131,.8); animation: status-pulse 2s infinite; }
.hero-premium .hero-title { margin-bottom: 24px; font-size: clamp(3rem, 5.2vw, 5.35rem); line-height: .99; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 15px 50px rgba(0,0,0,.35); animation: hero-rise .85s .12s both; }
.hero-premium .hero-title .hl { display: inline-block; padding-bottom: .09em; background: linear-gradient(90deg, #fff3c9, var(--st-gold) 48%, #fff0bb); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; animation: gold-shimmer 5s linear infinite; }
.hero-premium .hero-sub { max-width: 610px; margin: 0 0 30px; color: rgba(255,255,255,.72); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.75; animation: hero-rise .85s .22s both; }
.hero-premium .hero-btns { justify-content: flex-start; animation: hero-rise .85s .32s both; }
.hero-premium .btn { min-height: 54px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 26px; color: rgba(255,255,255,.64); font-size: .78rem; animation: hero-rise .85s .42s both; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust i { color: var(--st-mint); }

.hero-console { position: relative; color: #eaf6ef; border: 1px solid rgba(255,255,255,.14); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)); box-shadow: 0 42px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); transform-style: preserve-3d; animation: console-in 1s .28s cubic-bezier(.2,.8,.2,1) both, console-float 7s 1.3s ease-in-out infinite; }
.hero-console::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(550px circle at var(--mx, 70%) var(--my, 10%), rgba(50,213,131,.18), transparent 44%); }
.console-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 19px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.console-brand { display: flex; align-items: center; gap: 11px; font-size: .85rem; font-weight: 700; }
.console-brand > span:last-child { display: flex; flex-direction: column; }
.console-brand small { color: rgba(255,255,255,.42); font-size: .64rem; font-weight: 500; }
.console-logo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #062214; background: linear-gradient(135deg, #7bf1af, var(--st-mint)); box-shadow: 0 8px 22px rgba(50,213,131,.28); }
.console-live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid rgba(50,213,131,.2); border-radius: 999px; background: rgba(50,213,131,.08); color: #a8f2c7; font-size: .63rem; font-weight: 700; }
.console-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--st-mint); box-shadow: 0 0 10px var(--st-mint); }
.console-main { position: relative; padding: 25px 24px 27px; }
.console-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.console-kicker { color: rgba(255,255,255,.42); font-size: .62rem; letter-spacing: .15em; font-weight: 700; }
.console-title-row h2 { margin-top: 4px; font-size: 1.28rem; line-height: 1.2; }
.progress-score { color: var(--st-mint); font-weight: 800; font-size: 1.12rem; }
.console-progress { height: 7px; margin: 18px 0 25px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.console-progress span { display: block; width: 75%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--st-green), var(--st-mint)); box-shadow: 0 0 15px rgba(50,213,131,.55); animation: progress-load 1.8s .8s cubic-bezier(.2,.8,.2,1) both; }
.console-steps { display: grid; gap: 8px; }
.console-step { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; padding: 10px; border-radius: 13px; color: rgba(255,255,255,.44); transition: .4s ease; }
.console-step > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); font-size: .75rem; }
.console-step div { display: flex; flex-direction: column; }
.console-step strong { color: rgba(255,255,255,.75); font-size: .77rem; }
.console-step small, .console-step time { font-size: .61rem; }
.console-step time { font-style: normal; }
.console-step.is-done > span { color: var(--st-mint); background: rgba(50,213,131,.1); border-color: rgba(50,213,131,.18); }
.console-step.is-active { color: #ffe6a9; background: rgba(242,189,82,.08); border: 1px solid rgba(242,189,82,.14); }
.console-step.is-active strong { color: #fff1cd; }
.console-step.is-active > span { color: var(--st-gold); border-color: rgba(242,189,82,.22); background: rgba(242,189,82,.1); animation: active-step 2s ease-in-out infinite; }
.console-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(9,29,19,.82); box-shadow: 0 18px 45px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .75rem; font-weight: 700; }
.console-float i { color: var(--st-gold); font-size: 1.05rem; }
.console-float span { display: flex; flex-direction: column; }
.console-float small { color: rgba(255,255,255,.46); font-size: .58rem; font-weight: 500; }
.console-float-a { left: -45px; top: 15%; animation: tiny-float 5s ease-in-out infinite; }
.console-float-b { right: -36px; bottom: 10%; animation: tiny-float 6s .7s ease-in-out infinite reverse; }
.hero-premium .hero-scroll { z-index: 5; }

.process-section { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cb2), var(--cb)); }
.process-section::before { content: ""; position: absolute; width: 520px; height: 520px; right: -260px; top: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(0,108,53,.1), transparent 67%); }
.process-layout { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); gap: clamp(45px,8vw,110px); align-items: start; }
.process-copy { position: sticky; top: 130px; }
.process-copy .sh-title, .process-copy .sh-sub { text-align: left; margin-left: 0; }
.process-copy .sh-title { margin: 14px 0 18px; }
.process-copy .sh-sub { margin-bottom: 28px; }
.process-rail { position: relative; display: grid; gap: 18px; }
.process-rail::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(var(--st-green), var(--st-mint), rgba(50,213,131,.08)); }
.process-item { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: center; padding: 25px; border: 1px solid var(--cbr); border-radius: 22px; background: color-mix(in srgb, var(--cc) 90%, transparent); box-shadow: var(--ssm); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.process-item:hover { transform: translateX(8px); border-color: rgba(0,108,53,.34); box-shadow: var(--smd); }
.process-item > span { z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg, var(--cp), var(--cpl)); color: #fff; font-weight: 800; box-shadow: 0 10px 25px rgba(0,108,53,.25); }
.process-item > div { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; }
.process-item i { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--cpa); color: var(--cp); }
.process-item h3 { font-size: 1rem; }
.process-item p { margin-top: 3px; color: var(--ct2); font-size: .84rem; line-height: 1.65; }

.srv-card, .visa-card, .stat-card, .news-card, .headline-card { --card-x: 50%; --card-y: 50%; }
.srv-card::after, .stat-card::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(380px circle at var(--card-x) var(--card-y), rgba(50,213,131,.12), transparent 46%); transition: opacity .3s; }
.srv-card:hover::after, .stat-card:hover::before { opacity: 1; }

@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes console-in { from { opacity: 0; transform: perspective(1000px) rotateY(-8deg) translate(35px,30px); } to { opacity: 1; transform: perspective(1000px) rotateY(0) translate(0); } }
@keyframes console-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes tiny-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes progress-load { from { width: 0; } to { width: 75%; } }
@keyframes active-step { 0%,100% { box-shadow: 0 0 0 0 rgba(242,189,82,.15); } 50% { box-shadow: 0 0 0 7px rgba(242,189,82,0); } }
@keyframes status-pulse { 50% { opacity: .55; } }
@keyframes gold-shimmer { to { background-position: -200% center; } }
@keyframes orb-drift-a { 50% { transform: translate(-30px,35px) scale(1.08); } }
@keyframes orb-drift-b { 50% { transform: translate(45px,-25px) scale(.94); } }
@keyframes logo-pulse { 50% { transform: scale(1.08); opacity: .45; } }

@media (max-width: 1050px) {
  .hero-premium { height: auto; min-height: 920px; }
  .hero-shell { grid-template-columns: 1fr; max-width: 760px; gap: 55px; padding-top: 100px; text-align: center; }
  .hero-copy { max-width: 720px; }
  .hero-premium .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-premium .hero-btns, .hero-trust { justify-content: center; }
  .hero-console { max-width: 590px; width: calc(100% - 60px); margin: 0 auto 70px; text-align: left; }
  .hero-premium .hero-scroll { display: none; }
}

@media (max-width: 760px) {
  .hero-premium { min-height: auto; }
  .hero-shell { width: min(100% - 30px, 680px); padding: 86px 0 70px; gap: 42px; }
  .hero-premium .hero-title { font-size: clamp(2.65rem, 13vw, 4rem); }
  .hero-premium .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-premium .btn { justify-content: center; }
  .hero-console { width: 100%; }
  .console-float { display: none; }
  .process-layout { grid-template-columns: 1fr; }
  .process-copy { position: static; text-align: center; }
  .process-copy .sh-title, .process-copy .sh-sub { text-align: center; margin-left: auto; margin-right: auto; }
  .process-item { padding: 18px; grid-template-columns: 48px 1fr; gap: 14px; }
  .process-item > span { width: 48px; height: 48px; border-radius: 15px; }
  .process-rail::before { left: 23px; }
}

@media (max-width: 480px) {
  .hero-trust { display: grid; grid-template-columns: 1fr 1fr; text-align: left; }
  .console-main { padding: 20px 16px; }
  .console-top { padding: 15px; }
  .console-live { display: none; }
  .console-step { grid-template-columns: 34px 1fr; }
  .console-step time { display: none; }
  .process-item > div { grid-template-columns: 1fr; }
  .process-item i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-console, .hero-orb, .console-float, .status-dot, .brand-ico::after, .hero-premium .hero-title .hl { animation: none !important; }
  .console-progress span { animation: none !important; width: 75%; }
}