/* Outro: About, FAQ, Contact, final call to action and footer.
   3D objects are pure CSS. Everything animated stops for visitors who prefer reduced motion. */
.outro{position:relative;z-index:1}

/* ---------- Scroll line in the left margin (wide screens only) ---------- */
.spine{position:absolute;top:0;bottom:0;left:max(20px,calc(50% - 620px));width:2px;pointer-events:none;display:none}
.spine::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(255,255,255,.08) 5%,rgba(255,255,255,.08) 95%,transparent)}
.spine i{position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--sp,0));
  background:linear-gradient(var(--cyan),var(--violet),var(--magenta));box-shadow:0 0 12px rgba(0,194,255,.55)}
.spine::after{content:"";position:absolute;left:50%;top:calc(var(--sp,0) * 100% - 6px);width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px #00c2ff,0 0 24px #5b2eff}
@media (min-width:1300px){.fx .spine{display:block}}

/* ---------- About ---------- */
.about-grid{display:grid;gap:var(--space-4);align-items:center}
@media (min-width:980px){.about-grid{grid-template-columns:1.15fr .85fr}}
.values{list-style:none;padding:0;margin:var(--space-3) 0 0;display:flex;flex-wrap:wrap;gap:10px}
.values li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radius-pill);
  background:rgba(20,20,46,.75);border:1px solid var(--line);color:var(--text);font-weight:500;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.values li:hover{transform:translateY(-3px);border-color:rgba(0,194,255,.5);box-shadow:0 10px 24px rgba(0,194,255,.15)}
.values svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--cyan);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* the 3D vortex orbit */
.orbit{position:relative;width:min(380px,100%);aspect-ratio:1;justify-self:center;display:none}
@media (min-width:700px){.orbit{display:block}}
@media (min-width:700px) and (max-width:979px){.orbit{width:300px}}
.orbit-m{position:absolute;inset:0;perspective:1000px;transform:rotateX(calc(var(--my,0) * -8deg)) rotateY(calc(var(--mx,0) * 12deg))}
.orbit-scene{position:absolute;inset:0;transform-style:preserve-3d;animation:orbit-float 8s ease-in-out infinite}
.o-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.t1{transform:rotateX(74deg)}
.t2{transform:rotateZ(60deg) rotateX(74deg)}
.t3{transform:rotateZ(-60deg) rotateX(74deg)}
.o-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(160,190,255,.6);
  box-shadow:0 0 18px rgba(91,46,255,.45),inset 0 0 18px rgba(0,194,255,.25);animation:o-spin 9s linear infinite}
.t2 .o-ring{inset:5%;border-color:rgba(255,140,200,.55);animation-duration:12s;animation-direction:reverse}
.t3 .o-ring{inset:10%;border-color:rgba(0,194,255,.6);animation-duration:15s}
.o-ring i{position:absolute;left:50%;top:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px #00c2ff,0 0 26px #5b2eff}
.o-core{position:absolute;left:50%;top:50%;width:32%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 58%,rgba(255,255,255,0) 70%);
  box-shadow:0 0 60px rgba(91,46,255,.6),0 0 120px rgba(0,194,255,.25)}
.o-core img{width:100%;height:100%;animation:o-turn 24s linear infinite}
.o-shadow{position:absolute;left:22%;right:22%;bottom:-6%;height:9%;border-radius:50%;
  background:radial-gradient(rgba(91,46,255,.5),transparent 70%);filter:blur(8px);animation:o-shadow 8s ease-in-out infinite}
@keyframes orbit-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes o-shadow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.82);opacity:.55}}
@keyframes o-spin{to{transform:rotate(360deg)}}
@keyframes o-turn{to{transform:rotate(360deg)}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:var(--space-4);align-items:center}
@media (min-width:1000px){.faq-grid{grid-template-columns:minmax(0,46rem) 1fr}}
.faq details{border-radius:12px;transition:background .3s}
.faq details:hover{background:rgba(255,255,255,.025)}
.faq summary{position:relative;padding:14px 58px 14px 4px;transition:color .3s}
.faq summary:hover{color:var(--cyan)}
/* round plus button that turns into a cross */
.faq summary::after,.faq details[open] summary::after{content:"";position:absolute;right:6px;top:50%;width:32px;height:32px;margin:-16px 0 0;padding:0;
  border-radius:50%;border:1px solid var(--line);font-size:0;
  background:linear-gradient(var(--cyan),var(--cyan)) center/12px 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) center/2px 12px no-repeat;
  transition:transform .45s var(--ease),border-color .3s,background-color .3s}
.faq details[open] summary::after{transform:rotate(135deg);border-color:rgba(0,194,255,.6);background-color:rgba(0,194,255,.1)}
.faq-a p{padding:0 4px var(--space-2)}
.faq details[open] .faq-a{animation:faq-in .5s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* floating stack of glass layers */
.layers{display:none;position:relative;height:440px;perspective:1100px}
@media (min-width:1000px){.layers{display:block}}
.layers-m{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(58deg + var(--my,0) * -5deg)) rotateZ(calc(-38deg + var(--mx,0) * 6deg))}
.layer{--z:0px;position:absolute;left:50%;top:50%;width:230px;height:160px;margin:-80px 0 0 -115px;border-radius:18px;
  border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(135deg,rgba(91,46,255,.38),rgba(0,194,255,.12) 60%,rgba(255,61,154,.22));
  box-shadow:0 30px 50px rgba(0,0,0,.45),inset 0 0 30px rgba(255,255,255,.08);animation:layer-float 6s ease-in-out infinite}
.l2{--z:64px;animation-delay:-1s}
.l3{--z:128px;animation-delay:-2s;border-color:rgba(0,194,255,.7);box-shadow:0 30px 50px rgba(0,0,0,.45),0 0 30px rgba(0,194,255,.3)}
.layer span{display:block;height:10px;border-radius:6px;background:rgba(255,255,255,.35);margin:20px 22px 0}
.l1 span:nth-child(2){width:55%}.l1 span:nth-child(3){width:35%}
.l2 span:first-child{height:54px;background:rgba(255,255,255,.14)}.l2 span:nth-child(2){width:45%}
.l3 span{width:42%;height:28px;border-radius:14px;margin-top:66px;background:linear-gradient(90deg,var(--violet),var(--magenta))}
@keyframes layer-float{0%,100%{transform:translateZ(var(--z))}50%{transform:translateZ(calc(var(--z) + 24px))}}

/* ---------- Contact ---------- */
.contact-intro{max-width:36rem}
.contact-grid{display:grid;gap:var(--space-2);grid-template-columns:1fr;margin-top:var(--space-3);perspective:1000px}
@media (min-width:640px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.contact-grid{grid-template-columns:repeat(4,1fr)}}
.contact-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--space-3);border-radius:var(--radius-card);
  text-decoration:none;color:var(--text);overflow-wrap:anywhere;border:1px solid transparent;
  background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,linear-gradient(135deg,rgba(91,46,255,.6),rgba(0,194,255,.4),rgba(255,61,154,.4)) border-box;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--lift,0px))}
.contact-card:hover,.contact-card:focus-visible{--lift:18px;box-shadow:0 22px 44px rgba(91,46,255,.3),0 0 0 1px rgba(0,194,255,.3)}
.contact-card .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin-bottom:var(--space-1);
  background:var(--grad-main);box-shadow:0 8px 20px rgba(91,46,255,.4),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .45s var(--ease)}
.contact-card:hover .ic{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
.contact-card svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.contact-card .lbl{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-soft)}
.contact-card .val{font-family:var(--font-heading);font-weight:600;font-size:1.05rem}
/* soft light that follows the cursor across the card */
.contact-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),transparent 45%)}
.contact-card:hover::after{opacity:1}

/* ---------- Final call to action ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.closing{perspective:1200px}
.cta-panel{position:relative;max-width:820px;margin:0 auto;padding:clamp(40px,7vw,76px) clamp(20px,5vw,56px);border-radius:32px;isolation:isolate;
  background:linear-gradient(160deg,rgba(26,26,62,.88),rgba(14,14,36,.94));box-shadow:0 40px 80px rgba(0,0,0,.45);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease)}
/* a thin light that travels around the border */
.cta-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),rgba(255,255,255,.08) 0 18%,var(--cyan) 30%,var(--violet) 40%,var(--magenta) 50%,rgba(255,255,255,.08) 62% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ang 7s linear infinite}
@keyframes ang{to{--ang:360deg}}
.cta-aurora{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1}
.cta-aurora::before,.cta-aurora::after{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(60px)}
.cta-aurora::before{background:var(--violet);left:-12%;top:-35%;opacity:.45;animation:aur1 14s ease-in-out infinite alternate}
.cta-aurora::after{background:var(--cyan);right:-15%;bottom:-45%;opacity:.28;animation:aur2 18s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(45%,30%)}}
@keyframes aur2{to{transform:translate(-40%,-25%)}}
.cta-panel h2{font-size:clamp(2.2rem,6vw,3.6rem)}
.cta-panel .d{position:absolute;translate:none}
.cta-orb1{left:-14px;top:20%}
.cta-orb2{right:-26px;bottom:-24px}
.cta-orb2 .orb{width:76px;height:76px}
@media (max-width:700px){.cta-panel .d{display:none}}

/* ---------- Footer ---------- */
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),var(--magenta),transparent) 0 0/200% 100%;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.foot-brand{display:flex;align-items:center;justify-content:center;gap:10px}
.foot-brand img{border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.92) 0 62%,rgba(255,255,255,0) 72%)}
.foot-links a{position:relative}
.foot-links a::after{content:"";position:absolute;left:10px;right:10px;bottom:10px;height:1.5px;background:var(--grad-text);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.foot-links a:hover::after,.foot-links a:focus-visible::after{transform:scaleX(1)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .orbit-scene,.o-ring,.o-core img,.o-shadow,.layer,.cta-aurora::before,.cta-aurora::after,.cta-panel::before,footer::before{animation:none}
  .layer{transform:translateZ(var(--z))}
  .orbit-m,.layers-m{transform:none}
  .layers-m{transform:rotateX(58deg) rotateZ(-38deg)}
  .spine{display:none!important}
}