/* Critical layout -- works even if the pinned Tailwind runtime is slow to load */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background:#070a14; color:#e2e8f0; overflow-x:hidden; }
img, video, svg { max-width: 100%; height: auto; }
html { scroll-behavior: smooth; }

/* Responsive card grid: stacks at 400px, fills as the panel widens */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.75rem;
}
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

:root{
  --accent:#ff6b35;
  --accent-2:#ffb03a;
  --ink:#070a14;
  --line:rgba(255,255,255,.08);
}

/* ---------- NAV ---------- */
.nav-blur{
  background: rgba(7,10,20,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav-blur.scrolled{ border-bottom-color: var(--line); background: rgba(7,10,20,.88); }

/* ---------- 3D LOGO CUBE ---------- */
.logo-cube{
  width:26px; height:26px; display:inline-block; position:relative;
  transform-style:preserve-3d; animation: spinCube 9s linear infinite;
}
.logo-cube i{
  position:absolute; inset:0; display:block;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  opacity:.85; border:1px solid rgba(255,255,255,.35); border-radius:5px;
}
.logo-cube i:nth-child(1){ transform: translateZ(13px); }
.logo-cube i:nth-child(2){ transform: rotateY(180deg) translateZ(13px); }
.logo-cube i:nth-child(3){ transform: rotateY(90deg) translateZ(13px); }
.logo-cube i:nth-child(4){ transform: rotateY(-90deg) translateZ(13px); }
.logo-cube i:nth-child(5){ transform: rotateX(90deg) translateZ(13px); }
.logo-cube i:nth-child(6){ transform: rotateX(-90deg) translateZ(13px); }
@keyframes spinCube{ from{ transform: rotateX(-22deg) rotateY(0deg);} to{ transform: rotateX(-22deg) rotateY(360deg);} }

/* ---------- BUTTONS ---------- */
.btn-3d{
  display:inline-block; color:#180a03; background:linear-gradient(180deg,#ffb03a,#ff6b35);
  box-shadow: 0 6px 0 #b8431a, 0 14px 30px rgba(255,107,53,.32);
  transform: translateY(0); transition: transform .14s ease, box-shadow .14s ease; border:0;
}
.btn-3d:hover{ transform: translateY(3px); box-shadow: 0 3px 0 #b8431a, 0 10px 22px rgba(255,107,53,.3); }
.btn-3d:active{ transform: translateY(6px); box-shadow: 0 0 0 #b8431a, 0 6px 14px rgba(255,107,53,.28); }
.btn-ghost{
  display:inline-block; color:#e6edf7; background:rgba(255,255,255,.05); border:1px solid var(--line);
  box-shadow: 0 6px 0 rgba(255,255,255,.05); transition: transform .14s ease, box-shadow .14s ease, background .2s ease;
}
.btn-ghost:hover{ transform: translateY(3px); background:rgba(255,255,255,.09); box-shadow:0 3px 0 rgba(255,255,255,.05); }

/* ---------- HERO ---------- */
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; opacity:.9; }
.glow{ position:absolute; border-radius:50%; filter: blur(90px); pointer-events:none; z-index:0; }
.glow-a{ width:420px; height:420px; background:rgba(255,107,53,.20); top:-120px; left:-100px; }
.glow-b{ width:460px; height:460px; background:rgba(56,132,255,.16); bottom:-180px; right:-140px; }

.pill{
  display:inline-block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; color:#ffd6c2;
  background:rgba(255,107,53,.10); border:1px solid rgba(255,107,53,.32);
}
.grad-text{
  background:linear-gradient(100deg,#ffb03a,#ff6b35 55%,#ff9a6b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); display:inline-block; }

/* ---------- 3D FLOATING DASHBOARD ---------- */
.scene{ perspective: 1100px; position:relative; padding: 10px 0; }
.float-card{
  position:relative; z-index:2; border-radius:20px; padding:22px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  transform: rotateX(9deg) rotateY(-11deg);
  animation: floaty 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes floaty{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }
.badge-up{ font-size:11px; padding:5px 10px; border-radius:999px; color:#7ef2b0; background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.3); }
.chart{ display:flex; align-items:flex-end; gap:7px; height:104px; }
.chart span{
  flex:1; height:var(--h); border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--accent-2),rgba(255,107,53,.25));
  box-shadow:0 0 14px rgba(255,107,53,.25);
  animation: grow 1.1s cubic-bezier(.2,.8,.2,1) backwards;
}
.chart span:nth-child(1){animation-delay:.05s}.chart span:nth-child(2){animation-delay:.1s}
.chart span:nth-child(3){animation-delay:.15s}.chart span:nth-child(4){animation-delay:.2s}
.chart span:nth-child(5){animation-delay:.25s}.chart span:nth-child(6){animation-delay:.3s}
.chart span:nth-child(7){animation-delay:.35s}.chart span:nth-child(8){animation-delay:.4s}
@keyframes grow{ from{ height:4px; opacity:0 } to{ opacity:1 } }
.mini{ background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center; }
.mini-n{ font-weight:700; color:#fff; font-size:15px; margin:0; }
.mini-l{ font-size:10.5px; color:#94a3b8; margin:2px 0 0; }

.chip{
  position:absolute; z-index:3; font-size:11.5px; font-weight:600; color:#fff;
  padding:9px 13px; border-radius:12px; white-space:nowrap;
  background:rgba(12,17,30,.82); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px rgba(0,0,0,.5);
  animation: floaty 5s ease-in-out infinite;
}
.chip-1{ top:-4px; right:-6px; animation-delay:.4s; }
.chip-2{ bottom:16px; left:-10px; animation-delay:1.1s; }
.chip-3{ bottom:-14px; right:14px; animation-delay:1.8s; }
@media (max-width:640px){ .chip-1{right:-2px} .chip-2{left:-2px} .chip-3{display:none} }

/* ---------- TILT (3D hover) ---------- */
.tilt{ transform-style:preserve-3d; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform; }

/* ---------- MARQUEE ---------- */
.marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-track{ display:flex; gap:2.5rem; width:max-content; animation: slide 32s linear infinite; }
.marquee-track span{
  font-weight:800; letter-spacing:.16em; font-size:15px; color:#8ea0bb; opacity:.75;
  white-space:nowrap; transition: color .2s ease, opacity .2s ease;
}
.marquee-track span:hover{ color:#fff; opacity:1; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- STATS ---------- */
.stat{
  border-radius:16px; padding:20px 16px; text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
}
.stat-n{ font-size:26px; font-weight:800; color:#fff; margin:0; }
.stat-l{ font-size:12px; color:#94a3b8; margin:4px 0 0; }

/* ---------- SERVICE CARDS ---------- */
.svc{
  border-radius:18px; padding:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow: 0 18px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.09);
}
.svc:hover{ border-color: rgba(255,107,53,.45); }
.svc-ico{
  width:44px; height:44px; display:grid; place-items:center; font-size:20px; border-radius:13px;
  background:linear-gradient(150deg,rgba(255,107,53,.28),rgba(255,176,58,.12));
  border:1px solid rgba(255,107,53,.3); box-shadow:0 8px 18px rgba(255,107,53,.2);
  transform: translateZ(30px);
}
.svc h3{ margin:14px 0 6px; font-size:16px; font-weight:700; color:#fff; transform: translateZ(18px); }
.svc p{ margin:0; font-size:13.5px; line-height:1.6; color:#a9b6c9; }

/* ---------- CASE CARDS ---------- */
.case{
  border-radius:18px; padding:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:0 18px 36px rgba(0,0,0,.4);
}
.case-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:#ffb08a; margin:0; }
.case-n{ font-size:38px; font-weight:800; margin:8px 0 0; background:linear-gradient(120deg,#ffb03a,#ff6b35); -webkit-background-clip:text; background-clip:text; color:transparent; transform:translateZ(26px); }
.case-t{ font-size:13px; color:#e2e8f0; margin:2px 0 0; font-weight:600; }
.case-d{ font-size:13px; color:#a9b6c9; margin:10px 0 0; line-height:1.6; }

/* ---------- STEPS ---------- */
.step{
  position:relative; border-radius:18px; padding:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:0 16px 32px rgba(0,0,0,.35);
}
.step-n{ font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--accent); }
.step h3{ margin:10px 0 6px; font-size:15.5px; font-weight:700; color:#fff; }
.step p{ margin:0; font-size:13px; color:#a9b6c9; line-height:1.6; }

/* ---------- QUOTES ---------- */
.quote{
  margin:0; border-radius:18px; padding:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:0 16px 32px rgba(0,0,0,.35);
}
.quote p{ margin:0; font-size:14px; line-height:1.7; color:#dbe4f0; }
.quote figcaption{ margin-top:14px; display:flex; flex-direction:column; }
.quote strong{ color:#fff; font-size:13.5px; }
.quote span{ color:#8ea0bb; font-size:12px; }

/* ---------- PRICING ---------- */
.plan{
  position:relative; border-radius:20px; padding:24px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:0 18px 36px rgba(0,0,0,.4);
}
.plan h3{ margin:0; font-size:15px; font-weight:700; color:#fff; letter-spacing:.02em; }
.price{ font-size:32px; font-weight:800; color:#fff; margin:10px 0 16px; }
.price span{ font-size:13px; font-weight:500; color:#94a3b8; }
.plan ul{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:9px; }
.plan li{ font-size:13px; color:#b6c2d3; padding-left:22px; position:relative; line-height:1.5; }
.plan li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:800; }
.plan-pop{
  border-color: rgba(255,107,53,.5);
  background:linear-gradient(165deg,rgba(255,107,53,.14),rgba(255,255,255,.02));
  box-shadow:0 26px 55px rgba(255,107,53,.18), 0 18px 36px rgba(0,0,0,.45);
}
.pop-tag{
  position:absolute; top:-11px; left:24px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; color:#180a03; background:linear-gradient(180deg,#ffb03a,#ff6b35);
}

/* ---------- CTA / FORM ---------- */
.cta{
  border-radius:26px; padding:28px;
  background:
    radial-gradient(600px 240px at 15% 0%, rgba(255,107,53,.20), transparent 70%),
    linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
@media (min-width:768px){ .cta{ padding:40px; } }
.mail-box{
  display:inline-flex; align-items:center; gap:13px; padding:14px 18px; border-radius:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,107,53,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.35); transition: transform .16s ease, border-color .2s ease;
  max-width:100%;
}
.mail-box:hover{ transform:translateY(-3px); border-color:rgba(255,107,53,.7); }
.mail-ico{ font-size:20px; }
.mail-l{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:#94a3b8; }
.mail-v{ display:block; font-size:15px; font-weight:700; color:#fff; word-break:break-all; }

.form{ display:flex; flex-direction:column; gap:12px; }
.form label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:#9fb0c6; }
.form input, .form select, .form textarea{
  width:100%; padding:11px 13px; border-radius:12px; font-size:13.5px; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid var(--line); outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form input::placeholder, .form textarea::placeholder{ color:#64748b; }
.form input:focus, .form select:focus, .form textarea:focus{ border-color:rgba(255,107,53,.6); box-shadow:0 0 0 3px rgba(255,107,53,.15); }
.form select option{ background:#0d1322; color:#fff; }
.form-note{ font-size:12px; color:#7ef2b0; margin:0; min-height:16px; }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1; transform:none; }
}