/* ═══════════════════════════════════════════════════════════
   SEOFEB.com — Main Stylesheet
   Design: Dark Premium Tech with Green/Cyan Accents
   Fonts: Clash Display + Cabinet Grotesk (via Google Fonts proxy)
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ─── VARIABLES ─────────────────────────────────────────── */
:root {
  /* Palette */
  --ink:   #060a0f;
  --ink2:  #0c1220;
  --ink3:  #111927;
  --card:  #131e2d;
  --bdr:   rgba(255,255,255,.06);
  --bdr2:  rgba(255,255,255,.12);
  --txt:   #c8d6e8;
  --muted: #637a94;
  --faint: #2e3f52;
  /* Accents */
  --g1:  #00e5b0;
  --g2:  #00b4ff;
  --g3:  #7c6dff;
  --gold:#f5a623;
  --red: #ff4d6d;
  --grad: linear-gradient(120deg, #00e5b0 0%, #00b4ff 100%);
  --grad2:linear-gradient(120deg, #00b4ff 0%, #7c6dff 100%);
  --glow: 0 0 80px rgba(0,229,176,.12);
  --shadow: 0 8px 40px rgba(0,0,0,.5);
  --shadow2:0 20px 80px rgba(0,0,0,.65);
  /* Shape */
  --r: 10px; --r2:18px; --r3:28px;
}

/* ─── RESET & BASE ──────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--ink); color:var(--txt);
  line-height:1.6; overflow-x:hidden;
}
a { text-decoration:none; color:inherit }
img { max-width:100%; display:block }
ul { list-style:none }
input,button,textarea,select { font-family:inherit }

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:'Syne',sans-serif; color:#fff; line-height:1.15 }
h1 { font-size:clamp(2.2rem,5vw,4rem);   font-weight:800 }
h2 { font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:700 }
h3 { font-size:clamp(1rem,1.8vw,1.3rem);  font-weight:700 }
h4 { font-size:1rem; font-weight:700 }
p  { color:var(--muted); line-height:1.78 }

.eyebrow {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--g1); background:rgba(0,229,176,.08);
  border:1px solid rgba(0,229,176,.22);
  padding:.28rem .85rem; border-radius:50px; margin-bottom:1.1rem;
}
.sec-title  { color:#fff; margin-bottom:.65rem }
.sec-sub    { max-width:540px }
.text-center{ text-align:center }
.text-center .sec-sub { margin-inline:auto }
.grad-text  { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* ─── BUTTONS ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.72rem 1.75rem; border-radius:50px;
  font-family:'Syne',sans-serif; font-size:.88rem; font-weight:700;
  cursor:pointer; border:none; transition:all .25s ease; white-space:nowrap;
}
.btn-pri {
  background:var(--grad); color:#000;
  box-shadow:0 4px 24px rgba(0,229,176,.28);
}
.btn-pri:hover  { transform:translateY(-2px); box-shadow:0 8px 36px rgba(0,229,176,.45) }
.btn-sec {
  background:transparent; color:var(--txt);
  border:1.5px solid var(--bdr2);
}
.btn-sec:hover  { border-color:var(--g1); color:var(--g1); background:rgba(0,229,176,.05) }
.btn-sm  { padding:.48rem 1.1rem; font-size:.78rem }
.btn-lg  { padding:.88rem 2.1rem; font-size:.95rem }
.btn-blk { width:100%; justify-content:center; border-radius:var(--r) }
.btn-danger { background:rgba(255,77,109,.12); border:1px solid rgba(255,77,109,.3); color:var(--red) }
.btn-success{ background:rgba(0,229,176,.1);  border:1px solid rgba(0,229,176,.25); color:var(--g1) }

/* ─── TOPBAR SCROLL LINE ────────────────────────────────── */
#scrollLine {
  position:fixed; top:0; left:0; height:2px;
  background:var(--grad); z-index:2000; width:0; pointer-events:none;
}

/* ─── NAVIGATION ────────────────────────────────────────── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .3s, border .3s;
}
.site-nav.scrolled {
  background:rgba(6,10,15,.94); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr); box-shadow:0 4px 30px rgba(0,0,0,.4);
}
.nav-wrap {
  max-width:1260px; margin:0 auto; padding:1.1rem 2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav-logo {
  font-family:'Syne',sans-serif; font-size:1.45rem; font-weight:800;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; flex-shrink:0;
}
.nav-logo span { -webkit-text-fill-color:var(--g1) }
.nav-links { display:flex; align-items:center; gap:.05rem }
.nav-links a {
  padding:.45rem .85rem; border-radius:8px;
  font-size:.88rem; font-weight:500; color:var(--muted); transition:.2s;
  position:relative;
}
.nav-links a:hover,.nav-links a.active { color:#fff }
.nav-links a.active::after {
  content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--g1);
}
.nav-cta { display:flex; align-items:center; gap:.7rem; flex-shrink:0 }
.hamburger {
  display:none; background:none; border:1.5px solid var(--bdr2);
  border-radius:8px; padding:.48rem .6rem; cursor:pointer; color:#fff;
  font-size:1.1rem; line-height:1;
}
.mobile-nav {
  display:none; flex-direction:column; gap:.2rem;
  background:var(--ink2); border-bottom:1px solid var(--bdr);
  padding:1rem 2rem 1.5rem;
}
.mobile-nav.open { display:flex }
.mobile-nav a { padding:.65rem 0; color:var(--muted); font-weight:500; border-bottom:1px solid var(--bdr) }
.mobile-nav a:last-child { border:none }
.mobile-nav a:hover { color:#fff }

/* ─── HERO ──────────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding:8rem 2rem 5rem;
}
.hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 85% 65% at 70% 45%, rgba(0,180,255,.09) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 10% 85%, rgba(0,229,176,.07) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 90% 15%, rgba(124,109,255,.06) 0%, transparent 45%);
}
.hero-dots {
  position:absolute; inset:0; pointer-events:none; opacity:.03;
  background-image:radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size:40px 40px;
}
.hero-inner {
  max-width:1260px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
  position:relative; z-index:1;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(0,229,176,.07); border:1px solid rgba(0,229,176,.2);
  color:var(--g1); padding:.3rem .9rem; border-radius:50px;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.4rem;
}
.hero-title { font-size:clamp(2.4rem,5.5vw,4.2rem); font-weight:800; line-height:1.1; margin-bottom:1.3rem }
.hero-title span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hero-sub { font-size:1.05rem; color:var(--muted); max-width:490px; margin-bottom:2.4rem; line-height:1.8 }
.hero-btns { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:3rem }
.hero-nums { display:flex; gap:2.5rem; flex-wrap:wrap }
.hero-num .n { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:800; color:#fff }
.hero-num .n span { color:var(--g1) }
.hero-num .l { font-size:.74rem; color:var(--muted) }

/* Hero Visual */
.hero-visual { position:relative }
.hv-card {
  background:var(--card); border:1px solid var(--bdr2); border-radius:var(--r2);
  padding:1.8rem; box-shadow:var(--shadow2), var(--glow);
}
.hv-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--g1); margin-bottom:1.3rem }
.hv-row { margin-bottom:1rem }
.hv-meta { display:flex; justify-content:space-between; font-size:.76rem; color:var(--muted); margin-bottom:.35rem }
.hv-meta strong { color:#fff }
.hv-bar { height:5px; background:var(--ink3); border-radius:3px; overflow:hidden }
.hv-fill { height:100%; border-radius:3px; background:var(--grad); animation:barGrow 1.8s ease both }
@keyframes barGrow { from{width:0} }
.hv-badge {
  position:absolute; background:var(--ink2); border:1px solid var(--bdr2);
  border-radius:var(--r); padding:.85rem 1.1rem; box-shadow:var(--shadow2);
  animation:float 4s ease-in-out infinite;
}
.hv-badge.top  { top:-1.1rem; right:-1.1rem; animation-delay:.4s }
.hv-badge.bot  { bottom:-1.1rem; left:-1.1rem; animation-delay:.9s }
.hv-badge .bv  { font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:800; color:var(--g1) }
.hv-badge .bl  { font-size:.68rem; color:var(--muted); margin-top:.1rem }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ─── STATS BAR ─────────────────────────────────────────── */
.stats-bar {
  background:var(--ink2); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr);
  padding:2.5rem 2rem;
}
.stats-inner { max-width:960px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem }
.stat-item { text-align:center }
.stat-n { font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:800; color:#fff }
.stat-n span { color:var(--g1) }
.stat-l { font-size:.79rem; color:var(--muted); margin-top:.2rem }

/* ─── LAYOUT HELPERS ────────────────────────────────────── */
.section    { padding:6rem 2rem }
.section-sm { padding:3.5rem 2rem }
.wrap   { max-width:1200px; margin:0 auto }
.wrap-lg{ max-width:1360px; margin:0 auto }
.bg2 { background:var(--ink2) }
.bg3 { background:var(--ink3) }

/* ─── SERVICES GRID ─────────────────────────────────────── */
.svcs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.5rem; margin-top:3rem }
.svc-card {
  background:var(--card); border:1px solid var(--bdr); border-radius:var(--r2);
  padding:2rem; transition:all .3s; position:relative; overflow:hidden;
}
.svc-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:.35s;
}
.svc-card:hover { border-color:rgba(0,229,176,.28); transform:translateY(-4px); box-shadow:var(--glow), var(--shadow) }
.svc-card:hover::after { transform:scaleX(1) }
.svc-icon { font-size:2rem; margin-bottom:1.2rem }
.svc-card h3 { color:#fff; margin-bottom:.55rem }
.svc-card > p { font-size:.89rem; margin-bottom:1.3rem }
.svc-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1.3rem }
.svc-tag {
  background:rgba(0,180,255,.07); border:1px solid rgba(0,180,255,.18);
  color:var(--g2); padding:.18rem .65rem; border-radius:50px; font-size:.69rem; font-weight:600;
}
.svc-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem }
.svc-price { font-size:.78rem; color:var(--g1); font-weight:700 }
.svc-link { color:var(--g1); font-size:.82rem; font-weight:700; display:inline-flex; align-items:center; gap:.3rem; transition:.2s }
.svc-link:hover { gap:.6rem }

/* ─── PORTFOLIO ─────────────────────────────────────────── */
.filter-bar { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:2.5rem }
.ftab {
  padding:.42rem 1.1rem; border-radius:50px; font-size:.8rem; font-weight:700;
  cursor:pointer; background:var(--ink3); color:var(--muted); border:1px solid var(--bdr);
  transition:.2s;
}
.ftab.on,.ftab:hover { background:var(--g1); color:#000; border-color:var(--g1) }
.port-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.5rem }
.port-card {
  background:var(--card); border:1px solid var(--bdr); border-radius:var(--r2);
  overflow:hidden; transition:all .3s;
}
.port-card:hover { border-color:rgba(0,229,176,.3); transform:translateY(-4px); box-shadow:var(--shadow2) }
.port-img {
  height:194px; background:linear-gradient(135deg,var(--ink3),var(--card));
  display:flex; align-items:center; justify-content:center; font-size:3.5rem;
  position:relative; overflow:hidden;
}
.port-img img { width:100%; height:100%; object-fit:cover }
.port-cat { position:absolute; top:.7rem; left:.7rem; background:var(--g1); color:#000; font-size:.66rem; font-weight:800; padding:.2rem .65rem; border-radius:50px }
.port-overlay { position:absolute; inset:0; background:rgba(0,229,176,.4); opacity:0; transition:.3s; display:flex; align-items:center; justify-content:center; font-weight:800; color:#000; font-size:.88rem }
.port-card:hover .port-overlay { opacity:1 }
.port-body { padding:1.5rem }
.port-body h3 { color:#fff; margin-bottom:.4rem; font-size:1rem }
.port-body p  { font-size:.83rem; margin-bottom:1.2rem }
.port-results { display:grid; grid-template-columns:1fr 1fr; gap:.5rem }
.pr { background:var(--ink3); border-radius:var(--r); padding:.55rem .7rem; text-align:center }
.pr .rv { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:800; color:var(--g1) }
.pr .rk { font-size:.65rem; color:var(--muted); margin-top:.1rem }
.port-more { display:inline-flex; align-items:center; gap:.3rem; color:var(--g2); font-size:.78rem; font-weight:700; margin-top:1rem }

/* ─── BLOG ──────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.5rem }
.blog-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r2); overflow:hidden; transition:all .3s }
.blog-card:hover { border-color:var(--bdr2); transform:translateY(-3px); box-shadow:var(--shadow) }
.blog-thumb { height:172px; background:linear-gradient(135deg,var(--ink3),var(--card)); display:flex; align-items:center; justify-content:center; font-size:2.8rem; overflow:hidden; color:var(--faint) }
.blog-thumb img { width:100%; height:100%; object-fit:cover }
.blog-body { padding:1.4rem }
.blog-cat { font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--g2); margin-bottom:.5rem }
.blog-body h3 { color:#fff; font-size:.95rem; line-height:1.45; margin-bottom:.55rem }
.blog-body p  { font-size:.82rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.blog-foot { display:flex; justify-content:space-between; align-items:center; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--bdr); font-size:.74rem; color:var(--faint) }
.blog-foot a { color:var(--g1); font-weight:700 }

/* ─── FAQ ───────────────────────────────────────────────── */
.faq-cats { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-bottom:2rem }
.fc-btn { padding:.38rem 1rem; border-radius:50px; font-size:.77rem; font-weight:700; cursor:pointer; background:var(--ink3); color:var(--muted); border:1px solid var(--bdr); transition:.2s }
.fc-btn.on,.fc-btn:hover { background:var(--g2); color:#fff; border-color:var(--g2) }
.faq-wrap { max-width:780px; margin:0 auto }
.faq-item { border:1px solid var(--bdr); border-radius:var(--r); margin-bottom:.65rem; transition:border-color .2s }
.faq-item.open { border-color:rgba(0,229,176,.3) }
.faq-q { padding:1.1rem 1.4rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:1rem }
.faq-q h4 { color:#fff; font-size:.92rem; font-weight:600; flex:1 }
.faq-icon { width:26px; height:26px; border-radius:50%; background:var(--ink3); display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--muted); flex-shrink:0; transition:all .3s }
.faq-item.open .faq-icon { background:var(--g1); color:#000; transform:rotate(45deg) }
.faq-ans { max-height:0; overflow:hidden; transition:max-height .35s ease }
.faq-item.open .faq-ans { max-height:300px }
.faq-ans p { padding:0 1.4rem 1.2rem; font-size:.88rem }

/* ─── TESTIMONIALS ──────────────────────────────────────── */
.testi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.5rem }
.testi-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r2); padding:1.8rem; position:relative }
.testi-card::before { content:'"'; position:absolute; top:.8rem; right:1.2rem; font-size:5rem; color:var(--g1); opacity:.07; font-family:'Syne',sans-serif; line-height:1 }
.testi-stars { color:var(--gold); font-size:.8rem; margin-bottom:.9rem }
.testi-text { font-size:.9rem; color:var(--txt); line-height:1.78; margin-bottom:1.4rem }
.testi-author { display:flex; align-items:center; gap:.85rem }
.testi-av { width:42px; height:42px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:800; color:#000; flex-shrink:0; overflow:hidden }
.testi-av img { width:100%; height:100%; object-fit:cover }
.testi-name { font-weight:700; font-size:.88rem; color:#fff }
.testi-role { font-size:.73rem; color:var(--muted) }

/* ─── TEAM ──────────────────────────────────────────────── */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.5rem }
.team-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r2); padding:2rem; text-align:center; transition:.3s }
.team-card:hover { border-color:rgba(0,229,176,.25); transform:translateY(-3px) }
.team-photo { width:74px; height:74px; border-radius:50%; background:var(--grad); margin:0 auto 1.1rem; display:flex; align-items:center; justify-content:center; font-size:1.8rem; overflow:hidden; border:2px solid var(--bdr2) }
.team-photo img { width:100%; height:100%; object-fit:cover }
.team-name { font-family:'Syne',sans-serif; font-size:.98rem; font-weight:700; color:#fff }
.team-role { font-size:.76rem; color:var(--g1); margin:.25rem 0 .65rem }
.team-bio  { font-size:.79rem; line-height:1.65 }

/* ─── CONTACT FORM ──────────────────────────────────────── */
.contact-layout { display:grid; grid-template-columns:1fr 1.7fr; gap:3.5rem; align-items:start }
.ci-item { display:flex; align-items:flex-start; gap:.9rem; margin-bottom:1.4rem }
.ci-icon { width:42px; height:42px; border-radius:10px; background:rgba(0,229,176,.08); border:1px solid rgba(0,229,176,.18); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0 }
.ci-item h4 { color:#fff; font-size:.85rem; margin-bottom:.15rem }
.ci-item p  { font-size:.82rem }
.cform { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r2); padding:2.5rem }
.fg2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.fg  { margin-bottom:1rem }
.fg.full { grid-column:1/-1 }
.fg label { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.38rem }
.fg input,.fg select,.fg textarea {
  width:100%; padding:.68rem 1rem;
  background:var(--ink2); border:1.5px solid var(--bdr);
  border-radius:var(--r); color:#fff; font-size:.88rem; outline:none; transition:.2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--g1); box-shadow:0 0 0 3px rgba(0,229,176,.1) }
.fg textarea { min-height:115px; resize:vertical }
.fg select option { background:var(--ink2) }

/* ─── CTA SECTION ───────────────────────────────────────── */
.cta-section { background:var(--ink2); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr); padding:6rem 2rem; position:relative; overflow:hidden }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0,229,176,.07) 0%,transparent 65%); pointer-events:none }
.cta-inner { max-width:640px; margin:0 auto; text-align:center; position:relative; z-index:1 }
.cta-inner h2 { margin-bottom:1rem }
.cta-inner p  { margin-bottom:2rem; font-size:1rem }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }

/* ─── FOOTER ────────────────────────────────────────────── */
.site-footer { background:var(--ink); border-top:1px solid var(--bdr); padding:5rem 2rem 2rem }
.footer-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:3rem; margin-bottom:3rem }
.footer-logo { font-family:'Syne',sans-serif; font-size:1.35rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:.9rem }
.footer-about { font-size:.83rem; line-height:1.72; max-width:280px }
.footer-col h4 { font-family:'Syne',sans-serif; font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:#fff; margin-bottom:1.1rem }
.footer-col ul li { margin-bottom:.5rem }
.footer-col ul li a { font-size:.82rem; color:var(--muted); transition:.2s }
.footer-col ul li a:hover { color:var(--g1) }
.footer-col ul li span { font-size:.82rem; color:var(--muted) }
.footer-bottom { max-width:1200px; margin:0 auto; padding-top:1.8rem; border-top:1px solid var(--bdr); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem }
.footer-bottom p { font-size:.77rem; color:var(--faint) }
.socials { display:flex; gap:.45rem }
.soc-btn { width:33px; height:33px; border-radius:8px; background:var(--ink3); border:1px solid var(--bdr); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:var(--muted); transition:.2s; text-decoration:none }
.soc-btn:hover { background:var(--g1); color:#000; border-color:var(--g1) }

/* ─── PAGE HERO ─────────────────────────────────────────── */
.page-hero { background:var(--ink2); padding:8.5rem 2rem 5rem; text-align:center; border-bottom:1px solid var(--bdr); position:relative; overflow:hidden }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,180,255,.07) 0%,transparent 60%); pointer-events:none }
.page-hero .wrap { position:relative; z-index:1 }
.breadcrumb { display:flex; align-items:center; justify-content:center; gap:.45rem; font-size:.76rem; color:var(--muted); margin-bottom:1.4rem }
.breadcrumb a { color:var(--g2) }
.breadcrumb span { color:var(--faint) }

/* ─── PROCESS STEPS ─────────────────────────────────────── */
.process-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:2rem; counter-reset:steps }
.proc-step { position:relative; padding-top:3.5rem }
.proc-step::before { counter-increment:steps; content:counter(steps,'0'); position:absolute; top:0; left:0; font-family:'Syne',sans-serif; font-size:2.8rem; font-weight:800; color:transparent; -webkit-text-stroke:1px var(--bdr2) }
.proc-step h3 { color:#fff; margin-bottom:.45rem; font-size:1rem }
.proc-step p  { font-size:.83rem }

/* ─── ADMIN PANEL ───────────────────────────────────────── */
.admin-layout { display:grid; grid-template-columns:240px 1fr; min-height:100vh; background:var(--ink) }
.admin-sidebar { background:var(--ink2); border-right:1px solid var(--bdr); display:flex; flex-direction:column }
.sid-head { padding:1.4rem 1.5rem; border-bottom:1px solid var(--bdr) }
.sid-logo { font-family:'Syne',sans-serif; font-size:1rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.sid-sub  { font-size:.68rem; color:var(--muted); margin-top:.15rem }
.sid-nav  { flex:1; padding:.5rem 0 }
.sid-link { display:flex; align-items:center; gap:.7rem; padding:.68rem 1.5rem; color:var(--muted); font-size:.83rem; font-weight:500; border-left:3px solid transparent; transition:.2s; text-decoration:none }
.sid-link:hover { color:#fff; background:rgba(255,255,255,.025) }
.sid-link.on    { color:var(--g1); background:rgba(0,229,176,.06); border-left-color:var(--g1) }
.sid-sep { height:1px; background:var(--bdr); margin:.5rem 0 }
.admin-main { display:flex; flex-direction:column; min-height:100vh }
.admin-topbar { background:var(--ink2); border-bottom:1px solid var(--bdr); padding:.85rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-shrink:0 }
.admin-topbar h1 { font-size:.98rem; font-weight:700; color:#fff }
.admin-body  { padding:1.8rem 2rem; flex:1; overflow-y:auto }
.adm-page   { display:none }
.adm-page.on{ display:block }
.adm-stats  { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:1rem; margin-bottom:1.8rem }
.adm-stat   { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); padding:1.3rem; position:relative }
.adm-stat .asi  { position:absolute; right:.9rem; top:.9rem; font-size:1.5rem; opacity:.35 }
.adm-stat .asl  { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.3rem }
.adm-stat .asv  { font-family:'Syne',sans-serif; font-size:1.7rem; font-weight:800; color:#fff }
.adm-stat .asb  { font-size:.72rem; color:var(--g1); margin-top:.2rem }
.acard  { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r2); overflow:hidden; margin-bottom:1.5rem }
.acard-head { padding:.9rem 1.4rem; border-bottom:1px solid var(--bdr); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.7rem }
.acard-head h3 { font-size:.9rem; font-weight:700; color:#fff }
.at-wrap { overflow-x:auto }
.at { width:100%; border-collapse:collapse }
.at th { background:rgba(255,255,255,.025); padding:.68rem 1rem; text-align:left; font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); white-space:nowrap }
.at td { padding:.78rem 1rem; font-size:.82rem; color:var(--txt); border-top:1px solid var(--bdr); vertical-align:middle }
.at tr:hover td { background:rgba(255,255,255,.015) }
.badge { display:inline-block; padding:.18rem .6rem; border-radius:50px; font-size:.68rem; font-weight:700 }
.b-new    { background:rgba(0,229,176,.1);  color:var(--g1) }
.b-read   { background:rgba(255,255,255,.06);color:var(--muted) }
.b-replied{ background:rgba(0,180,255,.1);  color:var(--g2) }
.b-archived{background:rgba(255,77,109,.1); color:var(--red) }
.b-live   { background:rgba(0,229,176,.1);  color:var(--g1) }
.b-draft  { background:rgba(245,166,35,.1); color:var(--gold) }
.afg2  { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.afg   { margin-bottom:1rem }
.afg.full { grid-column:1/-1 }
.afg label { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.35rem }
.afg input,.afg select,.afg textarea { width:100%; padding:.62rem .9rem; background:var(--ink); border:1.5px solid var(--bdr); border-radius:var(--r); color:#fff; font-size:.84rem; outline:none; transition:.2s }
.afg input:focus,.afg select:focus,.afg textarea:focus { border-color:var(--g1) }
.afg textarea  { min-height:90px; resize:vertical }
.afg select option { background:var(--ink2) }

/* ─── ALERTS & TOAST ────────────────────────────────────── */
.alert { padding:.82rem 1.2rem; border-radius:var(--r); font-size:.85rem; margin-bottom:1rem }
.alert-ok  { background:rgba(0,229,176,.08); border:1px solid rgba(0,229,176,.22); color:var(--g1) }
.alert-err { background:rgba(255,77,109,.08); border:1px solid rgba(255,77,109,.22); color:var(--red) }
.alert-info{ background:rgba(0,180,255,.08); border:1px solid rgba(0,180,255,.22); color:var(--g2) }
.toast-box { position:fixed; bottom:1.8rem; right:1.8rem; z-index:9999; display:flex; flex-direction:column; gap:.45rem }
.toast { background:var(--card); border:1px solid var(--bdr2); color:#fff; padding:.78rem 1.4rem; border-radius:var(--r); font-size:.84rem; font-weight:500; box-shadow:var(--shadow2); transform:translateX(130%); transition:.4s cubic-bezier(.4,0,.2,1); border-left:3px solid var(--g1); max-width:300px }
.toast.show { transform:translateX(0) }

/* ─── UTILITY ───────────────────────────────────────────── */
.divider { border:none; border-top:1px solid var(--bdr); margin:1.5rem 0 }
.input-search { background:var(--ink2); border:1.5px solid var(--bdr); border-radius:var(--r); padding:.48rem .9rem; color:#fff; font-size:.82rem; outline:none; width:210px; transition:.2s }
.input-search:focus { border-color:var(--g1); width:240px }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease }
.reveal.vis { opacity:1; transform:none }
.chip { background:rgba(0,229,176,.07); border:1px solid rgba(0,229,176,.18); color:var(--g1); padding:.2rem .75rem; border-radius:50px; font-size:.72rem; font-weight:600 }
.row-actions { display:flex; gap:.3rem; flex-wrap:wrap }
.tr-del { font-size:.75rem }

/* ─── PROSE (blog content) ──────────────────────────────── */
.prose h2 { font-size:1.4rem; font-weight:700; color:#fff; margin:2rem 0 .7rem }
.prose h3 { font-size:1.1rem; margin:1.5rem 0 .5rem }
.prose p  { margin-bottom:1.2rem }
.prose ul { margin:0 0 1.2rem 1.5rem; list-style:disc }
.prose li { color:var(--muted); margin-bottom:.4rem }
.prose code { background:var(--ink3); padding:.15rem .45rem; border-radius:5px; font-size:.85em; color:var(--g2); font-family:monospace }

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; text-align:center }
  .hero-visual { display:none }
  .hero-btns,.hero-nums { justify-content:center }
  .contact-layout { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr 1fr }
}
@media(max-width:768px) {
  .nav-links,.nav-cta { display:none }
  .hamburger { display:block }
  .section { padding:3.5rem 1.5rem }
  .svcs-grid,.port-grid,.blog-grid,.testi-grid { grid-template-columns:1fr }
  .stats-inner { grid-template-columns:1fr 1fr; gap:1.2rem }
  .footer-grid { grid-template-columns:1fr; gap:1.8rem }
  .admin-layout { grid-template-columns:1fr }
  .admin-sidebar { display:none }
  .afg2 { grid-template-columns:1fr }
  .fg2  { grid-template-columns:1fr }
}
@media(max-width:480px) {
  .hero-nums { gap:1.5rem }
  .stats-inner { grid-template-columns:1fr }
  .cta-btns { flex-direction:column; align-items:center }
  .process-grid { grid-template-columns:1fr }
}