/* ============================================================
   AI WORLD — Henschel Technologies
   Entrance page styles. Deep navy space register, neon circuit
   glow, big clear type. Pure CSS motion + a light JS starfield.
   ============================================================ */

:root{
  --abyss:#030d24;
  --navy-950:#051736;
  --navy-900:#0a2a5c;
  --navy-850:#0c3572;
  --royal:#1256c9;
  --blue:#1e7bff;
  --neon:#00b3ff;
  --cyan:#22d3ee;
  --aqua:#2ee6ff;
  --sky:#38bdf8;
  --steel:#8fb8ec;
  --mist:#b7d6fa;
  --ice:#eaf6ff;
  --gold:#e8b34b;
  --card-line:rgba(120,220,255,.32);
  --glow:0 0 18px rgba(0,179,255,.5),0 0 46px rgba(30,123,255,.28);
  --glow-strong:0 0 26px rgba(46,230,255,.75),0 0 74px rgba(0,179,255,.45),0 0 130px rgba(30,123,255,.3);
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--abyss);
  color:var(--mist);
  font-family:var(--font-body);
  font-size:1.125rem;
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:var(--royal);color:var(--ice)}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-display);color:var(--ice);line-height:1.15;letter-spacing:.01em}
strong,b{color:var(--ice)}
.grad-text{background:linear-gradient(92deg,var(--aqua),var(--neon) 45%,var(--sky) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Backdrop: orbital art, starfield canvas, glow orbs ---------- */
.bg-art{position:fixed;inset:0;z-index:0;overflow:hidden}
.bg-art img{width:100%;height:100%;object-fit:cover;opacity:.4;filter:brightness(1.1) saturate(1.1)}
.bg-art:after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 50% 30%,rgba(10,44,102,.1),rgba(3,13,36,.6) 82%),
  linear-gradient(180deg,rgba(3,13,36,.5),rgba(5,23,54,.35) 40%,rgba(2,8,28,.78))}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.orb{position:fixed;border-radius:50%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.5}
.orb-a{width:480px;height:480px;left:-140px;top:12%;background:radial-gradient(circle,rgba(0,140,255,.5),transparent 65%);animation:drift-a 26s ease-in-out infinite alternate}
.orb-b{width:420px;height:420px;right:-130px;top:52%;background:radial-gradient(circle,rgba(46,230,255,.35),transparent 65%);animation:drift-b 32s ease-in-out infinite alternate}
@keyframes drift-a{from{transform:translate(0,0)}to{transform:translate(70px,50px)}}
@keyframes drift-b{from{transform:translate(0,0)}to{transform:translate(-60px,-70px)}}

.stage{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:28px 24px 72px}

/* ---------- Top bar ---------- */
.topbar{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;padding:6px 0 4px}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.06em;color:var(--ice)}
.brand .w{color:var(--aqua)}
.backlink{font-size:.95rem;font-weight:600;color:var(--steel)}
.backlink:hover{color:var(--aqua)}

/* ---------- Hero / Digi greeting ---------- */
.hero{text-align:center;padding:44px 0 30px}
.digi-stage{position:relative;width:min(430px,82vw);margin:0 auto 8px;display:grid;place-content:center}
.digi-ring{position:absolute;inset:6%;border-radius:50%;border:2px solid rgba(46,230,255,.4);box-shadow:0 0 34px rgba(0,179,255,.3),inset 0 0 34px rgba(0,179,255,.18);pointer-events:none}
.digi-ring.dash{inset:0;border:2px dashed rgba(56,189,248,.4);animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.digi{width:min(360px,72vw);position:relative;z-index:1;animation:digi-float 6s ease-in-out infinite;filter:drop-shadow(0 0 26px rgba(0,179,255,.65)) drop-shadow(0 18px 44px rgba(0,4,20,.55))}
@keyframes digi-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan);margin:18px 0 12px}
.hero h1{font-size:clamp(2.7rem,6.5vw,4.3rem);font-weight:700;text-shadow:0 0 30px rgba(0,140,255,.4)}
.hero .speech{font-size:clamp(1.3rem,2.6vw,1.6rem);color:var(--ice);max-width:760px;margin:20px auto 0;line-height:1.55}
.hero .sub{color:var(--mist);max-width:680px;margin:16px auto 0;font-size:1.13rem}
.hero .btnrow{margin-top:30px}

/* ---------- Buttons ---------- */
.btnrow{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 32px;border-radius:12px;font-weight:700;font-size:1.08rem;border:1px solid var(--aqua);background:linear-gradient(180deg,rgba(11,61,145,.55),rgba(4,16,46,.72));color:var(--ice);text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s}
.btn:hover{box-shadow:var(--glow);transform:translateY(-2px)}
.btn.primary{background:linear-gradient(180deg,var(--royal),var(--navy-900));box-shadow:var(--glow)}
.btn.primary:hover{box-shadow:var(--glow-strong)}

/* ---------- Sections ---------- */
section.block{padding:52px 0 8px}
.sec-head{text-align:center;max-width:780px;margin:0 auto 34px}
.sec-head .kicker{font-size:.82rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.6rem);text-shadow:0 0 22px rgba(0,140,255,.35)}
.sec-head p{margin-top:14px;font-size:1.13rem}

/* Cards */
.grid{display:grid;gap:18px;margin-bottom:10px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;padding:28px 28px 24px;border-radius:18px;background:linear-gradient(168deg,rgba(56,150,255,.13),rgba(4,16,46,.74) 58%,rgba(2,6,26,.88));border:1px solid var(--card-line);box-shadow:inset 0 1px 0 rgba(170,225,255,.22),0 16px 36px rgba(0,4,20,.5);transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover{transform:translateY(-5px);border-color:var(--neon);box-shadow:inset 0 1px 0 rgba(170,225,255,.22),var(--glow),0 22px 44px rgba(0,4,20,.55)}
.card .ic{width:50px;height:50px;border-radius:13px;display:grid;place-content:center;background:linear-gradient(160deg,var(--royal),var(--navy-800,#0f438c));border:1px solid rgba(46,230,255,.5);box-shadow:0 0 14px rgba(0,179,255,.4);margin-bottom:15px}
.card .ic svg{width:26px;height:26px;stroke:var(--aqua);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.28rem;margin-bottom:9px}
.card p{font-size:1.05rem}
.card p + p{margin-top:9px}
.card .price{margin-top:13px;padding-top:12px;border-top:1px solid rgba(120,220,255,.2);font-size:1rem;color:var(--steel)}
.card .price b{color:var(--aqua);font-size:1.12rem}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-bottom:10px}
.step{padding:24px 19px;border-radius:15px;background:linear-gradient(165deg,rgba(18,86,201,.22),rgba(5,18,51,.9) 60%);border:1px solid rgba(56,189,248,.32);transition:transform .22s,box-shadow .22s,border-color .22s}
.step:hover{transform:translateY(-5px);border-color:var(--neon);box-shadow:var(--glow)}
.step .n{width:38px;height:38px;border-radius:50%;display:grid;place-content:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ice);background:radial-gradient(circle at 34% 28%,rgba(120,220,255,.55),rgba(18,86,201,.6) 55%,rgba(3,11,38,.92));border:1.5px solid rgba(120,225,255,.75);box-shadow:0 0 14px rgba(46,230,255,.6);margin-bottom:13px}
.step h3{font-size:1.12rem;margin-bottom:7px}
.step p{font-size:.99rem}

/* Digi note / callout */
.digi-note{display:flex;gap:22px;align-items:flex-start;padding:28px 30px;border-radius:18px;margin:26px 0 10px;background:linear-gradient(168deg,rgba(232,179,75,.1),rgba(4,16,46,.82) 62%);border:1px solid rgba(232,179,75,.5);box-shadow:inset 0 0 24px rgba(232,179,75,.06),0 14px 34px rgba(0,4,20,.5)}
.digi-note img{width:86px;flex:none;animation:digi-float 7s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(0,179,255,.6))}
.digi-note h3{color:var(--gold);font-size:1.25rem;margin-bottom:8px;text-shadow:0 0 14px rgba(232,179,75,.35)}
.digi-note p{font-size:1.06rem}

/* Library doorway */
.library-door{display:block;text-align:center;padding:44px 30px;border-radius:20px;text-decoration:none;background:linear-gradient(168deg,rgba(56,150,255,.18),rgba(4,16,46,.8) 58%,rgba(2,6,26,.9));border:1px solid rgba(120,220,255,.45);box-shadow:inset 0 1px 0 rgba(170,225,255,.28),0 18px 40px rgba(0,4,20,.5);transition:transform .22s,box-shadow .22s,border-color .22s}
.library-door:hover{transform:translateY(-4px);border-color:var(--aqua);box-shadow:var(--glow)}
.library-door .kicker{font-size:.82rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.library-door h2{font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:12px}
.library-door p{max-width:620px;margin:0 auto 16px;font-size:1.1rem}
.library-door .go{font-weight:800;font-size:.92rem;letter-spacing:.18em;text-transform:uppercase;color:var(--aqua)}

/* Closing CTA */
.cta{text-align:center;margin-top:54px;padding:44px 30px;border-radius:20px;background:linear-gradient(168deg,rgba(56,150,255,.16),rgba(4,16,46,.78) 58%,rgba(2,6,26,.9));border:1px solid rgba(120,220,255,.45);box-shadow:inset 0 1px 0 rgba(170,225,255,.28),0 18px 40px rgba(0,4,20,.5)}
.cta h2{font-size:clamp(1.8rem,3.8vw,2.5rem);margin-bottom:12px;text-shadow:0 0 18px rgba(0,170,255,.4)}
.cta p{max-width:600px;margin:0 auto 26px;font-size:1.12rem}
.cta .home-link{margin-top:22px;font-size:1.02rem;color:var(--steel)}
.cta .home-link a{color:var(--sky);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cta .home-link a:hover{color:var(--aqua)}

footer.site{text-align:center;padding:42px 20px 6px;color:var(--steel);font-size:.98rem}
footer.site .fname{font-family:var(--font-display);color:var(--mist);letter-spacing:.05em}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .grid.c3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  body{font-size:1.06rem}
  .stage{padding:20px 16px 56px}
  .steps{grid-template-columns:1fr 1fr}
  .grid.c3,.grid.c2{grid-template-columns:1fr}
  .digi-note{flex-direction:column;align-items:center;text-align:center}
  .hero{padding-top:28px}
  .btn{width:100%;text-align:center}
  .btnrow{flex-direction:column;align-items:stretch}
}
@media (max-width:430px){
  .steps{grid-template-columns:1fr}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .digi-ring.dash{animation:none}
}