/* ── RESET & TOKENS ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:      #080c12;
  --bg2:     #0d1420;
  --bg3:     #111b2e;
  --accent:  #00d4ff;
  --accent2: #0057ff;
  --text:    #e8edf5;
  --muted:   #7a8ba8;
  --border:  rgba(0,212,255,0.13);
  --card:    rgba(13,20,32,0.9);
  --radius:  14px;
  --font-h:  'Syne', sans-serif;
  --font-b:  'Epilogue', sans-serif;
}

html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-b);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}

/* subtle noise overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0; opacity:.5;
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent2); border-radius:2px; }

/* ── NAVIGATION ─────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 5%;
  background:rgba(8,12,18,0.9);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:padding .3s;
}
.logo { font-family:var(--font-h); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; color:var(--text); text-decoration:none; }
.logo span { color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { font-size:.84rem; color:var(--muted); text-decoration:none; letter-spacing:.04em; text-transform:uppercase; font-weight:400; transition:color .2s; }
.nav-links a:hover { color:var(--accent); }
.nav-cta { background:var(--accent) !important; color:#000 !important; padding:.4rem 1.1rem; border-radius:6px; font-weight:600 !important; }
.nav-cta:hover { opacity:.85 !important; }
.lang-toggle { display:flex; align-items:center; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:50px; padding:2px; gap:2px; }
.lang-btn { background:none; border:none; color:var(--muted); font-family:var(--font-h); font-size:.74rem; font-weight:700; letter-spacing:.05em; padding:.28rem .7rem; border-radius:50px; cursor:pointer; transition:background .2s,color .2s; }
.lang-btn.active { background:var(--accent); color:#000; }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:.3rem; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:2px; }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1 { font-family:var(--font-h); font-size:clamp(2.6rem,5.5vw,5rem); font-weight:800; line-height:1.06; letter-spacing:-.03em; }
h1 em { font-style:normal; color:var(--accent); }
h2 { font-family:var(--font-h); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; letter-spacing:-.02em; line-height:1.12; margin-bottom:.9rem; }
h3 { font-family:var(--font-h); font-size:1.2rem; font-weight:700; margin-bottom:.6rem; }
p { line-height:1.75; }

.section-label { font-size:.74rem; color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-weight:600; margin-bottom:.7rem; display:block; }
.section-sub { color:var(--muted); font-size:1rem; max-width:520px; margin-bottom:3rem; }

/* ── SECTIONS ───────────────────────────────────────────── */
section { position:relative; padding:6rem 5%; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent); color:#000; padding:.82rem 1.9rem;
  border-radius:8px; font-family:var(--font-h); font-weight:700; font-size:.92rem;
  text-decoration:none; letter-spacing:.01em;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 0 28px rgba(0,212,255,0.22);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 48px rgba(0,212,255,0.4); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--border); color:var(--text); padding:.82rem 1.9rem;
  border-radius:8px; font-family:var(--font-h); font-weight:600; font-size:.92rem;
  text-decoration:none; transition:border-color .2s,color .2s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* ── ANIMATIONS (additive only — never hide by default) ──── */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse  { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.8); } }

/* .animate-up is ADDED by JS only after element enters viewport */
.animate-up { animation:fadeUp .65s ease both; }

/* ── SERVICE DETAIL HERO ─────────────────────────────────── */
.service-hero { min-height:60vh; display:flex; align-items:flex-end; padding:10rem 5% 5rem; position:relative; overflow:hidden; }
.service-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.22) saturate(.75); }
.service-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 8%,transparent 55%); }
.service-hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,212,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.04) 1px,transparent 1px); background-size:60px 60px; }
.service-hero-content { position:relative; max-width:820px; }
.service-back { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--muted); text-decoration:none; letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin-bottom:1.4rem; transition:color .2s; }
.service-back:hover { color:var(--accent); }
.service-hero h1 { margin-bottom:1.1rem; }
.service-hero > .service-hero-content > p { font-size:1.05rem; color:var(--muted); max-width:580px; line-height:1.8; }

/* ── SERVICE BODY ────────────────────────────────────────── */
.service-body { background:var(--bg); padding:5rem 5%; }

.stats-bar { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:4rem; }
.stat-cell { background:var(--bg3); padding:1.8rem 1.4rem; text-align:center; }
.stat-cell .num { font-family:var(--font-h); font-size:2rem; font-weight:800; color:var(--accent); line-height:1; }
.stat-cell .lbl { font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:.3rem; }

.service-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-bottom:5rem; }

.feature-list { list-style:none; display:flex; flex-direction:column; gap:.9rem; margin-top:1rem; }
.feature-list li { display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.2rem; background:var(--bg3); border:1px solid var(--border); border-radius:10px; font-size:.9rem; color:var(--muted); transition:border-color .2s; }
.feature-list li:hover { border-color:rgba(0,212,255,0.28); }
.feature-list li .fi { font-size:1.15rem; flex-shrink:0; margin-top:.1rem; }
.feature-list li strong { display:block; color:var(--text); font-weight:600; margin-bottom:.15rem; font-family:var(--font-h); font-size:.9rem; }

.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; margin-top:1rem; }
.plan-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; transition:border-color .25s,transform .25s; }
.plan-card:hover { border-color:rgba(0,212,255,0.3); transform:translateY(-3px); }
.plan-card.featured-plan { border-color:rgba(0,212,255,0.35); background:rgba(0,87,255,0.06); }
.plan-badge { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:#000; padding:.2rem .6rem; border-radius:4px; margin-bottom:.7rem; display:inline-block; }
.plan-card h3 { font-size:1.1rem; margin-bottom:.5rem; }
.plan-card > p { font-size:.86rem; color:var(--muted); line-height:1.7; margin-bottom:1rem; }
.plan-includes { list-style:none; display:flex; flex-direction:column; gap:.42rem; }
.plan-includes li { font-size:.83rem; color:var(--muted); display:flex; align-items:flex-start; gap:.5rem; line-height:1.6; }
.plan-includes li::before { content:'✓'; color:var(--accent); font-weight:700; flex-shrink:0; }

.img-block { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.img-block img { width:100%; height:300px; object-fit:cover; display:block; filter:brightness(.82) saturate(.9); transition:transform .4s,filter .4s; }
.img-block:hover img { transform:scale(1.03); filter:brightness(.95) saturate(1); }
.img-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.img-grid-2 .img-block img { height:190px; }

.cta-band { background:linear-gradient(135deg,rgba(0,87,255,0.14),rgba(0,212,255,0.07)); border:1px solid rgba(0,212,255,0.2); border-radius:var(--radius); padding:3.5rem; text-align:center; margin-top:4rem; }
.cta-band h2 { margin-bottom:.7rem; }
.cta-band > p { color:var(--muted); max-width:460px; margin:0 auto 1.8rem; font-size:.96rem; }
.cta-band .actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── FOOTER ─────────────────────────────────────────────── */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:3.5rem 5% 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem; }
.footer-brand .logo { font-size:1.2rem; }
.footer-brand p { font-size:.86rem; color:var(--muted); margin-top:.7rem; max-width:270px; line-height:1.7; }
.footer-col h4 { font-family:var(--font-h); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text); margin-bottom:.9rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.footer-col ul a { font-size:.86rem; color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-col ul a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.4rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:.8rem; color:var(--muted); }
.footer-socials { display:flex; gap:.7rem; }
.social-btn { width:33px; height:33px; border:1px solid var(--border); border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; font-size:.76rem; font-family:var(--font-h); font-weight:700; transition:border-color .2s,color .2s; }
.social-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── PROJECT / TAG STYLES ────────────────────────────────── */
.tag-row { display:flex; gap:.55rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.tag { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.18); color:var(--accent); padding:.28rem .7rem; border-radius:4px; font-family:'Courier New',monospace; }
.tag.green { background:rgba(0,255,128,0.07); border-color:rgba(0,255,128,0.2); color:#00e676; }
.tag.amber { background:rgba(255,180,0,0.08); border-color:rgba(255,180,0,0.2); color:#ffb300; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .service-grid-2 { grid-template-columns:1fr; gap:2.5rem; }
}
@media(max-width:768px) {
  .hamburger { display:block; }
  .nav-links {
    display:none; position:fixed; top:64px; left:0; right:0;
    background:rgba(8,12,18,.98); backdrop-filter:blur(20px);
    flex-direction:column; padding:1.5rem 5%; gap:1.1rem;
    border-bottom:1px solid var(--border);
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:.95rem; }
  .img-grid-2 { grid-template-columns:1fr; }
  .cta-band { padding:2.5rem 1.5rem; }
}
@media(max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
  .plan-grid { grid-template-columns:1fr; }
  section { padding:4rem 4%; }
}