/*
Theme Name: F1Network Modern
Theme URI: https://f1networksolution.com
Author: F1Network Solution
Author URI: https://f1networksolution.com
Description: Ultra-modern Neo-Futurist dark WordPress theme for F1Network Solution IT Services. Features animated particle network, typed text animation, magnetic buttons, 3D card tilts, floating dashboard mockup, glass morphism cards, and live page previews. Complete homepage, About Us, Services, Pricing, and Contact pages.
Version: 4.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: f1network-modern
Tags: dark, modern, animated, it-services, ecommerce, full-width-template, custom-menu, custom-logo
*/

/* ================================================================
   F1NETWORK MODERN — DESIGN SYSTEM
   Neo-Futurist Dark Glass aesthetic
   Palette: #09090f charcoal · #6366f1 indigo · #06b6d4 cyan
================================================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

/* Design Tokens */
:root {
  --ink:        #09090f;
  --ink-2:      #0f0f1a;
  --ink-3:      #14142a;
  --card:       rgba(255,255,255,.042);
  --glass:      rgba(255,255,255,.035);
  --indigo:     #6366f1;
  --violet:     #8b5cf6;
  --cyan:       #06b6d4;
  --emerald:    #10b981;
  --rose:       #f43f5e;
  --amber:      #f59e0b;
  --sky:        #38bdf8;
  --white:      #ffffff;
  --t1:         #f1f5f9;
  --t2:         #94a3b8;
  --t3:         #475569;
  --g-primary:  linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#06b6d4 100%);
  --g-warm:     linear-gradient(135deg,#f43f5e,#f59e0b);
  --g-cool:     linear-gradient(135deg,#06b6d4,#10b981);
  --glow-i:     0 0 60px rgba(99,102,241,.35);
  --glow-c:     0 0 60px rgba(6,182,212,.3);
  --b1:         rgba(255,255,255,.08);
  --b2:         rgba(255,255,255,.12);
  --b-accent:   rgba(99,102,241,.35);
  --f-display:  'Clash Display','Plus Jakarta Sans',sans-serif;
  --f-body:     'Plus Jakarta Sans',sans-serif;
  --f-mono:     'Space Grotesk',monospace;
  --max-w:      1280px;
  --hdr-h:      74px;
  --ease:       cubic-bezier(.16,1,.3,1);
  --ease2:      cubic-bezier(.34,1.56,.64,1);
}

body {
  font-family: var(--f-body);
  background: var(--ink);
  color: var(--t1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--indigo); border-radius: 4px; }
::selection { background: rgba(99,102,241,.4); color: #fff; }
a { color: inherit; text-decoration: none; transition: color .15s; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* Layout */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
.section    { padding: 110px 0; }
.section-sm { padding: 70px 0; }

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
#cursor-outer {
  position: fixed; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(99,102,241,.6);
  pointer-events: none; z-index: 99999;
  transition: transform .12s var(--ease), border-color .2s, width .2s, height .2s;
  transform: translate(-50%,-50%); mix-blend-mode: difference;
}
#cursor-dot {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: var(--indigo); pointer-events: none; z-index: 99999;
  transform: translate(-50%,-50%); transition: transform .06s;
}
@media (pointer: coarse) { #cursor-outer, #cursor-dot { display: none; } }

/* ── PRELOADER ─────────────────────────────────────────────── */
#pl {
  position: fixed; inset: 0; background: var(--ink); z-index: 99990;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 24px;
  transition: opacity .8s var(--ease), visibility .8s;
}
#pl.done { opacity: 0; visibility: hidden; pointer-events: none; }
.pl-logo-row { display: flex; align-items: center; gap: 14px; }
.pl-icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--g-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 16px; font-weight: 700; color: #fff;
  animation: pl-pulse 1.5s ease-in-out infinite;
}
@keyframes pl-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,.5); } 50% { box-shadow: 0 0 0 14px rgba(99,102,241,0); } }
.pl-name { font-family: var(--f-display); font-size: 17px; font-weight: 600; color: var(--t1); }
.pl-progress { width: 200px; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.pl-bar { height: 100%; background: var(--g-primary); border-radius: 2px; animation: pl-load 2s var(--ease) forwards; }
@keyframes pl-load { from { width: 0; } to { width: 100%; } }
.pl-pct { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--t3); }

/* ── GRAIN OVERLAY ─────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ── HEADER ────────────────────────────────────────────────── */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--hdr-h); z-index: 900;
  transition: background .4s, box-shadow .4s;
}
#site-header.stuck {
  background: rgba(9,9,15,.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 var(--b1), 0 8px 32px rgba(0,0,0,.5);
}
.hdr-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }

/* Logo */
.site-logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--g-primary); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 13px; font-weight: 700; color: #fff;
  position: relative; overflow: hidden;
  box-shadow: var(--glow-i);
}
.logo-mark::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.2),transparent);
  animation: logo-sheen 3s ease 2s infinite;
}
@keyframes logo-sheen { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
.logo-name     { font-family: var(--f-display); font-size: 14.5px; font-weight: 700; color: #fff; letter-spacing: .01em; line-height: 1.1; }
.logo-dot      { color: var(--indigo); }
.logo-tagline  { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--indigo); }

/* Nav */
.site-nav { display: flex; align-items: center; gap: 2px; }
.nav-item  { position: relative; }
.nav-link  {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 13px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--t2);
  cursor: pointer; transition: color .15s, background .15s;
}
.nav-link:hover, .nav-link.current { color: var(--white); background: rgba(255,255,255,.06); }
.nav-chev { font-size: 9px; opacity: .5; transition: transform .15s; }
.nav-item:hover .nav-chev { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px; background: rgba(15,15,26,.97);
  border: 1px solid var(--b1); border-radius: 16px; padding: 8px;
  opacity: 0; visibility: hidden;
  transition: all .15s var(--ease);
  box-shadow: 0 24px 60px rgba(0,0,0,.7), var(--glow-i);
  backdrop-filter: blur(20px);
}
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dd-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 10px;
  color: var(--t2); font-size: 13.5px; transition: all .15s;
}
.dd-link:hover { background: rgba(99,102,241,.1); color: #fff; }
.dd-ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(99,102,241,.1); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }

/* Header action buttons */
.btn-nav-ghost {
  padding: 9px 20px; background: transparent; color: var(--t1);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--b2); border-radius: 50px; cursor: pointer;
  transition: all .2s;
}
.btn-nav-ghost:hover { border-color: var(--indigo); color: var(--indigo); background: rgba(99,102,241,.08); }

.btn-cta {
  padding: 9px 22px; background: var(--g-primary); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  border: none; border-radius: 50px; cursor: pointer;
  transition: all .2s var(--ease); position: relative; overflow: hidden;
  box-shadow: 0 4px 20px rgba(99,102,241,.35);
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(99,102,241,.5); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; background: none; border: none; cursor: pointer; }
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--t1); border-radius: 2px; transition: all .2s; }

/* Mobile menu */
.mobile-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(9,9,15,.97); z-index: 880;
  flex-direction: column; padding: 100px 40px 40px; gap: 4px;
}
.mobile-menu.open { display: flex; }
.mob-nav-link {
  font-family: var(--f-display); font-size: 28px; font-weight: 700;
  color: rgba(255,255,255,.5); padding: 12px 0;
  border-bottom: 1px solid var(--b1); transition: color .15s;
  letter-spacing: -.01em;
}
.mob-nav-link:hover { color: var(--indigo); }
.mob-close-btn { position: absolute; top: 24px; right: 24px; background: none; border: none; font-size: 26px; color: var(--t2); cursor: pointer; }

/* ── SHARED ATOMS ──────────────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ey-pip  { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); animation: pip-blink 2s ease-in-out infinite; }
@keyframes pip-blink { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(99,102,241,.5); } 50% { opacity:.4; box-shadow:0 0 0 6px rgba(99,102,241,0); } }
.ey-txt  { font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--indigo); }

.section-title { font-family: var(--f-display); font-size: clamp(30px,4vw,52px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--white); }
.section-desc  { font-size: 16.5px; color: var(--t2); line-height: 1.85; max-width: 560px; }
.grad-text { background: var(--g-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Reveal animation */
.reveal     { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.vis { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; } .d5 { transition-delay: .4s;  } .d6 { transition-delay: .48s; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 32px; background: var(--g-primary); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  border: none; border-radius: 50px; cursor: pointer;
  transition: all .25s var(--ease); position: relative; overflow: hidden;
  box-shadow: 0 6px 25px rgba(99,102,241,.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(99,102,241,.6); color: #fff; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 32px; background: transparent; color: var(--t1);
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--b2); border-radius: 50px; cursor: pointer;
  transition: all .25s var(--ease);
}
.btn-ghost:hover { border-color: var(--indigo); color: var(--indigo); background: rgba(99,102,241,.08); }

/* ── HERO SECTION ──────────────────────────────────────────── */
.hero-section {
  min-height: 100vh; display: flex; align-items: center;
  padding-top: var(--hdr-h); position: relative; overflow: hidden;
}
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(99,102,241,.12), transparent 65%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(6,182,212,.07), transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 10%, rgba(139,92,246,.08), transparent 60%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: orb-drift var(--od,10s) ease-in-out var(--odd,0s) infinite; }
.orb-1 { width:600px; height:600px; background: radial-gradient(circle,rgba(99,102,241,.18),transparent 60%); top:-100px; right:-100px; --od:12s; }
.orb-2 { width:400px; height:400px; background: radial-gradient(circle,rgba(6,182,212,.12),transparent 60%); bottom:-80px; left:-80px; --od:15s; --odd:-5s; }
.orb-3 { width:300px; height:300px; background: radial-gradient(circle,rgba(244,63,94,.1),transparent 60%); top:30%; left:30%; --od:20s; --odd:-8s; }
@keyframes orb-drift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(25px,-35px) scale(1.06)} 66%{transform:translate(-20px,18px) scale(.97)} }
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
}
.hero-inner { display: grid; grid-template-columns: 1fr 560px; gap: 60px; align-items: center; padding: 90px 0; position: relative; z-index: 2; }

/* Hero badge */
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25);
  border-radius: 50px; margin-bottom: 26px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--indigo);
  animation: badge-in .8s var(--ease) both;
}
@keyframes badge-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.badge-glow { width:7px; height:7px; border-radius:50%; background:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,.25); animation:pip-blink 1.8s ease-in-out infinite; }

/* Typed headline */
.hero-h1 { font-family: var(--f-display); font-size: clamp(42px,5.5vw,74px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; color: var(--white); margin-bottom: 24px; }
.typed-cursor { display:inline-block; width:3px; height:.85em; background:var(--indigo); margin-left:4px; vertical-align:middle; animation:blink-cur .8s step-end infinite; }
@keyframes blink-cur { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-sub  { font-size: clamp(15px,1.5vw,17.5px); color: var(--t2); line-height: 1.85; max-width: 520px; margin-bottom: 38px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }

/* Cert chips */
.cert-row  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 38px; }
.cert-chip { display:flex; align-items:center; gap:7px; padding:6px 14px; background:rgba(255,255,255,.04); border:1px solid var(--b1); border-radius:50px; font-size:11.5px; color:rgba(255,255,255,.65); transition:all .2s; }
.cert-chip:hover { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.3); color:#fff; }
.chip-ico  { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:8px; flex-shrink:0; }
.aws-c  { background:#ff9900; color:#000; }
.az-c   { background:#0078d4; color:#fff; }
.gcp-c  { background:linear-gradient(135deg,#4285f4,#ea4335,#fbbc04,#34a853); color:#fff; }

/* Hero stats */
.hero-stats { display:flex; gap:36px; padding-top:32px; border-top:1px solid var(--b1); flex-wrap:wrap; }
.hs-val { font-family:var(--f-display); font-size:32px; font-weight:700; color:var(--white); line-height:1; letter-spacing:-.02em; }
.hs-val sup { font-size:16px; color:var(--indigo); }
.hs-lbl { font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--t3); margin-top:4px; }
.hs-sep { width:1px; background:var(--b1); align-self:stretch; }

/* Hero right visual */
.hero-visual { position:relative; width:560px; height:540px; }
.device-frame {
  position:absolute; top:30px; left:20px; right:20px;
  background:var(--ink-2); border:1px solid var(--b2); border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  animation:device-float 6s ease-in-out infinite;
}
@keyframes device-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.device-bar { height:42px; background:rgba(255,255,255,.03); border-bottom:1px solid var(--b1); display:flex; align-items:center; gap:7px; padding:0 16px; }
.d-btn { width:11px; height:11px; border-radius:50%; }
.d-btn-r{background:rgba(244,63,94,.7)} .d-btn-y{background:rgba(245,158,11,.7)} .d-btn-g{background:rgba(16,185,129,.7)}
.d-url { flex:1; margin-left:10px; background:rgba(255,255,255,.04); border-radius:6px; height:22px; display:flex; align-items:center; padding:0 10px; }
.d-url-txt { font-family:var(--f-mono); font-size:10px; color:var(--t3); }
.device-screen { padding:20px; }
.dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.dash-title  { font-family:var(--f-display); font-size:14px; font-weight:700; color:#fff; }
.dash-live   { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--emerald); }
.dash-live-dot { width:5px; height:5px; border-radius:50%; background:var(--emerald); animation:pip-blink 1.5s infinite; }
.dash-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.dm-card { background:rgba(255,255,255,.04); border:1px solid var(--b1); border-radius:10px; padding:12px 10px; }
.dm-val  { font-family:var(--f-display); font-size:20px; font-weight:700; color:#fff; line-height:1; }
.dm-lbl  { font-size:9px; color:var(--t3); margin-top:3px; letter-spacing:.06em; }
.dm-change { font-size:9px; margin-top:5px; font-weight:600; }
.up{color:var(--emerald)} .dn{color:var(--rose)}
.dash-chart { background:rgba(255,255,255,.03); border:1px solid var(--b1); border-radius:10px; padding:12px; margin-bottom:10px; }
.chart-line { height:60px; }
.chart-line svg { width:100%; height:100%; }
.dash-table-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:10px; }
.dash-table-row:last-child { border-bottom:none; }
.dtr-name{color:var(--t2)} .dtr-val{color:#fff;font-weight:600;font-family:var(--f-mono)}
.dtr-status { padding:2px 8px; border-radius:50px; font-size:9px; font-weight:600; }
.s-live{background:rgba(16,185,129,.15);color:var(--emerald)} .s-pend{background:rgba(245,158,11,.15);color:var(--amber)}

/* Floating notif cards */
.notif-card { position:absolute; background:rgba(15,15,26,.95); border:1px solid var(--b2); border-radius:14px; padding:12px 14px; box-shadow:0 8px 30px rgba(0,0,0,.5); backdrop-filter:blur(10px); animation:notif-float var(--nf-d,5s) ease-in-out var(--nf-dl,0s) infinite; white-space:nowrap; }
@keyframes notif-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.nc-1{top:-20px;right:30px;--nf-d:4s;--nf-dl:0s} .nc-2{bottom:80px;left:-30px;--nf-d:5.5s;--nf-dl:-2s} .nc-3{bottom:0;right:10px;--nf-d:6s;--nf-dl:-1s}
.nc-icon{font-size:18px;margin-bottom:5px} .nc-val{font-family:var(--f-display);font-size:18px;font-weight:700;color:#fff;line-height:1;letter-spacing:-.01em} .nc-lbl{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-top:2px}

/* ── MARQUEE ───────────────────────────────────────────────── */
.marquee-section { padding:28px 0; border-top:1px solid var(--b1); border-bottom:1px solid var(--b1); background:rgba(255,255,255,.015); overflow:hidden; }
.marquee-track { display:flex; animation:mq-scroll 28s linear infinite; width:max-content; }
.marquee-item { padding:0 40px; font-family:var(--f-display); font-size:14px; font-weight:600; color:rgba(255,255,255,.15); letter-spacing:.05em; text-transform:uppercase; transition:color .2s; white-space:nowrap; }
.marquee-item:hover { color:rgba(255,255,255,.5); }
@keyframes mq-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SERVICES ──────────────────────────────────────────────── */
.services-section { background:var(--ink-2); }
.sec-head-row { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; gap:40px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,.04); border-radius:24px; overflow:hidden; }
.svc-card { background:var(--ink-2); padding:36px 30px; position:relative; overflow:hidden; transition:background .35s var(--ease); cursor:default; }
.svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--g-primary); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.svc-card::after  { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% -20%,rgba(99,102,241,.08),transparent 55%); opacity:0; transition:opacity .35s; }
.svc-card:hover { background:rgba(99,102,241,.04); }
.svc-card:hover::before { transform:scaleX(1); }
.svc-card:hover::after  { opacity:1; }
.svc-card.featured { background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(6,182,212,.06)); grid-row:span 2; }
.svc-card.featured::before { transform:scaleX(1); }
.svc-num   { font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; color:var(--t3); margin-bottom:20px; }
.svc-icon  { width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; transition:transform .2s var(--ease2); }
.svc-card:hover .svc-icon { transform:scale(1.1) rotate(-5deg); }
.si-indigo{background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.2)} .si-cyan{background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.2)} .si-violet{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2)} .si-rose{background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.2)} .si-emerald{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.2)} .si-amber{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.2)}
.svc-title { font-family:var(--f-display); font-size:19px; font-weight:700; color:var(--white); margin-bottom:10px; letter-spacing:-.01em; line-height:1.2; }
.svc-card.featured .svc-title { font-size:22px; color:var(--white); }
.svc-desc  { font-size:13.5px; color:var(--t2); line-height:1.75; margin-bottom:18px; }
.svc-tags  { display:flex; flex-wrap:wrap; gap:6px; }
.svc-tag   { padding:3px 10px; background:rgba(255,255,255,.05); border:1px solid var(--b1); border-radius:50px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; color:var(--t3); }
.svc-arrow { display:inline-flex; align-items:center; gap:5px; margin-top:18px; font-size:12.5px; font-weight:700; color:var(--indigo); opacity:0; transform:translateY(6px); transition:all .2s; }
.svc-card:hover .svc-arrow, .svc-card.featured .svc-arrow { opacity:1; transform:none; }
.feat-list { margin-top:24px; display:flex; flex-direction:column; gap:9px; }
.fl-item   { display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,.45); }
.fl-check  { color:var(--cyan); font-size:11px; font-weight:700; }

/* ── STATS ─────────────────────────────────────────────────── */
.stats-section { background:linear-gradient(135deg,var(--ink-3),rgba(99,102,241,.06),var(--ink-3)); border-top:1px solid var(--b1); border-bottom:1px solid var(--b1); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-block { padding:56px 36px; text-align:center; border-right:1px solid var(--b1); position:relative; overflow:hidden; transition:background .2s; }
.stat-block:last-child { border-right:none; }
.stat-block:hover { background:rgba(99,102,241,.04); }
.stat-block::before { content:''; position:absolute; top:0; left:50%; width:70%; height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--indigo),transparent); opacity:0; transition:opacity .2s; }
.stat-block:hover::before { opacity:1; }
.stat-num { font-family:var(--f-display); font-size:clamp(44px,5vw,64px); font-weight:700; color:var(--white); line-height:1; letter-spacing:-.03em; margin-bottom:8px; }
.stat-num sup { font-size:clamp(20px,2.5vw,28px); color:var(--indigo); vertical-align:super; }
.stat-num sub { font-size:clamp(18px,2vw,24px); color:var(--indigo); }
.stat-lbl { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--t3); }

/* ── ECOMMERCE ─────────────────────────────────────────────── */
.ecom-section { background:var(--ink); }
.platform-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.plat-card { background:var(--card); border:1px solid var(--b1); border-radius:22px; overflow:hidden; transition:all .35s var(--ease); }
.plat-card:hover { border-color:var(--b-accent); transform:translateY(-6px); box-shadow:0 20px 55px rgba(0,0,0,.4), var(--glow-i); }
.plat-head { padding:28px 26px 20px; position:relative; overflow:hidden; }
.plat-glow { position:absolute; top:-50px; right:-50px; width:130px; height:130px; border-radius:50%; filter:blur(35px); opacity:.45; pointer-events:none; }
.plat-logo-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.plat-ico  { width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; font-family:var(--f-display); flex-shrink:0; }
.plat-name { font-family:var(--f-display); font-size:18px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.plat-type { font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; color:var(--t3); text-transform:uppercase; }
.plat-body { padding:0 26px 26px; }
.plat-feats{ display:flex; flex-direction:column; gap:0; margin-bottom:18px; }
.pf        { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13.5px; color:var(--t2); border-bottom:1px solid rgba(255,255,255,.04); }
.pf:last-child { border-bottom:none; }
.pf-ok     { font-weight:700; font-size:12px; flex-shrink:0; }
.btn-plat  { width:100%; padding:11px; background:rgba(255,255,255,.05); border:1px solid var(--b2); border-radius:10px; color:var(--t1); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transition:all .2s; cursor:pointer; }
.btn-plat:hover { background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.3); color:var(--indigo); }
.am .plat-ico{background:rgba(255,153,0,.15);color:#ff9900} .am .pf-ok{color:#ff9900} .am:hover{border-color:rgba(255,153,0,.25);box-shadow:0 20px 55px rgba(0,0,0,.4),0 0 40px rgba(255,153,0,.12)}
.wm .plat-ico{background:rgba(0,113,206,.15);color:#0071ce} .wm .pf-ok{color:#0071ce} .wm:hover{border-color:rgba(0,113,206,.25);box-shadow:0 20px 55px rgba(0,0,0,.4),0 0 40px rgba(0,113,206,.12)}
.sh .plat-ico{background:rgba(150,191,72,.15);color:#96bf48} .sh .pf-ok{color:#96bf48} .sh:hover{border-color:rgba(150,191,72,.25);box-shadow:0 20px 55px rgba(0,0,0,.4),0 0 40px rgba(150,191,72,.12)}

/* ── PROCESS ───────────────────────────────────────────────── */
.process-section { background:var(--ink-2); }
.process-flow { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:60px; position:relative; }
.process-flow::before { content:''; position:absolute; top:30px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--indigo),var(--indigo),transparent); opacity:.25; }
.pf-step  { text-align:center; padding:0 16px; position:relative; z-index:1; }
.pf-num   { width:60px; height:60px; border-radius:50%; background:var(--ink); border:1.5px solid var(--b2); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-size:18px; font-weight:700; color:var(--white); margin:0 auto 20px; transition:all .3s var(--ease2); cursor:default; }
.pf-step:hover .pf-num { color:var(--indigo); border-color:var(--indigo); box-shadow:0 0 30px rgba(99,102,241,.4); background:rgba(99,102,241,.08); }
.pf-title { font-family:var(--f-display); font-size:14px; font-weight:700; color:var(--white); margin-bottom:7px; }
.pf-desc  { font-size:12.5px; color:var(--t3); line-height:1.65; }

/* ── TECH STACK ────────────────────────────────────────────── */
.tech-section { background:var(--ink); border-top:1px solid var(--b1); }
.tech-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.tech-item { background:var(--card); border:1px solid var(--b1); border-radius:14px; padding:20px 10px; text-align:center; transition:all .25s var(--ease2); cursor:default; }
.tech-item:hover { background:rgba(99,102,241,.07); border-color:rgba(99,102,241,.25); transform:translateY(-4px) scale(1.03); box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 20px rgba(99,102,241,.12); }
.ti-icon { font-size:26px; margin-bottom:7px; display:block; }
.ti-name { font-family:var(--f-mono); font-size:9.5px; color:var(--t3); letter-spacing:.06em; }

/* ── TESTIMONIALS ──────────────────────────────────────────── */
.testi-section { background:var(--ink-3); }
.testi-grid    { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.testi-card    { background:var(--card); border:1px solid var(--b1); border-radius:20px; padding:30px; transition:all .35s var(--ease); position:relative; overflow:hidden; }
.testi-card::before { content:''; position:absolute; top:0; left:0; width:40%; height:40%; background:radial-gradient(circle,rgba(99,102,241,.06),transparent 60%); pointer-events:none; }
.testi-card:hover { border-color:var(--b-accent); transform:translateY(-4px); box-shadow:0 18px 45px rgba(0,0,0,.4),var(--glow-i); }
.testi-card.tc-feat { background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(6,182,212,.05)); grid-row:span 2; }
.tc-stars span { color:#f59e0b; font-size:13px; }
.tc-q  { font-size:36px; color:var(--indigo); opacity:.35; font-family:Georgia,serif; line-height:1; margin-bottom:6px; }
.tc-text { font-size:15px; color:var(--t2); line-height:1.8; margin-bottom:22px; font-style:italic; }
.tc-feat .tc-text { font-size:17.5px; color:rgba(255,255,255,.75); }
.tc-author { display:flex; align-items:center; gap:11px; }
.tc-av { width:42px; height:42px; border-radius:50%; background:var(--g-primary); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
.tc-name { font-size:14px; font-weight:700; color:#fff; }
.tc-feat .tc-name { color:var(--indigo); }
.tc-role { font-size:12px; color:var(--t3); }

/* ── CTA SECTION ───────────────────────────────────────────── */
.cta-section { background:var(--ink); padding:110px 0; text-align:center; position:relative; overflow:hidden; }
.cta-bg { position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(99,102,241,.1),transparent 65%); pointer-events:none; }
.cta-grid-bg { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(99,102,241,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.04) 1px,transparent 1px); background-size:72px 72px; }
.cta-title { font-family:var(--f-display); font-size:clamp(34px,5vw,62px); font-weight:700; letter-spacing:-.03em; color:var(--white); line-height:1.1; margin-bottom:16px; position:relative; z-index:1; }
.cta-desc  { font-size:17px; color:var(--t2); max-width:500px; margin:0 auto 36px; line-height:1.8; position:relative; z-index:1; }
.cta-btns  { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }

/* ── CONTACT ───────────────────────────────────────────────── */
.contact-section { background:var(--ink-2); }
.contact-grid { display:grid; grid-template-columns:5fr 4fr; gap:80px; align-items:start; }
.cf-wrap { background:var(--card); border:1px solid var(--b1); border-radius:24px; padding:44px; }
.cf-title { font-family:var(--f-display); font-size:22px; font-weight:700; color:#fff; margin-bottom:5px; letter-spacing:-.015em; }
.cf-sub   { font-size:13.5px; color:var(--t2); margin-bottom:28px; line-height:1.6; }
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg  { margin-bottom:14px; }
.fl  { display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--t3); margin-bottom:7px; }
.fi  { width:100%; padding:13px 16px; background:rgba(255,255,255,.04); border:1px solid var(--b1); border-radius:11px; color:var(--t1); font-family:var(--f-body); font-size:14px; outline:none; transition:border-color .15s, background .15s, box-shadow .15s; }
.fi:focus { border-color:var(--indigo); background:rgba(99,102,241,.05); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.fi::placeholder { color:rgba(255,255,255,.18); }
textarea.fi { height:106px; resize:vertical; }
select.fi   { cursor:pointer; }
select.fi option { background:var(--ink-2); }
.btn-send { width:100%; padding:14px; background:var(--g-primary); color:#fff; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:none; border-radius:11px; cursor:pointer; transition:all .2s var(--ease); box-shadow:0 6px 22px rgba(99,102,241,.35); }
.btn-send:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(99,102,241,.5); }
.form-ok { display:none; margin-top:12px; padding:11px 15px; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); border-radius:9px; font-size:13.5px; color:var(--emerald); }
.ci-head  { font-family:var(--f-display); font-size:clamp(20px,2.5vw,28px); font-weight:700; color:#fff; margin-bottom:7px; letter-spacing:-.02em; }
.ci-sub   { font-size:14px; color:var(--t2); margin-bottom:32px; line-height:1.75; }
.ci-list  { display:flex; flex-direction:column; gap:18px; margin-bottom:30px; }
.ci-item  { display:flex; align-items:flex-start; gap:14px; }
.ci-ico   { width:40px; height:40px; flex-shrink:0; background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; }
.ci-lbl   { font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--indigo); margin-bottom:3px; }
.ci-val   { font-size:14px; color:var(--t1); }
.ci-val a { color:var(--t1); }
.ci-val a:hover { color:var(--indigo); }
.ci-socs  { display:flex; gap:8px; }
.ci-soc   { width:38px; height:38px; border-radius:10px; background:var(--card); border:1px solid var(--b1); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; transition:all .2s; }
.ci-soc:hover { background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.3); transform:translateY(-2px); }

/* ── FOOTER ────────────────────────────────────────────────── */
#site-footer { background:var(--ink); border-top:1px solid var(--b1); }
.ft-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; padding:66px 0 50px; border-bottom:1px solid var(--b1); }
.ft-desc { font-size:13.5px; color:var(--t3); line-height:1.8; max-width:270px; margin-bottom:22px; }
.ft-socs { display:flex; gap:8px; }
.fsoc { width:34px; height:34px; border-radius:9px; border:1px solid var(--b1); display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; transition:all .15s; }
.fsoc:hover { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.3); transform:translateY(-2px); }
.ft-col-title { font-family:var(--f-mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--indigo); margin-bottom:16px; }
.ft-links { display:flex; flex-direction:column; gap:9px; }
.ft-links a { font-size:13.5px; color:var(--t3); transition:color .15s; }
.ft-links a:hover { color:var(--t1); }
.ft-bottom { display:flex; align-items:center; justify-content:space-between; padding:20px 0; font-size:12.5px; color:var(--t3); }
.ft-legal  { display:flex; gap:22px; }
.ft-legal a { color:var(--t3); transition:color .15s; }
.ft-legal a:hover { color:var(--t1); }

/* ── SCROLL TOP ────────────────────────────────────────────── */
#scroll-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; background:var(--g-primary); border-radius:12px; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:100; opacity:0; transform:translateY(14px); transition:all .2s var(--ease); box-shadow:0 6px 20px rgba(99,102,241,.4); }
#scroll-top.show { opacity:1; transform:translateY(0); }
#scroll-top:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(99,102,241,.6); }
#scroll-top svg { color:#fff; }

/* ── PAGE / SINGLE POST CONTENT ────────────────────────────── */
.page-content { color:var(--t2); line-height:1.85; font-size:16px; }
.page-content h1,.page-content h2,.page-content h3 { font-family:var(--f-display); color:#fff; margin:1.8em 0 .5em; letter-spacing:-.02em; }
.page-content h2 { font-size:clamp(22px,3vw,32px); }
.page-content h3 { font-size:clamp(18px,2.5vw,24px); }
.page-content p  { margin-bottom:1.2em; }
.page-content ul,.page-content ol { padding-left:22px; margin-bottom:1.2em; }
.page-content ul { list-style:disc; } .page-content ol { list-style:decimal; }
.page-content li { margin-bottom:5px; }
.page-content a  { color:var(--indigo); } .page-content a:hover { color:#fff; }
.page-content blockquote { border-left:2px solid var(--indigo); padding:14px 20px; margin:22px 0; background:rgba(99,102,241,.05); border-radius:0 8px 8px 0; font-style:italic; }
.page-content code { background:rgba(99,102,241,.1); border:1px solid var(--b1); padding:2px 7px; border-radius:4px; font-family:var(--f-mono); font-size:13px; color:var(--indigo); }
.page-content img { border-radius:12px; margin:20px auto; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr} .hero-visual{display:none}
  .services-grid{grid-template-columns:1fr 1fr} .svc-card.featured{grid-row:auto}
  .tech-grid{grid-template-columns:repeat(4,1fr)}
  .stats-grid{grid-template-columns:1fr 1fr}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .site-nav,.btn-nav-ghost{display:none} .hamburger{display:flex}
  .platform-cards,.testi-grid,.contact-grid{grid-template-columns:1fr}
  .testi-card.tc-feat{grid-row:auto}
  .process-flow{grid-template-columns:1fr 1fr} .process-flow::before{display:none}
  .sec-head-row{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  .container{padding:0 20px}
  .services-grid,.stats-grid{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:repeat(3,1fr)}
  .ft-top{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;gap:12px;text-align:center}
  .form-2col{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap} .hs-sep{display:none}
}