/* ---------- Hero background: brand colours + globe pattern ---------- */
.hero{background:radial-gradient(120% 85% at 50% -10%,#1a4fa8 0%,#0d3170 34%,#081f4a 62%,#050f26 100%)}
.hero::before{background:url(brand-gradient.webp) center 30%/cover;opacity:.45;filter:saturate(1.15);mix-blend-mode:screen}
.hero .grid{z-index:0}
.h-pat{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.h-pat svg{position:absolute;width:min(980px,120vw);aspect-ratio:1;fill:none;stroke:rgba(255,255,255,.09);stroke-width:1.2}
.h-pat .g1{right:-22%;top:-30%;animation:spinSlow 120s linear infinite}
.h-pat .g2{left:-30%;top:38%;width:min(760px,100vw);stroke:rgba(241,93,43,.16);animation:spinSlow 160s linear infinite reverse}
.h-pat .spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 14px 3px rgba(241,93,43,.6);animation:drift 9s ease-in-out infinite}
.h-pat .s1{left:14%;top:30%}.h-pat .s2{right:16%;top:22%;animation-delay:-3s;background:#6fa0ff;box-shadow:0 0 14px 3px rgba(111,160,255,.6)}.h-pat .s3{left:24%;top:62%;animation-delay:-6s;width:4px;height:4px}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes drift{0%,100%{transform:translate(0,0);opacity:.9}50%{transform:translate(14px,-22px);opacity:.4}}
.hero .glow{background:radial-gradient(closest-side,rgba(28,86,184,.95),rgba(20,74,160,.35) 55%,transparent),radial-gradient(closest-side at 70% 60%,rgba(241,93,43,.6),transparent 70%)}

/* ---------- iPhone 17 Pro Max (Deep Blue) ---------- */
.hero-stage{width:min(460px,90%)}
.hero-phone{width:min(350px,78%);margin-inline:auto;container-type:inline-size}
.iphone{position:relative;container-type:inline-size;width:100%;aspect-ratio:77.6/163.4;border-radius:16.4cqw;padding:1.1cqw;
  background:linear-gradient(90deg,#3c4f72 0%,#7a8db0 1.2%,#2d3f60 2.6%,#22324f 50%,#2d3f60 97.4%,#7a8db0 98.8%,#3c4f72 100%);
  box-shadow:0 0 0 .25cqw #17233a,0 -20px 80px rgba(28,86,184,.45),0 40px 90px -30px rgba(0,0,0,.8)}
.iphone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.14)}
.ib{position:absolute;width:.9cqw;border-radius:.6cqw;background:linear-gradient(90deg,#20304d,#6b7fa3)}
.ib-action{left:-.75cqw;top:21%;height:5.5%}
.ib-vu{left:-.75cqw;top:30%;height:9%}
.ib-vd{left:-.75cqw;top:41%;height:9%}
.ib-side{right:-.75cqw;top:30%;height:14%;background:linear-gradient(270deg,#20304d,#6b7fa3)}
.ib-cam{right:-.75cqw;top:57%;height:8%;background:linear-gradient(270deg,#1a2740,#55688c)}
.iscreen{position:relative;height:100%;border-radius:15.3cqw;background:#000;padding:2.1cqw;overflow:hidden}
.iscreen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.16),transparent 32%)}
.iscreen>.ui{position:relative;height:100%;border-radius:13.2cqw;overflow:hidden;background:linear-gradient(180deg,#eef3fb 0%,#f6f7f9 30%,#f6f7f9 100%);color:#16181d;font-size:3.5cqw;line-height:1.3;text-align:left}
.iscreen>.ui::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.35),transparent 35%)}
.island{position:absolute;z-index:3;left:50%;top:2.6cqw;transform:translateX(-50%);width:30cqw;height:8.6cqw;border-radius:6cqw;background:#000;display:flex;align-items:center;justify-content:flex-end;padding-right:2.4cqw}
.island i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2e4c86,#0a1224 60%)}
.sbar{display:flex;justify-content:space-between;align-items:center;padding:4cqw 7cqw 0 9cqw;height:12cqw;font-size:3.8cqw;font-weight:600}
.sbar svg{height:3.2cqw;width:auto;margin-left:1.2cqw;fill:#16181d}
.app{padding:2cqw 5.5cqw 0;display:grid;gap:3.6cqw}
.a-top{display:flex;align-items:center;gap:2.6cqw}
.a-top img{width:9cqw;height:9cqw;border-radius:50%;background:#fff;box-shadow:0 1cqw 3cqw rgba(11,54,121,.15)}
.a-top small{display:block;font-size:2.8cqw;color:#5f6672}
.a-top b{font-size:3.9cqw;letter-spacing:-.01em}
.a-bell{margin-left:auto;width:8.4cqw;height:8.4cqw;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1cqw 3cqw rgba(11,54,121,.12);position:relative}
.a-bell svg{width:4.2cqw;height:4.2cqw;stroke:#16181d;fill:none;stroke-width:2}
.a-bell::after{content:"";position:absolute;top:1.8cqw;right:2cqw;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--orange)}
.a-card{position:relative;overflow:hidden;border-radius:6cqw;padding:5cqw;color:#fff;background:radial-gradient(90% 80% at 100% 100%,rgba(241,93,43,.85),transparent 60%),linear-gradient(150deg,#1c56b8,#0b3679 70%);box-shadow:0 4cqw 8cqw -3cqw rgba(11,54,121,.6)}
.a-card::before{content:"";position:absolute;right:-12cqw;top:-12cqw;width:40cqw;height:40cqw;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 6cqw rgba(255,255,255,.04)}
.a-lbl{font-size:2.9cqw;opacity:.75}
.a-amt{font-size:8.6cqw;font-weight:700;letter-spacing:-.03em;margin:.6cqw 0 3cqw}
.a-amt span{font-variant-numeric:tabular-nums}
.a-range{height:1.6cqw;border-radius:1cqw;background:rgba(255,255,255,.22);position:relative}
.a-range i{position:absolute;left:0;top:0;bottom:0;width:36%;border-radius:inherit;background:#fff;animation:rangeFill 4s var(--ease) infinite alternate}
.a-range i::after{content:"";position:absolute;right:-2.2cqw;top:50%;width:4.4cqw;height:4.4cqw;margin-top:-2.2cqw;border-radius:50%;background:#fff;box-shadow:0 0 0 1.2cqw rgba(255,255,255,.25)}
@keyframes rangeFill{from{width:22%}to{width:52%}}
.a-scale{display:flex;justify-content:space-between;font-size:2.6cqw;opacity:.7;margin-top:2cqw}
.a-meta{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;margin-top:3.4cqw;padding-top:3cqw;border-top:1px solid rgba(255,255,255,.18)}
.a-meta small{display:block;font-size:2.6cqw;opacity:.7}
.a-meta b{font-size:3.6cqw}
.a-sec{display:flex;justify-content:space-between;font-weight:600;font-size:3.6cqw}
.a-sec span{color:var(--blue);font-weight:500;font-size:3cqw}
.a-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.a-prods div{background:#fff;border-radius:4.2cqw;padding:3cqw 2cqw;display:grid;justify-items:center;gap:1.6cqw;text-align:center;font-size:2.7cqw;font-weight:500;box-shadow:0 1cqw 3cqw rgba(11,54,121,.08)}
.a-prods i{width:8.4cqw;height:8.4cqw;border-radius:3cqw;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}
.a-prods div:nth-child(2) i{background:var(--orange-soft);color:var(--orange)}
.a-prods svg{width:4.4cqw;height:4.4cqw;fill:none;stroke:currentColor;stroke-width:2}
.a-status{display:flex;align-items:center;gap:3cqw;background:#fff;border-radius:4.6cqw;padding:3.4cqw;box-shadow:0 1cqw 3cqw rgba(11,54,121,.08)}
.a-status i{flex:none;width:8.4cqw;height:8.4cqw;border-radius:50%;display:grid;place-items:center;background:#e6f7ee;color:#1c9a5b;animation:okPulse 2.4s ease-out infinite}
.a-status svg{width:4.4cqw;height:4.4cqw;fill:none;stroke:currentColor;stroke-width:2.6}
.a-status b{display:block;font-size:3.3cqw}
.a-status small{font-size:2.7cqw;color:#5f6672}
@keyframes okPulse{0%{box-shadow:0 0 0 0 rgba(28,154,91,.35)}100%{box-shadow:0 0 0 3cqw rgba(28,154,91,0)}}
.a-btn{display:block;text-align:center;padding:3.8cqw;border-radius:99px;background:var(--orange);color:#fff;font-weight:600;font-size:3.6cqw;box-shadow:0 3cqw 6cqw -2cqw rgba(241,93,43,.7)}

/* ---------- Opening intro (home page, once per visit / logo tap) ---------- */
#intro{display:none}
html.intro-on{overflow:hidden}
.intro-on #intro{display:grid;place-items:center;position:fixed;inset:0;z-index:1000;overflow:hidden;color:#fff;
  background:radial-gradient(70% 55% at 50% 115%,rgba(241,93,43,.75),transparent 70%),radial-gradient(60% 50% at 0% 0%,rgba(40,105,214,.75),transparent 70%),linear-gradient(160deg,#0d3a82 0%,#0b3679 35%,#06173a 100%);
  animation:introOut .75s cubic-bezier(.76,0,.24,1) 3.25s forwards}
@keyframes introOut{to{clip-path:inset(0 0 100% 0)}}
#intro .in-lines{position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 26px);animation:linesMove 4s linear forwards}
@keyframes linesMove{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
#intro .in-rings{position:absolute;left:50%;top:50%;width:min(140vmin,1100px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);border-radius:50%;opacity:0;
  background:repeating-radial-gradient(circle,rgba(255,255,255,.07) 0 1px,transparent 1px 46px);animation:ringsIn 3s var(--ease) .1s forwards}
@keyframes ringsIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#intro .in-globe{position:absolute;left:50%;top:50%;width:min(92vmin,720px);aspect-ratio:1;transform:translate(-50%,-50%);fill:none;stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:1400;stroke-dashoffset:1400;animation:globeDraw 2.6s var(--ease) .2s forwards}
@keyframes globeDraw{to{stroke-dashoffset:0}}
#intro .in-dot{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px 2px rgba(241,93,43,.7);animation:rise 3.2s ease-in forwards;opacity:0}
#intro .in-dot:nth-child(4){left:18%;animation-delay:.2s}#intro .in-dot:nth-child(5){left:34%;animation-delay:.9s;background:#8fb3ff;box-shadow:0 0 12px 2px rgba(143,179,255,.7)}#intro .in-dot:nth-child(6){left:63%;animation-delay:.4s}#intro .in-dot:nth-child(7){left:80%;animation-delay:1.2s;background:#fff}#intro .in-dot:nth-child(8){left:50%;animation-delay:1.6s}
@keyframes rise{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(-105vh)}}
#intro .in-core{position:relative;display:grid;justify-items:center;gap:22px;text-align:center;perspective:700px}
#intro .in-logo{position:relative;width:clamp(120px,22vmin,170px);aspect-ratio:1}
#intro .in-logo::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(241,93,43,.45),transparent);opacity:0;animation:haloIn 1.4s ease-out 1.1s forwards}
@keyframes haloIn{0%{opacity:0;transform:scale(.6)}60%{opacity:1}100%{opacity:.7;transform:scale(1.05)}}
#intro .in-logo img{position:relative;width:100%;height:100%;clip-path:inset(100% 0 0 0);opacity:0;transform:translateY(40px) rotateX(35deg);filter:blur(8px);
  animation:logoRise 1.5s var(--ease) .35s forwards,logoTilt 1s var(--ease) 1.95s}
@keyframes logoRise{to{clip-path:inset(0 0 0 0);opacity:1;transform:none;filter:blur(0)}}
@keyframes logoTilt{0%{transform:rotate(0)}45%{transform:rotate(-25deg)}100%{transform:rotate(0)}}
#intro .in-name{display:grid;gap:6px}
#intro .in-name b{display:block;overflow:hidden;font-size:clamp(1.25rem,3.2vw,1.8rem);font-weight:700;letter-spacing:.02em}
#intro .in-name b span{display:inline-block;transform:translateY(110%);animation:wordUp .9s var(--ease) 1.5s forwards}
#intro .in-name small{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.7);opacity:0;animation:fadeIn .8s ease 2.1s forwards}
#intro .in-tag{font-size:.95rem;color:#ffb497;opacity:0;transform:translateY(8px);animation:wordUp .8s var(--ease) 2.35s forwards}
@keyframes wordUp{to{transform:none;opacity:1}}
@keyframes fadeIn{to{opacity:1}}
#intro .in-bar{position:absolute;left:50%;bottom:calc(48px + env(safe-area-inset-bottom,0px));width:min(220px,50vw);height:3px;transform:translateX(-50%);border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden}
#intro .in-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#fff,var(--orange));animation:barFill 2.9s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes barFill{to{width:100%}}

@media (max-width:600px){
  .hero-phone{width:min(300px,80%)}
}
@media (prefers-reduced-motion:reduce){
  .h-pat svg,.h-pat .spark,.a-range i,.a-status i{animation:none}
}