/* ===========================================================
   LAUNCH CUBE — shared design system
   Bright, dimensional, purple→blue. Used by index.html + apply.html
   =========================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

:root{
  --ink:#0c0a2b;
  --ink-2:#221f52;
  --muted:#5a5885;
  --line:rgba(84,74,190,.16);

  --violet:#6C3BFF;
  --violet-2:#8B5CFF;
  --indigo:#4B4BFF;
  --blue:#1E7BFF;
  --sky:#23C1FF;
  --orchid:#B457FF;

  --glass:rgba(245,242,255,.58);
  --glass-2:rgba(245,242,255,.34);
  --glass-line:rgba(245,242,255,.75);

  --grad:linear-gradient(115deg,var(--violet) 0%,var(--indigo) 45%,var(--blue) 78%,var(--sky) 100%);
  --grad-soft:linear-gradient(115deg,#8B5CFF,#4B7BFF 60%,#23C1FF);

  --shadow-s:0 6px 20px -8px rgba(46,30,120,.28);
  --shadow-m:0 22px 50px -22px rgba(46,30,120,.42);
  --shadow-l:0 44px 90px -38px rgba(40,24,120,.5);

  --r-s:14px; --r-m:22px; --r-l:30px; --r-xl:38px;
  --wrap:1180px;
  --nav-h:76px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
}

body{
  font-family:var(--font);
  color:var(--ink);
  background:#DEDFF4;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ============ MOVING BACKGROUND STACK ============ */
.bg{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}

/* bright, never-white base that slowly drifts */
.bg-base{
  position:absolute;inset:-20%;
  background:
    radial-gradient(58% 48% at 18% 12%, #E5D9FA 0%, rgba(229,217,250,0) 62%),
    radial-gradient(52% 46% at 84% 8%,  #D2E6FB 0%, rgba(210,230,251,0) 60%),
    radial-gradient(60% 55% at 72% 88%, #D9D2F7 0%, rgba(217,210,247,0) 62%),
    radial-gradient(48% 44% at 10% 84%, #CEE0F9 0%, rgba(206,224,249,0) 58%),
    linear-gradient(160deg,#E1DCF7 0%,#D8E3F7 45%,#DED7F5 100%);
  animation:baseDrift 26s ease-in-out infinite alternate;
}
@keyframes baseDrift{
  0%{transform:scale(1) translate3d(0,0,0)}
  100%{transform:scale(1.09) translate3d(-2%,-1.5%,0)}
}

/* aurora blobs — parallax via --sy set from JS */
.aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:normal;will-change:transform}
.aurora.a1{width:56vw;height:56vw;left:-14vw;top:-12vw;background:radial-gradient(circle at 35% 35%,rgba(139,92,255,.75),rgba(139,92,255,0) 68%);animation:float1 22s ease-in-out infinite}
.aurora.a2{width:50vw;height:50vw;right:-12vw;top:6vh;background:radial-gradient(circle at 60% 40%,rgba(35,193,255,.62),rgba(35,193,255,0) 66%);animation:float2 27s ease-in-out infinite}
.aurora.a3{width:62vw;height:62vw;left:12vw;bottom:-26vw;background:radial-gradient(circle at 50% 50%,rgba(75,75,255,.5),rgba(75,75,255,0) 66%);animation:float3 31s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.14)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1.06)}50%{transform:translate(-9vw,10vh) scale(.94)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-8vh) scale(1.1)}}

/* perspective grid floor that slides as you scroll */
.grid3d{
  position:absolute;left:-25%;right:-25%;bottom:-8%;height:62vh;
  background-image:
    linear-gradient(rgba(108,59,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(108,59,255,.16) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(66deg);
  transform-origin:50% 100%;
  mask-image:linear-gradient(to top,#000 5%,transparent 78%);
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 78%);
  opacity:.65;
}
.grid3d.top{top:-8%;bottom:auto;transform:perspective(520px) rotateX(-66deg);transform-origin:50% 0;
  mask-image:linear-gradient(to bottom,#000 2%,transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom,#000 2%,transparent 62%);opacity:.4}

/* canvas: floating wireframe cubes + light motes */
/* width/height are explicit: a <canvas> is a replaced element, so inset:0 alone
   leaves it at its 300x150 intrinsic size instead of filling the viewport. */
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}

/* fine noise so gradients never band */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* soft light that follows the cursor */
.cursorglow{position:fixed;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;z-index:-1;
  border-radius:50%;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle,rgba(245,242,255,.62),rgba(139,92,255,.14) 42%,transparent 68%)}

/* scroll progress */
.progressbar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad);z-index:120;box-shadow:0 0 18px rgba(108,59,255,.6)}

/* ============ LAYOUT ============ */
.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
.wrap.narrow{width:min(100% - 44px,820px)}
section{position:relative;padding:120px 0}
@media(max-width:760px){section{padding:78px 0}.wrap{width:min(100% - 32px,var(--wrap))}}

/* ============ TYPE ============ */
h1,h2,h3,.display{font-family:var(--display);letter-spacing:-.035em;line-height:1.02;font-weight:700}
h1{font-size:clamp(2.65rem,7.4vw,5.5rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.05}
h3{font-size:1.24rem;letter-spacing:-.02em;line-height:1.25}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(1.04rem,1.55vw,1.22rem);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--violet);padding:8px 16px;border-radius:999px;
  background:rgba(245,242,255,.6);border:1px solid var(--glass-line);box-shadow:var(--shadow-s);backdrop-filter:blur(12px)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(108,59,255,.15);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(108,59,255,.16)}50%{box-shadow:0 0 0 9px rgba(108,59,255,0)}}
.sec-head{text-align:center;max-width:800px;margin:0 auto 62px}
.sec-head .lede{margin:18px auto 0;text-align:center}

/* ============ GLASS SURFACES ============ */
.glass{
  position:relative;border-radius:var(--r-l);
  background:linear-gradient(160deg,var(--glass),var(--glass-2));
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-m),inset 0 1px 0 rgba(245,242,255,.9);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.glass.edge::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(139,92,255,.55),rgba(35,193,255,.4) 55%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ============ BUTTONS ============ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;font-weight:650;font-size:.98rem;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,background .3s,color .3s;
}
.btn.primary{color:#fff;background:var(--grad);background-size:220% 100%;box-shadow:0 14px 34px -12px rgba(80,50,230,.72),inset 0 1px 0 rgba(245,242,255,.34)}
.btn.primary::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .34s;
  background:linear-gradient(115deg,var(--orchid),var(--violet) 40%,var(--blue))}
.btn.primary:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 22px 48px -14px rgba(80,50,230,.8)}
.btn.primary:hover::after{opacity:1}
.btn.ghost{background:rgba(245,242,255,.62);border-color:var(--glass-line);color:var(--ink);
  box-shadow:var(--shadow-s);backdrop-filter:blur(12px)}
.btn.ghost:hover{transform:translateY(-3px);background:#F8F6FF;box-shadow:var(--shadow-m)}
.btn.big{padding:19px 40px;font-size:1.05rem}
.btn.wide{width:100%}
.btn .arw{transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arw{transform:translateX(5px)}

/* ============ REVEAL / MOTION ============ */
.rv{opacity:0;transform:translateY(34px) scale(.985);filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s}
.rv.in{opacity:1;transform:none;filter:none}
.rv.left{transform:translateX(-40px)}
.rv.right{transform:translateX(40px)}
.rv.zoom{transform:scale(.9)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s}

/* mouse-tilt cards */
[data-tilt]{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[data-tilt] .lift{transform:translateZ(38px)}

/* ============ FORM CONTROLS (apply page) ============ */
.field{margin-bottom:20px}
.field label,.qlabel{display:block;font-weight:650;font-size:.95rem;margin-bottom:9px;letter-spacing:-.01em}
.field .hint,.qhint{font-weight:400;color:var(--muted);font-size:.86rem}
.input,textarea.input,select.input{
  width:100%;padding:14px 17px;border-radius:var(--r-s);color:var(--ink);
  background:rgba(245,242,255,.72);border:1px solid var(--line);
  box-shadow:inset 0 1px 2px rgba(40,24,120,.05);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.input::placeholder{color:#9a98bd}
.input:focus{outline:none;background:#FBFAFF;border-color:rgba(108,59,255,.6);
  box-shadow:0 0 0 4px rgba(108,59,255,.14)}
textarea.input{min-height:132px;resize:vertical;line-height:1.55}

/* multiple-choice chips */
.opts{display:grid;gap:11px}
.opts.two{grid-template-columns:1fr 1fr}
.opts.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.opts.two,.opts.three{grid-template-columns:1fr}}
.opt{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:15px 17px;border-radius:var(--r-s);background:rgba(245,242,255,.6);
  border:1px solid var(--line);transition:all .28s cubic-bezier(.2,.8,.2,1)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .box{flex:none;width:20px;height:20px;border-radius:7px;margin-top:1px;
  border:1.5px solid rgba(108,59,255,.4);background:#FBFAFF;
  display:grid;place-items:center;transition:all .25s}
.opt .box::after{content:"";width:9px;height:9px;border-radius:3px;background:var(--grad);transform:scale(0);transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
.opt.radio .box,.opt.radio .box::after{border-radius:50%}
.opt b{display:block;font-weight:620;font-size:.96rem;letter-spacing:-.01em}
.opt span.sub{display:block;color:var(--muted);font-size:.84rem;line-height:1.4}
.opt:hover{background:rgba(245,242,255,.86);transform:translateY(-2px);box-shadow:var(--shadow-s)}
.opt:has(input:checked){background:linear-gradient(150deg,rgba(139,92,255,.16),rgba(35,193,255,.13));
  border-color:rgba(108,59,255,.55);box-shadow:0 10px 26px -14px rgba(80,50,230,.6)}
.opt:has(input:checked) .box{border-color:transparent;background:#FBFAFF}
.opt:has(input:checked) .box::after{transform:scale(1)}
.opt input:focus-visible ~ .box{box-shadow:0 0 0 4px rgba(108,59,255,.2)}

/* ============ FAQ ============ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{border-radius:var(--r-m);padding:4px 24px;background:rgba(245,242,255,.55);
  border:1px solid var(--glass-line);backdrop-filter:blur(14px);box-shadow:var(--shadow-s);
  transition:box-shadow .3s,background .3s}
.faq details[open]{background:rgba(245,242,255,.78);box-shadow:var(--shadow-m)}
.faq summary{cursor:pointer;list-style:none;padding:19px 30px 19px 0;font-weight:650;position:relative;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:2px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--violet);border-bottom:2px solid var(--violet);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq details p{padding-bottom:22px;color:var(--muted);margin-top:-2px}

/* ============ FOOTER ============ */
footer{position:relative;padding:56px 0 44px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(245,242,255,.28),rgba(245,242,255,.62))}
.foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;color:var(--muted);font-size:.9rem}
.foot a:hover{color:var(--violet)}

/* ============ LOGO ============ */
.logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;letter-spacing:-.03em}
.logo .mark{width:38px;height:38px;flex:none}
.logo .mark svg{width:100%;height:100%;animation:spinmark 14s linear infinite;transform-origin:50% 50%}
@keyframes spinmark{to{transform:rotate(360deg)}}
.logo b{font-size:1.12rem;line-height:1.1;display:block}
.logo small{display:block;font-family:var(--font);font-weight:400;font-size:.72rem;color:var(--muted);letter-spacing:0}

/* ============ ACCESSIBILITY ============ */
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none;filter:none}
  #bgfx,.cursorglow{display:none}
}