/* iNeedWay - style.css (mobile-first) */
:root{--navy:#0B1437;--navy2:#18246B;--ink:#0B1437;--mute:#4A5378;--paper:#F5F6FC;--alt:#ECEFFA;--card:#fff;--line:#DFE3F2;--sun:#FFB020;--ora:#FF7A3D;--brand:#3B5BDB;--pad:clamp(16px,5vw,32px);--ease:cubic-bezier(.2,.7,.2,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px;scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;color:var(--ink);background:var(--paper)}
h1,h2,h3{margin:0;line-height:1.15}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.hero :focus-visible,.foot :focus-visible,.steps :focus-visible{outline-color:var(--sun)}
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:40;padding:10px 14px;border-radius:8px;background:var(--sun);color:var(--ink);font-weight:700}
.skip:focus{top:8px}
.ic{width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Demo notice */
.demo-bar{margin:0;padding:8px var(--pad);background:var(--sun);color:var(--ink);font-size:.8rem;font-weight:600;text-align:center;line-height:1.4}

/* Header + logo */
.site-header{position:sticky;top:0;z-index:30;background:rgba(245,246,252,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:62px}
.logo{display:inline-flex;align-items:center;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;text-decoration:none}
.mark{width:34px;height:34px;margin-right:6px;flex:none}
.logo-in{color:var(--brand)}
.menu-btn{min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.menu-btn:hover{background:var(--ink);color:#fff}
.nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;padding:4px var(--pad) 12px;background:var(--card);border-bottom:1px solid var(--line)}
.nav.open{display:flex}
.nav a{position:relative;display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);font-weight:600;text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--ora);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:40px 0 56px;color:#fff;background:linear-gradient(160deg,#0B1437 0%,#18246B 62%,#2B1F70 100%)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px) 0 0/24px 24px}
.hero::after{content:"";position:absolute;right:-140px;top:-120px;width:440px;height:440px;background:radial-gradient(circle,rgba(255,176,32,.32),transparent 65%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-50px,70px) scale(1.15)}}
.hero-grid{position:relative;z-index:1;display:grid;gap:36px}
.hero h1{max-width:14ch;font-size:clamp(2.2rem,9.5vw,4.1rem);font-weight:800;letter-spacing:-.03em}
.lead{max-width:48ch;margin:16px 0 26px;color:#C9D0EE;font-size:1.05rem}
.search{position:relative;display:flex;align-items:center;gap:8px;max-width:600px;padding:6px;border-radius:999px;background:#fff;transition:box-shadow .25s var(--ease)}
.search:focus-within{box-shadow:0 0 0 3px var(--sun),0 0 28px rgba(255,176,32,.45)}
.s-ic{flex:none;margin-left:14px;color:var(--mute)}
.search input{flex:1;min-width:0;min-height:52px;padding:0 6px;border:0;border-radius:999px;background:none;color:var(--ink);font:inherit}
.search input:focus-visible{outline:none}
.search button{min-height:52px;padding:0 24px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--sun),var(--ora));color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:transform .15s,filter .15s}
.search button:hover{filter:brightness(1.06)}
.search button:active{transform:scale(.96)}
.hint{min-height:1.6em;margin:12px 0 0;color:#C9D0EE;font-size:.92rem}
.hero-copy>*{animation:rise .6s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.16s}
.hero-copy>:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* Hero illustration */
.scene{display:block;width:min(78%,280px);margin:0 auto;overflow:visible}
.scene use{fill:none}
.scene .glow{stroke:rgba(255,176,32,.18);stroke-width:12;stroke-linecap:round}
.scene .trail{stroke:var(--sun);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 10;animation:flow 2.4s linear infinite}
.scene .card rect{stroke:rgba(255,255,255,.3)}
.scene text{fill:#fff;font:600 14px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.scene .ic{width:24px;height:24px;color:#fff}
.scene .goal rect{stroke:none}
.scene .goal text,.scene .goal .ic{fill:var(--ink);color:var(--ink)}
.scene .goal .ic{fill:none}
.scene .me circle{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.32)}
.scene .me .fg{fill:#fff;stroke:none}
.scene .fl{animation:float 6s ease-in-out infinite}
.scene .d2{animation-delay:-2s}
.scene .d3{animation-delay:-4s}
.scene .node{fill:var(--sun);transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-in-out infinite}
.scene .n2{animation-delay:-1.2s}
@keyframes flow{to{stroke-dashoffset:-22}}
@keyframes float{50%{transform:translateY(-6px)}}
@keyframes pulse{50%{transform:scale(1.8);opacity:.45}}

/* Sections */
.section{padding:52px 0}
.section.alt{background:var(--alt)}
.section h2{font-size:clamp(1.5rem,5vw,2.2rem);letter-spacing:-.02em}
.section h2::after{content:"";display:block;width:56px;height:4px;margin-top:10px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--sun) 0 10px,transparent 10px 16px)}
.sub{margin:10px 0 24px;color:var(--mute)}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* Category colours: --fg text/accent, --bg tint */
.k0{--fg:#2A44D4;--bg:#E8ECFF}
.k1{--fg:#B3124F;--bg:#FDE7F0}
.k2{--fg:#096B5D;--bg:#DFF5F0}
.k3{--fg:#6B3FD0;--bg:#EFE8FD}
.k4{--fg:#8F5400;--bg:#FFF1D6}
.k5{--fg:#27692B;--bg:#E4F4E5}

/* Category cards */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cat{position:relative;display:flex;flex-direction:column;gap:4px;min-height:168px;padding:16px;overflow:hidden;border:1.5px solid var(--line);border-radius:22px;background:var(--card);text-decoration:none;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s var(--ease)}
.cat::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--fg);opacity:.85}
.cat:hover{transform:translateY(-4px);border-color:var(--fg);box-shadow:0 14px 26px -16px rgba(11,20,55,.35)}
.cat:active{transform:scale(.98)}
.ico{display:grid;place-items:center;width:48px;height:48px;margin-top:4px;border-radius:15px;background:var(--bg);color:var(--fg);transition:transform .25s var(--ease)}
.cat:hover .ico{transform:rotate(-6deg) scale(1.08)}
.cat h3{margin-top:8px;font-size:1.05rem}
.cat p{margin:0;color:var(--mute);font-size:.88rem;line-height:1.45}
.count{margin-top:auto;padding-top:8px;color:var(--fg);font-size:.8rem;font-weight:700}

/* Opportunity radar */
.radar{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:112px;padding:14px;border:1.5px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s}
.tile span{font-size:1.6rem;line-height:1.2;transition:transform .25s var(--ease)}
.tile b{margin-top:6px;font-size:1.05rem}
.tile small{color:var(--mute);font-size:.82rem;line-height:1.35}
.tile:hover{transform:translateY(-3px);border-color:var(--ora);background:var(--navy);color:#fff}
.tile:hover small{color:#C9D0EE}
.tile:hover span{transform:scale(1.15) rotate(-6deg)}
.tile:active{transform:scale(.97)}

/* Filter chips */
.chips{display:flex;gap:8px;margin-bottom:8px;padding:4px 4px 12px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}

/* Updates feed */
.updates{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.upd{position:relative;padding:14px 16px;border:1px solid var(--line);border-left:5px solid var(--fg);border-radius:14px;background:var(--card);transition:transform .2s var(--ease),box-shadow .2s}
.upd:hover{transform:translateY(-2px);box-shadow:0 10px 22px -16px rgba(11,20,55,.4)}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--bg);color:var(--fg);font-size:.78rem;font-weight:700}
.upd .tag::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--fg)}
.upd h3,.event h3{margin:8px 0 4px;font-size:1rem}
.meta{margin:0;color:var(--mute);font-size:.85rem;line-height:1.45}
.upd.feat{padding:20px 18px;border-color:transparent;border-left-color:var(--sun);background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff}
.feat h3{font-size:1.25rem;line-height:1.25}
.feat .meta{color:#C9D0EE}
.badge{position:absolute;top:14px;right:14px;padding:2px 10px;border-radius:999px;background:var(--sun);color:var(--ink);font-size:.75rem;font-weight:800}
.empty{margin:0;padding:22px;border:1.5px dashed var(--line);border-radius:12px;color:var(--mute);text-align:center}
.empty[hidden]{display:none}

/* Events */
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.event{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--card);transition:transform .2s var(--ease),box-shadow .2s}
.event:hover{transform:translateY(-3px);box-shadow:0 12px 24px -16px rgba(11,20,55,.4)}
.date{display:flex;flex-direction:column-reverse;flex:none;width:64px;overflow:hidden;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);text-align:center;line-height:1.1}
.date b{padding:6px 0 7px;font-size:1.6rem}
.date span{padding:3px 0;background:var(--fg);color:#fff;font-size:.8rem;font-weight:700}
.event h3{margin-top:6px}

/* Your next step */
.steps{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff}
.steps .sub{color:#C9D0EE}
.stepper{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.stepper li{position:relative;padding:16px 16px 16px 66px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.07)}
.stepper h3{font-size:1.05rem}
.stepper p{margin:2px 0 0;color:#C9D0EE;font-size:.9rem}
.num{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--sun),var(--ora));color:var(--ink);font-weight:800}
.soon{display:inline-block;margin-top:8px;padding:2px 10px;border:1px dashed var(--sun);border-radius:999px;color:var(--sun);font-size:.75rem;font-weight:700}

/* About */
.about-grid{display:grid;gap:24px}
.about p{max-width:60ch}
.note{padding:12px 14px;border-left:4px solid var(--sun);border-radius:0 10px 10px 0;background:var(--card);font-size:.92rem}
.points{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.points li{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.points strong{display:block}

/* Footer */
.foot{padding:44px 0 24px;background:var(--navy);color:#C9D0EE}
.foot .logo{color:#fff}
.foot .logo-in{color:var(--sun)}
.foot p{margin:8px 0}
.foot-grid{display:grid;gap:12px}
.flinks{display:flex;flex-wrap:wrap;gap:0 20px}
.flinks a{display:inline-flex;align-items:center;min-height:44px;color:#fff}
.small{max-width:62ch;font-size:.85rem}

/* Larger screens */
@media (min-width:760px){
  .menu-btn{display:none}
  .nav,.nav.open{display:flex;position:static;flex-direction:row;gap:28px;padding:0;border:0;background:none}
  .nav a{min-height:44px;border:0}
  .nav a::after{bottom:6px}
  .hero{padding:80px 0 96px}
  .section{padding:76px 0}
  .cats{grid-template-columns:repeat(3,1fr);gap:16px}
  .radar{grid-template-columns:repeat(3,1fr);gap:16px}
  .chips{flex-wrap:wrap;overflow:visible}
  .updates{grid-template-columns:1fr 1fr}
  .upd.feat{grid-column:1/-1}
  .stepper{grid-template-columns:repeat(4,1fr);gap:16px}
  .stepper li{padding:70px 16px 16px}
  .about-grid{grid-template-columns:1.2fr 1fr;gap:56px;align-items:start}
  .foot-grid{grid-template-columns:1.4fr 1fr;gap:40px}
  .flinks{justify-content:flex-end}
}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:56px}
  .scene{justify-self:end;width:100%;max-width:380px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---- Refinement pass 2 ---- */
.search{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.search:focus-within{transform:translateY(-2px);box-shadow:0 0 0 3px var(--sun),0 14px 40px rgba(255,176,32,.45)}
.s-ic{transition:color .2s,transform .3s var(--ease)}
.search:focus-within .s-ic{color:var(--ora);transform:scale(1.12)}
.hint{min-height:2.4em}
.hint:not(:empty){display:inline-block;padding:3px 14px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.reset{min-height:44px;margin:0 0 12px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.reset:hover{background:var(--ink);color:#fff}
.reset[hidden]{display:none}
.empty{position:relative;padding:76px 20px 24px;background:var(--card)}
.empty::before{content:"";position:absolute;left:50%;top:18px;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:var(--alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5378' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M9 9l4 4M13 9l-4 4'/%3E%3C/svg%3E") center/24px no-repeat}

.cat>*{position:relative;z-index:1}
.cat::before{transform:scaleX(.3);transform-origin:left;transition:transform .35s var(--ease)}
.cat:hover::before{transform:scaleX(1)}
.cat::after{content:"";position:absolute;right:-36px;bottom:-36px;width:124px;height:124px;border-radius:50%;background:radial-gradient(circle,var(--bg) 0 45%,transparent 70%);transition:transform .4s var(--ease)}
.cat:hover::after{transform:scale(1.35)}
.ico .ic{transition:transform .3s var(--ease)}
.cat:hover .ic{transform:translateY(-2px) scale(1.08)}

.tile{position:relative;overflow:hidden}
.tile::after{content:"";position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--ora);animation:pulse 2.6s ease-in-out infinite}
.tile .ti{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--bg);color:var(--fg);transition:transform .3s var(--ease),box-shadow .3s}
.tile:hover .ti{transform:rotate(-8deg) scale(1.1);box-shadow:0 0 0 6px rgba(255,176,32,.28)}

.upd.feat{overflow:hidden}
.upd.feat::before{content:"";position:absolute;left:18px;right:18px;bottom:0;border-top:3px dotted rgba(255,176,32,.55)}
.upd.feat::after{content:"";position:absolute;right:-40px;bottom:-40px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(255,176,32,.38),transparent 65%);pointer-events:none}
.upd.feat h3,.upd.feat .meta{position:relative;z-index:1}

.event{position:relative;overflow:hidden}
.event>*{position:relative;z-index:1}
.event::before{content:"";position:absolute;top:-8px;right:-8px;width:48px;height:48px;border-radius:50%;background:var(--bg)}
.event::after{content:"";position:absolute;top:-24px;right:-24px;width:88px;height:88px;border-radius:50%;border:2px dotted var(--fg);opacity:.4}

.stepper li::after{content:"";position:absolute;left:32px;bottom:-12px;height:12px;border-left:3px dotted var(--sun)}
.stepper li:last-child::after{display:none}
@media (min-width:760px){
  .stepper li::after{left:auto;right:-17px;top:31px;bottom:auto;width:18px;height:0;border-left:0;border-top:3px dotted var(--sun)}
}

/* ---- Final polish ---- */
/* Hero depth */
.hero{border-radius:0 0 32px 32px;background:radial-gradient(60% 55% at 6% 100%,rgba(91,140,255,.28),transparent 70%),linear-gradient(160deg,#0B1437 0%,#18246B 62%,#2B1F70 100%)}
.hero::before{-webkit-mask-image:linear-gradient(#000 35%,transparent 95%);mask-image:linear-gradient(#000 35%,transparent 95%)}
.scene .orbit{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.5;stroke-dasharray:2 8;stroke-linecap:round}
.scene .plate{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.09)}
.scene .mote{fill:#fff;opacity:.4;animation:mote 7s ease-in-out infinite}
.scene .p2{animation-delay:-1.5s}.scene .p3{animation-delay:-3s}.scene .p4{animation-delay:-4.5s}.scene .p5{animation-delay:-2s}.scene .p6{animation-delay:-5.5s}
.scene .glow{animation:breathe 5s ease-in-out infinite}
@keyframes mote{50%{transform:translateY(-10px);opacity:.12}}
@keyframes breathe{50%{opacity:.5}}
/* Floating glass cards */
.scene .sh{fill:rgba(3,6,30,.5)}
.scene .fl{animation-duration:7s}
.scene .d2{animation-duration:8s}
.scene .d3{animation-duration:9s}
.scene .card{transition:translate .25s var(--ease)}
@media (hover:hover){.scene .card:hover{translate:0 -3px}}
/* Endpoint ping (decorative; says nothing about live data) */
.scene .pdot{fill:var(--ora)}
.scene .wave{fill:none;stroke:var(--ora);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 2.8s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.85}to{transform:scale(4.2);opacity:0}}

/* Logo */
.logo{font-size:1.4rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.mark{margin-right:8px;filter:drop-shadow(0 3px 6px rgba(255,122,61,.35));transition:transform .3s var(--ease)}
.logo:hover .mark{transform:rotate(-6deg)}
.logo-in{font-weight:800;background:linear-gradient(120deg,#3B5BDB,#7C4DFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.foot .logo-in{background:linear-gradient(120deg,var(--sun),var(--ora));-webkit-background-clip:text;background-clip:text}

/* Radar tiles: lift, accent edge, glow, icon movement */
.tile::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:var(--fg);transform:scaleY(0);transition:transform .3s var(--ease)}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);border-color:var(--fg);background:linear-gradient(160deg,#fff 40%,var(--bg));color:var(--ink);box-shadow:0 16px 28px -16px var(--fg),0 0 0 3px var(--bg)}
.tile:hover small,.tile:focus-visible small{color:var(--mute)}
.tile:hover::before,.tile:focus-visible::before{transform:scaleY(1)}
.tile:hover .ti,.tile:focus-visible .ti{transform:translateY(-3px) rotate(-6deg) scale(1.08)}
.tile:active{transform:translateY(-1px) scale(.97)}

/* Section continuity: a glowing node and short dotted path at the top of the main sections */
.section{position:relative}
#categories::before,#radar-sec::before,#updates::before,#events::before{content:"";position:absolute;z-index:2;top:0;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 5px rgba(255,176,32,.25),0 0 16px rgba(255,176,32,.65)}
#categories::after,#radar-sec::after,#updates::after,#events::after{content:"";position:absolute;top:5px;left:50%;height:30px;margin-left:-1.5px;border-left:3px dotted rgba(255,176,32,.8)}

/* Small phones */
.search input{text-overflow:ellipsis}
@media (max-width:759px){.scene .p4,.scene .p5,.scene .p6{display:none}}
@media (max-width:420px){
  .search button{padding:0 18px}
  .s-ic{margin-left:10px}
  .cats,.radar{gap:10px}
  .cat,.tile{padding:13px}
  .cat p,.tile small{font-size:.82rem}
  .scene{width:min(84%,290px)}
}
@media (min-width:760px){.hero{border-radius:0 0 40px 40px}}

/* =========================================================
   iNeedWay V3 Motion Layer
   Premium motion, scroll storytelling and lightweight sliders
   ========================================================= */
:root{
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{overflow-x:hidden}
.scroll-progress{position:fixed;inset:0 0 auto;z-index:9999;height:3px;pointer-events:none;background:transparent}
.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--sun),var(--ora),#7c8cff);box-shadow:0 0 16px rgba(255,176,32,.65);transform-origin:left}
.site-header{transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
body.scrolled .site-header{background:rgba(11,20,55,.88);box-shadow:0 12px 40px rgba(11,20,55,.16);backdrop-filter:blur(18px)}
body.scroll-down .site-header{transform:translateY(-110%)}
body.scroll-up .site-header{transform:translateY(0)}
.logo{gap:9px;transition:transform .25s var(--ease)}
.logo:hover{transform:translateY(-2px)}
.logo-name{letter-spacing:-.04em}.logo-name b{color:var(--sun)}
.hero{isolation:isolate;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -15% -28% 35%;height:55%;background:radial-gradient(circle,rgba(255,176,32,.15),transparent 64%);filter:blur(12px);pointer-events:none;z-index:-1}
.hero-copy{position:relative;z-index:3}
.hero-copy h1{animation:heroIn .9s var(--ease-soft) both}
.hero-copy .lead{animation:heroIn .9s .1s var(--ease-soft) both}
.hero-copy .search{animation:heroIn .9s .2s var(--ease-soft) both}
.hero-copy .hint{animation:heroIn .9s .28s var(--ease-soft) both}
@keyframes heroIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.scene{will-change:transform;transition:transform .2s linear;filter:drop-shadow(0 28px 45px rgba(0,0,0,.15))}
.scene .trail{stroke-dasharray:7 10;animation:routeFlow 8s linear infinite}
.scene .node{animation:nodePulse 2.6s ease-in-out infinite}
.scene .n2{animation-delay:1.1s}
@keyframes routeFlow{to{stroke-dashoffset:-136}}
@keyframes nodePulse{0%,100%{opacity:.55;transform-box:fill-box;transform-origin:center;transform:scale(.8)}50%{opacity:1;transform:scale(1.5)}}
.hero-ticker{margin-top:14px;min-height:42px;display:flex;align-items:center;max-width:560px}
.ticker-card{width:100%;display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(255,255,255,.075);box-shadow:0 10px 30px rgba(0,0,0,.12);animation:tickerIn .5s var(--ease-soft) both}
.ticker-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 6px rgba(255,176,32,.1),0 0 18px rgba(255,176,32,.55)}
.ticker-card strong{font-size:.83rem}.ticker-card span{color:rgba(255,255,255,.72);font-size:.77rem;margin-left:auto}
@keyframes tickerIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.section.reveal{opacity:0;transform:translateY(44px) scale(.985);transition:opacity .8s var(--ease-soft),transform .9s var(--ease-soft)}
.section.reveal.in{opacity:1;transform:none}
.section.reveal .cat,.section.reveal .tile,.section.reveal .upd,.section.reveal .event,.section.reveal .step{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-soft),transform .65s var(--ease-soft)}
.section.reveal.in .cat,.section.reveal.in .tile,.section.reveal.in .upd,.section.reveal.in .event,.section.reveal.in .step{opacity:1;transform:none}
.section.reveal.in .cat:nth-child(2),.section.reveal.in .tile:nth-child(2),.section.reveal.in .upd:nth-child(2),.section.reveal.in .event:nth-child(2),.section.reveal.in .step:nth-child(2){transition-delay:.07s}
.section.reveal.in .cat:nth-child(3),.section.reveal.in .tile:nth-child(3),.section.reveal.in .upd:nth-child(3),.section.reveal.in .event:nth-child(3),.section.reveal.in .step:nth-child(3){transition-delay:.14s}
.section.reveal.in .cat:nth-child(4),.section.reveal.in .tile:nth-child(4),.section.reveal.in .upd:nth-child(4),.section.reveal.in .event:nth-child(4),.section.reveal.in .step:nth-child(4){transition-delay:.21s}
.cats,.radar,.events{scroll-snap-type:x proximity}
.cat,.tile,.event{scroll-snap-align:start}
@media (max-width:759px){
  .cats,.radar,.events{display:flex;overflow-x:auto;gap:12px;padding:3px 2px 15px;margin-right:-18px;padding-right:18px;scrollbar-width:none}
  .cats::-webkit-scrollbar,.radar::-webkit-scrollbar,.events::-webkit-scrollbar{display:none}
  .cat{min-width:245px}.tile{min-width:210px}.event{min-width:290px}
  .hero-ticker{max-width:none}
  .ticker-card span{display:none}
}
@media (min-width:760px){
  .cats .cat,.radar .tile,.events .event{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
  .cats .cat:hover,.radar .tile:hover,.events .event:hover{transform:translateY(-7px) scale(1.012)}
}
.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:6px;margin:8px auto 34px;color:var(--mute);font-size:.72rem;opacity:.75}
.scroll-hint span{width:22px;height:35px;border:1.5px solid currentColor;border-radius:15px;position:relative}
.scroll-hint span::after{content:"";position:absolute;width:4px;height:7px;border-radius:5px;background:currentColor;left:50%;top:6px;transform:translateX(-50%);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%,100%{opacity:.25;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,9px)}}
.nav a{position:relative}.nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:-7px;height:2px;border-radius:2px;background:var(--sun);transition:left .25s var(--ease),right .25s var(--ease)}
.nav a.active::after,.nav a:hover::after{left:0;right:0}
.upd.feat{position:relative;overflow:hidden}
.upd.feat::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--sun),var(--ora));box-shadow:0 0 18px rgba(255,176,32,.45)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene,.ticker-card,.hero-copy h1,.hero-copy .lead,.hero-copy .search,.hero-copy .hint{animation:none!important;transition:none!important}
  .scene .trail,.scene .node,.scroll-hint span::after{animation:none!important}
  .section.reveal,.section.reveal .cat,.section.reveal .tile,.section.reveal .upd,.section.reveal .event,.section.reveal .step{transition:none!important;transform:none!important;opacity:1!important}
}


/* =========================================================
   iNeedWay V4 — visual polish layer
   Smooth depth, slider affordances, cursor light and richer
   section transitions. No external libraries required.
   ========================================================= */

:root{
  --shadow-soft:0 18px 50px rgba(11,20,55,.10);
  --shadow-card:0 14px 34px rgba(11,20,55,.10);
}

/* A softer page rhythm */
.section:nth-of-type(even){background-image:linear-gradient(180deg,rgba(255,255,255,.34),transparent 26%,rgba(255,255,255,.16))}
.section.alt{background-color:var(--alt)}
.section:not(.steps)::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(59,91,219,.10),transparent)}

/* Hero depth layers */
.hero-grid::before,.hero-grid::after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(2px)}
.hero-grid::before{width:240px;height:240px;left:-150px;top:15%;background:radial-gradient(circle,rgba(91,140,255,.16),transparent 68%);animation:heroOrb 11s ease-in-out infinite alternate}
.hero-grid::after{width:180px;height:180px;right:34%;bottom:0;background:radial-gradient(circle,rgba(255,176,32,.10),transparent 68%);animation:heroOrb 9s ease-in-out -3s infinite alternate-reverse}
@keyframes heroOrb{to{transform:translate(40px,-25px) scale(1.18)}}

/* Search gets a premium moving highlight */
.search{overflow:hidden}
.search::after{content:"";position:absolute;inset:0 auto 0 -40%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none;opacity:0}
.search:hover::after,.search:focus-within::after{opacity:1;animation:searchShine 1.4s var(--ease-soft)}
@keyframes searchShine{to{left:125%}}

/* Cards feel physical without becoming heavy */
.cat,.tile,.upd,.event,.points li{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px rgba(11,20,55,.045)}
.cat:hover,.tile:hover,.event:hover,.upd:hover{box-shadow:var(--shadow-card)}
.cat::after{opacity:.8}

/* Mobile slider: intentional peek at the next card */
@media (max-width:759px){
  .cats,.radar,.events{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:14px;padding:6px 4px 18px;margin-left:-4px;margin-right:calc(var(--pad) * -1);padding-right:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cats::-webkit-scrollbar,.radar::-webkit-scrollbar,.events::-webkit-scrollbar{display:none}
  .cat{min-width:min(82vw,286px);scroll-snap-align:start}
  .tile{min-width:min(72vw,250px);scroll-snap-align:start}
  .event{min-width:min(84vw,330px);scroll-snap-align:start}
  .cats::after,.radar::after,.events::after{content:"";display:block;flex:0 0 1px}
}

/* Small slider progress dots generated by JS */
.slider-dots{display:flex;justify-content:center;gap:6px;margin:2px 0 0}
.slider-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:transform .25s var(--ease),background .25s}
.slider-dots button[aria-current="true"]{background:var(--ink);transform:scale(1.35)}

/* Scroll storytelling: subtle section glow */
.reveal.in .section-kicker{animation:kickerIn .7s var(--ease-soft) both}
@keyframes kickerIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Cursor spotlight on pointer-capable devices */
.pointer-glow{position:fixed;z-index:0;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(59,91,219,.09),transparent 68%);mix-blend-mode:multiply;opacity:0;transition:opacity .35s ease;will-change:transform}
body.pointer-active .pointer-glow{opacity:1}

/* Subtle active navigation pill */
@media (min-width:760px){
  .nav a{padding:0 4px}
  .nav a.active{color:var(--brand)}
  .nav a.active::before{content:"";position:absolute;inset:8px -8px;border-radius:999px;background:rgba(59,91,219,.07);z-index:-1}
}

/* Better touch feedback */
@media (hover:none){
  .cat:active,.tile:active,.event:active{transform:scale(.985)}
}

@media (prefers-reduced-motion:reduce){
  .hero-grid::before,.hero-grid::after,.search::after{animation:none!important}
  .slider-dots button{transition:none!important}
}


/* =========================================================
   iNeedWay V5 - journey layer
   Stage labels, journey indicator, hero runner, parallax,
   radar sub-topics and numbered updates.
   ========================================================= */

/* ---- Stage kickers (01 Discover ... 05 Grow) ---- */
.section-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #B8460F;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.section-kicker::before {
  content: "";
  width: 28px;
  border-top: 3px dotted currentColor;
}
.steps .section-kicker { color: var(--sun); }

/* ---- Journey path: section nodes light up when their stage is active ---- */
#categories::before, #radar-sec::before, #updates::before, #events::before {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s;
}
#categories.active::before, #radar-sec.active::before, #updates.active::before, #events.active::before {
  transform: scale(1.4);
  background: #fff;
  box-shadow: 0 0 0 5px var(--sun), 0 0 22px rgba(255, 176, 32, .9);
}
/* The dotted connector must not inherit the full-width hairline rule */
#categories::after, #radar-sec::after, #updates::after, #events::after {
  right: auto;
  bottom: auto;
  width: 0;
  background: none;
}

/* ---- Journey indicator (small fixed pill) ---- */
.journey {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.journey.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.journey ol {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 2px 6px;
  list-style: none;
  border-radius: 999px;
  background: rgba(11, 20, 55, .9);
  box-shadow: 0 10px 30px rgba(11, 20, 55, .3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.journey a {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 9px;
  color: #C9D0EE;
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
}
.journey i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transition: background .3s, box-shadow .3s;
}
.journey span { display: none; }
.journey .on span { display: inline; color: #fff; }
.journey .on i { background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 176, 32, .3); }
.journey .done i { background: #fff; }
@media (min-width: 760px) {
  .journey { bottom: 18px; }
  .journey span { display: inline; }
  .journey li + li::before {
    content: "";
    display: inline-block;
    width: 14px;
    border-top: 2px dotted rgba(255, 255, 255, .3);
    vertical-align: middle;
  }
  .journey li { display: flex; align-items: center; }
}

/* ---- Hero: travelling light and lit nodes ---- */
.scene .runner {
  display: none;
  fill: #fff;
  stroke: rgba(255, 176, 32, .55);
  stroke-width: 6;
}
.scene .runner.go { display: inline; }
.scene .node { transition: fill .4s; }
.scene .node.on { fill: #fff; }
.ticker-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Opportunity map: sub-topics for each tile ---- */
.tile .more {
  display: block;
  margin-top: 6px;
  color: var(--fg);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.35;
}
@media (hover: hover) and (min-width: 760px) {
  .tile .more {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s var(--ease), opacity .3s, margin .3s;
  }
  .tile:hover .more, .tile:focus-visible .more { max-height: 4em; margin-top: 6px; opacity: 1; }
}

/* ---- Updates: numbered information stream ---- */
.updates { counter-reset: stream; }
.upd { counter-increment: stream; }
.upd:not(.feat)::before {
  content: counter(stream, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 16px;
  color: var(--line);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}
.upd:not(.feat) h3 { padding-right: 2.6rem; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .journey, .journey i, .scene .node,
  #categories::before, #radar-sec::before, #updates::before, #events::before { transition: none !important; }
}