/* ============================================================
   PT VIREX DATA SOLU — Official Website Stylesheet
   Pure CSS, no framework dependencies
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Custom Properties ───────────────────────────────────── */
:root {
  --bg:        #0D0D0D;
  --primary:   #2B0F4C;
  --secondary: #9B5DE5;
  --accent:    #F15BB5;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --font-heading: 'Syne', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-body);
  background: var(--bg);
  color: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

/* ── Container ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ── Scroll-reveal classes (toggled by JS) ───────────────── */
.reveal          { opacity:0; transform:translateY(24px);  transition:opacity .6s ease,transform .6s ease; }
.reveal-left     { opacity:0; transform:translateX(-24px); transition:opacity .6s ease,transform .6s ease; }
.reveal-right    { opacity:0; transform:translateX(24px);  transition:opacity .6s ease,transform .6s ease; }
.reveal-scale    { opacity:0; transform:scale(.9);         transition:opacity .6s ease,transform .6s ease; }
.reveal.in,
.reveal-left.in,
.reveal-right.in,
.reveal-scale.in { opacity:1; transform:none; }

/* delay helpers */
.d1 { transition-delay:.08s; }
.d2 { transition-delay:.16s; }
.d3 { transition-delay:.24s; }
.d4 { transition-delay:.32s; }

/* ── Keyframe Animations ─────────────────────────────────── */
@keyframes marquee     { from{transform:translateX(0)} to{transform:translateX(-33.333%)} }
@keyframes spin-cw     { to{transform:rotate(360deg)} }
@keyframes spin-ccw    { to{transform:rotate(-360deg)} }
@keyframes pulse-dot   { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes spin-dash   { to{transform:rotate(360deg)} }
@keyframes scan-line   { 0%{transform:translateY(-100%)} 100%{transform:translateY(1000%)} }
@keyframes hero-fade   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

/* ── NAVBAR ──────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.5rem 0;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, padding .3s, backdrop-filter .3s;
}
#navbar.scrolled {
  background: rgba(13,13,13,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--primary);
  padding: 1rem 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: #fff;
}
.nav-logo span { color: var(--accent); transition: filter .2s; }
.nav-logo:hover span { filter: drop-shadow(0 0 8px var(--accent)); }

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: .875rem;
  color: #D1D5DB;
  transition: color .2s, filter .2s;
}
.nav-links a:hover { color: var(--secondary); filter: drop-shadow(0 0 5px var(--secondary)); }

.nav-burger {
  display: none;
  color: #fff;
  transition: color .2s;
}
.nav-burger:hover { color: var(--secondary); }
.nav-burger svg  { width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* Mobile overlay */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  border-left: 1px solid var(--primary);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
  overflow: hidden;
}
#mobile-menu.open { transform: translateX(0); }
.mobile-menu-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .1;
}
.mobile-close {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.mobile-close button { color: #fff; transition: color .2s; }
.mobile-close button:hover { color: var(--accent); }
.mobile-close svg { width:2rem; height:2rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
  z-index: 1;
}
.mobile-nav-links a {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  transition: color .2s;
  letter-spacing: .05em;
}
.mobile-nav-links a:hover { color: var(--secondary); }
.mobile-footer-note {
  margin-top: auto;
  text-align: center;
  border-top: 1px solid var(--primary);
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--gray-500);
  position: relative;
  z-index: 1;
}

/* ── HERO ────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  padding-top: 5rem;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg svg { width:100%; height:100%; opacity:.15; color:var(--secondary); }
.hero-bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(13,13,13,.8) 70%, var(--bg));
}
.hero-line-r {
  position: absolute;
  right: 3rem; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--primary), transparent);
}
.hero-line-r2 {
  position: absolute;
  right: 6rem; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(43,15,76,.5), transparent);
}
.hero-content {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  width: 100%;
}
.hero-inner { max-width: 72rem; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .75rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(155,93,229,.3);
  background: rgba(43,15,76,.2);
  backdrop-filter: blur(4px);
  animation: hero-fade .7s ease both;
}
.hero-badge-dot {
  width: .5rem; height: .5rem;
  background: var(--accent);
  animation: pulse-dot 2s ease-in-out infinite;
}
.hero-badge-text {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--secondary);
  text-transform: uppercase;
}
.hero-h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.04em;
  margin-bottom: 2rem;
  animation: hero-fade .7s .1s ease both;
}
.hero-h1 .gradient-text {
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-p {
  font-size: 1.125rem;
  color: var(--gray-400);
  line-height: 1.7;
  max-width: 40rem;
  margin-bottom: 2.5rem;
  animation: hero-fade .7s .18s ease both;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.5rem;
  animation: hero-fade .7s .26s ease both;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  background: var(--primary);
  border: 1px solid var(--secondary);
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
  transition: box-shadow .3s, transform .15s;
}
.btn-primary:hover {
  box-shadow: 0 0 20px var(--secondary);
  transform: scale(1.02);
}
.btn-primary svg { width:1.25rem; height:1.25rem; transition: transform .2s; }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  border: 1px solid var(--primary);
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gray-400);
  transition: color .3s, border-color .3s;
}
.btn-secondary:hover { color: #fff; border-color: var(--accent); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  border-top: 1px solid rgba(43,15,76,.5);
  padding-top: 2rem;
  animation: hero-fade .7s .34s ease both;
}
.hero-meta-item { display: flex; flex-direction: column; gap: .25rem; }
.hero-meta-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--gray-600);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-meta-value {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  color: var(--secondary);
  letter-spacing: .05em;
}

/* Marquee strip */
.hero-marquee-strip {
  position: relative;
  z-index: 10;
  width: 100%;
  border-top: 1px solid rgba(43,15,76,.4);
  padding: 1rem 0;
  overflow: hidden;
}
.hero-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.hero-marquee-track span.item {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  color: var(--gray-700);
  margin-inline: 1.5rem;
}
.hero-marquee-track span.sep {
  color: var(--secondary);
  opacity: .6;
  margin-inline: .25rem;
}

/* ── ABOUT ───────────────────────────────────────────────── */
#about {
  position: relative;
  padding: 8rem 0;
  border-top: 1px solid var(--primary);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}
@media(min-width:1024px) { .about-grid { grid-template-columns: 1fr 1fr; } }

.about-badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .75rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--primary);
  background: rgba(43,15,76,.1);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .2em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.about-h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.about-h2 span { color: var(--secondary); }
.about-accent-bar {
  width: 3rem; height: .25rem;
  background: var(--accent);
  margin-bottom: 2rem;
}
.about-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 1.125rem;
  color: var(--gray-400);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

/* Value pillars */
.value-pillars {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .75rem;
}
@media(max-width:640px) { .value-pillars { grid-template-columns: 1fr; } }
.pillar {
  padding: 1rem;
  border: 1px solid var(--primary);
  background: rgba(43,15,76,.05);
  transition: border-color .2s;
}
.pillar:hover { border-color: var(--secondary); }
.pillar-icon { color: var(--accent); margin-bottom: .75rem; }
.pillar-icon svg { width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.5; }
.pillar:hover .pillar-icon { filter: drop-shadow(0 0 6px var(--accent)); }
.pillar-title {
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: #fff;
  margin-bottom: .5rem;
}
.pillar-desc { font-size: .75rem; color: var(--gray-500); line-height: 1.6; }

/* About visual */
.about-visual {
  position: relative;
  width: 100%;
  max-width: 28rem;
  margin: auto;
  aspect-ratio: 1;
}
.ring {
  position: absolute;
  border: 1px solid;
  border-radius: 0;
}
.ring-1 {
  inset: 0;
  border-color: rgba(155,93,229,.3);
  animation: spin-cw 60s linear infinite;
}
.ring-2 {
  inset: 1rem;
  border-color: var(--primary);
  animation: spin-ccw 40s linear infinite;
}
.ring-3 {
  inset: 2rem;
  border-color: rgba(241,91,181,.2);
  animation: spin-cw 30s linear infinite;
}
.about-visual-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-visual-center svg { filter: drop-shadow(0 0 15px var(--secondary)); }
.about-visual-pulse rect { animation: pulse-dot 2s ease-in-out infinite; }
.vis-line-top {
  position:absolute; top:0; left:50%;
  width:1px; height:6rem;
  background:linear-gradient(to bottom,transparent,var(--accent));
}
.vis-line-bot {
  position:absolute; bottom:0; left:50%;
  width:1px; height:6rem;
  background:linear-gradient(to top,transparent,var(--secondary));
}
.vis-line-left {
  position:absolute; left:0; top:50%;
  height:1px; width:6rem;
  background:linear-gradient(to right,transparent,var(--primary));
}
.vis-line-right {
  position:absolute; right:0; top:50%;
  height:1px; width:6rem;
  background:linear-gradient(to left,transparent,var(--primary));
}
.vis-coord-tl {
  position:absolute; top:.5rem; left:.5rem;
  font-family:var(--font-mono); font-size:.55rem; color:var(--gray-700); letter-spacing:.1em;
}
.vis-coord-br {
  position:absolute; bottom:.5rem; right:.5rem;
  font-family:var(--font-mono); font-size:.55rem; color:var(--gray-700); letter-spacing:.1em;
}

/* ── SERVICES ────────────────────────────────────────────── */
#services {
  position: relative;
  padding: 8rem 0;
  border-top: 1px solid rgba(43,15,76,.5);
  background: rgba(43,15,76,.1);
  overflow: hidden;
}
.services-diag-bg {
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0l40 40M40 0L0 40' stroke='%232B0F4C' stroke-width='1' opacity='.3'/%3E%3C/svg%3E");
  opacity:.2;
  mix-blend-mode:screen;
}
.section-label {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .25em;
  color: var(--secondary);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.section-h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem,4vw,3.25rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.5rem;
}
.section-h2 span { color: var(--secondary); }
.section-h2 .accent-span { color: var(--accent); }
.section-h2 .gradient-span {
  background: linear-gradient(90deg,var(--secondary),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-bar {
  width:6rem; height:.25rem;
  background:linear-gradient(90deg,var(--secondary),var(--accent));
  margin-inline:auto;
  margin-bottom:1.5rem;
}
.section-sub {
  color: var(--gray-500);
  max-width:32rem;
  margin-inline:auto;
}
.text-center { text-align:center; }
.mb-20 { margin-bottom:5rem; }

/* Service cards grid */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media(min-width:640px)  { .services-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .services-grid { grid-template-columns:repeat(4,1fr); } }

.service-card {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--primary);
  background: rgba(13,13,13,.8);
  overflow: hidden;
  transition: border-color .3s;
  cursor: default;
}
.service-card:hover { border-color: rgba(155,93,229,.6); }
.service-card-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(155,93,229,.1),transparent);
  opacity:0; transition:opacity .4s;
}
.service-card:hover .service-card-bg { opacity:1; }
.corner-tl,.corner-br {
  position:absolute; width:.75rem; height:.75rem;
  border-color: var(--secondary);
  opacity:0; transition:opacity .3s;
}
.corner-tl { top:0; left:0; border-top:1px solid; border-left:1px solid; }
.corner-br { bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; }
.service-card:hover .corner-tl,
.service-card:hover .corner-br { opacity:1; }

.service-card-inner { position:relative; z-index:1; }
.service-icon {
  color: var(--secondary);
  margin-bottom: 1.5rem;
  transition: color .2s, filter .2s;
}
.service-card:hover .service-icon { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }
.service-icon svg { width:2rem; height:2rem; fill:none; stroke:currentColor; stroke-width:1.5; }
.service-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  margin-bottom: .75rem;
}
.service-card p {
  color: var(--gray-400);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  transition: color .2s;
}
.service-card:hover p { color: #D1D5DB; }
.service-bullets {
  border-top: 1px solid rgba(43,15,76,.5);
  padding-top: 1.25rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.service-bullet {
  display:flex; align-items:flex-start; gap:.625rem;
  font-size:.875rem; color:var(--gray-500);
  transition: color .2s;
}
.service-card:hover .service-bullet { color:var(--gray-400); }
.service-bullet-dot {
  font-family:var(--font-mono); font-size:.75rem;
  color:var(--accent); margin-top:.1rem; flex-shrink:0;
}

/* CTA strip */
.services-cta {
  position:relative;
  border:1px solid var(--primary);
  padding:2rem;
  background:rgba(43,15,76,.05);
  text-align:center;
  overflow:hidden;
}
.services-cta-topline {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:12rem; height:1px;
  background:linear-gradient(90deg,transparent,rgba(241,91,181,.6),transparent);
}
.services-cta p { color:var(--gray-400); margin-bottom:1rem; }
.services-cta a {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-heading); font-size:.875rem; font-weight:700;
  letter-spacing:.16em; color:var(--secondary);
  transition:color .2s, filter .2s;
}
.services-cta a:hover { color:var(--accent); filter:drop-shadow(0 0 8px var(--accent)); }
.services-cta a svg { width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:2; }

/* ── TECH STACK ──────────────────────────────────────────── */
#tech {
  position:relative;
  padding:7rem 0;
  border-top:1px solid rgba(43,15,76,.5);
  background:rgba(43,15,76,.05);
  overflow:hidden;
}
.tech-bg {
  position:absolute; inset:0;
  pointer-events:none; opacity:.04;
}
.tech-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media(min-width:640px)  { .tech-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .tech-grid { grid-template-columns:repeat(4,1fr); } }

.tech-card {
  padding:1.5rem;
  border:1px solid var(--primary);
  background:rgba(13,13,13,.7);
  transition:border-color .2s;
}
.tech-card:hover { border-color:rgba(155,93,229,.6); }
.tech-cat-header {
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:1.25rem;
}
.tech-cat-dot {
  width:.375rem; height:.375rem;
  background:var(--accent);
  flex-shrink:0;
}
.tech-cat-label {
  font-family:var(--font-mono); font-size:.65rem;
  letter-spacing:.2em; color:var(--secondary); text-transform:uppercase;
}
.tech-badges {
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.tech-badge {
  padding:.25rem .625rem;
  font-family:var(--font-mono); font-size:.75rem;
  color:var(--gray-400);
  border:1px solid var(--primary);
  background:rgba(43,15,76,.1);
  transition:border-color .2s, color .2s;
}
.tech-card:hover .tech-badge { border-color:rgba(43,15,76,.8); color:#D1D5DB; }

/* ── WHY US ──────────────────────────────────────────────── */
#why-us {
  position:relative;
  padding:8rem 0;
  border-top:1px solid var(--primary);
  overflow:hidden;
}
.whyus-glow {
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:37.5rem; height:37.5rem;
  background:rgba(43,15,76,.05);
  border-radius:50%;
  filter:blur(3rem);
  pointer-events:none;
}
.whyus-layout {
  display:flex;
  flex-direction:column;
  gap:5rem;
  align-items:center;
  margin-bottom:6rem;
}
@media(min-width:1024px) {
  .whyus-layout { flex-direction:row; gap:5rem; }
}

/* Tile grid */
.whyus-tiles-wrap {
  position:relative;
  width:100%; max-width:28rem;
  flex-shrink:0;
}
.whyus-tiles-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(43,15,76,.2),transparent);
  transform:rotate(-6deg) scale(1.05);
  border:1px solid rgba(43,15,76,.3);
  z-index:0;
}
.whyus-tiles-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1rem;
  padding:1rem;
  background:var(--bg);
  border:1px solid var(--primary);
  box-shadow:0 25px 50px rgba(0,0,0,.5);
}
.tile {
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--primary);
  background:rgba(43,15,76,.05);
  position:relative; overflow:hidden;
  cursor:default;
  transition:border-color .2s;
}
.tile:hover { border-color:var(--accent); }
.tile-hover-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(155,93,229,.2),transparent);
  opacity:0; transition:opacity .5s;
}
.tile:hover .tile-hover-bg { opacity:1; }
.tile-scan {
  position:absolute; top:0; left:0;
  width:100%; height:1px;
  background:rgba(241,91,181,.5);
  opacity:0;
}
.tile:hover .tile-scan { opacity:1; animation:scan-line 2s linear infinite; }
.tile-dot-tl { position:absolute; top:.5rem; left:.5rem; width:.25rem; height:.25rem; background:var(--secondary); }
.tile-dot-br { position:absolute; bottom:.5rem; right:.5rem; width:.25rem; height:.25rem; background:var(--accent); }
.tile-label {
  position:relative; z-index:1;
  font-family:var(--font-heading); font-size:.875rem;
  letter-spacing:.2em; color:var(--gray-400);
  transition:color .2s, filter .2s;
}
.tile:hover .tile-label { color:#fff; filter:drop-shadow(0 0 8px var(--accent)); }

/* WhyUs text */
.whyus-text { flex:1; }
.whyus-text .section-label { margin-bottom:1rem; }
.whyus-h2 {
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:800; line-height:1.1;
  margin-bottom:1.5rem;
}
.whyus-body {
  display:flex; flex-direction:column; gap:1.25rem;
  font-size:1.125rem; color:var(--gray-400); line-height:1.8;
}
.whyus-divider {
  display:flex; align-items:center; gap:1rem;
  margin-top:2.5rem;
}
.whyus-divider-line { flex:1; height:1px; background:var(--primary); }
.whyus-divider-text {
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.12em; color:var(--secondary);
}

/* Process steps */
.process-top {
  border-top:1px solid rgba(43,15,76,.6);
  padding-top:5rem;
}
.process-header { text-align:center; margin-bottom:3.5rem; }
.process-header .section-label { margin-bottom:.75rem; }
.process-h3 {
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:800; color:#fff;
}
.process-h3 span { color:var(--accent); }
.process-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media(min-width:640px) { .process-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .process-grid { grid-template-columns:repeat(4,1fr); } }
.process-step {
  position:relative;
  padding:1.5rem;
  border:1px solid var(--primary);
  background:rgba(43,15,76,.05);
  transition:background .2s;
}
.process-step:hover { background:rgba(43,15,76,.1); }
.process-step-num {
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.12em; color:var(--secondary); opacity:.6;
  margin-bottom:1rem;
}
.process-step-title {
  font-family:var(--font-heading); font-size:.875rem;
  font-weight:700; color:#fff; letter-spacing:.16em;
  margin-bottom:.75rem;
  transition:color .2s;
}
.process-step:hover .process-step-title { color:var(--accent); }
.process-step p { font-size:.875rem; color:var(--gray-500); line-height:1.65; }
.process-corner-bl {
  position:absolute; bottom:0; left:0;
  width:.75rem; height:.75rem;
  border-bottom:1px solid var(--secondary); border-left:1px solid var(--secondary);
  opacity:0; transition:opacity .2s;
}
.process-step:hover .process-corner-bl { opacity:1; }

/* ── CONTACT ─────────────────────────────────────────────── */
#contact {
  position:relative;
  padding:8rem 0;
  border-top:1px solid var(--primary);
}
.contact-bg {
  position:absolute; inset:0; z-index:0;
  pointer-events:none; opacity:.1;
}
.contact-inner { max-width:56rem; margin-inline:auto; }
.contact-grid {
  display:grid; grid-template-columns:1fr;
  gap:4rem;
}
@media(min-width:768px) { .contact-grid { grid-template-columns:repeat(2,1fr); } }

/* Info column */
.contact-info-h3 {
  font-family:var(--font-heading); font-size:1.25rem;
  font-weight:700; color:#fff;
  letter-spacing:.16em;
  border-bottom:1px solid var(--primary);
  padding-bottom:1rem;
  margin-bottom:2rem;
  display:inline-block;
}
.contact-details { display:flex; flex-direction:column; gap:1.25rem; margin-bottom:2.5rem; }
.contact-detail-row { display:flex; align-items:flex-start; gap:1rem; }
.contact-arrow {
  font-family:var(--font-mono); font-size:.875rem;
  color:var(--accent); margin-top:.1rem; flex-shrink:0;
}
.contact-detail-row p,
.contact-detail-row a {
  font-family:var(--font-mono); font-size:.875rem;
  color:var(--gray-400); line-height:1.7;
}
.contact-detail-row a { transition:color .2s, filter .2s; }
.contact-detail-row a:hover { color:var(--secondary); filter:drop-shadow(0 0 5px var(--secondary)); }

/* Response notice */
.response-notice {
  padding:1rem;
  border:1px solid rgba(43,15,76,.5);
  background:rgba(43,15,76,.05);
  margin-bottom:1.25rem;
}
.response-notice-label {
  font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.15em; color:var(--secondary); opacity:.7;
  margin-bottom:.5rem; text-transform:uppercase;
}
.response-notice p { font-size:.875rem; color:var(--gray-500); }

.status-box {
  padding:.75rem 1rem;
  border:1px solid rgba(43,15,76,.4);
  display:flex; align-items:center; gap:.75rem;
}
.status-dot { width:.375rem; height:.375rem; background:#10B981; animation:pulse-dot 2s ease-in-out infinite; }
.status-box span { font-family:var(--font-mono); font-size:.75rem; color:var(--gray-500); }
.status-box span em { font-style:normal; color:#10B981; }

/* Form */
.contact-form { display:flex; flex-direction:column; gap:1.5rem; }
.form-field { display:flex; flex-direction:column; gap:.5rem; }
.form-field label {
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.15em; color:var(--secondary); opacity:.8; text-transform:uppercase;
}
.form-field input,
.form-field textarea,
.form-field select {
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--primary);
  padding:.75rem 0;
  color:#fff;
  font-family:var(--font-mono);
  font-size:.875rem;
  outline:none;
  transition:border-color .2s;
  -webkit-appearance:none;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color:var(--secondary); }
.form-field textarea { resize:vertical; min-height:7rem; }
.form-field select { color:var(--gray-400); cursor:pointer; }
.form-field select option { background:var(--bg); color:#fff; }
.submit-btn {
  width:100%; padding:1.25rem;
  background:transparent;
  border:1px solid var(--secondary);
  color:var(--secondary);
  font-family:var(--font-heading); font-size:.875rem;
  font-weight:700; letter-spacing:.2em;
  position:relative; overflow:hidden;
  transition:color .3s, box-shadow .3s;
}
.submit-btn:hover { color:#fff; box-shadow:0 0 30px var(--secondary); }
.submit-btn-bg {
  position:absolute; inset:0;
  background:linear-gradient(90deg,var(--secondary),var(--accent));
  opacity:0; transition:opacity .3s; z-index:0;
}
.submit-btn:hover .submit-btn-bg { opacity:1; }
.submit-btn span {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.submit-btn .arrow { display:inline-block; transition:transform .3s; }
.submit-btn:hover .arrow { transform:translateX(.5rem); }

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background:var(--bg);
  border-top:1px solid var(--primary);
  padding:3rem 0;
  position:relative;
  overflow:hidden;
}
.footer-topline {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(241,91,181,.5),transparent);
}
.footer-inner {
  display:flex; flex-direction:column;
  align-items:center;
  gap:2rem;
  border-bottom:1px solid rgba(43,15,76,.5);
  padding-bottom:2rem;
  margin-bottom:2rem;
}
@media(min-width:768px) {
  .footer-inner { flex-direction:row; justify-content:space-between; }
}
.footer-logo {
  font-family:var(--font-heading); font-size:1.5rem;
  font-weight:800; letter-spacing:-.04em; color:#fff;
}
.footer-logo span { color:var(--accent); }
.footer-nav {
  display:flex; flex-wrap:wrap; justify-content:center; gap:2rem;
}
.footer-nav a {
  font-family:var(--font-mono); font-size:.875rem;
  color:var(--gray-400); transition:color .2s;
}
.footer-nav a:hover { color:var(--secondary); }
.footer-bottom {
  display:flex; flex-direction:column; align-items:center;
  gap:1rem;
}
@media(min-width:768px) {
  .footer-bottom { flex-direction:row; justify-content:space-between; }
}
.footer-copy {
  font-family:var(--font-mono); font-size:.75rem;
  color:var(--gray-500); letter-spacing:.05em; text-align:center;
}
.footer-status {
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.75rem; color:var(--gray-600);
}
.footer-status em { font-style:normal; color:#10B981; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:767px) {
  .nav-links  { display:none; }
  .nav-burger { display:flex; }
  .hero-line-r, .hero-line-r2 { display:none; }
  .value-pillars { grid-template-columns:1fr; }
}
@media(min-width:768px) {
  .nav-burger { display:none; }
}