/* ============================================================
   TRUE WEB STUDIOS — Custom Styles  v2 "AURORA"
   Iridescent · Holographic · Animated mesh gradients
   ============================================================ */

:root {
  --ink: #04040a;
  --charcoal: #0a0b14;
  --elec: #4d7cff;
  --neon: #b14bff;
  --magenta: #ff4ddb;
  --cyan: #2ff7ff;
  --gold: #ffd166;
  --lime: #9dff5b;
  --grad: linear-gradient(120deg,#2ff7ff 0%,#4d7cff 25%,#b14bff 55%,#ff4ddb 80%,#ffd166 100%);
  --grad-h: linear-gradient(90deg,#2ff7ff,#4d7cff,#b14bff,#ff4ddb,#ffd166,#2ff7ff);
}

* { box-sizing: border-box; }
html, body { background: var(--ink); }
body { cursor: none; -webkit-font-smoothing: antialiased; position: relative; }

/* ===== LIVING AURORA BACKGROUND ===== */
.aurora {
  position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  filter: blur(60px) saturate(150%);
  opacity: .9;
}
.aurora span {
  position: absolute; border-radius: 50%; mix-blend-mode: screen;
  will-change: transform;
}
.aurora .a1 { width: 50vw; height: 50vw; left: -10%; top: -10%;
  background: radial-gradient(circle, rgba(47,247,255,.55), transparent 65%);
  animation: drift1 18s ease-in-out infinite; }
.aurora .a2 { width: 55vw; height: 55vw; right: -15%; top: 5%;
  background: radial-gradient(circle, rgba(177,75,255,.55), transparent 65%);
  animation: drift2 22s ease-in-out infinite; }
.aurora .a3 { width: 45vw; height: 45vw; left: 20%; bottom: -20%;
  background: radial-gradient(circle, rgba(255,77,219,.45), transparent 65%);
  animation: drift3 20s ease-in-out infinite; }
.aurora .a4 { width: 40vw; height: 40vw; right: 10%; bottom: -10%;
  background: radial-gradient(circle, rgba(255,209,102,.35), transparent 65%);
  animation: drift1 26s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(15vw,10vh) scale(1.2);} 66%{transform:translate(-8vw,18vh) scale(.9);} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(-14vw,12vh) scale(1.1);} 66%{transform:translate(6vw,-8vh) scale(1.25);} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(12vw,-14vh) scale(1.3);} }

/* grain overlay for film texture */
body::after {
  content:""; 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='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* keep real content above bg layers */
header, main, section, footer, .marquee-wrap { position: relative; z-index: 2; }

/* ===== scrollbar hidden ===== */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
::selection { background: rgba(255,77,219,.45); color: #fff; }

/* ============================================================ TYPOGRAPHY */
.hero-title { font-size: clamp(2.8rem, 8.5vw, 7.5rem); letter-spacing: -.03em; line-height:.95; }

.gradient-text {
  background: var(--grad-h);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: holo 6s linear infinite;
}
@keyframes holo { to { background-position: 250% 0; } }

/* glitchy holographic glow on hero */
.gradient-text.glow { filter: drop-shadow(0 0 30px rgba(177,75,255,.5)); }

/* ============================================================ CURSOR */
.cursor-dot, .cursor-ring {
  position: fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9999;
  transform: translate(-50%,-50%);
}
.cursor-dot { width:7px; height:7px; background:#fff; box-shadow:0 0 12px #fff; }
.cursor-ring { width:40px; height:40px; border:1.5px solid rgba(255,255,255,.5);
  transition: width .25s, height .25s, background .25s, border-color .25s, transform .1s; }
.cursor-ring.hovering { width:72px; height:72px; border-color:transparent;
  background: conic-gradient(from 0deg,#2ff7ff,#b14bff,#ff4ddb,#ffd166,#2ff7ff);
  mix-blend-mode: normal; opacity:.85; }
@media (hover:none){ body{cursor:auto;} .cursor-dot,.cursor-ring{display:none;} }

/* ============================================================ SCROLL PROGRESS */
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:0%; z-index:9998;
  background: var(--grad-h); background-size:200% 100%; animation: holo 4s linear infinite;
  box-shadow:0 0 16px rgba(177,75,255,.7); }

/* ============================================================ GLASS + GRADIENT BORDER */
.glass-nav {
  background: rgba(10,11,20,.5);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

.glass-card {
  position: relative;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 26px; padding: 2.5rem; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .4s, box-shadow .4s;
}
/* animated rotating gradient border */
.glass-card::before {
  content:""; position:absolute; inset:0; border-radius:26px; padding:1px;
  background: conic-gradient(from var(--ang,0deg), #2ff7ff, #b14bff, #ff4ddb, #ffd166, #2ff7ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .4s; animation: spinAng 6s linear infinite;
}
.glass-card:hover::before { opacity:1; }
.glass-card:hover { transform: translateY(-6px); box-shadow:0 30px 80px rgba(177,75,255,.18); }
.glass-card::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 45%);
}
@property --ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes spinAng { to { --ang:360deg; } }

/* ============================================================ BUTTONS + MAGNETIC */
.magnetic { display:inline-flex; align-items:center; justify-content:center; will-change:transform; }
.glass-btn { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); color:#fff; transition: background .3s, border-color .3s; }
.glass-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); }

.gradient-btn {
  position: relative; color:#06060c; font-weight:700; border:none;
  background: var(--grad-h); background-size:250% 100%;
  animation: holo 5s linear infinite;
  box-shadow:0 10px 40px rgba(77,124,255,.4), 0 0 0 0 rgba(255,77,219,.5);
  transition: transform .3s, box-shadow .3s;
}
.gradient-btn:hover { box-shadow:0 16px 60px rgba(255,77,219,.55); }

.logo-mark { width:24px; height:24px; border-radius:8px;
  background: conic-gradient(from 0deg,#2ff7ff,#b14bff,#ff4ddb,#ffd166,#2ff7ff);
  box-shadow:0 0 22px rgba(177,75,255,.7); display:inline-block; animation: spinSlow 6s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.nav-link { position:relative; transition:color .3s; }
.nav-link:hover { color:#fff; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--grad-h); transition:width .3s; }
.nav-link:hover::after { width:100%; }

/* ============================================================ HERO */
.hero-glow { position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(45% 45% at 50% 55%, rgba(177,75,255,.18), transparent 70%); }
.hero-eyebrow { opacity:0; }
#heroCanvas { z-index:1; }
#heroContent { z-index:3; }
.scroll-hint { display:flex; flex-direction:column; align-items:center; opacity:.6; z-index:3; }
.scroll-line { width:1px; height:42px; background:linear-gradient(to bottom,#fff,transparent); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.2;transform:scaleY(.6);} 50%{opacity:1;transform:scaleY(1);} }

/* ============================================================ MARQUEE */
.marquee-wrap { overflow:hidden; background: rgba(4,4,10,.6); backdrop-filter: blur(6px); }
.marquee { display:inline-flex; animation: marquee 28s linear infinite; }
.marquee span { padding-right:1rem;
  background: var(--grad-h); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:.35; animation: holo 8s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================ STATEMENT */
.statement-text .word { display:inline-block; opacity:.1; transition:opacity .3s; }

/* ============================================================ ECOSYSTEM HORIZONTAL */
.ecosystem-pin { position:relative; }
.ecosystem-track { display:flex; gap:2rem; padding:0 6vw; align-items:center; height:100vh; width:max-content; }
.eco-panel { position:relative; flex:0 0 auto; width:80vw; max-width:640px; height:62vh;
  display:flex; flex-direction:column; justify-content:center; padding:3rem; }
.intro-panel { justify-content:center; }
.eco-index { position:absolute; top:2rem; right:2.5rem; font-family:'Syne',sans-serif; font-size:5rem; font-weight:800;
  background: var(--grad-h); background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; opacity:.18; animation: holo 7s linear infinite; }
.eco-tag { display:inline-block; width:fit-content; font-family:'Space Grotesk',sans-serif; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  border:1px solid rgba(47,247,255,.35); padding:.35rem .8rem; border-radius:999px; background:rgba(47,247,255,.07); }
.eco-link { margin-top:2rem; width:fit-content; font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff;
  border-bottom:2px solid var(--magenta); padding-bottom:4px; transition:color .3s,border-color .3s; }
.eco-link:hover { color:var(--magenta); }
.eco-orb { position:absolute; bottom:-70px; right:-70px; width:240px; height:240px; border-radius:50%;
  filter:blur(45px); opacity:.6; pointer-events:none; }
.orb-blue { background:radial-gradient(circle,var(--cyan),var(--elec) 40%,transparent 72%); }
.orb-purple { background:radial-gradient(circle,var(--magenta),var(--neon) 40%,transparent 72%); }
.soon-panel { align-items:flex-start; }
.soon-pulse { width:90px; height:90px; border-radius:50%;
  background: conic-gradient(from 0deg,#2ff7ff,#b14bff,#ff4ddb,#ffd166,#2ff7ff); filter:blur(6px);
  animation: pulse 2.4s ease-in-out infinite, spinSlow 4s linear infinite; margin-top:1.5rem; }
@keyframes pulse { 0%,100%{transform:scale(.8);opacity:.5;} 50%{transform:scale(1.25);opacity:1;} }

/* ============================================================ CAPABILITY / SERVICE */
.cap-num { font-family:'Syne',sans-serif; font-size:3rem; font-weight:800; }
.svc-icon { display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:16px;
  background: conic-gradient(from 0deg, rgba(47,247,255,.25), rgba(177,75,255,.25), rgba(255,77,219,.25));
  border:1px solid rgba(255,255,255,.18); font-size:1.6rem; color:#fff;
  box-shadow:0 0 30px rgba(177,75,255,.3); }
.tilt-card { transform-style:preserve-3d; will-change:transform; transition:transform .2s ease-out, box-shadow .4s; }

/* ============================================================ ANON DOSSIER */
#anon { background: linear-gradient(180deg, transparent, rgba(177,75,255,.05), transparent); }
.anon-noise { position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image: repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 3px); }
.dossier { position:relative; background: rgba(6,7,12,.85); border:1px solid rgba(255,255,255,.1);
  border-radius:22px; padding:3.5rem; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.65); }
.dossier::before { content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,77,219,.07), transparent 50%); pointer-events:none; }
.dossier-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  border-bottom:1px dashed rgba(255,255,255,.16); padding-bottom:1.5rem; }
.classified-stamp { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:.25em; color:#ff5470;
  border:2px solid #ff5470; padding:.4rem 1rem; border-radius:6px; transform:rotate(-4deg);
  box-shadow:0 0 26px rgba(255,84,112,.35); font-size:.85rem; }
.dossier-list li { font-size:1.2rem; }
.redact { background:rgba(255,255,255,.06); padding:.25rem .6rem; border-radius:6px; border-left:2px solid var(--magenta); transition:background .3s; }
.dossier-list li:hover .redact { background:rgba(255,77,219,.18); }
.dossier-btn { font-family:'Space Grotesk',sans-serif; font-weight:700; background:#ff5470; color:#0a0a12;
  padding:.9rem 2rem; border-radius:999px; box-shadow:0 10px 40px rgba(255,84,112,.45); transition:transform .3s,box-shadow .3s; }
.dossier-btn:hover { box-shadow:0 16px 56px rgba(255,84,112,.65); }

/* ============================================================ PROCESS */
.proc-num { font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:800;
  background:var(--grad-h); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation: holo 6s linear infinite; }
.proc-step { padding:2rem; }

/* ============================================================ BRAND SHOWCASE */
.brand-stage { position:relative; height:400px; display:flex; align-items:center; justify-content:center; }
.brand-orb { position:absolute; width:280px; height:280px; border-radius:50%; filter:blur(55px); opacity:.65; animation: pulse 4s ease-in-out infinite; }
.brand-card { position:relative; z-index:2; width:290px; height:290px; display:flex; flex-direction:column; justify-content:space-between; border-radius:30px; }
.brand-bignum { font-family:'Syne',sans-serif; font-size:6rem; font-weight:800; line-height:1; align-self:flex-end; }

/* ============================================================ CONTACT FORM */
.field { display:flex; flex-direction:column; gap:.5rem; }
.field label { font-family:'Space Grotesk',sans-serif; font-size:.8rem; letter-spacing:.05em; color:rgba(255,255,255,.55); text-transform:uppercase; }
.field input, .field select, .field textarea {
  width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:.9rem 1rem; color:#fff; font-family:'Inter',sans-serif; font-size:1rem;
  transition:border-color .3s, box-shadow .3s, background .3s; outline:none;
}
.field textarea { resize:vertical; min-height:120px; }
.field select { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23b14bff' stroke-width='2'%3E%3Cpath d='M2 4l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
.field select option { background:#0a0b14; color:#fff; }
.field input::placeholder, .field textarea::placeholder { color:rgba(255,255,255,.3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:transparent; background:rgba(255,255,255,.06);
  box-shadow:0 0 0 2px rgba(177,75,255,.55), 0 0 24px rgba(177,75,255,.25);
}
.field.invalid input, .field.invalid textarea { border-color:#ff5470; box-shadow:0 0 0 2px rgba(255,84,112,.4); }

/* ============================================================ REVEAL HELPERS */
.reveal-up { opacity:0; transform: translateY(40px); }
.reveal-line { overflow:hidden; }

/* ============================================================ RESPONSIVE */
@media (max-width:768px){
  .eco-panel { width:85vw; height:66vh; padding:2rem; }
  .dossier { padding:2rem; }
  .classified-stamp { font-size:.7rem; }
  .aurora { filter: blur(45px); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal-up{ opacity:1 !important; transform:none !important; }
  .aurora span{ animation:none !important; }
}