/* =====================================================
   TRUSTVYUH — Global Stylesheet
   Full light + dark mode · Premium Agency Design
   ===================================================== */
/* Fonts loaded via <link> in HTML — no @import needed here */

/* ═══ LIGHT MODE (default) ═══════════════════════════ */
:root {
  --bg:          #FAFBFF;
  --bg-2:        #F0F3FF;
  --bg-3:        #E4E9FF;
  --bg-card:     #FFFFFF;
  --bg-card-2:   #F7F9FF;

  --border:      rgba(79,108,246,0.1);
  --border-med:  rgba(79,108,246,0.18);
  --border-hi:   rgba(79,108,246,0.45);

  --blue:        #3B6CF6;
  --blue-mid:    #2D55D0;
  --blue-glow:   rgba(59,108,246,0.1);
  --blue-glow-2: rgba(59,108,246,0.05);
  --violet:      #7C3AED;
  --violet-glow: rgba(124,58,237,0.08);
  --cyan:        #0EA5E9;
  --green:       #059669;
  --amber:       #D97706;
  --red:         #DC2626;

  --text-1:      #0D1117;
  --text-2:      #2D3748;
  --text-3:      #64748B;
  --text-4:      #94A3B8;

  --grad-hero:   linear-gradient(135deg, #3B6CF6 0%, #7C3AED 55%, #0EA5E9 100%);
  --grad-blue:   linear-gradient(90deg, #3B6CF6, #0EA5E9);
  --grad-warm:   linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

  --shadow-xs:   0 1px 3px rgba(15,23,60,0.06);
  --shadow-sm:   0 2px 8px rgba(15,23,60,0.07), 0 6px 20px rgba(15,23,60,0.04);
  --shadow-md:   0 4px 20px rgba(15,23,60,0.09), 0 14px 40px rgba(15,23,60,0.06);
  --shadow-lg:   0 8px 40px rgba(15,23,60,0.12), 0 24px 64px rgba(15,23,60,0.08);
  --shadow-glow: 0 0 40px rgba(59,108,246,0.18), 0 8px 32px rgba(59,108,246,0.12);

  --font-head:  'Bricolage Grotesque', sans-serif;
  --font-body:  'Inter', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;

  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t:      0.22s;
  --t-slow: 0.5s;
}

/* ═══ DARK MODE ══════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #050914;
  --bg-2:        #080F20;
  --bg-3:        #0D1830;
  --bg-card:     #0D1830;
  --bg-card-2:   #111F3A;

  --border:      rgba(100,160,255,0.09);
  --border-med:  rgba(100,160,255,0.16);
  --border-hi:   rgba(100,160,255,0.4);

  --blue:        #5B8FFF;
  --blue-mid:    #4A7CF0;
  --blue-glow:   rgba(91,143,255,0.12);
  --blue-glow-2: rgba(91,143,255,0.06);
  --violet:      #A78BFA;
  --violet-glow: rgba(167,139,250,0.1);
  --cyan:        #22D3EE;
  --green:       #10B981;
  --amber:       #F59E0B;
  --red:         #F87171;

  --text-1:      #F0F6FF;
  --text-2:      #B8C9E8;
  --text-3:      #6B80A8;
  --text-4:      #3D5070;

  --shadow-xs:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.35), 0 6px 20px rgba(0,0,0,0.2);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.45), 0 14px 40px rgba(0,0,0,0.25);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.6), 0 24px 64px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 40px rgba(91,143,255,0.25), 0 8px 32px rgba(91,143,255,0.15);
}

/* ═══ RESET ══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 80px; }
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
  cursor: none; /* custom cursor replaces default */
}
a { color: var(--blue); text-decoration: none; transition: color var(--t) var(--ease); }
a:hover { color: var(--violet); }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: none; }
::selection { background: rgba(59,108,246,0.18); color: var(--text-1); }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-med); border-radius: 3px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; cursor: auto; }

/* ═══ CUSTOM CURSOR ══════════════════════════════════ */
#cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--spring), height 0.2s var(--spring), background 0.2s var(--ease), opacity 0.2s;
  box-shadow: 0 0 10px var(--blue);
  will-change: transform;
}
#cursor-ring {
  position: fixed;
  width: 38px; height: 38px;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease), height 0.35s var(--ease), border-color 0.2s, opacity 0.2s;
  opacity: 0.55;
  will-change: transform;
}
body.cursor-hover #cursor-dot { width: 14px; height: 14px; background: var(--violet); box-shadow: 0 0 16px var(--violet); }
body.cursor-hover #cursor-ring { width: 54px; height: 54px; border-color: var(--violet); opacity: 0.3; }
body.cursor-text #cursor-dot { width: 3px; height: 22px; border-radius: 2px; }
body.cursor-magnetic #cursor-dot { width: 12px; height: 12px; opacity: 0.7; }
body.cursor-magnetic #cursor-ring { width: 60px; height: 60px; opacity: 0.2; border-style: dashed; }

/* ═══ MOUSE TRAIL ════════════════════════════════════ */
.trail-dot {
  position: fixed;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99996;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  background: var(--blue);
}

/* ═══ SKIP LINK ══════════════════════════════════════ */
.skip-link { position:absolute; top:-100px; left:16px; background:var(--blue); color:#fff; padding:10px 16px; border-radius:0 0 6px 6px; font-size:13px; font-weight:600; z-index:9999; transition:top .2s; }
.skip-link:focus { top:0; }

/* ═══ LAYOUT ═════════════════════════════════════════ */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.section { padding: 100px 0; }

/* ═══ LABEL CHIP ═════════════════════════════════════ */
.label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--blue);
  background: var(--blue-glow); border: 1px solid rgba(59,108,246,0.2);
  padding: 5px 13px; border-radius: 100px; margin-bottom: 18px;
}
[data-theme="dark"] .label { border-color: rgba(91,143,255,0.25); }
.label::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 6px var(--blue); animation:pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ═══ TYPOGRAPHY ═════════════════════════════════════ */
.h-display { font-family:var(--font-head); font-weight:800; line-height:1.07; letter-spacing:-0.035em; color:var(--text-1); }
.h-display .grad {
  background: var(--grad-hero);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size: 250%;
  animation: gradShift 5s ease infinite;
}
@keyframes gradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.body-lg { font-size:17px; color:var(--text-2); line-height:1.85; }
.body-md { font-size:15px; color:var(--text-2); line-height:1.8; }
.body-sm { font-size:13px; color:var(--text-3); line-height:1.75; }

/* ═══ BUTTONS ════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  border: none; position: relative; overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
  cursor: none;
  white-space: nowrap;
}
/* Magnetic effect layer */
.btn-inner { position: relative; z-index: 1; pointer-events: none; display: flex; align-items: center; gap: 8px; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { box-shadow: var(--shadow-glow); color: #fff; }

.btn-ghost {
  background: var(--bg-card-2);
  color: var(--text-2);
  border: 1.5px solid var(--border-med);
}
.btn-ghost:hover { background: var(--bg-2); border-color: var(--border-hi); color: var(--text-1); }

.btn-gradient {
  background: var(--grad-hero);
  background-size: 200%; color: #fff; font-weight: 700;
  animation: gradShift 4s ease infinite;
}
.btn-gradient:hover { box-shadow: 0 12px 40px rgba(59,108,246,0.4); color: #fff; }

.btn-arrow { display: inline-block; transition: transform 0.22s var(--spring); }
.btn:hover .btn-arrow { transform: translateX(5px); }

/* ═══ THEME TOGGLE ═══════════════════════════════════ */
.theme-toggle {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-card-2); border: 1.5px solid var(--border-med);
  display: flex; align-items: center; justify-content: center;
  cursor: none; font-size: 18px; flex-shrink: 0;
  transition: all var(--t) var(--ease);
  position: relative; overflow: hidden;
}
.theme-toggle:hover { background: var(--blue-glow); border-color: var(--border-hi); transform: rotate(15deg) scale(1.1); }
.theme-toggle .icon-light,
.theme-toggle .icon-dark { position: absolute; transition: all 0.4s var(--spring); }
.theme-toggle .icon-light  { transform: translateY(0) rotate(0deg); opacity: 1; }
.theme-toggle .icon-dark   { transform: translateY(30px) rotate(90deg); opacity: 0; }
[data-theme="dark"] .theme-toggle .icon-light { transform: translateY(-30px) rotate(-90deg); opacity: 0; }
[data-theme="dark"] .theme-toggle .icon-dark  { transform: translateY(0) rotate(0deg); opacity: 1; }

/* ═══ NAVBAR ═════════════════════════════════════════ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 14px 0;
  background: rgba(250, 251, 255, 0.82);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  transition: all var(--t-slow) var(--ease);
}
[data-theme="dark"] #navbar { background: rgba(5, 9, 20, 0.85); }
#navbar.scrolled { padding: 10px 0; box-shadow: var(--shadow-sm); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.nav-logo img { height: 34px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-3);
  padding: 7px 13px; border-radius: var(--radius-sm);
  transition: all var(--t) var(--ease);
}
.nav-links a:hover { color: var(--text-1); background: var(--bg-2); }
.nav-links a.active { color: var(--blue); }
.nav-right { display: flex; align-items: center; gap: 8px; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:none; background:none; border:none; padding:6px; }
.hamburger span { width:22px; height:2px; background:var(--text-3); border-radius:2px; transition:all var(--t) var(--ease); display:block; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); background:var(--blue); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); background:var(--blue); }

.mobile-menu {
  display:none; position:fixed; top:65px; left:0; right:0; z-index:999;
  background: rgba(250,251,255,0.97); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); padding:20px 24px;
  flex-direction:column; gap:4px;
}
[data-theme="dark"] .mobile-menu { background: rgba(5,9,20,0.97); }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:15px; font-weight:500; color:var(--text-2); padding:11px 0; border-bottom:1px solid var(--border); transition:color var(--t); }
.mobile-menu a:hover { color:var(--blue); }
.mobile-menu .mm-bottom { display:flex; gap:8px; margin-top:12px; }

/* ═══ PARTICLE CANVAS ════════════════════════════════ */
#particles-canvas {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.5s;
}

/* ═══ HERO ═══════════════════════════════════════════ */
#hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 120px 0 80px; position: relative; overflow: hidden;
}
/* Light mode hero bg */
.hero-bg-light {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 70% 15%, rgba(59,108,246,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(124,58,237,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 45% at 95% 80%, rgba(14,165,233,0.07) 0%, transparent 50%);
}
[data-theme="dark"] .hero-bg-light {
  background:
    radial-gradient(ellipse 70% 55% at 70% 15%, rgba(91,143,255,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(167,139,250,0.1) 0%, transparent 50%),
    radial-gradient(ellipse 40% 45% at 95% 80%, rgba(34,211,238,0.08) 0%, transparent 50%);
}
.hero-grid-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(rgba(59,108,246,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,108,246,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent);
}
[data-theme="dark"] .hero-grid-lines {
  background-image:
    linear-gradient(rgba(91,143,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,143,255,0.07) 1px, transparent 1px);
}

/* Floating orb */
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
}
.hero-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,108,246,0.1) 0%, transparent 65%);
  top: -150px; left: -100px;
  animation: orbFloat1 10s ease-in-out infinite;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(124,58,237,0.08) 0%, transparent 65%);
  bottom: -100px; right: 10%;
  animation: orbFloat2 12s ease-in-out infinite;
}
[data-theme="dark"] .hero-orb-1 { background: radial-gradient(circle, rgba(91,143,255,0.18) 0%, transparent 65%); }
[data-theme="dark"] .hero-orb-2 { background: radial-gradient(circle, rgba(167,139,250,0.14) 0%, transparent 65%); }
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.05)} 66%{transform:translate(-20px,20px) scale(0.97)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-30px,20px) scale(1.03)} 66%{transform:translate(20px,-15px) scale(0.98)} }

.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:2; }

/* Aero headline word animation */
.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.7rem, 5.5vw, 4.4rem);
  font-weight: 800; line-height: 1.06;
  letter-spacing: -0.035em; color: var(--text-1);
  margin-bottom: 22px; perspective: 1000px;
}
.word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%) rotateX(-30deg);
  transform-origin: bottom;
  animation: wordReveal 0.75s var(--spring) forwards;
}
.hero-title .grad {
  background: var(--grad-hero);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 250%; animation: wordReveal 0.75s var(--spring) forwards, gradShift 5s 0.75s ease infinite;
  display: inline-block; opacity: 0; transform: translateY(100%) rotateX(-30deg); transform-origin: bottom;
}
@keyframes wordReveal { to { opacity:1; transform:translateY(0) rotateX(0deg); } }

.hero-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; animation:fadeSlideUp 0.6s 0.1s var(--ease) both; }
.hero-tag { font-family:var(--font-mono); font-size:11px; color:var(--text-3); background:var(--bg-card-2); border:1px solid var(--border); padding:5px 12px; border-radius:100px; letter-spacing:.5px; }
.hero-tag.hi { color:var(--blue); border-color:rgba(59,108,246,0.25); background:var(--blue-glow); }
[data-theme="dark"] .hero-tag.hi { border-color:rgba(91,143,255,0.3); }

.hero-desc { font-size:17px; color:var(--text-2); line-height:1.85; max-width:520px; margin-bottom:36px; animation:fadeSlideUp 0.7s 0.6s var(--ease) both; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px; animation:fadeSlideUp 0.7s 0.72s var(--ease) both; }

@keyframes fadeSlideUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

.hero-trust { display:flex; align-items:center; gap:20px; flex-wrap:wrap; animation:fadeSlideUp 0.7s 0.85s var(--ease) both; }
.ht-divider { width:1px; height:22px; background:var(--border-med); }
.ht-item { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-3); }
.ht-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green); animation:pulseDot 2s infinite; }

/* ── Hero visual panel ────────────────────────────── */
.hero-visual { animation:fadeSlideUp 0.9s 0.4s var(--ease) both; }
.hero-visual-inner { position:relative; width:100%; max-width:540px; margin:0 auto; }

.hv-window {
  background:var(--bg-card); border:1px solid var(--border-med);
  border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.hv-titlebar { background:var(--bg-2); padding:11px 16px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--border); }
.hv-dot { width:11px; height:11px; border-radius:50%; }
.hv-dot-r{background:#FF5F56;} .hv-dot-y{background:#FFBD2E;} .hv-dot-g{background:#27C93F;}
.hv-tabbar { display:flex; gap:2px; margin-left:10px; }
.hv-tab { padding:3px 12px; border-radius:4px; font-family:var(--font-mono); font-size:11px; color:var(--text-4); }
.hv-tab.active { color:var(--text-1); background:var(--bg-card); border:1px solid var(--border); }
.hv-code { padding:18px; font-family:var(--font-mono); font-size:12.5px; line-height:1.9; background:var(--bg-2); }
[data-theme="dark"] .hv-code { background:#08101E; }
.hv-code .ln { color:var(--text-4); user-select:none; margin-right:14px; display:inline-block; width:18px; text-align:right; }
.hv-code .kw { color:#7C3AED; }
[data-theme="dark"] .hv-code .kw { color:#A78BFA; }
.hv-code .fn { color:#2563EB; }
[data-theme="dark"] .hv-code .fn { color:#60A5FA; }
.hv-code .str { color:#059669; }
[data-theme="dark"] .hv-code .str { color:#34D399; }
.hv-code .cm { color:var(--text-4); font-style:italic; }
.hv-code .tag { color:#DC2626; }
[data-theme="dark"] .hv-code .tag { color:#F87171; }
.hv-code .attr { color:#D97706; }
[data-theme="dark"] .hv-code .attr { color:#FCD34D; }

/* Floating cards */
.hv-float {
  position:absolute; background:var(--bg-card); border:1px solid var(--border-med);
  border-radius:var(--radius-md); padding:13px 15px;
  box-shadow:var(--shadow-md);
  animation:floatCard 4s ease-in-out infinite;
}
.hv-float-1 { bottom:-22px; left:-22px; animation-delay:0s; min-width:170px; }
.hv-float-2 { top:-16px; right:-16px; animation-delay:1.5s; min-width:190px; }
.hv-float-3 { bottom:52px; right:-30px; animation-delay:2.5s; min-width:148px; }
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.hf-label { font-family:var(--font-mono); font-size:10px; color:var(--text-4); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:5px; }
.hf-val { font-family:var(--font-head); font-size:1.4rem; font-weight:800; color:var(--text-1); line-height:1; }
.hf-val.green { color:var(--green); } .hf-val.blue { color:var(--blue); }
.hf-sub { font-size:11px; color:var(--text-4); margin-top:3px; }
.hf-bar { height:3px; background:var(--border); border-radius:2px; margin-top:8px; overflow:hidden; }
.hf-bar-fill { height:100%; background:var(--grad-hero); border-radius:2px; animation:barGrow 2s 1s var(--ease) both; background-size:200%; }
@keyframes barGrow { from{width:0} }
.hf-stack { display:flex; gap:4px; margin-top:7px; flex-wrap:wrap; }
.hf-chip { font-family:var(--font-mono); font-size:9px; color:var(--blue); background:var(--blue-glow); border:1px solid rgba(59,108,246,0.2); padding:2px 7px; border-radius:100px; }
[data-theme="dark"] .hf-chip { border-color:rgba(91,143,255,0.25); }

/* ═══ SECTIONS ═══════════════════════════════════════ */
#what-we-build { background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.wwb-header { text-align:center; max-width:640px; margin:0 auto 56px; }
.wwb-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.wwb-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:28px 22px;
  transition:all var(--t-slow) var(--ease);
  box-shadow:var(--shadow-xs); position:relative; overflow:hidden;
}
.wwb-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 80% at 50% -20%, var(--blue-glow-2), transparent);
  opacity:0; transition:opacity var(--t-slow) var(--ease);
}
.wwb-card:hover { border-color:var(--border-hi); transform:translateY(-7px); box-shadow:var(--shadow-md); }
.wwb-card:hover::before { opacity:1; }
.wwb-num { font-family:var(--font-mono); font-size:10px; color:var(--text-4); letter-spacing:2px; text-transform:uppercase; margin-bottom:16px; }
.wwb-icon { width:48px; height:48px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }
.wwb-icon.blue  { background:rgba(59,108,246,0.1);  border:1px solid rgba(59,108,246,0.2);  }
.wwb-icon.violet{ background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.2); }
.wwb-icon.cyan  { background:rgba(14,165,233,0.1);  border:1px solid rgba(14,165,233,0.2);  }
.wwb-icon.green { background:rgba(5,150,105,0.1);   border:1px solid rgba(5,150,105,0.2);   }
[data-theme="dark"] .wwb-icon.blue  { background:rgba(91,143,255,0.12);  }
[data-theme="dark"] .wwb-icon.violet{ background:rgba(167,139,250,0.12); }
[data-theme="dark"] .wwb-icon.cyan  { background:rgba(34,211,238,0.1);   }
[data-theme="dark"] .wwb-icon.green { background:rgba(16,185,129,0.1);   }
.wwb-name { font-family:var(--font-head); font-size:1.1rem; font-weight:700; color:var(--text-1); margin-bottom:8px; }
.wwb-desc { font-size:13.5px; color:var(--text-2); line-height:1.8; margin-bottom:16px; }
.wwb-list { display:flex; flex-direction:column; gap:6px; }
.wwb-li { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-3); }
.wwb-li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--blue); flex-shrink:0; }

/* Showcase bento */
#showcase { background:var(--bg); }
.showcase-bg { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 0% 50%, rgba(59,108,246,0.04) 0%, transparent 55%),
             radial-gradient(ellipse 40% 40% at 100% 50%, rgba(124,58,237,0.03) 0%, transparent 55%); }
[data-theme="dark"] .showcase-bg {
  background:radial-gradient(ellipse 50% 50% at 0% 50%, rgba(91,143,255,0.07) 0%, transparent 55%),
             radial-gradient(ellipse 40% 40% at 100% 50%, rgba(167,139,250,0.06) 0%, transparent 55%); }
.showcase-bento { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.bento-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:all var(--t-slow) var(--ease); box-shadow:var(--shadow-xs); }
.bento-card:hover { border-color:var(--border-med); transform:translateY(-5px); box-shadow:var(--shadow-md); }
.bento-card-1{grid-column:1/7;} .bento-card-2{grid-column:7/13;}
.bento-card-3{grid-column:1/5;} .bento-card-4{grid-column:5/9;} .bento-card-5{grid-column:9/13;}
.bc-header { padding:18px 20px 0; display:flex; align-items:flex-start; justify-content:space-between; }
.bc-cat { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:100px; }
.bc-cat.web  { color:var(--blue);   background:rgba(59,108,246,0.1);  border:1px solid rgba(59,108,246,0.2); }
.bc-cat.app  { color:var(--violet); background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.2); }
.bc-cat.sec  { color:var(--cyan);   background:rgba(14,165,233,0.1);  border:1px solid rgba(14,165,233,0.2); }
.bc-cat.soft { color:var(--green);  background:rgba(5,150,105,0.1);   border:1px solid rgba(5,150,105,0.2); }
.bc-arrow { width:30px; height:30px; border-radius:var(--radius-sm); background:var(--bg-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-3); transition:all var(--t) var(--ease); }
.bento-card:hover .bc-arrow { background:var(--blue); border-color:var(--blue); color:#fff; transform:rotate(45deg); }
.bc-screen { margin:14px 20px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.bc-screen-bar { background:var(--bg-3); padding:7px 11px; display:flex; gap:5px; align-items:center; border-bottom:1px solid var(--border); }
.bc-dot{width:8px;height:8px;border-radius:50%;} .bc-dot-r{background:rgba(239,68,68,.5);} .bc-dot-y{background:rgba(245,158,11,.5);} .bc-dot-g{background:rgba(5,150,105,.5);}
.bc-url { font-family:var(--font-mono); font-size:10px; color:var(--text-4); margin-left:7px; }
.bc-screen-content { padding:13px; min-height:108px; }
.sk { background:var(--border); border-radius:3px; }
.sk-line{height:7px;margin-bottom:5px;border-radius:2px;}
.sk-line.w40{width:40%;} .sk-line.w70{width:70%;} .sk-line.w90{width:90%;} .sk-line.w55{width:55%;}
.sk-line.accent { background:rgba(59,108,246,0.2); width:35%; }
.sk-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
.sk-block { height:44px; border-radius:var(--radius-sm); }
.sk-chart { height:55px; margin-top:9px; display:flex; align-items:flex-end; gap:5px; }
.sk-bar { border-radius:2px 2px 0 0; background:rgba(59,108,246,0.1); }
.sk-bar.hi { background:rgba(59,108,246,0.35); }
[data-theme="dark"] .sk-bar { background:rgba(91,143,255,0.12); }
[data-theme="dark"] .sk-bar.hi { background:rgba(91,143,255,0.4); }
.sk-stat { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; background:var(--bg-card); border-radius:var(--radius-sm); margin-bottom:5px; }
.sk-stat-val { font-family:var(--font-head); font-size:1rem; font-weight:800; color:var(--blue); }
.sk-stat-lbl { font-family:var(--font-mono); font-size:9px; color:var(--text-4); }
.bc-pill { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--green); background:rgba(5,150,105,0.1); border:1px solid rgba(5,150,105,0.2); padding:3px 8px; border-radius:100px; margin-top:7px; }
.bc-footer { padding:0 20px 18px; }
.bc-title { font-family:var(--font-head); font-size:.95rem; font-weight:700; color:var(--text-1); margin-bottom:3px; }
.bc-desc { font-size:12px; color:var(--text-4); line-height:1.6; }
.showcase-cta { text-align:center; margin-top:40px; }

/* Tech ticker */
#tech-stack { padding:52px 0; background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; }
.ts-label { text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--text-4); letter-spacing:3px; text-transform:uppercase; margin-bottom:22px; }
.ts-track-wrap { overflow:hidden; mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent); }
.ts-track { display:flex; gap:8px; animation:techScroll 35s linear infinite; width:max-content; }
.ts-track-2 { animation:techScroll 28s linear infinite reverse; margin-top:8px; }
@keyframes techScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ts-pill { display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; color:var(--text-3); white-space:nowrap; background:var(--bg-card); border:1px solid var(--border); padding:8px 16px; border-radius:100px; box-shadow:var(--shadow-xs); }
.ts-pill:hover { border-color:var(--border-hi); color:var(--blue); }
.ts-pill-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* Process */
#process { background:var(--bg-2); border-top:1px solid var(--border); }
.process-header { text-align:center; max-width:560px; margin:0 auto 60px; }
.process-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.process-steps::before { content:''; position:absolute; top:27px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--border-med),var(--border-med),transparent); }
.process-step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 10px; position:relative; z-index:1; }
.ps-circle { width:54px; height:54px; border-radius:50%; border:1.5px solid var(--border-med); background:var(--bg-card); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:.95rem; font-weight:800; color:var(--blue); margin-bottom:20px; transition:all var(--t-slow) var(--spring); box-shadow:var(--shadow-sm); }
.process-step:hover .ps-circle { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 0 0 8px var(--blue-glow), 0 0 20px rgba(59,108,246,0.3); transform:scale(1.1); }
.ps-title { font-family:var(--font-head); font-size:.92rem; font-weight:700; color:var(--text-1); margin-bottom:7px; }
.ps-desc { font-size:12px; color:var(--text-3); line-height:1.65; }

/* Why us */
#why-us { background:var(--bg); }
.why-layout { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.why-points { display:flex; flex-direction:column; gap:12px; margin-top:34px; }
.why-point { display:flex; gap:14px; align-items:flex-start; padding:18px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); transition:all var(--t) var(--ease); box-shadow:var(--shadow-xs); }
.why-point:hover { border-color:var(--border-hi); box-shadow:var(--shadow-md); transform:translateX(5px); }
.wp-icon { width:40px; height:40px; flex-shrink:0; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:var(--blue-glow); border:1px solid rgba(59,108,246,0.15); }
.wp-title { font-family:var(--font-head); font-size:.92rem; font-weight:700; color:var(--text-1); margin-bottom:4px; }
.wp-desc { font-size:13px; color:var(--text-3); line-height:1.7; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px 22px; transition:all var(--t) var(--ease); box-shadow:var(--shadow-xs); }
.stat-card:hover { border-color:var(--border-med); box-shadow:var(--shadow-md); }
.stat-card.featured { border-color:rgba(59,108,246,0.25); background:var(--blue-glow); }
.sc-num { font-family:var(--font-head); font-size:2.2rem; font-weight:800; line-height:1; margin-bottom:5px; background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; background-size:200%; animation:gradShift 5s ease infinite; }
.sc-label { font-size:13px; color:var(--text-3); }

/* Terminal */
.terminal-card { background:var(--bg-2); border:1px solid var(--border-med); border-radius:var(--radius-md); overflow:hidden; }
.tc-bar { background:var(--bg-3); padding:11px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--border); }
.tc-dot{width:11px;height:11px;border-radius:50%;} .tc-dot-r{background:#FF5F56;} .tc-dot-y{background:#FFBD2E;} .tc-dot-g{background:#27C93F;}
.tc-label { font-family:var(--font-mono); font-size:11px; color:var(--text-4); margin:0 auto; letter-spacing:1px; }
.tc-body { padding:18px 20px; font-family:var(--font-mono); font-size:12px; line-height:2; }
.tc-line{display:flex;gap:8px;} .tc-prompt{color:var(--blue);} .tc-cmd{color:var(--green);}
.tc-out{color:var(--text-3);padding-left:20px;} .tc-success{color:var(--green);padding-left:20px;} .tc-warn{color:var(--amber);padding-left:20px;}
.tc-cursor{display:inline-block;width:7px;height:12px;background:var(--blue);vertical-align:middle;margin-left:2px;animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Testimonials */
#testimonials { background:var(--bg-2); border-top:1px solid var(--border); }
.testi-header { text-align:center; max-width:520px; margin:0 auto 48px; }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.testi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px 24px; transition:all var(--t-slow) var(--ease); box-shadow:var(--shadow-xs); }
.testi-card:hover { border-color:var(--border-med); transform:translateY(-5px); box-shadow:var(--shadow-md); }
.testi-quote { font-size:1.6rem; color:var(--blue); opacity:.25; font-family:Georgia,serif; line-height:1; margin-bottom:12px; display:block; }
.testi-text { font-size:13.5px; color:var(--text-2); line-height:1.85; margin-bottom:22px; font-style:italic; }
.testi-stars{display:flex;gap:2px;margin-bottom:14px;} .testi-star{color:var(--amber);font-size:12px;}
.testi-author{display:flex;align-items:center;gap:11px;}
.ta-avatar { width:38px; height:38px; border-radius:50%; background:var(--bg-2); border:1px solid var(--border-med); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ta-name { font-family:var(--font-head); font-size:.88rem; font-weight:700; color:var(--text-1); }
.ta-role { font-size:12px; color:var(--text-4); margin-top:1px; }

/* Final CTA */
#final-cta { padding:100px 0; background:var(--bg); border-top:1px solid var(--border); }
.fcta-card { max-width:820px; margin:0 auto; text-align:center; background:var(--bg-card); border:1.5px solid var(--border-med); border-radius:var(--radius-xl); padding:64px 56px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.fcta-card::before { content:''; position:absolute; inset:0; border-radius:var(--radius-xl); background:radial-gradient(ellipse 80% 50% at 50% 0%, var(--blue-glow-2), transparent 60%); pointer-events:none; }
[data-theme="dark"] .fcta-card::before { background:radial-gradient(ellipse 80% 50% at 50% 0%, rgba(91,143,255,0.08), transparent 60%); }
.fcta-desc { font-size:16px; color:var(--text-2); line-height:1.85; max-width:520px; margin:0 auto 36px; }
.fcta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.fcta-badges{display:flex;gap:22px;justify-content:center;margin-top:30px;flex-wrap:wrap;}
.fcta-badge{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3);}
.fcta-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--green);}

/* Footer */
#footer { padding:64px 0 28px; border-top:1px solid var(--border); background:var(--bg-2); }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:52px; margin-bottom:48px; }
.footer-logo img { height:34px; margin-bottom:16px; }
.footer-about { font-size:13.5px; color:var(--text-3); line-height:1.85; max-width:250px; margin-bottom:22px; }
.footer-social{display:flex;gap:8px;}
.fs-link { width:34px; height:34px; border-radius:var(--radius-sm); background:var(--bg-card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-3); transition:all var(--t) var(--ease); text-decoration:none; cursor:none; }
.fs-link:hover { background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-2px); }
.footer-col-title { font-family:var(--font-head); font-size:12px; font-weight:700; color:var(--text-1); letter-spacing:.5px; margin-bottom:16px; text-transform:uppercase; }
.footer-links{display:flex;flex-direction:column;gap:9px;}
.footer-links a { font-size:13.5px; color:var(--text-3); transition:all var(--t) var(--ease); }
.footer-links a:hover { color:var(--blue); padding-left:4px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:24px; border-top:1px solid var(--border); font-size:12px; color:var(--text-4); }
.footer-bottom a { color:var(--text-4); } .footer-bottom a:hover { color:var(--blue); }

/* Reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1{transition-delay:.1s;} .reveal-delay-2{transition-delay:.2s;} .reveal-delay-3{transition-delay:.3s;} .reveal-delay-4{transition-delay:.4s;}

/* Parallax layer containers */
.parallax-layer { will-change: transform; }

/* ═══ RESPONSIVE ═════════════════════════════════════ */
@media(max-width:1100px) { .wwb-grid{grid-template-columns:repeat(2,1fr);} .footer-top{grid-template-columns:1fr 1fr;gap:36px;} }
@media(max-width:1024px) {
  .hero-inner{grid-template-columns:1fr;} .hero-visual{display:none;}
  .why-layout{grid-template-columns:1fr;gap:44px;}
  .testi-grid{grid-template-columns:1fr 1fr;}
  .process-steps{grid-template-columns:repeat(3,1fr);gap:28px;}
  .process-steps::before{display:none;}
  .showcase-bento{display:flex;flex-direction:column;}
}
@media(max-width:768px) {
  .section{padding:68px 0;}
  .nav-links,.nav-right{display:none;}
  .hamburger{display:flex;}
  .wwb-grid{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .fcta-card{padding:40px 24px;}
  .hero-trust{flex-wrap:wrap;gap:12px;}
  .ht-divider{display:none;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  body { cursor: auto; }
  #cursor-dot, #cursor-ring { display:none; }
}
@media(max-width:480px) {
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;}
  .hero-actions{flex-direction:column;}
  .fcta-actions{flex-direction:column;align-items:center;}
  .process-steps{grid-template-columns:1fr;}
}

/* ═══ ACCESSIBILITY ══════════════════════════════════ */
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  body { cursor:auto; }
  #cursor-dot,#cursor-ring,.trail-dot { display:none; }
}