/* =====================================================================
   CeevTech — Premium IT Company Website  ·  Design System v2 "MAXIMUM"
   Aurora backgrounds · film grain · pill glass navbar · bento grid
   3D orbit hero · gradient borders · custom cursor · magnetic buttons
   ===================================================================== */

/* ---------- Animatable gradient angle (progressive enhancement) ----- */
@property --ga {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- Design Tokens ---------- */
:root {
  /* Brand */
  --blue-50:  #eef4ff;
  --blue-100: #dbe6ff;
  --blue-300: #7ea4ff;
  --blue-500: #2f6bff;
  --blue-600: #1f57ea;
  --blue-700: #1a48c4;
  --violet:   #1f57ea;
  --cyan:     #22d3ee;
  --green:    #10b981;
  --amber:    #f59e0b;

  /* Light theme surfaces */
  --bg:        #f7f9fe;
  --bg-soft:   #eef2fa;
  --bg-elev:   #ffffff;
  --surface:   rgba(255,255,255,0.66);
  --surface-2: rgba(255,255,255,0.5);
  --border:    rgba(13,24,48,0.08);
  --border-2:  rgba(13,24,48,0.14);

  --text:      #0a1122;
  --text-soft: #45526d;
  --text-mut:  #5d6b86;

  --shadow-sm: 0 2px 10px rgba(13,24,48,0.06);
  --shadow-md: 0 14px 34px rgba(13,24,48,0.10);
  --shadow-lg: 0 34px 70px rgba(13,24,48,0.16);
  --glow:      0 10px 40px rgba(47,107,255,0.35);
  --glow-lg:   0 18px 60px rgba(47,107,255,0.45);

  --grad-brand: linear-gradient(120deg, var(--blue-500), var(--blue-600));
  --grad-tri:   linear-gradient(110deg, var(--blue-500), var(--blue-600) 50%, var(--blue-300));
  --grad-hero:  linear-gradient(135deg, #2f6bff 0%, #1f57ea 45%, #7ea4ff 100%);

  --fx-rgb: 47,107,255;          /* particle network colour */
  --noise-opacity: .05;

  --radius:    20px;
  --radius-sm: 13px;
  --radius-lg: 30px;
  --maxw:      1200px;
  --nav-h:     66px;
  --nav-top:   16px;

  --ease:      cubic-bezier(.16,.84,.34,1);
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font);
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:        #05070f;
  --bg-soft:   #090d1a;
  --bg-elev:   #0d1424;
  --surface:   rgba(17,25,45,0.55);
  --surface-2: rgba(24,34,58,0.45);
  --border:    rgba(148,180,255,0.10);
  --border-2:  rgba(148,180,255,0.18);

  --text:      #e9efff;
  --text-soft: #a6b3d1;
  --text-mut:  #7e8aa8;

  --shadow-sm: 0 2px 12px rgba(0,0,0,0.45);
  --shadow-md: 0 18px 44px rgba(0,0,0,0.55);
  --shadow-lg: 0 36px 80px rgba(0,0,0,0.65);
  --glow:      0 10px 46px rgba(47,107,255,0.5);
  --glow-lg:   0 18px 70px rgba(47,107,255,0.6);

  --fx-rgb: 126,164,255;
  --noise-opacity: .07;

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip on BOTH html and body — a stray ~30px of horizontal
   overflow made the whole page pannable sideways on mobile (iOS Safari ignores
   overflow-x:hidden on body alone), which let position:fixed elements (navbar,
   floating buttons) slide off-screen when swiping. Clamp it at the document. */
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: clip;
  max-width: 100%;
  transition: background .5s var(--ease), color .5s var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
svg.icon { display: inline-block; vertical-align: middle; }
::selection { background: var(--blue-500); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--font-mono); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--blue-500), var(--blue-600));
  border-radius: 100px; border: 3px solid var(--bg);
}

/* Page-leave transition */
main, .navbar { transition: opacity .28s var(--ease), transform .28s var(--ease), filter .28s var(--ease); }
html.leaving main { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
html.leaving .navbar { opacity: 0; transform: translateX(-50%) translateY(-30px); }

/* =====================================================================
   BACKGROUND LAYERS — aurora orbs · grid · particles · film grain
   ===================================================================== */
.bg-canvas { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: var(--bg);
  transition: background .5s var(--ease); }
.bg-canvas .orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .5; mix-blend-mode: normal;
  animation: float-orb 22s var(--ease) infinite alternate;
  will-change: transform;
}
.orb.o1 { width: 560px; height: 560px; top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(47,107,255,.9), transparent 68%); }
.orb.o2 { width: 640px; height: 640px; top: 26%; right: -200px;
  background: radial-gradient(circle, rgba(139,92,246,.85), transparent 68%); animation-delay: -7s; }
.orb.o3 { width: 480px; height: 480px; bottom: -170px; left: 22%;
  background: radial-gradient(circle, rgba(34,211,238,.8), transparent 68%); animation-delay: -13s; }
[data-theme="light"] .bg-canvas .orb, html:not([data-theme="dark"]) .bg-canvas .orb { opacity: .2; }
@keyframes float-orb {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  50%  { transform: translate(40px,-60px) scale(1.12) rotate(6deg); }
  100% { transform: translate(-30px,44px) scale(1.05) rotate(-5deg); }
}

.fx-canvas { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .6; }

.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 8%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 8%, transparent 72%);
  opacity: .55;
}

/* film grain — sits above everything, below loader/cursor */
.noise {
  position: fixed; inset: -50%; z-index: 2000; pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }      20% { transform: translate(-6%,4%); }
  40% { transform: translate(4%,-7%); }        60% { transform: translate(-4%,7%); }
  80% { transform: translate(7%,-3%); }
}

/* =====================================================================
   LOADING SCREEN v2 — counter + progress line + curtain exit
   ===================================================================== */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg);
  transition: transform .9s var(--ease-out), opacity .5s ease .35s, visibility .9s;
}
#loader::before { content:""; position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(700px circle at 50% 45%, rgba(47,107,255,.14), transparent 60%); }
#loader.hidden { transform: translateY(-100%); opacity: 0; visibility: hidden; }
.loader-box { text-align: center; position: relative; width: min(320px, 76vw); }
.loader-logo {
  font-family: var(--font-display); font-weight: 700; font-size: 2.1rem;
  letter-spacing: -.02em; margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 12px;
}
.loader-logo .brand-name { color: var(--blue-500); }
.loader-spinner {
  width: 42px; height: 42px; margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(47,107,255,.16);
  border-top-color: var(--blue-500);
  border-right-color: var(--blue-600);
  animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */
.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
section { position: relative; padding: 104px 0; }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-600); background: var(--surface);
  padding: 8px 16px; border-radius: 100px; margin-bottom: 20px;
  border: 1px solid var(--border-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .eyebrow { color: var(--blue-300); }
.eyebrow::before {
  content:""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-500); box-shadow: 0 0 0 0 rgba(47,107,255,.6);
  animation: pulse-dot 2.2s var(--ease) infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(47,107,255,.55); }
  70% { box-shadow: 0 0 0 9px rgba(47,107,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,107,255,0); }
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.section-head h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); margin-bottom: 18px; }
.section-head p { color: var(--text-soft); font-size: 1.08rem; }

.gradient-text {
  background: var(--grad-tri);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gradient-text.shine { background-size: 220% 220%; animation: grad-shift 5s ease infinite; }
@keyframes grad-shift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* =====================================================================
   BUTTONS — gradient · shine sweep · magnetic-ready
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .96rem; padding: 14px 28px;
  border-radius: 100px; position: relative; overflow: hidden;
  transition: box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s, filter .3s;
  white-space: nowrap; will-change: transform;
}
.btn .icon { transition: transform .35s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn-primary {
  background: linear-gradient(110deg, var(--blue-500), var(--blue-600) 55%, var(--blue-500));
  background-size: 220% 100%;
  color: #fff; box-shadow: var(--glow);
  animation: btn-grad 6s ease infinite;
}
@keyframes btn-grad { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.btn-primary:hover { box-shadow: var(--glow-lg); filter: brightness(1.07); }
.btn-primary::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s var(--ease);
}
.btn-primary:hover::after { transform: translateX(130%); }
.btn-ghost {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn-ghost:hover { border-color: var(--blue-500); color: var(--blue-600); box-shadow: var(--shadow-md); }
[data-theme="dark"] .btn-ghost:hover { color: var(--blue-300); }
.btn-lg { padding: 17px 36px; font-size: 1.03rem; }
.btn-block { width: 100%; justify-content: center; }

/* =====================================================================
   GLASS SURFACE
   ===================================================================== */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* =====================================================================
   NAVBAR — floating glass pill
   ===================================================================== */
.navbar {
  position: fixed; top: var(--nav-top); left: 50%; z-index: 900;
  transform: translateX(-50%);
  width: min(100% - 28px, calc(var(--maxw) + 24px));
  transition: transform .45s var(--ease), top .3s var(--ease), opacity .28s var(--ease);
}
.navbar.nav-hidden { transform: translateX(-50%) translateY(calc(-100% - 26px)); }
/* keyboard users tabbing into a hidden navbar bring it back */
.navbar.nav-hidden:focus-within { transform: translateX(-50%); }

/* skip link for keyboard/screen-reader users */
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 10001;
  padding: 12px 20px; border-radius: 12px; font-weight: 600;
  background: var(--grad-brand); color: #fff; box-shadow: var(--glow);
  transition: top .3s var(--ease);
}
.skip-link:focus-visible { top: 12px; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--nav-h); padding: 0 12px 0 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .4s var(--ease), background .4s, border-color .4s;
}
.navbar.scrolled .nav-inner { box-shadow: var(--shadow-md); border-color: var(--border-2); }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display);
  font-weight: 700; font-size: 1.32rem; letter-spacing: -.02em; }
.brand .brand-name { color: var(--blue-500); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  padding: 9px 15px; border-radius: 100px; font-weight: 500; font-size: .93rem;
  color: var(--text-soft); position: relative;
  transition: color .25s, background .25s;
}.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--blue-600); background: var(--blue-50); }
[data-theme="dark"] .nav-links a.active { background: rgba(47,107,255,.16); color: var(--blue-300); }
.nav-links a.active::after {
  content:""; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  width: 14px; height: 2px; border-radius: 2px; background: var(--grad-brand);
}
.nav-actions { display: flex; align-items: center; gap: 9px; }
.theme-toggle {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  transition: transform .5s var(--ease), border-color .3s, box-shadow .3s;
}
.theme-toggle:hover { transform: rotate(40deg) scale(1.1); border-color: var(--blue-500); box-shadow: var(--glow); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); place-items: center; }

/* scroll progress bar */
#scroll-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 950;
  background: var(--grad-tri); box-shadow: 0 0 14px rgba(47,107,255,.7);
  transition: width .08s linear; border-radius: 0 3px 3px 0; }

/* =====================================================================
   HERO — split-word headline · typed terminal line · 3D orbit scene
   ===================================================================== */
.hero { padding-top: calc(var(--nav-h) + var(--nav-top) + 84px); padding-bottom: 40px; overflow: visible; }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 44px; align-items: center; }
.hero-badge { margin-bottom: 26px; }
.hero-copy h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); margin-bottom: 20px; }

/* staggered word entrance (activated by JS + loader completion) */
html.js .split-words.ready .w {
  display: inline-block; opacity: 0;
  transform: translateY(.55em) rotate(2.5deg); filter: blur(8px);
}
html.js.is-loaded .split-words.ready .w {
  animation: word-in .85s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 75ms);
}
@keyframes word-in {
  to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}

.type-line {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .95rem; font-weight: 500;
  color: var(--text-soft); margin-bottom: 22px; min-height: 1.6em;
}
.type-prompt { color: var(--cyan); font-weight: 700; }
.typed { color: var(--text); font-weight: 600;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.type-caret { width: 9px; height: 1.15em; background: var(--blue-500); border-radius: 2px;
  animation: caret-blink 1s steps(1) infinite; box-shadow: 0 0 10px rgba(47,107,255,.8); }
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-copy p.lead { font-size: 1.14rem; color: var(--text-soft); max-width: 540px; margin-bottom: 32px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 34px; margin-top: 46px; flex-wrap: wrap; }
.hero-trust .t { display: flex; flex-direction: column; position: relative; padding-left: 16px; }
.hero-trust .t::before { content:""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--grad-brand); }
.hero-trust .t b { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -.02em; }
.hero-trust .t small { color: var(--text-mut); font-size: .8rem; font-family: var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; }

/* --- 3D scene --- */
.hero-scene { position: relative; height: 520px; perspective: 1500px; }
.scene-glow {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
  width: 68%; height: 70px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(47,107,255,.5), transparent 70%);
  filter: blur(28px); pointer-events: none;
}
.scene-core {
  position: absolute; inset: 0; display: grid; place-items: center;
  transform-style: preserve-3d;
  animation: scene-float 7s ease-in-out infinite;
}
@keyframes scene-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* orbit rings around the cube */
.orbit {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px dashed rgba(var(--fx-rgb), .4);
  transform-style: preserve-3d; pointer-events: none;
}
.orbit.o1 { width: 330px; height: 330px; margin: -165px 0 0 -165px;
  animation: orbit-spin-1 15s linear infinite; }
.orbit.o2 { width: 450px; height: 450px; margin: -225px 0 0 -225px;
  border-style: solid; border-color: rgba(var(--fx-rgb), .18);
  animation: orbit-spin-2 26s linear infinite; }
@keyframes orbit-spin-1 { from { transform: rotateX(72deg) rotateZ(0); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes orbit-spin-2 { from { transform: rotateX(66deg) rotateY(-8deg) rotateZ(360deg); } to { transform: rotateX(66deg) rotateY(-8deg) rotateZ(0); } }
.orbit-dot {
  position: absolute; top: -6px; left: calc(50% - 6px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 16px var(--cyan), 0 0 40px rgba(34,211,238,.5);
}
.orbit-dot.v { background: var(--blue-600); box-shadow: 0 0 16px var(--blue-600), 0 0 40px rgba(31,87,234,.5); }

.cube {
  position: relative; width: 185px; height: 185px; transform-style: preserve-3d;
  animation: cube-spin 18s linear infinite;
}
@keyframes cube-spin { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
.cube .face {
  position: absolute; width: 185px; height: 185px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(47,107,255,.88), rgba(31,87,234,.78));
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: inset 0 0 46px rgba(255,255,255,.18), 0 0 40px rgba(47,107,255,.25);
  display: grid; place-items: center; color: #fff;
}
.cube .face .icon { width: 60px; height: 60px; opacity: .95; filter: drop-shadow(0 0 12px rgba(255,255,255,.5)); }
.cube .front  { transform: translateZ(92.5px); }
.cube .back   { transform: rotateY(180deg) translateZ(92.5px); }
.cube .right  { transform: rotateY(90deg) translateZ(92.5px);
  background: linear-gradient(135deg, rgba(126,164,255,.85), rgba(47,107,255,.85)); }
.cube .left   { transform: rotateY(-90deg) translateZ(92.5px);
  background: linear-gradient(135deg, rgba(31,87,234,.85), rgba(126,164,255,.72)); }
.cube .top    { transform: rotateX(90deg) translateZ(92.5px); }
.cube .bottom { transform: rotateX(-90deg) translateZ(92.5px); }

/* floating glass chips */
.float-chip {
  position: absolute; display: flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: 15px;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  background: var(--surface); border: 1px solid var(--border-2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md); color: var(--text);
  animation: chip-bob 5.5s ease-in-out infinite;
  transition: transform .3s var(--ease);
  z-index: 2;
}
.float-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.float-chip.c1 { top: 5%;  left: -3%;  animation-delay: -.5s; }
.float-chip.c2 { top: 28%; right: -2%; animation-delay: -1.9s; }
.float-chip.c4 { bottom: 4%; right: 3%; animation-delay: -3.1s; }
@keyframes chip-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.float-chip .dot.b { background: var(--blue-500); box-shadow: 0 0 10px var(--blue-500); }
.float-chip .dot.g { background: var(--green);   box-shadow: 0 0 10px var(--green); }
.float-chip .dot.v { background: var(--blue-600); box-shadow: 0 0 10px var(--blue-600); }
.float-chip .dot.c { background: var(--cyan);    box-shadow: 0 0 10px var(--cyan); }

/* floating terminal window */
.term {
  position: absolute; bottom: 6%; left: -6%; width: 290px; z-index: 3;
  border-radius: 16px; overflow: hidden;
  animation: chip-bob 6.5s ease-in-out infinite; animation-delay: -2.6s;
  box-shadow: var(--shadow-lg);
}
.term-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-mut);
}
.term-bar i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.term-bar i:nth-child(1) { background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 8px; letter-spacing: .05em; }
.term-body {
  padding: 14px 16px; min-height: 108px;
  font-family: var(--font-mono); font-size: .74rem; line-height: 1.85;
  color: var(--text-soft); text-align: left;
}
.term-body .tl { display: block; white-space: nowrap; overflow: hidden; }
.t-cmd    { color: var(--text); }
.t-green  { color: var(--green); }
.t-blue   { color: var(--blue-600); }
[data-theme="dark"] .t-blue { color: var(--blue-300); }
.t-dim    { color: var(--text-mut); }
.term-caret { display: inline-block; width: 8px; height: 1em; vertical-align: text-bottom;
  background: var(--cyan); animation: caret-blink 1s steps(1) infinite; }

/* =====================================================================
   MARQUEE — dual rows, opposite directions, fade mask
   ===================================================================== */
.marquee {
  padding: 34px 0; border-block: 1px solid var(--border); overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; gap: 56px; width: max-content;
  animation: marquee 30s linear infinite; }
.marquee-track + .marquee-track { margin-top: 20px; animation-direction: reverse; animation-duration: 36s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-mono); font-weight: 600; font-size: .95rem; letter-spacing: .04em;
  color: var(--text-mut); white-space: nowrap; display: flex; align-items: center; gap: 10px;
  transition: color .3s;
}
.marquee-track span:hover { color: var(--blue-600); }
.marquee-track .icon { color: var(--blue-500); opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   BRAND BAND — global platform logos below the tech marquee
   ===================================================================== */
.brand-band { padding: 40px 0; border-block: 1px solid var(--border); border-top: none; }
.brand-band-label {
  text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-mut); margin: 0 0 28px;
}
.brand-grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 40px 56px;
}
.brand-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-mut); filter: grayscale(1); opacity: .55;
  transition: filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.brand-logo svg { flex-shrink: 0; }
.brand-logo b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand-logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }

/* =====================================================================
   GRID + CARDS — gradient border on hover · glow follow · tilt glare
   ===================================================================== */
.grid { display: grid; gap: 24px; }
.grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.grid.cols-4 { grid-template-columns: repeat(4,1fr); }
/* Filtered portfolio results: fall back to flex so a partial row (fewer
   cards than columns) centers as a group instead of hugging the left. */
.project-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.project-grid .project-card { flex: 0 1 calc((100% - 2*24px)/3); }

.card {
  position: relative; padding: 32px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  overflow: hidden;
}
/* interior glow following the mouse */
.card::before {
  content:""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(560px circle at var(--mx,50%) var(--my,0%), rgba(47,107,255,.12), transparent 45%);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
/* gradient border reveal */
.card::after {
  content:""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  background: linear-gradient(140deg, rgba(47,107,255,.65), rgba(139,92,246,.45) 40%, rgba(34,211,238,.35) 70%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s; pointer-events: none;
}
.card:hover { transform: translateY(-9px); box-shadow: var(--shadow-lg); }
.card:hover::before, .card:hover::after { opacity: 1; }

/* tilt glare highlight (element injected by JS) */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.22), transparent 55%);
  opacity: 0; transition: opacity .35s; mix-blend-mode: overlay; z-index: 3;
}
.tilt:hover .tilt-glare { opacity: 1; }

.card-ico {
  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-600); margin-bottom: 22px;
  position: relative; transition: transform .5s var(--ease), background .35s, color .35s, box-shadow .35s;
}
[data-theme="dark"] .card-ico { background: rgba(47,107,255,.14); color: var(--blue-300); }
.card:hover .card-ico {
  transform: translateY(-5px) rotate(-8deg) scale(1.07);
  background: var(--grad-tri); color: #fff; box-shadow: var(--glow);
}
.card h3 { font-size: 1.26rem; margin-bottom: 10px; }
.card p { color: var(--text-soft); font-size: .96rem; }
.card .card-features { margin-top: 18px; display: grid; gap: 9px; }
.card .card-features li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text-soft); }
.card .card-features .icon { color: var(--green); flex-shrink: 0; margin-top: 3px; }
.card-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-weight: 600; color: var(--blue-600); font-size: .92rem;
}
[data-theme="dark"] .card-link { color: var(--blue-300); }
.card-link .icon { transition: transform .3s var(--ease); }
.card:hover .card-link .icon { transform: translateX(5px); }

/* =====================================================================
   BENTO GRID (Why CeevTech)
   ===================================================================== */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: 22px; }
.b-cell { display: flex; flex-direction: column; justify-content: center; }
.b-cell h4 { font-size: 1.05rem; margin-top: 16px; }
.b-cell .b-sub { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mut); margin-top: 4px; }
.b-a { grid-column: span 2; grid-row: span 2; justify-content: flex-start; }
.b-a h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; }
.b-a > p { margin-bottom: 8px; }
.b-wide { grid-column: span 2; }

/* uptime conic ring */
.b-ring-wrap { display: grid; place-items: center; }
.b-ring {
  --p: 99.9;
  width: 128px; height: 128px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--blue-500) 0deg, var(--blue-600) calc(var(--p) * 3.6deg * .6), var(--blue-300) calc(var(--p) * 3.6deg), var(--border) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
  animation: ring-glow 3s ease-in-out infinite;
}
@keyframes ring-glow { 0%,100% { filter: drop-shadow(0 0 6px rgba(47,107,255,.4)); }
  50% { filter: drop-shadow(0 0 18px rgba(47,107,255,.75)); } }
.b-ring-num {
  position: absolute; inset: 13px; display: grid; place-items: center; border-radius: 50%;
}
.b-ring-num b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.02em; }
/* nested absolutely inside masked ring won't show text — render number as sibling */
.b-ring-label { position: absolute; inset: 0; display: grid; place-items: center; }
.b-ring-label b { font-family: var(--font-display); font-size: 1.45rem; }

/* security radar */
.b-radar-wrap { display: grid; place-items: center; }
.radar {
  position: relative; width: 138px; height: 138px; border-radius: 50%;
  border: 1px solid rgba(var(--fx-rgb), .35);
  background:
    radial-gradient(circle, transparent 34%, rgba(var(--fx-rgb), .14) 34.5%, transparent 35.5%),
    radial-gradient(circle, transparent 64%, rgba(var(--fx-rgb), .14) 64.5%, transparent 65.5%);
  overflow: hidden;
}
.radar::before {
  content:""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(34,211,238,.55), rgba(34,211,238,.08) 22%, transparent 26%);
  animation: radar-sweep 3.2s linear infinite;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
.radar .blip {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  animation: blip-ping 3.2s ease-out infinite;
}
.radar .blip.b1 { top: 28%; left: 62%; }
.radar .blip.b2 { top: 64%; left: 30%; animation-delay: -1.6s; }
@keyframes blip-ping {
  0%, 12% { opacity: 0; transform: scale(.4); }
  18% { opacity: 1; transform: scale(1.25); }
  55% { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(.7); }
}
.radar-shield { position: absolute; inset: 0; display: grid; place-items: center; color: var(--blue-500); opacity: .9; }

/* performance bars */
.b-bars { justify-content: center; }
.b-bars .bar-row { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center;
  gap: 14px; margin-top: 13px; }
.b-bars .bar-row:first-of-type { margin-top: 18px; }
.b-bars .bar-label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-mut); }
.b-bars .bar-val { font-family: var(--font-display); font-weight: 700; font-size: .92rem; text-align: right; }
.b-bars .bar { height: 8px; border-radius: 100px; background: var(--border); overflow: hidden; }
.b-bars .bar i {
  display: block; height: 100%; width: var(--w, 80%);
  border-radius: inherit; background: var(--grad-tri);
  box-shadow: 0 0 12px rgba(47,107,255,.5);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.2s var(--ease-out) .25s;
}
.b-cell.in .bar i, .b-cell:hover .bar i { transform: scaleX(1); }

/* =====================================================================
   STATS BAND
   ===================================================================== */
.stats-band { padding: 60px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.stat { text-align: center; padding: 34px 18px; position: relative; overflow: hidden; }
.stat::before { content:""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-rgb), .6), transparent); }
.stat b {
  font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 3.1rem); display: block;
  letter-spacing: -.03em;
  background: var(--grad-tri); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat span { color: var(--text-soft); font-weight: 500; font-size: .92rem; }

/* =====================================================================
   SPLIT LAYOUT + FEATURE LIST (About / Solutions pages)
   ===================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature-list { display: grid; gap: 22px; margin-top: 30px; }
.feature-item { display: flex; gap: 16px; }
.feature-item .fi-ico {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--grad-tri); color: #fff; box-shadow: var(--glow);
  transition: transform .4s var(--ease);
}
.feature-item:hover .fi-ico { transform: rotate(-9deg) scale(1.08); }
.feature-item h4 { font-size: 1.08rem; margin-bottom: 4px; }
.feature-item p { color: var(--text-soft); font-size: .94rem; }
.visual-stack { position: relative; }
.visual-stack .glass { padding: 28px; }
.mini-dash { display: grid; gap: 14px; }
.mini-row { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 13px; background: var(--surface-2);
  border: 1px solid var(--border); transition: border-color .3s, transform .3s var(--ease); }
.mini-row:hover { border-color: var(--border-2); transform: translateX(4px); }
.mini-bar { height: 8px; border-radius: 100px; background: var(--grad-tri);
  box-shadow: 0 0 10px rgba(47,107,255,.45); }
.badge-float {
  position: absolute; top: -22px; right: -14px; padding: 13px 19px; border-radius: 15px;
  background: var(--grad-tri); color: #fff; font-weight: 700; box-shadow: var(--glow-lg);
  display: flex; align-items: center; gap: 8px;
  animation: chip-bob 4.5s ease-in-out infinite;
}

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testi { padding: 32px; position: relative; display: flex; flex-direction: column; }
/* decorative quote lives on .stars::after — .card::after is taken by the gradient border */
.testi .stars::after {
  content:"\201C"; position: absolute; top: 6px; right: 22px;
  font-family: var(--font-display); font-size: 6rem; line-height: 1;
  color: var(--blue-500); opacity: .1; pointer-events: none;
}
.testi .stars { display: flex; gap: 3px; color: var(--amber); margin-bottom: 16px; }
.testi .stars .icon { fill: currentColor; }
.testi > p { font-size: 1.02rem; color: var(--text); margin-bottom: 22px; flex: 1; }
.testi .who { display: flex; align-items: center; gap: 13px; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-500);
  color: #fff; font-weight: 700; font-family: var(--font-display); position: relative; flex-shrink: 0;
}
.avatar::after { content:""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid transparent;
  background: var(--grad-tri) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .7; }
.testi .who b { display: block; font-family: var(--font-display); }
.testi .who small { color: var(--text-mut); }
.reviews-slider {
  overflow: hidden;
  padding-block: 8px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reviews-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: reviews-slide 42s linear infinite;
}
.reviews-slider:hover .reviews-track { animation-play-state: paused; }
.review-slide {
  width: min(360px, 82vw);
  min-height: 100%;
  flex: 0 0 min(360px, 82vw);
}
@keyframes reviews-slide {
  to { transform: translateX(calc(-50% - 12px)); }
}

/* Featured-projects slideshow — auto-scrolling track, same trick as the reviews slider */
.projects-slider {
  overflow: hidden;
  padding-block: 8px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.projects-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: projects-slide 60s linear infinite;
}
.projects-slider:hover .projects-track { animation-play-state: paused; }
.project-slide {
  width: min(400px, 86vw);
  flex: 0 0 min(400px, 86vw);
}
@keyframes projects-slide {
  to { transform: translateX(calc(-50% - 12px)); }
}
@media (prefers-reduced-motion: reduce) {
  .projects-track { animation: none; }
}

/* =====================================================================
   PORTFOLIO
   ===================================================================== */
.filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; }
.filter-btn {
  padding: 10px 22px; border-radius: 100px; font-weight: 600; font-size: .88rem;
  font-family: var(--font-mono); letter-spacing: .02em;
  border: 1px solid var(--border-2); color: var(--text-soft); background: var(--surface);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: all .3s var(--ease);
}
.filter-btn:hover { border-color: var(--blue-500); color: var(--blue-600); transform: translateY(-2px); }
.filter-btn.active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--glow); }

.project-card { overflow: hidden; padding: 0; }
.project-thumb { height: 195px; position: relative; overflow: hidden; display: grid; place-items: center; }
.project-thumb::before { content:""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .5;
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%); }
.project-thumb::after { content:""; position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 40%, rgba(0,0,0,.3)); }
.project-thumb .icon { width: 66px; height: 66px; color: #fff; opacity: .95; z-index: 1;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));
  transition: transform .55s var(--ease); }
.project-card:hover .project-thumb .icon { transform: scale(1.18) rotate(6deg); }
/* Live website preview — a real, proxied site scaled into the thumb */
.project-preview { cursor: pointer; }
.project-preview::before { display: none; }                 /* hide the grid so the site shows */
.project-preview::after { z-index: 2; pointer-events: none; /* light tint + catch clicks to open modal */
  background: linear-gradient(160deg, transparent 66%, rgba(0,0,0,.28)); }
.project-preview img { transition: transform .6s var(--ease); }
.project-card:hover .project-preview img { transform: scale(1.04); }
.preview-expand { position: absolute; z-index: 3; left: 14px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(15,23,42,.66); backdrop-filter: blur(6px); border: 0; cursor: pointer;
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.preview-expand .icon { width: 15px; height: 15px; }
.project-card:hover .preview-expand { opacity: 1; transform: translateY(0); }

/* Full live, navigable preview modal */
.live-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.live-modal[hidden] { display: none; }
.live-backdrop { position: absolute; inset: 0; background: rgba(8,12,24,.66); backdrop-filter: blur(4px); }
.live-window { position: relative; width: min(1100px, 94vw); height: min(760px, 88vh);
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: liveIn .28s var(--ease); }
[data-theme="dark"] .live-window { background: #0b1220; }
@keyframes liveIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.live-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--surface, #f1f5f9); border-bottom: 1px solid var(--border, #e2e8f0); }
[data-theme="dark"] .live-bar { background: #111a2e; }
.live-dots { display: inline-flex; gap: 7px; }
.live-dots i { width: 12px; height: 12px; border-radius: 50%; background: #d1d5db; }
.live-dots i:nth-child(1) { background: #ff5f57; } .live-dots i:nth-child(2) { background: #febc2e; }
.live-dots i:nth-child(3) { background: #28c840; }
.live-url { flex: 1; font-family: var(--font-mono); font-size: .82rem; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-newtab { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700;
  text-decoration: none; color: var(--blue-600); }
.live-newtab .icon { width: 15px; height: 15px; }
.live-close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-soft); cursor: pointer; }
.live-close:hover { background: rgba(0,0,0,.08); }
.live-body { flex: 1; background: #fff; }
.live-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.project-preview .preview-badge { position: absolute; z-index: 2; left: 14px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(15,23,42,.62); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.project-preview .preview-badge .icon { width: 15px; height: 15px; }
.project-card:hover .project-preview .preview-badge { opacity: 1; transform: translateY(0); }
.project-body { padding: 26px; }
.project-cat { font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
[data-theme="dark"] .project-cat { color: var(--blue-300); }
.project-body h3 { font-size: 1.2rem; margin: 9px 0 8px; }
.project-body p { color: var(--text-soft); font-size: .92rem; }
.tech-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.tech-tags span {
  font-family: var(--font-mono); font-size: .7rem; padding: 5px 11px; border-radius: 100px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft);
  transition: border-color .3s, color .3s;
}
.tech-tags span:hover { border-color: var(--blue-500); color: var(--blue-600); }
.is-hidden { display: none !important; }

/* =====================================================================
   PRICING — featured plan gets an animated conic border
   ===================================================================== */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; align-items: stretch; max-width: 1200px; margin-left: auto; margin-right: auto; }
.price-card { display: flex; flex-direction: column; padding: 36px 28px; position: relative; overflow: visible; }
.price-card.featured { transform: translateY(-10px); box-shadow: var(--glow); }
.price-card.featured::after {
  opacity: 1; padding: 1.6px;
  background: conic-gradient(from var(--ga, 0deg),
    var(--blue-500), var(--blue-600) 30%, var(--blue-300) 55%, var(--blue-600) 75%, var(--blue-500));
  animation: spin-border 4.5s linear infinite;
}
@keyframes spin-border { to { --ga: 360deg; } }
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 14px; border-radius: 100px;
  background: var(--grad-brand); color: #fff; box-shadow: var(--glow); z-index: 2;
}
.price-card h3 { font-size: 1.22rem; margin-bottom: 6px; }
.price-card .price { font-family: var(--font-display); font-size: 2.7rem; font-weight: 700;
  letter-spacing: -.03em; margin: 14px 0 2px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.price-card .period { color: var(--text-mut); font-size: .82rem;
  font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.price-card .desc { color: var(--text-soft); font-size: .92rem; margin: 16px 0 22px; }
.price-features { display: grid; gap: 12px; margin-bottom: 28px; flex: 1; }
.price-features li { display: flex; gap: 10px; font-size: .92rem; color: var(--text-soft); }
.price-features .icon { color: var(--green); flex-shrink: 0; }

/* comparison table */
.compare-wrap { overflow-x: auto; margin-top: 64px; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--surface); }
table.compare th, table.compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); }
table.compare thead th { font-family: var(--font-display); background: var(--surface-2);
  font-size: .92rem; letter-spacing: .01em; }
table.compare td.center, table.compare th.center { text-align: center; }
table.compare .icon { color: var(--green); }
table.compare tbody tr { transition: background .25s; }
table.compare tbody tr:hover { background: var(--surface-2); }
table.compare tr:last-child td { border-bottom: none; }

/* =====================================================================
   BLOG
   ===================================================================== */
.post-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.post-thumb { height: 185px; display: grid; place-items: center; position: relative; overflow: hidden; }
.post-thumb::before { content:""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 24px 24px; opacity: .5; }
.post-thumb .icon { width: 52px; height: 52px; color: #fff; opacity: .92; z-index: 1;
  transition: transform .5s var(--ease); }
.post-card:hover .post-thumb .icon { transform: scale(1.16) rotate(-5deg); }
.post-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post-meta { display: flex; gap: 14px; font-size: .76rem; color: var(--text-mut);
  font-family: var(--font-mono); letter-spacing: .03em; margin-bottom: 11px; }
.post-cat { color: var(--blue-600); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
[data-theme="dark"] .post-cat { color: var(--blue-300); }
.post-body h3 { font-size: 1.18rem; margin-bottom: 10px; }
.post-body h3 a { transition: color .25s; }
.post-body h3 a:hover { color: var(--blue-600); }
.post-body p { color: var(--text-soft); font-size: .93rem; flex: 1; }

/* single article */
.article { max-width: 780px; margin: 0 auto; }
.article-hero { height: 330px; border-radius: var(--radius-lg); display: grid; place-items: center;
  margin-bottom: 44px; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.article-hero::before { content:""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 32px 32px; }
.article-hero .icon { width: 90px; height: 90px; color: #fff; opacity: .92; z-index: 1;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); }
.article h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 20px; }
.article-content { font-size: 1.08rem; color: var(--text-soft); }
.article-content p { margin-bottom: 22px; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; }
.contact-info .info-item { display: flex; gap: 16px; margin-bottom: 26px; align-items: flex-start; }
.contact-info .ii-ico {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-600);
  transition: transform .4s var(--ease), background .3s, color .3s;
}
.contact-info .info-item:hover .ii-ico { transform: rotate(-8deg) scale(1.08);
  background: var(--grad-tri); color: #fff; }
[data-theme="dark"] .contact-info .ii-ico { background: rgba(47,107,255,.14); color: var(--blue-300); }
.contact-info h4 { font-size: 1rem; margin-bottom: 3px; }
.contact-info p { color: var(--text-soft); font-size: .95rem; }
.form-card { padding: 38px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; position: relative; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 8px;
  color: var(--text-soft); transition: color .25s; }
.field:focus-within label { color: var(--blue-600); }
[data-theme="dark"] .field:focus-within label { color: var(--blue-300); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 17px; border-radius: 13px; font-family: inherit; font-size: .96rem;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.field textarea { resize: vertical; min-height: 132px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(47,107,255,.15), var(--glow);
  background: var(--bg-elev);
}
.field .err { color: #dc2626; font-size: .82rem; margin-top: 6px; display: none; }
[data-theme="dark"] .field .err { color: #f87171; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #ef4444;
  animation: field-shake .4s var(--ease); }
@keyframes field-shake {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); } 75% { transform: translateX(-3px); }
}
.map-embed { height: 260px; border-radius: var(--radius); overflow: hidden; margin-top: 30px;
  border: 1px solid var(--border); background: var(--surface); position: relative;
  display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.map-embed iframe { width: 100%; height: 100%; border: 0;
  filter: saturate(.85) contrast(1.02); }
[data-theme="dark"] .map-embed iframe { filter: invert(.92) hue-rotate(185deg) saturate(.7); }

.alert { padding: 15px 19px; border-radius: 13px; font-size: .94rem; margin-bottom: 22px;
  display: flex; gap: 10px; align-items: center; animation: alert-in .5s var(--ease-out); }
@keyframes alert-in { from { opacity: 0; transform: translateY(-8px); } }
.alert-success { background: rgba(16,185,129,.12); color: #047857; border: 1px solid rgba(16,185,129,.3); }
.alert-error { background: rgba(239,68,68,.12); color: #b91c1c; border: 1px solid rgba(239,68,68,.3); }
[data-theme="dark"] .alert-success { color: #34d399; }
[data-theme="dark"] .alert-error { color: #f87171; }

/* newsletter success message (injected by JS) */
.news-ok { color: #047857; font-weight: 600; }
[data-theme="dark"] .news-ok { color: #34d399; }

/* dark-theme hover states — --blue-600 is too dark on dark surfaces */
[data-theme="dark"] .marquee-track span:hover,
[data-theme="dark"] .filter-btn:hover,
[data-theme="dark"] .tech-tags span:hover,
[data-theme="dark"] .post-body h3 a:hover,
[data-theme="dark"] .breadcrumb a:hover,
[data-theme="dark"] .to-top:hover,
[data-theme="dark"] .footer-bottom a:hover { color: var(--blue-300); }

/* =====================================================================
   CTA BAND — rotating glow · grid texture
   ===================================================================== */
.cta-band { position: relative; }
.cta-inner {
  text-align: center; padding: 76px 44px; border-radius: var(--radius-lg);
  background: var(--grad-hero); color: #fff; position: relative; overflow: hidden;
  box-shadow: var(--glow-lg);
}
.cta-inner::before { content:""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 20%, transparent 75%); }
.cta-inner::after { content:""; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, transparent 60%, rgba(255,255,255,.16) 72%, transparent 84%);
  animation: cta-rotate 11s linear infinite; pointer-events: none; }
@keyframes cta-rotate { to { transform: rotate(360deg); } }
.cta-inner h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 16px; position: relative; z-index: 1; }
.cta-inner p { font-size: 1.1rem; opacity: .95; max-width: 560px; margin: 0 auto 32px; position: relative; z-index: 1; }
.cta-inner .hero-cta, .cta-inner .btn { position: relative; z-index: 1; }
.cta-inner .btn-primary { background: #fff; color: var(--blue-700);
  box-shadow: 0 16px 44px rgba(0,0,0,.28); animation: none; }
.cta-inner .btn-ghost { background: rgba(255,255,255,.14); color: #fff;
  border-color: rgba(255,255,255,.45); }
.cta-inner .btn-ghost:hover { background: rgba(255,255,255,.24); color: #fff; }

/* =====================================================================
   PAGE HERO (inner pages)
   ===================================================================== */
.page-hero { padding-top: calc(var(--nav-h) + var(--nav-top) + 92px); padding-bottom: 44px;
  text-align: center; position: relative; }
.page-hero::before { content:""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(760px, 90vw); height: 340px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(47,107,255,.16), transparent 65%); }
.page-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); margin-bottom: 18px; position: relative; }
.page-hero p { color: var(--text-soft); font-size: 1.1rem; max-width: 640px; margin: 0 auto; position: relative; }
.breadcrumb { display: inline-flex; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .05em;
  color: var(--text-mut); margin-bottom: 22px; position: relative; }
.breadcrumb a { transition: color .25s; }
.breadcrumb a:hover { color: var(--blue-600); }

/* =====================================================================
   FOOTER — beam · giant watermark · newsletter
   ===================================================================== */
.footer { padding: 84px 0 30px; margin-top: 40px; position: relative; overflow: hidden; }
.footer::before { content:""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-rgb), .7), transparent); }
.footer-watermark {
  position: absolute; bottom: -4%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(96px, 17vw, 250px); line-height: .8; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px var(--border-2);
  opacity: .5; pointer-events: none; user-select: none; white-space: nowrap;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px;
  margin-bottom: 50px; position: relative; z-index: 1; }
.footer .brand { margin-bottom: 16px; }
.footer-about p { color: var(--text-soft); font-size: .94rem; max-width: 300px; margin-bottom: 20px; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-soft);
  transition: all .35s var(--ease);
}
.socials a:hover { background: var(--grad-tri); color: #fff; transform: translateY(-4px) rotate(-6deg);
  border-color: transparent; box-shadow: var(--glow); }
.footer-col h4 { font-size: .98rem; margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: var(--text-soft); font-size: .93rem; position: relative;
  transition: color .25s, padding-left .25s; }
.footer-col a::before { content:"→"; position: absolute; left: -4px; opacity: 0;
  transition: opacity .25s, left .25s; color: var(--blue-500); }
.footer-col a:hover { color: var(--blue-600); padding-left: 20px; }
.footer-col a:hover::before { opacity: 1; left: 0; }
[data-theme="dark"] .footer-col a:hover { color: var(--blue-300); }
.newsletter { display: flex; gap: 8px; margin-top: 14px; }
.newsletter input { flex: 1; min-width: 0; padding: 13px 15px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
  transition: border-color .3s, box-shadow .3s; }
.newsletter input:focus { outline: none; border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(47,107,255,.14); }
.newsletter .btn { padding: 12px 18px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-mut);
  font-size: .88rem; flex-wrap: wrap; position: relative; z-index: 1; }

/* =====================================================================
   FLOATING ACTIONS — WhatsApp · back-to-top progress ring
   ===================================================================== */
.wa-float {
  position: fixed; bottom: 26px; right: 26px; z-index: 800;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-500); color: #fff; box-shadow: 0 12px 36px rgba(47,107,255,.5);
  transition: transform .35s var(--ease);
}
.wa-float:hover { transform: scale(1.14) rotate(6deg); }
.wa-float svg { width: 30px; height: 30px; }

.to-top {
  position: fixed; bottom: 26px; left: 26px; z-index: 800;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), color .3s;
}
.to-top { visibility: hidden; transition: opacity .4s var(--ease), transform .4s var(--ease), color .3s, visibility .4s; }
.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
.to-top:hover { color: var(--blue-600); }
.to-top svg.ring { position: absolute; inset: -1px; width: 52px; height: 52px;
  transform: rotate(-90deg); pointer-events: none; }
.to-top .tt-track { fill: none; stroke: var(--border-2); stroke-width: 2; }
.to-top .tt-bar { fill: none; stroke: url(#ttGrad); stroke: var(--blue-500); stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: 151; }
.to-top .icon { transform: rotate(-90deg); }

/* =====================================================================
   CUSTOM CURSOR (desktop, fine pointers only)
   ===================================================================== */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none;
  z-index: 10000; opacity: 0; }
.cursor-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--blue-500); box-shadow: 0 0 12px rgba(47,107,255,.9);
  transition: opacity .3s; }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid rgba(var(--fx-rgb), .65);
  transition: opacity .3s, border-color .3s, background .3s; }
.cursor-ring.is-hover { border-color: rgba(var(--fx-rgb), .9);
  background: rgba(var(--fx-rgb), .08); }

/* =====================================================================
   SCROLL REVEAL — blur + lift (JS gated so no-JS users see everything)
   ===================================================================== */
html.js [data-reveal] {
  opacity: 0; transform: translateY(42px) scale(.985); filter: blur(7px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
html.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
/* featured pricing card keeps its lift after reveal */
html.js .price-card.featured[data-reveal].in { transform: translateY(-10px); }
[data-reveal].d1 { --rd: .08s; } [data-reveal].d2 { --rd: .16s; }
[data-reveal].d3 { --rd: .24s; } [data-reveal].d4 { --rd: .32s; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1120px) {
  .term { left: -2%; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-scene { height: 430px; margin-top: 24px; }
  .orbit.o2 { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .float-chip.c2 { right: 0; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .grid.cols-4 { grid-template-columns: repeat(2,1fr); }
  .stats-grid, .pricing-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-a { grid-column: span 2; grid-row: auto; }
  .b-wide { grid-column: span 2; }
}
/* nav collapses to hamburger early — the pill can't fit 7 links on tablets */
@media (max-width: 1020px) {
  html.js .nav-links {
    position: fixed; top: calc(var(--nav-top) + var(--nav-h) + 10px); left: 10px; right: 10px;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 14px;
    max-height: calc(100vh - var(--nav-top) - var(--nav-h) - 34px);
    overflow-y: auto;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: 22px; box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-14px) scale(.98);
    pointer-events: none; visibility: hidden;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    z-index: 3000;
  }
  html.js .nav-links.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  html.js .nav-links a { padding: 13px 16px; border-radius: 13px; }
  .nav-links a.active::after { display: none; }
  html.js .nav-toggle { display: grid; }
  /* no-JS fallback: links stay usable as a scrollable strip inside the pill */
  html:not(.js) .nav-links { overflow-x: auto; scrollbar-width: none; }
  html:not(.js) .nav-links::-webkit-scrollbar { display: none; }
  html:not(.js) .nav-links a { white-space: nowrap; }
}
@media (max-width: 760px) {
  section { padding: 72px 0; }
  .navbar { width: calc(100% - 20px); }
  .nav-inner { padding: 0 8px 0 14px; }
  .desktop-only { display: none !important; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .project-grid .project-card { flex-basis: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .term { display: none; }
  .float-chip.c1 { left: 0; }
  .float-chip.c2 { right: 0; }
  .bento { grid-template-columns: 1fr; }
  .b-a, .b-wide { grid-column: auto; }
  .to-top { bottom: 108px; left: auto; right: 32px; width: 46px; height: 46px; }
  .to-top svg.ring { width: 46px; height: 46px; }
}
/* Mobile GPUs can't re-blur a fixed element every frame while scrolling, which
   makes backdrop-filtered fixed elements (navbar, back-to-top) visibly lag and
   snap during scroll. Drop the live blur on small screens and use a more opaque
   background so they still read as frosted glass but stay rock-steady.
   Desktop keeps the real backdrop blur. */
@media (max-width: 1020px) {
  .nav-inner, .to-top {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav-inner { background: var(--bg-elev); }
  .to-top { background: var(--bg-elev); }
}
@media (max-width: 480px) {
  .stats-grid, .pricing-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-scene { height: 360px; }
  .orbit.o2 { display: none; }
  .cta-inner { padding: 56px 24px; }
}

/* =====================================================================
   REDUCED MOTION — kill it all gracefully
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .noise { display: none; }
}




















/* =====================================================================
   PERFORMANCE — pause decorative animation when it is NOT being watched.
   Purely additive: no rule above is changed. For a normal, focused viewer
   the site is visually identical. These only engage when the tab is
   backgrounded or an ambient section is scrolled out of view. Paused
   animations resume from the exact same frame, so there is no visual jump.
   ===================================================================== */

/* Tab backgrounded / minimised — freeze every decorative loop site-wide. */
html.fx-paused *,
html.fx-paused *::before,
html.fx-paused *::after { animation-play-state: paused !important; }

/* Ambient section scrolled off-screen — freeze just that section's loops. */
.fx-off,
.fx-off *,
.fx-off *::before,
.fx-off *::after { animation-play-state: paused !important; }