/* ================================================================
   HURAYNOVA — DESIGN SYSTEM
   Pure static. No dependencies. Startup-grade SaaS aesthetics.
   ================================================================ */

/* ---- TOKENS ---- */
:root {
  --c-bg:        #ffffff;
  --c-surface:   #f8fafc;
  --c-border:    #e2e8f0;
  --c-text:      #0f172a;
  --c-text-2:    #475569;
  --c-text-3:    #94a3b8;
  --c-blue:      #2F6BFF;
  --c-blue-dark: #1B3C88;
  --c-blue-deep: #0A1F44;
  --c-blue-glow: rgba(47,107,255,.35);
  --c-blue-soft: rgba(47,107,255,.08);
  --c-purple:    #7C3AED;
  --c-teal:      #0EA5E9;
  --c-orange:    #F97316;
  --c-green:     #22c55e;
  --f-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-display:   'Space Grotesk', 'Inter', sans-serif;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;
  --ease:   cubic-bezier(.4,0,.2,1);
  --t:      .28s;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--f-body); background: var(--c-bg); color: var(--c-text); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--f-body); cursor: pointer; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--c-surface); }
::-webkit-scrollbar-thumb { background: var(--c-blue); border-radius: 3px; }

/* ---- UTILS ---- */
.container { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.section    { padding: 96px 24px; }
.mt    { margin-top: 1.5rem; }
.mt-sm { margin-top: .8rem; }
.grad  {
  background: linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #a78bfa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.body-text  { font-size: .94rem; color: var(--c-text-2); line-height: 1.75; margin-bottom: .9rem; }
.tag {
  display: inline-block; padding: 4px 14px;
  background: var(--c-blue-soft); border: 1px solid rgba(47,107,255,.2);
  border-radius: var(--r-full); color: var(--c-blue);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .9px;
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: var(--r-full);
  font-size: .88rem; font-weight: 600; border: none;
  cursor: pointer; white-space: nowrap; transition: all var(--t) var(--ease);
}
.btn-primary {
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-dark));
  color: #fff; box-shadow: 0 4px 20px var(--c-blue-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(47,107,255,.5); filter: brightness(1.08); }
.btn-glass {
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); transform: translateY(-2px); }
.btn-outline {
  background: transparent; color: var(--c-text-2);
  border: 1px solid var(--c-border);
}
.btn-outline:hover { border-color: rgba(47,107,255,.4); color: var(--c-blue); background: var(--c-blue-soft); }
.btn-lg   { padding: 14px 32px; font-size: .96rem; }
.btn-full { width: 100%; justify-content: center; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

/* ================================================================
   SPLASH
   ================================================================ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(150deg,#060f28,#0A1F44,#0a1729);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.splash-logo-wrap { display: flex; align-items: center; gap: 14px; animation: splash-pulse 1.6s ease-in-out infinite; }
.splash-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: rgba(47,107,255,.12); border: 1px solid rgba(96,165,250,.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(47,107,255,.3);
}
.splash-name  { font-family: var(--f-display); font-size: 2rem; font-weight: 700; color: #fff; letter-spacing: -.5px; }
.splash-tagline { font-size: .82rem; color: rgba(255,255,255,.4); letter-spacing: .5px; }
.splash-loader-track { width: 180px; height: 2px; background: rgba(255,255,255,.08); border-radius: 1px; overflow: hidden; }
.splash-loader-bar   { height: 100%; background: linear-gradient(90deg,#2F6BFF,#60a5fa); animation: splash-load 2s ease forwards; }
@keyframes splash-load    { from{width:0} to{width:100%} }
@keyframes splash-pulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }

/* ================================================================
   NAVBAR
   ================================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 24px; transition: background var(--t), box-shadow var(--t), backdrop-filter var(--t);
}
.nav.scrolled {
  background: rgba(255,255,255,.9); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 rgba(0,0,0,.07);
}
.nav-inner {
  max-width: 1220px; margin: 0 auto; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.1rem;
  color: #fff; transition: color var(--t);
}
.nav.scrolled .nav-brand { color: var(--c-text); }
.nav-brand-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(47,107,255,.1); border: 1px solid rgba(47,107,255,.25);
  display: flex; align-items: center; justify-content: center;
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  padding: 8px 13px; border-radius: var(--r-full);
  font-size: .86rem; font-weight: 500; color: rgba(255,255,255,.78);
  transition: color var(--t), background var(--t);
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.09); }
.nav.scrolled .nav-link { color: var(--c-text-2); }
.nav.scrolled .nav-link:hover { color: var(--c-text); background: var(--c-blue-soft); }
.nav-cta { font-size: .85rem; padding: 9px 20px; }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: var(--t); }
.nav.scrolled .hamburger span { background: var(--c-text); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative; min-height: 100vh;
  background: linear-gradient(150deg,#060f28 0%,#0A1F44 45%,#0e2a62 75%,#091534 100%);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 3rem;
  padding: 96px 6% 72px; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(72px); animation: orb-drift 9s ease-in-out infinite;
}
.orb-1 { width:520px;height:520px; background:radial-gradient(#2F6BFF,transparent); top:-120px;left:-120px; opacity:.3; }
.orb-2 { width:400px;height:400px; background:radial-gradient(#7C3AED,transparent); bottom:-60px;right:30%; opacity:.25; animation-delay:-3.5s; }
.orb-3 { width:280px;height:280px; background:radial-gradient(#0EA5E9,transparent); top:40%;right:-40px; opacity:.22; animation-delay:-6s; }
@keyframes orb-drift {
  0%,100%{transform:translate(0,0)scale(1)}
  33%{transform:translate(18px,-18px)scale(1.04)}
  66%{transform:translate(-10px,12px)scale(.97)}
}
#canvas { position:absolute;inset:0;width:100%;height:100%;opacity:.38; }

.hero-content { position:relative;z-index:2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 10px; margin-bottom: 1.5rem;
  background: rgba(47,107,255,.12); border: 1px solid rgba(47,107,255,.28);
  border-radius: var(--r-full); color: rgba(255,255,255,.88);
  font-size: .78rem; font-weight: 500; animation: fade-down .6s ease .1s both;
}
.hero-heading {
  font-family: var(--f-display); font-size: clamp(2.6rem,4.8vw,4.2rem);
  font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -1.5px;
  margin-bottom: 1.25rem; animation: fade-down .6s ease .22s both;
}
.hero-sub {
  font-size: 1.06rem; color: rgba(255,255,255,.68); line-height: 1.72;
  max-width: 500px; margin-bottom: 2.25rem; animation: fade-down .6s ease .36s both;
}
.hero-cta-row { display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.75rem; animation: fade-down .6s ease .48s both; }
.hero-stats { display:flex;align-items:center;gap:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.09); animation: fade-down .6s ease .6s both; }
.stat { display:flex;flex-direction:column;gap:2px; }
.stat-v { font-family:var(--f-display);font-size:1.4rem;font-weight:700;color:#fff; }
.stat-l { font-size:.72rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.5px; }
.stat-div { width:1px;height:32px;background:rgba(255,255,255,.1); }

.live-dot {
  width:7px;height:7px;border-radius:50%;
  background:var(--c-blue);box-shadow:0 0 8px var(--c-blue);
  animation: pulse-dot 2s ease-in-out infinite; flex-shrink:0;
}
.live-dot--green { background:var(--c-green);box-shadow:0 0 8px var(--c-green); }
@keyframes pulse-dot { 0%,100%{opacity:1;box-shadow:0 0 8px currentColor}50%{opacity:.55;box-shadow:0 0 16px currentColor} }

/* ---- Hero Mockup ---- */
.hero-visual { position:relative;z-index:2;display:flex;justify-content:center;align-items:center; animation: fade-left .7s ease .3s both; }
.hero-mockup {
  background: rgba(255,255,255,.04); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-xl);
  width: 340px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
}
.mockup-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.mockup-dots { display:flex;gap:5px; }
.mockup-dots span { width:9px;height:9px;border-radius:50%; }
.mockup-dots span:nth-child(1){background:#f87171}
.mockup-dots span:nth-child(2){background:#fbbf24}
.mockup-dots span:nth-child(3){background:#34d399}
.mockup-title { font-size:.72rem;color:rgba(255,255,255,.4);font-weight:500; }
.mockup-body { padding:16px;display:flex;flex-direction:column;gap:10px; }
.mockup-row { display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(255,255,255,.04);border-radius:var(--r-sm); }
.m-label { font-size:.75rem;color:rgba(255,255,255,.5); }
.m-val { font-size:.8rem;font-weight:700;color:rgba(255,255,255,.9); }
.m-val--blue   { color:#60a5fa; }
.m-val--green  { color:#34d399; }
.m-val--purple { color:#a78bfa; }
.mockup-bar-row { display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.04);border-radius:var(--r-sm); }
.m-bar-label  { font-size:.72rem;color:rgba(255,255,255,.45);white-space:nowrap; }
.m-bar        { flex:1;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden; }
.m-bar-fill   { height:100%;background:linear-gradient(90deg,var(--c-blue),#60a5fa);border-radius:3px; }
.m-bar-pct    { font-size:.7rem;color:#34d399;font-weight:600;white-space:nowrap; }
.mockup-incident {
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:rgba(47,107,255,.1);border:1px solid rgba(47,107,255,.2);border-radius:var(--r-sm);
}
.incident-icon { font-size:1.2rem;flex-shrink:0; }
.incident-text { flex:1;display:flex;flex-direction:column;gap:1px; }
.incident-text strong { font-size:.74rem;color:rgba(255,255,255,.9);font-weight:600; }
.incident-text span   { font-size:.66rem;color:rgba(255,255,255,.4); }
.incident-badge { font-size:.65rem;font-weight:600;color:var(--c-blue);background:rgba(47,107,255,.15);padding:2px 8px;border-radius:var(--r-full);white-space:nowrap; }

/* Floating cards */
.float-card {
  position:absolute; display:flex;align-items:center;gap:10px;
  padding:10px 14px; background:rgba(10,31,68,.85); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md);
  color:#fff; font-size:.76rem;
}
.float-card span { font-size:1.1rem;flex-shrink:0; }
.float-card div  { display:flex;flex-direction:column;gap:1px; }
.float-card strong { font-size:.78rem;font-weight:600; }
.float-card small  { color:rgba(255,255,255,.45);font-size:.66rem; }
.fc-1 { top:4%; left:-22%; animation:card-float 5s ease-in-out infinite; }
.fc-2 { bottom:18%; left:-18%; animation:card-float 5s ease-in-out infinite 2s; }
.fc-3 { top:48%; right:-20%; animation:card-float 5s ease-in-out infinite 3.5s; }
@keyframes card-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)} }

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.section-head { text-align:center;margin-bottom:3.5rem; }
.section-head .tag { margin-bottom:.9rem; }
.section-head h2 { font-family:var(--f-display);font-size:clamp(1.85rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-1px;line-height:1.2;margin-bottom:.9rem; }
.section-head p  { font-size:.96rem;color:var(--c-text-2);max-width:520px;margin:0 auto;line-height:1.7; }

/* ================================================================
   PRODUCTS
   ================================================================ */
.products-section { background:var(--c-surface); }
.products-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem; }
.card {
  background:#fff; border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:1.75rem;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  position:relative;overflow:hidden;
}
.card:hover { transform:translateY(-5px); box-shadow:0 20px 60px rgba(0,0,0,.09); border-color:rgba(47,107,255,.25); }
.card--featured { background:linear-gradient(135deg,#fafbff,#f0f5ff); border-color:rgba(47,107,255,.3); }
.card-accent {
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-purple));
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.card-head { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.1rem; }
.prod-icon { width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center; }
.prod-icon--blue   { background:rgba(47,107,255,.1); color:var(--c-blue); }
.prod-icon--purple { background:rgba(124,58,237,.1);  color:var(--c-purple); }
.prod-icon--teal   { background:rgba(14,165,233,.1);  color:var(--c-teal); }
.prod-icon--orange { background:rgba(249,115,22,.1);  color:var(--c-orange); }
.badge {
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 11px;border-radius:var(--r-full);font-size:.72rem;font-weight:700;
}
.badge--live { background:rgba(34,197,94,.1);color:#15803d;border:1px solid rgba(34,197,94,.25); }
.badge--soon { background:rgba(100,116,139,.07);color:var(--c-text-3);border:1px solid var(--c-border); }
.badge--idea { background:rgba(234,179,8,.1);color:#a16207;border:1px solid rgba(234,179,8,.25); }
.badge--analysis { background:rgba(47,107,255,.1);color:var(--c-blue);border:1px solid rgba(47,107,255,.25); }
.card h3   { font-family:var(--f-display);font-size:1.18rem;font-weight:700;letter-spacing:-.3px;margin-bottom:.65rem; }
.card > p  { font-size:.87rem;color:var(--c-text-2);line-height:1.65;margin-bottom:1.1rem; }
.feat-list { display:flex;flex-direction:column;gap:5px;margin-bottom:1.25rem; }
.feat-list li { display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--c-text-2); }
.chk      { font-size:.8rem;font-weight:700;color:var(--c-blue); }
.chk.muted { color:var(--c-text-3); }
.stack-row { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.25rem; }
.stack-tag { padding:3px 9px;background:var(--c-blue-soft);border:1px solid rgba(47,107,255,.15);border-radius:var(--r-full);font-size:.7rem;font-weight:600;color:var(--c-blue); }

/* ================================================================
   FEATURES
   ================================================================ */
.features-section { position:relative;background:linear-gradient(180deg,#fff,var(--c-surface));overflow:hidden; }
.features-bg { position:absolute;inset:0;pointer-events:none; }
.orb-f1 { width:600px;height:600px;background:radial-gradient(var(--c-blue),transparent);top:-200px;left:-200px;opacity:.06; }
.orb-f2 { width:400px;height:400px;background:radial-gradient(var(--c-purple),transparent);bottom:-100px;right:-100px;opacity:.06; }
.features-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; }
.feat-card {
  background:#fff; border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:1.75rem;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.feat-card:hover { transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.07);border-color:rgba(47,107,255,.28); }
.feat-card:hover .feat-icon { background:rgba(47,107,255,.14);box-shadow:0 0 20px rgba(47,107,255,.2); }
.feat-icon {
  width:46px;height:46px;background:var(--c-blue-soft);border:1px solid rgba(47,107,255,.14);
  border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  color:var(--c-blue);margin-bottom:1.1rem;transition:all var(--t);
}
.feat-card h3 { font-family:var(--f-display);font-size:.96rem;font-weight:700;letter-spacing:-.2px;margin-bottom:.5rem; }
.feat-card p  { font-size:.84rem;color:var(--c-text-2);line-height:1.65; }

/* ================================================================
   ABOUT
   ================================================================ */
.about-section { background:var(--c-surface); }
.about-grid { display:grid;grid-template-columns:.85fr 1.15fr;gap:4.5rem;align-items:center; }

/* visual orb */
.about-orb-wrap { position:relative;width:300px;height:340px;display:flex;align-items:center;justify-content:center; }
.a-ring { position:absolute;border-radius:50%;border:1px solid rgba(47,107,255,.18); }
.a-ring-1 { width:200px;height:200px;animation:ring-pulse 3.5s ease-in-out infinite; }
.a-ring-2 { width:250px;height:250px;animation:ring-pulse 3.5s ease-in-out infinite .6s; border-color:rgba(47,107,255,.07); }
@keyframes ring-pulse { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.5} }
.a-avatar {
  width:120px;height:120px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-blue-dark),var(--c-blue));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 60px rgba(47,107,255,.35);position:relative;z-index:1;
}
.a-orbit { position:absolute;width:220px;height:220px;animation:spin 14s linear infinite; }
.a-orbit-dot { position:absolute;top:0;left:50%;width:10px;height:10px;background:var(--c-blue);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px var(--c-blue); }
@keyframes spin { from{transform:rotate(0)}to{transform:rotate(360deg)} }
.a-stat-card { position:absolute;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:10px 16px;display:flex;flex-direction:column;gap:1px;box-shadow:0 4px 20px rgba(0,0,0,.07); }
.a-stat-1 { top:8px;right:0; }
.a-stat-2 { bottom:24px;left:0; }
.a-stat-n { font-family:var(--f-display);font-size:1.3rem;font-weight:800;color:var(--c-blue); }
.a-stat-l { font-size:.68rem;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.5px; }

.about-content .tag { margin-bottom:.8rem; }
.about-content h2 { font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-1px;line-height:1.2;margin-bottom:.8rem; }
.tech-stack-block { margin:1.25rem 0; }
.tech-stack-block h4 { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--c-text-3);margin-bottom:.65rem; }
.pills { display:flex;flex-wrap:wrap;gap:7px; }
.pill { padding:5px 13px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-full);font-size:.78rem;font-weight:500;color:var(--c-text-2);transition:all var(--t); }
.pill:hover { border-color:rgba(47,107,255,.4);color:var(--c-blue);background:var(--c-blue-soft); }
.social-links { display:flex;gap:.75rem;flex-wrap:wrap; }
.social-link {
  display:flex;align-items:center;gap:7px;padding:9px 18px;
  background:#fff;border:1px solid var(--c-border);border-radius:var(--r-full);
  font-size:.84rem;font-weight:500;color:var(--c-text-2);
  transition:all var(--t);
}
.social-link:hover { border-color:rgba(47,107,255,.4);color:var(--c-blue);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06); }

/* ================================================================
   CONTACT
   ================================================================ */
.contact-section {
  position:relative;padding:96px 24px;
  background:linear-gradient(150deg,#060f28,#0A1F44 60%,#091534);overflow:hidden;
}
.contact-bg { position:absolute;inset:0;pointer-events:none; }
.orb-c1 { width:600px;height:600px;background:radial-gradient(rgba(47,107,255,.2),transparent);bottom:-200px;right:-150px;border-radius:50%;filter:blur(60px); }
.contact-grid { max-width:1220px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;position:relative;z-index:2; }
.contact-info .tag { margin-bottom:.8rem; }
.contact-info h2 { font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-1px;line-height:1.2;color:#fff;margin-bottom:.9rem; }
.contact-info .body-text { color:rgba(255,255,255,.6); }
.contact-details { display:flex;flex-direction:column;gap:1.1rem;margin-top:.5rem; }
.contact-item { display:flex;align-items:center;gap:12px; }
.ci-icon { width:38px;height:38px;background:rgba(47,107,255,.15);border:1px solid rgba(47,107,255,.22);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);flex-shrink:0; }
.ci-lbl { display:block;font-size:.7rem;color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.5px; }
.ci-val { font-size:.87rem;font-weight:500;color:rgba(255,255,255,.82);transition:color var(--t); }
a.ci-val:hover { color:#fff; }

/* Form */
.contact-form-wrap {
  background:rgba(255,255,255,.04);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r-2xl);padding:2.25rem;
}
#contact-form { display:flex;flex-direction:column;gap:1.1rem; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.form-group { display:flex;flex-direction:column;gap:5px; }
.form-group label { font-size:.78rem;font-weight:600;color:rgba(255,255,255,.7); }
.form-group input,
.form-group textarea {
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);padding:11px 15px;color:#fff;
  font-family:var(--f-body);font-size:.88rem;outline:none;width:100%;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(255,255,255,.28); }
.form-group input:focus,
.form-group textarea:focus {
  border-color:rgba(47,107,255,.55);background:rgba(47,107,255,.07);
  box-shadow:0 0 0 3px rgba(47,107,255,.1);
}
.form-group textarea { resize:vertical;min-height:120px; }
.cf-status {
  font-size:.84rem;font-weight:500;text-align:center;
  padding:8px;border-radius:var(--r-md);min-height:0;transition:all var(--t);
}
.cf-status.ok  { color:#4ade80;background:rgba(74,222,128,.08); }
.cf-status.err { color:#f87171;background:rgba(248,113,113,.08); }

/* ================================================================
   FOOTER
   ================================================================ */
.footer { background:#0a0f1e;padding:3.5rem 24px 1.75rem; }
.footer-grid { max-width:1220px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:1.75rem; }
.footer-brand-link { color:#fff; }
.footer-tagline { font-size:.82rem;color:rgba(255,255,255,.3);margin:.65rem 0 1.1rem; }
.footer-social { display:flex;gap:.6rem; }
.f-social-icon { width:34px;height:34px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);transition:all var(--t); }
.f-social-icon:hover { background:rgba(47,107,255,.18);border-color:rgba(47,107,255,.35);color:#fff;transform:translateY(-2px); }
.footer-col h4 { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:rgba(255,255,255,.55);margin-bottom:.9rem; }
.footer-col ul { display:flex;flex-direction:column;gap:.5rem; }
.footer-col a  { font-size:.84rem;color:rgba(255,255,255,.32);transition:color var(--t); }
.footer-col a:hover { color:rgba(255,255,255,.75); }
.footer-bottom { max-width:1220px;margin:0 auto;display:flex;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.22); }

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fade-down { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none} }
@keyframes fade-left { from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none} }

.reveal { opacity:0;transform:translateY(28px);transition:opacity .55s var(--ease),transform .55s var(--ease); }
.reveal.in { opacity:1;transform:none; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1100px){
  .hero { grid-template-columns:1fr; padding:100px 5% 64px; }
  .hero-visual { display:none; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .about-grid { grid-template-columns:1fr; }
  .about-visual { display:none; }
}
@media(max-width:860px){
  .products-grid { grid-template-columns:1fr; }
  .contact-grid  { grid-template-columns:1fr;gap:2.5rem; }
  .footer-grid   { grid-template-columns:1fr 1fr;gap:1.75rem; }
  .form-row      { grid-template-columns:1fr; }
}
@media(max-width:640px){
  .section       { padding:64px 16px; }
  .contact-section { padding:64px 16px; }
  .hero-heading  { font-size:2.2rem; }
  .hero-stats    { flex-wrap:wrap;gap:.9rem; }
  .hero-cta-row  { flex-direction:column;align-items:flex-start; }
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:flex; }
  .nav-links.open {
    display:flex;flex-direction:column;
    position:fixed;top:68px;left:0;right:0;
    background:rgba(6,15,40,.97);backdrop-filter:blur(20px);
    padding:1.25rem;gap:.4rem;z-index:999;
  }
  .nav-links.open .nav-link { color:rgba(255,255,255,.82);padding:12px;border-radius:var(--r-md);font-size:.96rem; }
  .features-grid { grid-template-columns:1fr; }
  .footer-grid   { grid-template-columns:1fr;gap:1.25rem; }
  .footer-bottom { flex-direction:column;gap:.4rem;text-align:center; }
}