/* ============================================================
   DevHive — CONTACT · "AURORA CONTROL" dark concept
   Self-contained dark theme (scoped to .contact). Form JS kept.
   ============================================================ */
.contact{
  --bg:#0b1422;--bg2:#0e1a2c;
  --panel:rgba(255,255,255,.04);--panel2:rgba(255,255,255,.06);
  --line2:rgba(255,255,255,.09);--line3:rgba(255,255,255,.14);
  --txt:#9fb2c6;--txt-dim:#728aa1;--vio:#7b6cff;--teal:#00bdc3;--blue:#0277d4;
  --mono:"JetBrains Mono",ui-monospace,monospace;--ease:cubic-bezier(.22,1,.36,1);
}
body.contact{background:var(--bg);color:var(--txt)}
.contact main{position:relative;z-index:1}
.contact::before,.contact::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
.contact::before{background:
  radial-gradient(900px 620px at 10% -8%,rgba(0,189,195,.15),transparent 60%),
  radial-gradient(840px 600px at 94% 4%,rgba(123,108,255,.14),transparent 60%),
  radial-gradient(1000px 760px at 50% 120%,rgba(2,119,212,.12),transparent 60%),
  linear-gradient(180deg,#0b1422,#0a1322 60%,#0b1422);
  animation:ctDrift 28s ease-in-out infinite alternate}
.contact::after{background-image:linear-gradient(rgba(122,170,200,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(122,170,200,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 28%,#000,transparent 85%);mask-image:radial-gradient(ellipse 75% 60% at 50% 28%,#000,transparent 85%);opacity:.4}
@keyframes ctDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-20px,0) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.contact::before{animation:none}}

.contact .section{position:relative;z-index:1;padding:100px 0}
.contact .section.tight{padding:70px 0}
.contact .bg-mist,.contact .bg-navy{background:transparent;color:var(--txt)}
.contact h1,.contact h2,.contact h3,.contact h4{color:#f3f8fc}
.contact .title{color:#fff}
.contact .lead{color:var(--txt)}
.contact .center{text-align:center}
.contact .grad-text{background:linear-gradient(120deg,#9ff7ee,#03aae1 50%,#9b8bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7ff0e6;margin-bottom:16px}
.contact .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--vio))}
.contact .eyebrow.light{color:#7ff0e6}
.contact .sec-head{max-width:760px;margin:0 auto}
.contact .btn-ghost{background:transparent;color:#fff;border:1.5px solid var(--line3)}
.contact .btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-3px)}
.contact .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.contact .reveal.in{opacity:1;transform:none}
.contact .reveal.d1{transition-delay:.1s}.contact .reveal.d2{transition-delay:.2s}.contact .reveal.d3{transition-delay:.3s}

/* header light-glass on scroll */
.contact .site-header.scrolled{background:rgba(8,14,24,.94);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.06)}
.contact .site-header.scrolled .nav .nav-links>li>a{color:#e7f1f8}
.contact .site-header.scrolled .nav-links>li>a:hover,.contact .site-header.scrolled .nav-links>li>a.active{color:var(--teal)}
.contact .site-header.scrolled .brand .wordmark b{color:#fff}
.contact .site-header.scrolled .brand .wordmark span{color:var(--sky)}
.contact .site-header.scrolled .burger span{background:#fff}

/* ============================================================
   HERO — copy + animated "signal" envelope visual
   ============================================================ */
.contact .hero{position:relative;overflow:hidden;background:transparent}
.contact .hero .glow-orb,.contact .hero .scene{display:none}
.contact .hero-pad{position:relative;z-index:2;padding-top:158px;padding-bottom:92px}
.contact .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.contact .hero .crumb{font:600 12px var(--mono);letter-spacing:.12em;color:var(--txt-dim);text-transform:uppercase;margin-bottom:18px}
.contact .hero-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px;background:var(--panel);border:1px solid var(--line2);color:#cfe0ea;font:600 13px var(--body);margin-bottom:22px}
.contact .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#3ee68f;box-shadow:0 0 0 4px rgba(62,230,143,.18)}
.contact .hero h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,5.6vw,64px);line-height:1.03;letter-spacing:-.02em;color:#fff;margin:0 0 20px}
.contact .hero .lead{font-size:18px;line-height:1.65;color:rgba(225,238,247,.86);max-width:52ch;margin:0 0 30px}
.contact .hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* signal visual */
.ct-signal{position:relative;height:420px;display:grid;place-items:center}
.ct-signal .sg-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,189,195,.3);animation:sgPulse 3.4s ease-out infinite}
.ct-signal .sg-ring.r2{animation-delay:1.1s}.ct-signal .sg-ring.r3{animation-delay:2.2s}
@keyframes sgPulse{0%{width:150px;height:150px;opacity:.85}100%{width:400px;height:400px;opacity:0}}
.ct-signal .sg-core{position:relative;z-index:3;width:120px;height:120px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(150deg,rgba(0,189,195,.25),rgba(123,108,255,.2)),#0a1726;border:1px solid rgba(127,240,230,.3);box-shadow:0 0 50px rgba(0,189,195,.35);animation:sgBob 5s ease-in-out infinite}
@keyframes sgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.ct-signal .sg-core svg{width:50px;height:50px;color:#7ff0e6}
.ct-signal .sg-bub{position:absolute;z-index:4;background:rgba(8,15,26,.82);backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:14px;padding:10px 15px;font:600 13px var(--body);color:#eaf3fa;box-shadow:0 20px 44px -16px rgba(0,0,0,.7);animation:sgFloat 6s ease-in-out infinite;white-space:nowrap}
.ct-signal .sg-bub b{color:#7ff0e6}
.ct-signal .b1{left:-2%;top:14%}
.ct-signal .b2{right:-4%;top:30%;animation-delay:1.2s}
.ct-signal .b3{right:2%;bottom:18%;animation-delay:2.1s}
.ct-signal .b4{left:4%;bottom:14%;animation-delay:1.6s}
@keyframes sgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media(max-width:980px){.contact .hero-grid{grid-template-columns:1fr;gap:44px}.ct-signal{max-width:480px;margin:0 auto}}
@media(max-width:560px){.ct-signal{height:340px}.ct-signal .sg-bub{display:none}}

/* ============================================================
   FORM section — info rail + glass form card
   ============================================================ */
.contact .ct-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.contact .info-tile{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:18px 20px;transition:transform .4s var(--ease),border-color .4s}
.contact .info-tile:hover{transform:translateY(-4px);border-color:rgba(0,189,195,.4)}
.contact .info-tile .it{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(0,189,195,.18),rgba(123,108,255,.16));color:#7ff0e6;border:1px solid rgba(127,240,230,.22)}
.contact .info-tile .it svg{width:22px;height:22px}
.contact .info-tile b{display:block;color:#fff;font-family:var(--display);font-size:15px}
.contact .info-tile span{display:block;color:var(--txt-dim);font:600 12.5px var(--mono);margin-top:3px}
.contact .ct-formcard{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018));border:1px solid var(--line2);border-radius:24px;padding:34px}
.contact .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact .field{display:flex;flex-direction:column;gap:7px}
.contact .field.full{grid-column:1/-1}
.contact .field label{color:#cfe0ea;font:600 13px var(--body)}
.contact .field input,.contact .field select,.contact .field textarea{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;color:#eaf3fa;font-size:14px;font-family:var(--body);transition:border-color .3s}
.contact .field input::placeholder,.contact .field textarea::placeholder{color:#5d7588}
.contact .field input:focus,.contact .field select:focus,.contact .field textarea:focus{outline:none;border-color:var(--teal)}
.contact .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237ff0e6' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.contact .field select option{background:#0a1320;color:#eaf3fa}
.contact .field textarea{min-height:120px;resize:vertical}
@media(max-width:920px){.contact .ct-split{grid-template-columns:1fr;gap:32px}}
@media(max-width:520px){.contact .form-grid{grid-template-columns:1fr}}

/* ============================================================
   WHAT HAPPENS NEXT — step rail
   ============================================================ */
.contact .next-row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:54px}
.contact .next-row::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:linear-gradient(90deg,transparent,rgba(0,189,195,.4),rgba(123,108,255,.4),transparent)}
.contact .nstep{position:relative;text-align:center}
.contact .nstep .nn{position:relative;z-index:1;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;color:#fff;background:#0a1726;border:2px solid rgba(0,189,195,.5);box-shadow:0 0 0 6px var(--bg),0 0 24px rgba(0,189,195,.25)}
.contact .nstep h3{color:#fff;font-size:16px;margin:0 0 7px;font-family:var(--display)}
.contact .nstep p{color:var(--txt);font-size:13px;line-height:1.55;margin:0 auto;max-width:23ch}
@media(max-width:820px){.contact .next-row{grid-template-columns:1fr 1fr;gap:30px 18px}.contact .next-row::before{display:none}}
@media(max-width:460px){.contact .next-row{grid-template-columns:1fr}}

/* ============================================================
   FAQ (dark accordion)
   ============================================================ */
.contact .faq{max-width:820px;margin:46px auto 0}
.contact .faq-item{border:1px solid var(--line2);border-radius:16px;background:var(--panel);margin-bottom:12px;overflow:hidden;transition:border-color .35s}
.contact .faq-item.open{border-color:rgba(0,189,195,.4)}
.contact .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;background:none;border:0;cursor:pointer;color:#eaf3fa;font-family:var(--display);font-weight:700;font-size:16px;text-align:left}
.contact .faq-q .pm{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(0,189,195,.12);color:#7ff0e6;font-size:18px;line-height:1;transition:transform .35s}
.contact .faq-item.open .faq-q .pm{transform:rotate(45deg)}
.contact .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.contact .faq-a p{margin:0;padding:0 22px 22px;color:var(--txt);font-size:14.5px;line-height:1.7}

/* ============================================================
   CTA band (dark aurora — overrides old cta-band)
   ============================================================ */
.contact .cta-band{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(0,189,195,.12),rgba(123,108,255,.12)),#0e1a2c!important;border:1px solid var(--line3);border-radius:30px;padding:64px 40px;text-align:center}
.contact .cta-band::after{display:block!important;content:"";position:absolute;inset:-40%;z-index:0;background:conic-gradient(from 0deg,transparent,rgba(0,189,195,.18),transparent 35%,rgba(123,108,255,.18),transparent 70%);animation:ctCtaSpin 18s linear infinite}
@keyframes ctCtaSpin{to{transform:rotate(360deg)}}
.contact .cta-band>*{position:relative;z-index:2}
.contact .cta-band h2{color:#fff;font-size:clamp(26px,3.6vw,42px);letter-spacing:-.02em;line-height:1.1;margin:6px 0}
.contact .cta-band p{color:#bcd0e0;max-width:52ch;margin:0 auto;font-size:16px}
@media(prefers-reduced-motion:reduce){.contact .cta-band::after{animation:none}}