/* ==========================================================================
   Modern layer (v1.8): aurora backdrop, spotlight cards, sliding menu indicator,
   hero radar, animated charts, glass surfaces. All motion respects reduced-motion.
   ========================================================================== */

/* ---- Aurora backdrop ---- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.34}
.aurora i:nth-child(1){left:-10vmax;top:-12vmax;background:radial-gradient(circle,#37D3B5,transparent 65%)}
.aurora i:nth-child(2){right:-14vmax;top:12vh;background:radial-gradient(circle,#4D8FE0,transparent 65%);opacity:.26}
.aurora i:nth-child(3){left:30vw;bottom:-22vmax;background:radial-gradient(circle,#F2B134,transparent 65%);opacity:.16}
@media (prefers-reduced-motion:no-preference){
  .aurora i:nth-child(1){animation:drift1 26s ease-in-out infinite alternate}
  .aurora i:nth-child(2){animation:drift2 32s ease-in-out infinite alternate}
  .aurora i:nth-child(3){animation:drift3 38s ease-in-out infinite alternate}
}
@keyframes drift1{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-20vw,18vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-18vw,-12vh) scale(1.2)}}
#app{position:relative;z-index:1}
[data-theme="dark"] .aurora i{opacity:.16}

/* ---- Glass + spotlight surfaces ---- */
.topbar{backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);background:rgba(255,255,255,.78)}
[data-theme="dark"] .topbar{background:rgba(18,35,58,.78)}
.panel,.stat-card{background-clip:padding-box}
.panel.spot,.stat-card.spot,.service-item.spot,.service-card.spot{background-image:radial-gradient(280px circle at var(--mx) var(--my),rgba(45,184,154,.11),transparent 62%)}
.stat-card:hover{border-color:rgba(45,184,154,.55);box-shadow:0 0 0 1px rgba(45,184,154,.3),0 18px 38px -18px rgba(14,116,116,.5)}
.panel{transition:box-shadow .35s,border-color .35s}
.panel:hover{box-shadow:0 18px 40px -26px rgba(18,63,120,.4)}

/* ---- Sliding menu indicator ---- */
.nav-slide{position:absolute;left:0;top:0;border-radius:var(--r-md,10px);background:linear-gradient(95deg,var(--action) 0%,#08806D 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px rgba(0,20,40,.35);pointer-events:none;opacity:0;transition:transform .55s cubic-bezier(.3,1.25,.4,1),height .3s,width .3s,opacity .3s}
.sidebar nav .nav-link{position:relative;z-index:1}
.sidebar nav .nav-link[aria-current="page"]{background:transparent;box-shadow:none}

/* ---- Logo shimmer ---- */
.sidebar-brand a{position:relative;display:inline-block;overflow:hidden;border-radius:8px}
.sidebar-brand a::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);transform:translateX(-120%)}
@media (prefers-reduced-motion:no-preference){.sidebar-brand a::after{animation:shimmer 7s ease-in-out 2s infinite}}
@keyframes shimmer{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ---- Buttons: light sweep ---- */
.btn-primary::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none}
.btn-primary:hover::before{transform:translateX(130%);transition:transform .8s ease}

/* ---- Top bar details ---- */
#bell:has(.count-badge:not([hidden])) > .icon{transform-origin:50% 0}
@media (prefers-reduced-motion:no-preference){
  #bell:has(.count-badge:not([hidden])) > .icon{animation:bellRing 6s ease-in-out 2s infinite}
  .status-dot{animation:beaconDot 2.4s ease-out infinite}
  .count-badge:not([hidden]){animation:badgePop .6s cubic-bezier(.3,1.8,.5,1) both}
}
@keyframes bellRing{0%,86%,100%{transform:none}89%{transform:rotate(16deg)}92%{transform:rotate(-14deg)}95%{transform:rotate(9deg)}98%{transform:rotate(-4deg)}}
@keyframes beaconDot{0%{box-shadow:0 0 0 0 rgba(224,161,0,.55)}70%,100%{box-shadow:0 0 0 8px rgba(224,161,0,0)}}
@keyframes badgePop{from{transform:scale(0)}}

/* ---- Route progress bar ---- */
.route-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:250;pointer-events:none}
.route-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--teal),var(--mint),#F2B134);transform-origin:left;transform:scaleX(0);opacity:0}
.route-bar.go i{animation:routeGo .7s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes routeGo{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(.85);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ---- Animated charts ---- */
.spark-line{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .page-host.enter tbody tr{animation:rowIn .5s ease both}
  .page-host.enter tbody tr:nth-child(1){animation-delay:.05s}.page-host.enter tbody tr:nth-child(2){animation-delay:.1s}.page-host.enter tbody tr:nth-child(3){animation-delay:.15s}.page-host.enter tbody tr:nth-child(4){animation-delay:.2s}.page-host.enter tbody tr:nth-child(5){animation-delay:.25s}.page-host.enter tbody tr:nth-child(n+6){animation-delay:.3s}
}
@keyframes sparkDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadeUp{from{opacity:0}to{opacity:1}}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}}

/* ---- Icons redraw themselves, stroke by stroke, whenever you point at them ---- */
@media (prefers-reduced-motion:no-preference){
  svg.icon.hv :is(path,circle,line,polyline,polygon,rect,ellipse){stroke-dasharray:1;stroke-dashoffset:1;animation:hoverDraw .85s cubic-bezier(.5,0,.2,1) forwards;animation-delay:calc(var(--k,0) * 90ms)}
}
@keyframes hoverDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---- Refined trend charts ---- */
.spark{height:42px;margin-top:10px;overflow:visible;color:var(--teal);display:block}
.spark-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 3px 4px color-mix(in srgb,currentColor 40%,transparent))}
.spark-area{stroke:none}
.spark-guide{stroke:currentColor;stroke-opacity:.12;stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.spark-dot{fill:#fff;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke}
.spark-halo{fill:currentColor;opacity:.25;transform-box:fill-box;transform-origin:center}
.spark-pt rect{fill:transparent}
.spark-pt circle{fill:#fff;stroke:currentColor;stroke-width:2;opacity:0;vector-effect:non-scaling-stroke;transition:opacity .15s}
.spark-pt:hover circle{opacity:1}
.spark-pt:hover ~ .spark-dot{opacity:.4}
@media (prefers-reduced-motion:no-preference){.spark-halo{animation:haloPulse 2.4s ease-out infinite}}
@keyframes haloPulse{0%{transform:scale(.8);opacity:.5}100%{transform:scale(3);opacity:0}}
.stat-card:nth-child(1) .spark{color:#0E9E83}.stat-card:nth-child(2) .spark{color:#3B82D6}.stat-card:nth-child(3) .spark{color:#E0A100}.stat-card:nth-child(4) .spark{color:#D6455A}
[data-theme="dark"] .spark-dot,[data-theme="dark"] .spark-pt circle{fill:#12233A}

/* ---- Hero: keep the pin clear of the text ---- */
@media (min-width:761px){
  .hero-photo .hero-copy{max-width:420px}
  .hero.hero-photo p.lead{max-width:400px}
  .hero-photo .hero-pin{right:3.5%;width:clamp(96px,9vw,128px)}
}

/* ---- Client accounts: password window + countdown clock ---- */
.pw-window{display:flex;align-items:center;gap:18px;padding:16px 20px;margin:0 0 18px;border-radius:16px;background:linear-gradient(135deg,var(--surface,#fff),rgba(14,158,131,.08));border:1px solid rgba(14,158,131,.35);box-shadow:0 8px 28px -14px rgba(11,31,58,.25)}
.pw-window.is-over{border-color:rgba(214,69,90,.4);background:rgba(214,69,90,.06);color:#B3263D}
.pw-window-txt{flex:1;display:grid;gap:3px;min-width:0}.pw-window-txt span{color:var(--muted,#5B6B7D);font-size:.92rem}
.clock{position:relative;width:76px;height:76px;flex:none;display:grid;place-items:center}
.clock svg{position:absolute;inset:0;width:100%;height:100%}
.clock-track{fill:none;stroke:rgba(11,31,58,.1);stroke-width:5}
.clock-arc{fill:none;stroke:#0E9E83;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .4s}
.clock.is-low .clock-arc{stroke:#D6455A}.clock.is-low .clock-txt b{color:#D6455A}
.clock-txt{text-align:center;line-height:1.05}.clock-txt b{display:block;font:700 .82rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:var(--ink,#0B1F3A)}
.clock-txt small{display:none}
.pw-window .clock{width:84px;height:84px}
.cred{display:grid;gap:10px;margin:14px 0}.cred>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(11,31,58,.05)}
.cred dt{color:var(--muted,#5B6B7D)}.cred dd{margin:0;text-align:right;word-break:break-all}
.cred-pw{font-size:1.15rem;font-weight:700;letter-spacing:.04em}
@media (max-width:640px){.pw-window{flex-wrap:wrap}.pw-window .btn{width:100%;justify-content:center}}
.pw-window .clock{width:96px;height:96px}.pw-window .clock-txt b{font-size:.8rem;letter-spacing:-.02em}

/* sparkline first-view draw */
.spark.pre .spark-line{stroke-dashoffset:1}.spark.pre .spark-area,.spark.pre .spark-dot,.spark.pre .spark-halo,.spark.pre .spark-guide{opacity:0}
.spark.pre.go .spark-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1)}
.spark.pre.go .spark-area{opacity:1;transition:opacity 1.2s ease .9s}
.spark.pre.go .spark-guide{opacity:1;transition:opacity .8s ease}
.spark.pre.go .spark-dot{opacity:1;transition:opacity .4s ease 1.7s}
.spark.pre.go .spark-halo{opacity:.25;transition:opacity .4s ease 1.7s}


/* hero: bubbles stay low and fade fast; lined wave removed */
.scene-hero .sc-waves{display:none}
@keyframes rise-p{0%{transform:translate(0,0);opacity:0}15%{opacity:.8}40%{opacity:0}100%{transform:translate(var(--x),-40px);opacity:0}}
.hero-parts i{animation-duration:calc(var(--d) * .35)!important}

/* hero: fewer bubbles; pin and plots nudged right, then up (design unchanged) */
.hero-parts i:not(:nth-child(3n+1)){display:none}
@media (min-width:761px){
  .hero-photo .hero-pin{right:3.5%;top:41%}
  .hero-photo .scene-hero .sc-map{right:0;bottom:6%}
}

/* ---- Client portal: welcome hero, richer panels ---- */
.portal-hero{position:relative;overflow:hidden;isolation:isolate;margin:0 0 18px;padding:34px 36px;border-radius:var(--r-xl,20px);color:#fff;min-height:250px;
  background:linear-gradient(110deg,#082B50 0%,#0A3965 45%,#0B5678 78%,#0F7F78 100%);box-shadow:0 14px 34px -14px rgba(8,43,80,.45)}
.portal-hero .hero-bg,.portal-hero .hero-grid,.portal-hero .hero-parts,.portal-hero .hero-waves{position:absolute}
.portal-hero .hero-bg{inset:0;opacity:.18;background:radial-gradient(circle at 80% 20%,#37D3B5,transparent 55%)}
.portal-hero .hero-grid{inset:0;z-index:0;opacity:.35}.portal-hero .hero-parts{inset:0;z-index:0}.portal-hero .hero-waves{z-index:0}
.ph-copy{position:relative;z-index:2;max-width:560px}
.ph-copy h1{margin:6px 0 8px;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;color:#fff}
.ph-copy .hl{color:#37D3B5}
.ph-copy .lead{margin:0 0 16px;color:rgba(255,255,255,.82);max-width:480px}
.ph-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ph-chips li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:.86rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.ph-pin{position:absolute;z-index:1;right:6%;top:50%;width:clamp(84px,9vw,120px);transform:translateY(-50%);filter:drop-shadow(0 10px 14px rgba(6,39,70,.4));pointer-events:none}
.ph-pin svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:640px){.portal-hero{padding:24px 20px}.ph-pin{display:none}}
.portal-grid .panel{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.portal-grid .panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#37D3B5,#3B82D6);opacity:.85}
.portal-grid .panel:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(11,31,58,.4)}
.portal-grid .panel h2,.portal-grid .panel .panel-title{letter-spacing:.01em}

/* ---- Countdown clock: alive ---- */
.clock{width:104px!important;height:104px!important}
.clock-glow{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,rgba(55,211,181,.28),transparent 70%);animation:clkBreathe 2.4s ease-in-out infinite}
.clock-ticks{fill:none;stroke:rgba(11,31,58,.28);stroke-width:3;stroke-dasharray:.12 .88;transform:rotate(-90deg);transform-origin:50% 50%}
.clock-track{fill:none;stroke:rgba(11,31,58,.08);stroke-width:6}
.clock-arc{stroke:url(#clk-g)!important;stroke-width:6!important;filter:drop-shadow(0 0 5px rgba(55,211,181,.7))}
.clock.is-low .clock-arc{stroke:#D6455A!important;filter:drop-shadow(0 0 6px rgba(214,69,90,.7))}
.clock.is-low .clock-glow{background:radial-gradient(circle,rgba(214,69,90,.3),transparent 70%);animation-duration:.9s}
.clock-sweep{transform-origin:50px 50px;animation:clkSweep 60s linear infinite}
.clock-sweep line{stroke:#37D3B5;stroke-width:1.6;stroke-linecap:round;opacity:.7}.clock-sweep circle{fill:#fff;stroke:#37D3B5;stroke-width:2}
.clock.is-low .clock-sweep line,.clock.is-low .clock-sweep circle{stroke:#D6455A}
.clock-hub{fill:#37D3B5}
.clock-txt{position:relative;z-index:1;margin-top:18px}.clock-txt b{font-size:.84rem!important}
.clock-txt small{display:block!important;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#5B6B7D);margin-top:2px}
.clock-txt b{animation:clkTick 1s steps(1) infinite}
@keyframes clkSweep{to{transform:rotate(360deg)}}
@keyframes clkBreathe{50%{transform:scale(1.12);opacity:.6}}
@keyframes clkTick{0%{opacity:1}50%{opacity:.92}}
.pw-window{border:1px solid rgba(55,211,181,.4);background:linear-gradient(120deg,rgba(55,211,181,.1),rgba(59,130,214,.08))}
@media (prefers-reduced-motion:reduce){.clock-sweep,.clock-glow,.clock-txt b{animation:none}}

/* ---- Portal hero: client constellation ---- */
.ph-scene{position:absolute;z-index:1;right:2.5%;top:50%;width:min(34%,330px);transform:translateY(-50%);pointer-events:none}
.client-scene{display:block;width:100%;height:auto;overflow:visible}
.cs-ring{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:3 6}
.cs-star{fill:#fff;opacity:.5}
.cs-link{fill:none;stroke:rgba(127,230,208,.55);stroke-width:1.4;stroke-dasharray:4 5}
.cs-pulse{fill:#fff;filter:drop-shadow(0 0 5px #37D3B5)}
.cs-nring{fill:rgba(55,211,181,.14);stroke:rgba(127,230,208,.5);stroke-width:1}
.cs-nbody{fill:#0B3563;stroke:#7FE6D0;stroke-width:1.6}
.cs-node{color:#BFF5EA}.cs-node svg{stroke:currentColor;fill:none}
.cs-lbl{fill:rgba(255,255,255,.8);font:600 9px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.cs-init{fill:#fff;font:800 22px Inter,system-ui,sans-serif}
.cs-ripple{fill:none;stroke:#7FE6D0;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.cs-stamp rect{fill:#fff}.cs-stamp{color:#0E9E83;opacity:0;transform-box:fill-box}.cs-stamp svg{stroke:#0E9E83;fill:none}.cs-st{fill:#0B3563;font:700 10px Inter,system-ui,sans-serif}
.cs-spin{transform-origin:180px 110px}
@media (prefers-reduced-motion:no-preference){
  .cs-spin{animation:csSpin 14s linear infinite}.cs-spin.rev{animation-duration:22s;animation-direction:reverse}
  .cs-orbits{transform-origin:180px 110px;animation:csSpin 90s linear infinite reverse}
  .cs-link{animation:csDash 1.6s linear infinite}
  .cs-node{animation:csPop .7s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.3s + var(--i) * .15s)}
  .cs-nring{transform-box:fill-box;transform-origin:center;animation:csPing 3.2s ease-out infinite;animation-delay:calc(var(--i) * .8s + 1.5s)}
  .cs-ripple.a{animation:csRip 3.2s ease-out infinite}.cs-ripple.b{animation:csRip 3.2s ease-out 1.6s infinite}
  .cs-me{transform-box:fill-box;transform-origin:center;animation:csBeat 3.2s ease-in-out infinite}
  .cs-star{animation:csTw 3s ease-in-out infinite;animation-delay:var(--d)}
  .cs-stamp{animation:csStamp 6.4s ease-in-out 1.2s infinite}
}
@keyframes csSpin{to{transform:rotate(360deg)}}
@keyframes csDash{to{stroke-dashoffset:-18}}
@keyframes csPop{from{transform:translate(var(--tx,0),0) scale(.2);opacity:0}}
@keyframes csPing{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.55);opacity:0}}
@keyframes csRip{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.3);opacity:0}}
@keyframes csBeat{50%{transform:scale(1.06)}}
@keyframes csTw{50%{opacity:.1}}
@keyframes csStamp{0%,8%{opacity:0;transform:scale(.4) rotate(-12deg)}14%{opacity:1;transform:scale(1.15) rotate(-6deg)}18%,60%{opacity:1;transform:scale(1) rotate(-6deg)}70%,100%{opacity:0;transform:scale(1) rotate(-6deg)}}



/* ---- Portal hero: smart-property ecosystem (right half) ---- */
.portal-hero{min-height:310px}
.ph-scene{position:absolute;z-index:1;right:0;top:0;bottom:0;left:50%;width:auto;transform:none;display:flex;align-items:center;justify-content:center;padding:6px 10px}
.ph-scene .pe-svg{display:block;width:100%;height:100%;max-height:100%;overflow:hidden}
.ph-copy{max-width:min(560px,47%)}
.pe-plat{fill:rgba(255,255,255,.07);stroke:rgba(127,230,208,.55);stroke-width:1.2}
.pe-sl{fill:url(#pe-sidel);stroke:rgba(127,230,208,.35);stroke-width:1}.pe-sr{fill:#0B3563;fill-opacity:.85;stroke:rgba(127,230,208,.3);stroke-width:1}
.pe-gshadow{fill:#00111f;opacity:.5;filter:url(#pe-blur)}
.pe-plot{fill:url(#pe-gr);fill-opacity:.9}
.pe-path{fill:rgba(220,250,245,.16)}.pe-dash{stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-dasharray:5 6;fill:none}
.pe-bound{fill:none;stroke:#7FE6D0;stroke-width:1.3;stroke-dasharray:4 4;opacity:.85}
.pe-shadow{fill:#00241f;opacity:.3}
.pe-t{fill:#F3FFFD}.pe-l{fill:#9BE0D6}.pe-r{fill:#3A8FA8}
.pe-roof{fill:#0B3563}.pe-roofl{fill:#12305A}.pe-roofr{fill:#0A2447}
.pe-win{fill:#0E3A66;stroke:rgba(190,245,234,.6);stroke-width:.6}.pe-winr{fill:#0A2F57}
.pe-trunk{stroke:#5A3F2A;stroke-width:3;stroke-linecap:round}.pe-can{fill:#14876F}.pe-canhi{fill:#37D3B5;opacity:.55}
.pe-trail{fill:none;stroke:url(#pe-tr);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;opacity:.28}
.pe-flow{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:.07 .93;stroke-dashoffset:0;opacity:0}
.pe-conn{fill:none;stroke:rgba(127,230,208,.5);stroke-width:1;stroke-dasharray:3 5}
.pe-point{fill:url(#pe-pt);transform-box:fill-box;transform-origin:center;opacity:0}
.pe-glass{fill:url(#pe-gl);stroke:rgba(255,255,255,.55);stroke-width:1}
.pe-shine{stroke:rgba(255,255,255,.8);stroke-width:1.4;stroke-linecap:round;fill:none}
.pe-glow{fill:#37D3F5;opacity:.12;filter:url(#pe-blur)}
.pe-av{fill:url(#pe-shg);stroke:#fff;stroke-width:1.5}.pe-ini{fill:#fff;font:800 13px Inter,system-ui,sans-serif}
.pe-ok{fill:#0E9E83;stroke:#fff;stroke-width:1.2}.pe-chk{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pe-h{fill:#fff;font:700 11px Inter,system-ui,sans-serif}.pe-s{fill:rgba(255,255,255,.82);font:500 8.5px Inter,system-ui,sans-serif}.pe-s.b{font-weight:700;letter-spacing:.06em}
.pe-pill{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.35);stroke-width:.8}.pe-line{fill:rgba(255,255,255,.3)}
.pe-page{fill:#F4FFFC;fill-opacity:.94}.pe-fold{fill:#BFEDE4}.pe-pt{fill:#0B3563;font:800 7.5px Inter,system-ui,sans-serif;letter-spacing:.12em}.pe-ln{fill:#B6D9DA}
.pe-seal{fill:#0E9E83}.pe-seal2{fill:none;stroke:#fff;stroke-width:1;stroke-dasharray:2 2}
.pe-page~.pe-s{fill:#0B3563}
.pe-sh{fill:url(#pe-shg);stroke:#fff;stroke-width:1.6;stroke-linejoin:round}.pe-sh2{fill:#0B3563;opacity:.22}
.pe-cd{fill:url(#pe-cdg);stroke:rgba(255,255,255,.5);stroke-width:.8}.pe-chip{fill:#F2D388}.pe-wl{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.4;stroke-linecap:round}
.pe-num{fill:#fff;font:600 10px ui-monospace,Menlo,monospace;letter-spacing:.08em}
.pe-hp,.pe-bld,.pe-tree,.pe-base,.pe-land{transform-box:fill-box}
.pe-hp{transform-origin:50% 50%}.pe-bld,.pe-tree{transform-origin:50% 100%}.pe-base,.pe-land{transform-origin:50% 50%}
.pe-hp-in{transform-box:fill-box;transform-origin:50% 50%}

@media (prefers-reduced-motion:no-preference){
  .pe-svg.pe-pre .pe-trail,.pe-svg.pe-pre .pe-base,.pe-svg.pe-pre .pe-land,.pe-svg.pe-pre .pe-bld,.pe-svg.pe-pre .pe-tree,.pe-svg.pe-pre .pe-hp,.pe-svg.pe-pre .pe-conn{opacity:0}
  .pe-svg.pe-go .pe-point{animation:pePoint 2.8s cubic-bezier(.3,.7,.2,1) both}
  .pe-svg.pe-go .pe-trail{animation:peTrail 3s cubic-bezier(.3,.6,.2,1) calc(.5s + var(--i) * .12s) both}
  .pe-svg.pe-go .pe-flow{animation:peFlow 3.6s linear calc(2.6s + var(--i) * .55s) infinite both}
  .pe-svg.pe-go .pe-base{animation:peRise 1s cubic-bezier(.2,.8,.2,1) 1.3s both}
  .pe-svg.pe-go .pe-land{animation:peFade .9s ease 1.75s both}
  .pe-svg.pe-go .pe-bld{animation:peGrow .9s cubic-bezier(.2,1.15,.4,1) calc(2s + var(--i) * .2s) both}
  .pe-svg.pe-go .pe-tree{animation:peGrow .6s cubic-bezier(.2,1.3,.4,1) calc(2.5s + var(--i) * .08s) both}
  .pe-svg.pe-go .pe-conn{animation:peFade 1s ease 3.4s both,peDashFlow 5s linear 3.4s infinite}
  .pe-svg.pe-go .pe-hp{animation:peIn 1.1s cubic-bezier(.2,.9,.2,1) calc(2.7s + var(--i) * .26s) both}
  .pe-svg.pe-go .pe-hp-in{animation:peDrift var(--t) ease-in-out calc(4.2s + var(--i) * .26s) infinite}
  .pe-svg.pe-go .pe-glow{animation:peGlow 3.6s ease-in-out calc(4s + var(--i) * .5s) infinite}
  .pe-svg.pe-go .pe-bound{animation:peDashFlow 7s linear 3s infinite}
  .pe-svg.pe-go .pe-win.tw{animation:peWin 4.4s ease-in-out calc(3.6s + var(--d)) infinite}
  .pe-svg.pe-go .pe-scene{animation:peBob 9s ease-in-out 4s infinite}
  .pe-svg.pe-paused *,.pe-svg.pe-paused{animation-play-state:paused!important}
}
@keyframes pePoint{0%{opacity:0;transform:scale(.1)}18%{opacity:1;transform:scale(1)}60%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(3.2)}}
@keyframes peTrail{0%{stroke-dashoffset:1;opacity:0}15%{opacity:1}55%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.28}}
@keyframes peFlow{0%{stroke-dashoffset:.07;opacity:0}12%{opacity:.9}88%{opacity:.9}100%{stroke-dashoffset:-.93;opacity:0}}
@keyframes peRise{from{opacity:0;transform:translateY(22px) scale(.88)}to{opacity:1;transform:none}}
@keyframes peFade{from{opacity:0}to{opacity:1}}
@keyframes peGrow{from{opacity:0;transform:scaleY(.02) translateY(8px)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes peIn{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.15)}to{opacity:1;transform:none}}
@keyframes peDrift{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-5px)}50%{transform:translate(0,-9px)}75%{transform:translate(-4px,-5px)}}
@keyframes peGlow{0%,100%{opacity:.1}50%{opacity:.3}}
@keyframes peDashFlow{to{stroke-dashoffset:-36}}
@keyframes peWin{0%,100%{fill:#0E3A66}50%{fill:#F6D77E}}
@keyframes peBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

@media (max-width:900px){.ph-scene{left:46%}.ph-copy{max-width:50%}}
@media (max-width:700px){
  .portal-hero{display:flex;flex-direction:column;min-height:0;padding:24px 18px 10px}
  .ph-copy{max-width:none}
  .ph-scene{order:2;display:block;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;margin-top:8px;padding:0}
  .ph-scene .pe-svg{height:auto;aspect-ratio:560/340}
}

/* ---- Ecosystem v2 panels: deed, blueprint, analytics, key ---- */
.pe-page{fill:#F8FFFD}
.pe-pborder{fill:none;stroke:#0E9E83;stroke-opacity:.5;stroke-width:.8;stroke-dasharray:2 2}
.pe-title{fill:#0B3563;font:800 11px Inter,system-ui,sans-serif;letter-spacing:.22em}
.pe-orn{stroke:#0E9E83;stroke-width:1;fill:none}.pe-orn-d{fill:#0E9E83}
.pe-s.dk{fill:#0E9E83;font-size:7px;letter-spacing:.14em;font-weight:700}
.pe-parcel-s{fill:rgba(14,158,131,.12);stroke:#0E9E83;stroke-width:1.2;stroke-dasharray:1;stroke-linejoin:round}
.pe-corner{fill:#37D3B5;stroke:#fff;stroke-width:.8}.pe-corner.big{filter:drop-shadow(0 0 3px #7FE6D0)}
.pe-sealglow{fill:#37D3B5;opacity:.35;filter:url(#pe-blur)}
.pe-seal{filter:drop-shadow(0 0 4px #37D3B5)}
.pe-bpbg{fill:rgba(6,32,60,.55);stroke:rgba(127,230,208,.35);stroke-width:.8}
.pe-bpthick{fill:rgba(14,158,131,.28)}
.pe-bp-line{fill:rgba(55,211,181,.14);stroke:#7FE6D0;stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1;filter:drop-shadow(0 0 3px #37D3B5)}
.pe-dim{stroke:rgba(255,255,255,.75);stroke-width:.8;fill:none}
.pe-dimt{fill:#fff;font:600 7.5px ui-monospace,Menlo,monospace}.pe-dimt.c{fill:#BFF5EA;font-weight:700}
.pe-sep{stroke:rgba(255,255,255,.3);stroke-width:.8}
.pe-ai svg{stroke:#7FE6D0;fill:none}
.pe-val{fill:#fff;font:700 10px Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}.pe-val.ok{fill:#7FE6D0}
.pe-bar{fill:rgba(255,255,255,.18)}.pe-barf{fill:#37D3B5;filter:drop-shadow(0 0 3px #37D3B5)}
.pe-keyglow{fill:#37D3B5;opacity:.22;filter:url(#pe-blur)}
.pe-metal{fill:url(#pe-mt);stroke:rgba(127,230,208,.55);stroke-width:.7}.pe-metal2{fill:url(#pe-mt2)}
.pe-hole{fill:#0B2A4E;stroke:rgba(255,255,255,.5);stroke-width:.8}.pe-rim{fill:none;stroke:#7FE6D0;stroke-width:1;opacity:.8}
.pe-glint{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;opacity:.9}.pe-shaftline{stroke:#fff;stroke-width:.8;opacity:.7;fill:none}
.pe-access{filter:drop-shadow(0 0 5px #37D3B5)}.pe-aring{fill:none;stroke:#7FE6D0;stroke-width:1;transform-box:fill-box;transform-origin:center}
.pe-abody{fill:#0E9E83;stroke:#fff;stroke-width:1.2}.pe-ahouse{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pe-conn2{fill:none;stroke:#7FE6D0;stroke-width:1;stroke-dasharray:2 3;opacity:.8}
.pe-key,.pe-key3d{transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .pe-svg.pe-go .pe-bp-line,.pe-svg.pe-go .pe-parcel-s{animation:peDraw 2.4s cubic-bezier(.4,0,.2,1) 3.4s both}
  .pe-svg.pe-go .pe-corner{animation:peFade .5s ease 4.2s both,peCorner 2.6s ease-in-out 5s infinite}
  .pe-svg.pe-go .pe-corner.big{animation:peFade .5s ease 3.8s both,peCorner 2.6s ease-in-out 5.2s infinite}
  .pe-svg.pe-go .pe-seal2{transform-box:fill-box;transform-origin:center;animation:peSpin 14s linear infinite}
  .pe-svg.pe-go .pe-sealglow{animation:peGlow 3s ease-in-out 4s infinite}
  .pe-svg.pe-go .pe-key3d{animation:peKeyTurn 7s ease-in-out 4.4s infinite}
  .pe-svg.pe-go .pe-aring{animation:peAcc 2.6s ease-out 4.2s infinite}
  .pe-svg.pe-go .pe-barf{transform-box:fill-box;transform-origin:left;animation:peBar 1.8s cubic-bezier(.3,.7,.2,1) 3.5s both}
  .pe-svg.pe-go .pe-keyglow{animation:peGlow 3.4s ease-in-out 4s infinite}
}
@keyframes peDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes peCorner{50%{opacity:.45;transform:scale(1.5)}}
@keyframes peSpin{to{transform:rotate(360deg)}}
@keyframes peKeyTurn{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.5)}}
@keyframes peAcc{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes peBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pe-corner{transform-box:fill-box;transform-origin:center}

/* ---- Client approval (OTP) ---- */
.otp{text-align:center;max-width:460px;margin:0 auto;padding:8px 0}
.otp h3{margin:14px 0 8px;font-size:21px;color:var(--navy)}.otp p{margin:0 0 14px;color:var(--text-muted);line-height:1.55}
.otp-ico{display:inline-grid;place-items:center;width:68px;height:68px;border-radius:50%;background:linear-gradient(145deg,#123F78,#1767A8);color:#fff;box-shadow:0 12px 26px rgba(23,103,168,.35);animation:otpf 3.4s ease-in-out infinite}
.otp-ico.ok{background:linear-gradient(145deg,#087565,#16B89A);box-shadow:0 12px 26px rgba(7,143,121,.35)}
@keyframes otpf{50%{transform:translateY(-4px)}}
.otp-actions{display:flex;justify-content:center;margin:6px 0 8px}
.otp-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0 8px}
.otp-input{max-width:200px;text-align:center;font-size:24px;letter-spacing:.35em;font-weight:700;padding:10px}
.otp-have{font-size:13px;margin:8px 0 0!important}
.otp-demo{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:10px 12px;margin:0 0 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn-fg);font-size:13px}
.otp-demo svg{flex:none;margin-top:2px}.otp-demo code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.7);font-weight:800;letter-spacing:.1em}
.otp-page{max-width:620px;margin:20px auto}
.otp-req{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:16px 18px;border-radius:18px;color:#fff;background:linear-gradient(120deg,#123F78,#0b6a72);box-shadow:0 14px 30px rgba(8,43,80,.25);animation:otpin .5s var(--ease)}
.otp-req>div{display:grid;gap:2px;flex:1;min-width:0}.otp-req span{color:#CFE0F1;font-size:13.5px}
.otp-code{font-size:30px;font-weight:800;letter-spacing:.2em;padding:8px 16px;border-radius:14px;background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.5)}
@keyframes otpin{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:560px){.otp-req{flex-wrap:wrap}.otp-code{width:100%;text-align:center}}