/* ── HERO ANIMATION — always visible, animates in ── */
.hero-anim {
  opacity: 0;
  transform: translateY(30px);
  animation: heroReveal 0.9s ease 0.3s forwards;
}
.hero-anim:nth-child(2) {
  animation-delay: 0.5s;
}
@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ── HOME PAGE SPECIFIC ─── */

/* HERO */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 72px;
  position: relative; overflow: hidden;
}
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  padding: 5rem 0;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 1rem; border-radius: 100px;
  background: rgba(255,43,43,0.08);
  border: 1px solid rgba(255,43,43,0.25);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1.8rem;
}
.hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--red); animation:pulse 2s infinite; }
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 900; letter-spacing: -0.045em;
  line-height: 1.0; margin-bottom: 1.5rem;
}
.hero-h1 .line-red { color: var(--red); display: block; }
.hero-sub {
  font-size: 1rem; color: var(--gray);
  line-height: 1.8; max-width: 480px; margin-bottom: 2.5rem;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-stats {
  display: flex; gap: 2.5rem; flex-wrap: wrap;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.06);
}
.stat-n {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 900;
  line-height: 1; color: #fff;
}
.stat-l { font-size: 0.72rem; color: var(--gray); margin-top: 4px; letter-spacing: 0.04em; }

/* HERO VISUAL — floating panels */
.hero-vis { position: relative; height: 520px; }
.hv-panel {
  position: absolute;
  background: rgba(17,17,17,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 1.2rem;
  backdrop-filter: blur(20px);
  animation: hvFloat 7s ease-in-out infinite;
}
@keyframes hvFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.hv-main  { top:50%;left:50%;transform:translate(-50%,-50%);width:280px;border-color:rgba(255,43,43,0.2);box-shadow:0 0 60px rgba(255,43,43,0.08),inset 0 0 40px rgba(255,43,43,0.02);}
.hv-code  { top:8%;left:2%;width:210px;animation-delay:-2s;animation-duration:8s;font-family:var(--font-mono);font-size:0.62rem;}
.hv-metric{ bottom:8%;right:2%;width:175px;animation-delay:-4s;animation-duration:5.5s;}
.hv-pill  { top:18%;right:4%;padding:0.45rem 1rem;border-radius:100px;font-size:0.68rem;font-weight:700;animation-delay:-1s;animation-duration:4.5s;color:#25d366;border-color:rgba(37,211,102,0.2);background:rgba(37,211,102,0.05);}
.hv-dot-row { display:flex; gap:5px; margin-bottom:0.8rem; }
.hv-dot { width:8px;height:8px;border-radius:50%; }
.hv-dot-r{background:var(--red);box-shadow:0 0 6px var(--red);}
.hv-dot-y{background:#ffd200;} .hv-dot-g{background:#25d366;}
.hv-label { font-size:0.62rem;color:var(--gray);margin-left:0.3rem; }
.code-ln { font-size:0.6rem;color:var(--gray);line-height:1.9; }
.code-ln .kw{color:var(--purple);} .code-ln .fn{color:var(--red2);} .code-ln .str{color:#a8e6cf;}
.m-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem; }
.m-lbl { font-size:0.6rem;color:var(--gray); }
.m-bar { flex:1;height:3px;background:rgba(255,255,255,0.06);border-radius:2px;margin:0 0.5rem;overflow:hidden; }
.m-fill { height:100%;border-radius:2px; }
.m-val { font-size:0.6rem;font-weight:700;color:#fff; }

/* 3D FLOATING SHAPES in hero bg */
.shape-ring {
  position:absolute; border-radius:50%;
  border: 1px solid rgba(255,43,43,0.12);
  animation: spinRing 20s linear infinite;
}
@keyframes spinRing { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.shape-cube {
  position: absolute; width: 60px; height: 60px;
  border: 1px solid rgba(255,43,43,0.15);
  border-radius: 10px;
  animation: cubeFloat 12s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes cubeFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(45deg)} }

/* ── SERVICES SECTION ─────────────── */
.services-section { padding: 5rem 0; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 4rem; }
.svc-card {
  padding: 2rem 1.8rem;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.35s ease;
  position: relative; overflow: hidden;
}
.svc-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--purple));
  transform: scaleX(0); transition: transform 0.35s ease;
  transform-origin: left;
}
.svc-card:hover { border-color: rgba(255,43,43,0.2); transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,0.7); }
.svc-card:hover::after { transform: scaleX(1); }
.svc-icon-wrap {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,43,43,0.08);
  border: 1px solid rgba(255,43,43,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1.2rem;
  transition: all 0.3s;
}
.svc-card:hover .svc-icon-wrap { background: rgba(255,43,43,0.15); box-shadow: 0 0 20px rgba(255,43,43,0.2); }
.svc-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.svc-desc { font-size: 0.8rem; color: var(--gray); line-height: 1.65; margin-bottom: 1rem; }
.svc-link { font-size: 0.75rem; font-weight: 700; color: var(--red); display: flex; align-items: center; gap: 0.3rem; opacity: 0; transform: translateX(-8px); transition: all 0.25s; }
.svc-card:hover .svc-link { opacity: 1; transform: translateX(0); }

/* ── HARDWARE SECTION ──────────────── */
.hw-section { padding: 5rem 0; background: #050505; }
.hw-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.hw-items { display: flex; flex-direction: column; gap: 0.9rem; margin: 2rem 0; }
.hw-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.2rem; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 0.85rem; font-weight: 500;
  transition: all 0.25s; cursor: default;
}
.hw-item:hover { border-color: rgba(123,97,255,0.25); background: rgba(123,97,255,0.04); }
.hw-item-ic { font-size: 1.1rem; flex-shrink: 0; }
.hw-item-badge { margin-left: auto; font-size: 0.62rem; font-weight: 700; padding: 0.18rem 0.55rem; border-radius: 100px; background: rgba(37,211,102,0.1); color: #25d366; letter-spacing: 0.06em; }

/* Diagnostic Board */
.diag-board {
  background: #060606;
  border: 1px solid rgba(123,97,255,0.18);
  border-radius: 20px; padding: 2rem;
  position: relative; overflow: hidden;
}
.diag-board::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(123,97,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(123,97,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
}
.diag-head { position: relative; z-index:1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.diag-label { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; color: var(--purple); letter-spacing: 0.15em; text-transform: uppercase; }
.diag-live { font-size: 0.62rem; color: #25d366; display: flex; align-items: center; gap: 0.35rem; }
.diag-live::before { content:''; width:5px; height:5px; border-radius:50%; background:#25d366; animation:pulse 1.5s infinite; }
.diag-chips { position: relative; z-index:1; display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem; margin-bottom: 1.5rem; }
.d-chip { padding: 0.75rem; border-radius: 10px; text-align: center; transition: all 0.3s; border: 1px solid; }
.d-chip.ok   { background: rgba(37,211,102,0.04); border-color: rgba(37,211,102,0.18); color: #25d366; }
.d-chip.warn { background: rgba(255,210,0,0.04); border-color: rgba(255,210,0,0.18); color: #ffd200; }
.d-chip.bad  { background: rgba(255,43,43,0.04); border-color: rgba(255,43,43,0.18); color: var(--red); }
.d-chip .cn  { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
.d-chip .cs  { font-size: 0.68rem; font-weight: 700; margin-top: 3px; }
.diag-bars { position: relative; z-index:1; }
.db-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.55rem; }
.db-lbl { font-size: 0.6rem; color: var(--gray); width: 55px; flex-shrink: 0; font-family: var(--font-mono); }
.db-track { flex:1; height:3px; background: rgba(255,255,255,0.05); border-radius:2px; overflow:hidden; }
.db-fill { height:100%; border-radius:2px; transition: width 1.5s ease; }
.db-val { font-size: 0.6rem; font-weight: 700; color: #fff; width: 32px; text-align: right; }
.diag-areas { position: relative; z-index:1; margin-top: 1.2rem; padding: 0.8rem 1rem; background: rgba(123,97,255,0.04); border: 1px solid rgba(123,97,255,0.1); border-radius: 10px; font-size: 0.68rem; color: var(--gray); line-height: 1.8; }
.diag-areas strong { color: #fff; display: block; margin-bottom: 0.2rem; }

/* ── PORTFOLIO SECTION ─────────────── */
.portfolio-section { padding: 5rem 0; }
.port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 4rem; }
.port-card {
  background: #0a0a0a; border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px; overflow: hidden;
  transition: all 0.35s; cursor: pointer;
}
.port-card:hover { border-color: rgba(255,43,43,0.25); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
.port-card.wide { grid-column: span 2; }
.port-thumb {
  height: 160px; position: relative;
  background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.port-card.wide .port-thumb { height: 220px; }
.port-thumb-label { font-family: var(--font-display); font-size: 0.8rem; font-weight: 800; color: rgba(255,255,255,0.2); letter-spacing: 0.1em; text-transform: uppercase; z-index: 1; }
.port-thumb-glow { position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,43,43,0.06),rgba(123,97,255,0.06));opacity:0;transition:opacity 0.3s; }
.port-card:hover .port-thumb-glow { opacity:1; }
.port-info { padding: 1.3rem; }
.port-cat { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 0.4rem; }
.port-name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; }
.port-url { font-size: 0.72rem; color: var(--gray); }

/* ── PROCESS SECTION ───────────────── */
.process-section { padding: 5rem 0; background: #050505; }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; margin-top: 4rem; position: relative; }
.process-grid::after {
  content: ''; position: absolute; top: 36px; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,43,43,0.2), rgba(123,97,255,0.2), transparent);
}
.proc-step { text-align: center; }
.proc-num {
  width: 72px; height: 72px; border-radius: 50%;
  background: #000; border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: rgba(255,255,255,0.15);
  margin: 0 auto 1.5rem;
  transition: all 0.3s; position: relative; z-index: 1;
}
.proc-step:hover .proc-num { border-color: var(--red); color: var(--red); box-shadow: 0 0 20px rgba(255,43,43,0.25); }
.proc-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.proc-desc { font-size: 0.78rem; color: var(--gray); line-height: 1.65; }

/* ── TESTIMONIALS ──────────────────── */
.testi-section { padding: 5rem 0; }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 4rem; }
.testi-card {
  padding: 1.8rem; background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px; transition: all 0.3s;
}
.testi-card:hover { border-color: rgba(255,43,43,0.18); transform: translateY(-4px); }
.t-stars { color: #ffd200; font-size: 0.85rem; margin-bottom: 1rem; letter-spacing: 2px; }
.t-text { font-size: 0.83rem; color: var(--gray); line-height: 1.8; margin-bottom: 1.5rem; font-style: italic; }
.t-author { display: flex; align-items: center; gap: 0.8rem; }
.t-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.t-name { font-size: 0.88rem; font-weight: 700; }
.t-role { font-size: 0.7rem; color: var(--gray); margin-top: 2px; }

/* ── WEB DEV CTA SECTION ─────────────── */
.webdev-section { padding: 5rem 0; background: #050505; position: relative; overflow: hidden; }
.webdev-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.webdev-badge { font-size: 0.68rem; font-weight: 700; padding: 0.3rem 0.8rem; border-radius: 100px; background: rgba(255,43,43,0.08); border: 1px solid rgba(255,43,43,0.25); color: var(--red); letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; margin-bottom: 1.2rem; }
.webdev-h { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 1.2rem; }
.webdev-p { font-size: 0.9rem; color: var(--gray); line-height: 1.8; margin-bottom: 2rem; }
.pricing-cards { display: flex; flex-direction: column; gap: 1rem; }
.price-mini {
  padding: 1.3rem 1.5rem; border-radius: 14px;
  background: #0a0a0a; border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.25s;
}
.price-mini:hover { border-color: rgba(255,43,43,0.25); transform: translateX(6px); }
.price-mini.featured { border-color: rgba(255,43,43,0.3); background: rgba(255,43,43,0.04); }
.pm-left .pm-name { font-weight: 700; font-size: 0.92rem; }
.pm-left .pm-feat { font-size: 0.72rem; color: var(--gray); margin-top: 2px; }
.pm-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; color: var(--red); }
.pm-price small { font-size: 0.65rem; color: var(--gray); font-weight: 400; }
.audit-card {
  background: #0a0a0a; border: 1px solid rgba(255,43,43,0.2);
  border-radius: 16px; padding: 2rem;
  margin-top: 1rem;
}
.audit-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; margin-bottom: 0.5rem; }
.audit-sub { font-size: 0.8rem; color: var(--gray); margin-bottom: 1.2rem; }
.audit-form-row { display: flex; gap: 0.7rem; }
.audit-form-row input { flex: 1; padding: 0.7rem 1rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #fff; font-size: 0.85rem; font-family: inherit; outline: none; }
.audit-form-row input:focus { border-color: rgba(255,43,43,0.4); }
.audit-form-row button { padding: 0.7rem 1.4rem; background: var(--red); color: #fff; font-weight: 700; font-size: 0.85rem; border: none; border-radius: 10px; cursor: pointer; font-family: inherit; transition: all 0.2s; white-space: nowrap; }
.audit-form-row button:hover { background: var(--red2); }

/* ── WHY US ─────────────────────────── */
.why-section { padding: 5rem 0; }
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 4rem; }
.why-card { padding: 2rem; background: #0a0a0a; border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; text-align: center; transition: all 0.3s; }
.why-card:hover { border-color: rgba(123,97,255,0.25); transform: translateY(-5px); }
.why-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.why-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.why-desc { font-size: 0.8rem; color: var(--gray); line-height: 1.65; }

/* ── CTA FINAL ──────────────────────── */
.cta-final { padding: 4rem 0; text-align: center; position: relative; overflow: hidden; }
.cta-final::before { content:''; position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%, rgba(255,43,43,0.1) 0%, transparent 65%); }
.cta-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 1.5rem; position: relative; z-index: 1; }
.cta-sub { font-size: 1rem; color: var(--gray); margin-bottom: 2.5rem; position: relative; z-index: 1; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-inner,.hw-inner,.webdev-inner{grid-template-columns:1fr;}
  .hero-vis{display:none;}
  .services-grid,.port-grid,.testi-grid,.why-grid{grid-template-columns:1fr 1fr;}
  .process-grid{grid-template-columns:1fr 1fr;}
  .process-grid::after{display:none;}
  .port-card.wide{grid-column:span 1;}
}
@media(max-width:640px){
  .services-grid,.port-grid,.testi-grid,.why-grid,.pricing-cards{grid-template-columns:1fr;}
  .hero-stats{gap:1.5rem;}
  .audit-form-row{flex-direction:column;}
}