/* ==========================================================================
   ORINEXA — Premium Software Company Website
   Pure CSS3 · No frameworks · Handcrafted
   Structure: Tokens → Base → Utilities → Components → Sections → Motion → Responsive
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS (CSS Variables)
   ========================================================================== */
:root {
  /* Colors */
  --bg:              #050816;
  --bg-secondary:    #0B1020;
  --surface:         rgba(255, 255, 255, 0.05);
  --border-glass:    rgba(255, 255, 255, 0.12);
  --primary:         #3B82F6;
  --secondary:       #7C3AED;
  --accent:          #00D4FF;
  --hover:           #60A5FA;
  --text:            #FFFFFF;
  --text-secondary:  #B8C2D1;
  --muted:           #7D8799;
  --success:         #22C55E;

  /* Gradient */
  --gradient: linear-gradient(135deg, #3B82F6 0%, #7C3AED 50%, #00D4FF 100%);
  --gradient-soft: linear-gradient(135deg, rgba(59,130,246,.25), rgba(124,58,237,.25), rgba(0,212,255,.25));

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --fs-hero:      clamp(44px, 6.5vw, 88px);
  --fs-section:   clamp(32px, 4.5vw, 48px);
  --fs-sub:       clamp(18px, 2vw, 24px);
  --fs-body:      18px;

  /* Spacing */
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;

  /* Radius */
  --radius-sm:  12px;
  --radius-md:  20px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  /* Shadows */
  --shadow-sm: 0 4px 24px rgba(0,0,0,.25);
  --shadow-md: 0 12px 48px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 80px rgba(0,0,0,.5);
  --glow-blue: 0 0 40px rgba(59,130,246,.35);
  --glow-cyan: 0 0 40px rgba(0,212,255,.3);

  /* Layout */
  --nav-height: 76px;
  --container:  1200px;
  --z-loader:   1000;
  --z-nav:      900;
  --z-modal:    950;
  --z-cursor:   800;

  /* Motion */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-soft:  cubic-bezier(.25,.46,.45,.94);
  --dur:        300ms;
  --dur-slow:   700ms;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input, textarea { font:inherit; color:inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height:1.15; font-weight:600; }

::selection { background: var(--primary); color:#fff; }

/* Visible focus states (accessibility) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: 8px;
  border: 2px solid var(--bg);
}

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* Glass card */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  position: relative;
}

/* Gradient text */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Section heading block */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}
.section-head--left { text-align:left; margin:0 0 var(--space-md); max-width:620px; }

.section-tag {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family: var(--font-mono);
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--accent);
  padding:.45rem 1rem;
  border:1px solid rgba(0,212,255,.25);
  border-radius:999px;
  background: rgba(0,212,255,.06);
  margin-bottom:1rem;
}
.section-tag::before {
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: var(--accent);
  box-shadow:0 0 12px var(--accent);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(.7); }
}

.section-title {
  font-size: var(--fs-section);
  margin-bottom:1rem;
  letter-spacing:-.02em;
}

.section-sub {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family: var(--font-body);
  font-weight:600;
  font-size:1rem;
  padding:.85rem 1.8rem;
  border-radius:999px;
  border:1px solid transparent;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  overflow:hidden;
  white-space:nowrap;
  user-select:none;
}
.btn--sm  { padding:.6rem 1.2rem; font-size:.9rem; gap:.4rem; }
.btn--lg  { padding:1rem 2.2rem;  font-size:1.05rem; }
.btn svg  { flex-shrink:0; transition: transform var(--dur) var(--ease-out); }

/* Primary gradient button */
.btn--primary {
  background: var(--gradient);
  color:#fff;
  box-shadow: 0 8px 32px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.25);
  background-size: 180% 180%;
}
.btn--primary:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 12px 44px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover svg { transform: translateX(3px); }
.btn--primary:active { transform: translateY(0) scale(.97); }

/* Ghost button */
.btn--ghost {
  background: rgba(255,255,255,.04);
  border-color: var(--border-glass);
  color: var(--text);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(96,165,250,.5);
  transform: translateY(-2px);
  box-shadow: var(--glow-blue);
}

/* Play Store button */
.btn--play {
  background: rgba(0,212,255,.08);
  border-color: rgba(0,212,255,.35);
  color: var(--accent);
}
.btn--play:hover {
  background: rgba(0,212,255,.16);
  transform: translateY(-2px);
  box-shadow: var(--glow-cyan);
}

/* Ripple effect (spawned via JS) */
.ripple {
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,.4);
  transform: scale(0);
  animation: ripple-anim .7s var(--ease-out) forwards;
  pointer-events:none;
}
@keyframes ripple-anim {
  to { transform: scale(3.2); opacity:0; }
}

/* ==========================================================================
   5. LOADING SCREEN
   ========================================================================== */
.loader {
  position:fixed;
  inset:0;
  z-index: var(--z-loader);
  background: var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.loader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }

.loader__logo {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
}
.loader__logo svg { animation: loader-float 2.4s ease-in-out infinite; filter: drop-shadow(0 0 24px rgba(59,130,246,.5)); }
@keyframes loader-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-8px) scale(1.04); }
}
.loader__text {
  font-family: var(--font-heading);
  font-weight:700;
  font-size:1.4rem;
  letter-spacing:.4em;
  text-indent:.4em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.loader__bar {
  width: 180px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
}
.loader__bar span {
  display:block;
  height:100%;
  width:40%;
  border-radius:999px;
  background: var(--gradient);
  animation: loader-slide 1.2s ease-in-out infinite;
}
@keyframes loader-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ==========================================================================
   6. SCROLL PROGRESS BAR
   ========================================================================== */
.scroll-progress {
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0%;
  background: var(--gradient);
  z-index: var(--z-nav);
  border-radius:0 999px 999px 0;
  box-shadow: 0 0 12px rgba(0,212,255,.6);
}

/* ==========================================================================
   7. NAVBAR
   ========================================================================== */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  transition: background var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
  border-bottom:1px solid transparent;
}
.navbar.is-scrolled {
  background: rgba(5,8,22,.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom-color: var(--border-glass);
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}

.navbar__inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.navbar__logo {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family: var(--font-heading);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.08em;
}
.navbar__logo svg { filter: drop-shadow(0 0 14px rgba(59,130,246,.45)); transition: transform var(--dur) var(--ease-out); }
.navbar__logo:hover svg { transform: rotate(-8deg) scale(1.06); }

.navbar__links {
  display:flex;
  gap:2.2rem;
  align-items:center;
}
.navbar__link {
  position:relative;
  font-size:.95rem;
  color: var(--text-secondary);
  padding:.35rem 0;
  transition: color var(--dur) var(--ease-out);
}
.navbar__link::after {
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform var(--dur) var(--ease-out);
}
.navbar__link:hover,
.navbar__link.is-active { color: var(--text); }
.navbar__link:hover::after,
.navbar__link.is-active::after { transform: scaleX(1); }

/* Mobile hamburger */
.navbar__toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  padding:.4rem;
  z-index:10;
}
.navbar__toggle span {
  width:24px; height:2px;
  background: var(--text);
  border-radius:2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur);
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding: calc(var(--nav-height) + 3rem) 0 5rem;
  overflow:hidden;
}

/* --- Background stack --- */
.hero__bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }

/* Animated aurora blobs */
.hero__aurora {
  position:absolute;
  border-radius:50%;
  filter: blur(120px);
  opacity:.5;
  will-change: transform;
}
.hero__aurora--1 {
  width:52vw; height:52vw;
  left:-12%; top:-18%;
  background: radial-gradient(circle, rgba(59,130,246,.55), transparent 65%);
  animation: aurora-1 16s var(--ease-soft) infinite alternate;
}
.hero__aurora--2 {
  width:46vw; height:46vw;
  right:-10%; top:12%;
  background: radial-gradient(circle, rgba(124,58,237,.5), transparent 65%);
  animation: aurora-2 20s var(--ease-soft) infinite alternate;
}
.hero__aurora--3 {
  width:40vw; height:40vw;
  left:30%; bottom:-22%;
  background: radial-gradient(circle, rgba(0,212,255,.42), transparent 65%);
  animation: aurora-3 24s var(--ease-soft) infinite alternate;
}
@keyframes aurora-1 { to { transform: translate(8%, 10%) scale(1.12); } }
@keyframes aurora-2 { to { transform: translate(-10%, 8%) scale(1.1); } }
@keyframes aurora-3 { to { transform: translate(6%, -10%) scale(1.15); } }

/* Moving mesh gradient */
.hero__mesh {
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(59,130,246,.2), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(124,58,237,.18), transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(0,212,255,.14), transparent 50%);
  background-size: 180% 180%;
  animation: mesh-move 22s ease-in-out infinite alternate;
  filter: blur(40px);
}
@keyframes mesh-move {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* Grid pattern */
.hero__grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(96,165,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  animation: grid-pan 40s linear infinite;
}
@keyframes grid-pan { from { background-position: 0 0; } to { background-position: 56px 56px; } }

/* Particle canvas */
.hero__particles { position:absolute; inset:0; width:100%; height:100%; }

/* Tiny stars */
.hero__stars { position:absolute; inset:0; }
.hero__stars span {
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:#fff;
  opacity:0;
  animation: twinkle 4s ease-in-out infinite;
}
.hero__stars span::after {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:inherit;
  filter: blur(2px);
}
@keyframes twinkle {
  0%,100% { opacity:0; transform:scale(.6); }
  50%     { opacity:.9; transform:scale(1); }
}

/* Glowing rings */
.hero__ring {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(0,212,255,.15);
  animation: ring-pulse 6s ease-in-out infinite;
}
.hero__ring--1 { width:420px; height:420px; right:8%; top:12%; }
.hero__ring--2 { width:300px; height:300px; right:14%; top:22%; animation-delay:1.5s; border-color:rgba(124,58,237,.18); }
.hero__ring--3 { width:200px; height:200px; right:22%; top:31%; animation-delay:3s; border-color:rgba(59,130,246,.2); }
@keyframes ring-pulse {
  0%,100% { transform:scale(1); opacity:.6; }
  50%     { transform:scale(1.12); opacity:1; }
}

/* Light rays */
.hero__rays {
  position:absolute;
  inset:0;
  background: conic-gradient(from 210deg at 50% 55%,
    transparent 0deg,
    rgba(59,130,246,.04) 18deg,
    transparent 36deg,
    rgba(124,58,237,.03) 64deg,
    transparent 90deg,
    rgba(0,212,255,.04) 130deg,
    transparent 160deg,
    rgba(59,130,246,.03) 200deg,
    transparent 260deg,
    rgba(124,58,237,.03) 300deg,
    transparent 360deg);
  animation: rays-spin 60s linear infinite;
  opacity:.7;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }

/* Mouse-follow glow */
.hero__mouse-glow {
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .5s;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(59,130,246,.12), transparent 45%);
}
@media (hover:hover) and (pointer:fine) {
  .hero__mouse-glow { opacity:1; }
}

/* Noise texture */
.hero__noise {
  position:absolute;
  inset:0;
  opacity:.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --- Hero layout --- */
.hero__content {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap:3rem;
}

.hero__badge {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem 1.1rem;
  border-radius:999px;
  border:1px solid var(--border-glass);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  font-size:.85rem;
  letter-spacing:.06em;
  color: var(--text-secondary);
  margin-bottom:1.6rem;
}
.hero__badge-dot {
  width:8px; height:8px;
  border-radius:50%;
  background: var(--success);
  box-shadow: 0 0 12px var(--success);
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero__title {
  font-size: var(--fs-hero);
  letter-spacing:-.03em;
  margin-bottom:1.6rem;
}
.hero__line {
  display:block;
  overflow:hidden;
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
}

.hero__subtitle {
  color: var(--text-secondary);
  font-size:1.15rem;
  max-width:540px;
  margin-bottom:2.2rem;
}

.hero__actions {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:3rem;
}

/* Hero inline metrics */
.hero__metrics {
  display:flex;
  align-items:center;
  gap:1.6rem;
  flex-wrap:wrap;
}
.hero__metric { display:flex; flex-direction:column; gap:.15rem; }
.hero__metric-num {
  font-family: var(--font-mono);
  font-weight:600;
  font-size:1.4rem;
  color: var(--text);
}
.hero__metric-label { font-size:.85rem; color: var(--muted); }
.hero__metric-divider { width:1px; height:38px; background:var(--border-glass); }

/* --- Floating phone showcase --- */
.hero__visual { position:relative; min-height:560px; }

.phone-scene {
  position:absolute;
  inset:0;
  perspective: 1200px;
}

.phone-mock {
  position:absolute;
  transform-style: preserve-3d;
  will-change: transform;
}
.phone-mock--back {
  width:190px;
  right:12%;
  top:6%;
  transform: rotate(9deg);
  animation: phone-float-back 7s ease-in-out infinite;
  z-index:1;
  opacity:.85;
}
.phone-mock--front {
  width:230px;
  left:4%;
  top:22%;
  transform: rotate(-7deg);
  animation: phone-float-front 8s ease-in-out infinite;
  z-index:2;
}
@keyframes phone-float-back {
  0%,100% { transform: rotate(9deg) translateY(0); }
  50%     { transform: rotate(5deg) translateY(-18px); }
}
@keyframes phone-float-front {
  0%,100% { transform: rotate(-7deg) translateY(0); }
  50%     { transform: rotate(-3deg) translateY(-26px); }
}

.phone-mock__frame {
  position:relative;
  border-radius:34px;
  padding:8px;
  background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,.06) 30%, rgba(255,255,255,.02) 60%, rgba(0,212,255,.2));
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 60px rgba(59,130,246,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
}
.phone-mock__camera {
  position:absolute;
  top:16px; left:50%;
  transform:translateX(-50%);
  width:10px; height:10px;
  border-radius:50%;
  background:#0d1330;
  border:2px solid rgba(255,255,255,.15);
  z-index:3;
}
.phone-screen {
  border-radius:27px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(59,130,246,.2), transparent 60%),
    linear-gradient(180deg, #0a1026, #0d1330);
  aspect-ratio: 9/19;
  position:relative;
}
.phone-screen::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, transparent 30%, transparent 70%, rgba(0,212,255,.06) 100%);
  pointer-events:none;
}

/* Glass reflection overlay */
.phone-mock__reflection {
  position:absolute;
  inset:0;
  border-radius:34px;
  background: linear-gradient(200deg, rgba(255,255,255,.22) 0%, transparent 25%, transparent 80%, rgba(0,212,255,.12) 100%);
  opacity:.5;
  pointer-events:none;
  z-index:4;
}

/* Mini app UIs inside hero phones */
.app-ui { padding:34px 14px 18px; height:100%; display:flex; flex-direction:column; }
.ui__status {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  color:#fff;
  opacity:.85;
  margin-bottom:10px;
}
.ui__weather-sun { font-size:34px; text-align:center; margin-top:18px; filter: drop-shadow(0 0 14px rgba(255,210,64,.6)); }
.ui__weather-temp { font-size:44px; font-weight:700; text-align:center; font-family:var(--font-heading); margin-top:4px; }
.ui__weather-city { text-align:center; font-size:12px; color:var(--text-secondary); margin-bottom:16px; }
.ui__weather-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:auto;
}
.ui__weather-row span {
  background:rgba(255,255,255,.07);
  border:1px solid var(--border-glass);
  border-radius:10px;
  padding:6px 2px;
  text-align:center;
  font-size:9px;
  color:var(--text-secondary);
}
.ui__tasks-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.ui__tasks-title { font-weight:700; font-size:16px; font-family:var(--font-heading); }
.ui__tasks-add {
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:8px;
  background:var(--gradient);
  color:#fff;
  font-size:13px;
  box-shadow:0 4px 14px rgba(59,130,246,.4);
}
.ui__task {
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:8px 9px;
  margin-bottom:7px;
}
.ui__task strong { font-size:11px; font-weight:600; display:block; }
.ui__task small { font-size:9px; color:var(--muted); }
.ui__task-check {
  width:16px; height:16px;
  border-radius:50%;
  border:1.5px solid var(--muted);
  display:grid; place-items:center;
  flex-shrink:0;
  font-size:10px;
}
.ui__task--done .ui__task-check {
  background:var(--success);
  border-color:var(--success);
  color:#fff;
}
.ui__task--done strong { text-decoration:line-through; opacity:.6; }
.ui__progress {
  margin-top:auto;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.ui__progress-bar {
  display:block;
  height:100%;
  width:65%;
  border-radius:999px;
  background:var(--gradient);
  box-shadow:0 0 12px rgba(0,212,255,.5);
}

/* Floating chips */
.hero__chip {
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.65rem 1rem;
  border-radius:16px;
  background: rgba(11,16,32,.75);
  border:1px solid var(--border-glass);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md), var(--glow-blue);
  animation: chip-float 6s ease-in-out infinite;
}
.hero__chip strong { display:block; font-size:.85rem; font-family:var(--font-heading); }
.hero__chip small { font-size:.72rem; color:var(--muted); }
.hero__chip-icon {
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:12px;
  font-size:18px;
  background:var(--gradient-soft);
  border:1px solid var(--border-glass);
  box-shadow: 0 4px 16px rgba(59,130,246,.3);
}
.hero__chip--1 { top:30%; left:0; animation-delay:.5s; }
.hero__chip--2 { bottom:22%; right:0; animation-delay:1.3s; }
.hero__chip--3 { bottom:4%; left:26%; animation-delay:2.1s; }
@keyframes chip-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

/* Glow under phones */
.phone-glow {
  position:absolute;
  left:12%; right:12%;
  bottom:-4%;
  height:120px;
  background: radial-gradient(ellipse, rgba(59,130,246,.35), rgba(124,58,237,.15) 45%, transparent 70%);
  filter: blur(40px);
  animation: glow-breathe 6s ease-in-out infinite;
  z-index:0;
}
@keyframes glow-breathe {
  0%,100% { opacity:.7; transform:scale(1); }
  50%     { opacity:1; transform:scale(1.08); }
}

/* Scroll hint */
.hero__scroll-hint {
  position:absolute;
  bottom:26px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero__scroll-line {
  width:1px; height:52px;
  background:var(--border-glass);
  position:relative;
  overflow:hidden;
}
.hero__scroll-line::after {
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:50%;
  background:var(--accent);
  animation: scroll-line 2s ease-in-out infinite;
}
@keyframes scroll-line {
  0%   { transform:translateY(-100%); }
  100% { transform:translateY(200%); }
}

/* ==========================================================================
   9. STATS
   ========================================================================== */
.stats { padding: var(--space-xl) 0 var(--space-lg); position:relative; }
.stats__grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
.stat-card {
  text-align:center;
  padding:2.2rem 1.4rem;
  overflow:hidden;
}
.stat-card::before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(300px circle at 50% 120%, rgba(59,130,246,.16), transparent 60%);
  opacity:0;
  transition:opacity var(--dur);
}
.stat-card:hover::before { opacity:1; }
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md), var(--glow-blue);
  border-color: rgba(96,165,250,.35);
}
.stat-card__icon { font-size:1.8rem; margin-bottom:.8rem; filter: drop-shadow(0 4px 14px rgba(59,130,246,.4)); }
.stat-card__number {
  font-family: var(--font-mono);
  font-size:2.6rem;
  font-weight:700;
  letter-spacing:-.02em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom:.25rem;
}
.stat-card__label { color: var(--text-secondary); font-size:.92rem; }

/* ==========================================================================
   10. FEATURED APPS
   ========================================================================== */
.apps { padding: var(--space-xl) 0; position:relative; }
.apps::before {
  content:"";
  position:absolute;
  top:20%;
  left:-20%;
  width:60vw; height:60vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.08), transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}

.apps__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}

/* App card */
.app-card { overflow:hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur); }
.app-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow-lg), var(--glow-blue);
  border-color: rgba(96,165,250,.35);
}

/* Animated gradient border */
.app-card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(59,130,246,.6), transparent 30%, transparent 70%, rgba(0,212,255,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity:0;
  transition: opacity var(--dur);
  pointer-events:none;
}
.app-card:hover::before {
  opacity:1;
  animation: border-spin 4s linear infinite;
  background: linear-gradient(135deg, rgba(59,130,246,.8), rgba(124,58,237,.8), rgba(0,212,255,.8), rgba(59,130,246,.8));
  background-size: 300% 300%;
}
@keyframes border-spin {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 300%; }
}

.app-card__screenshot {
  position:relative;
  display:flex;
  justify-content:center;
  padding:2rem 0 1.5rem;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(59,130,246,.15), transparent 60%);
  border-bottom:1px solid var(--border-glass);
  overflow:hidden;
}
.app-card__reflection {
  position:absolute;
  bottom:-40%;
  left:20%; right:20%;
  height:80px;
  background: radial-gradient(ellipse, rgba(0,212,255,.25), transparent 70%);
  filter:blur(20px);
}
.app-card:hover .mini-phone { transform: translateY(-6px) scale(1.04); }

.app-card__body { padding:1.6rem; }
.app-card__top { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }

.app-icon {
  width:52px; height:52px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:1.5rem;
  font-weight:700;
  font-family: var(--font-heading);
  color:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.15);
  flex-shrink:0;
}
.app-icon--blue   { background: linear-gradient(135deg,#2563EB,#1E40AF); }
.app-icon--green  { background: linear-gradient(135deg,#22C55E,#15803D); }
.app-icon--cyan   { background: linear-gradient(135deg,#00D4FF,#0284C7); }
.app-icon--gold   { background: linear-gradient(135deg,#F59E0B,#B45309); }
.app-icon--purple { background: linear-gradient(135deg,#8B5CF6,#6D28D9); }
.app-icon--sky    { background: linear-gradient(135deg,#38BDF8,#0EA5E9); }

.app-card__name { font-size:1.25rem; margin-bottom:.1rem; }
.app-card__category { font-size:.8rem; color: var(--accent); font-family:var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.app-card__desc { color:var(--text-secondary); font-size:.95rem; margin-bottom:1rem; }

.app-card__meta {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-bottom:1rem;
}
.app-card__meta span {
  font-family:var(--font-mono);
  font-size:.72rem;
  padding:.3rem .65rem;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-glass);
  color:var(--text-secondary);
}
.app-card__rating { color:#FBBF24 !important; font-weight:600; }

.app-card__tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; }
.tag {
  font-size:.75rem;
  padding:.3rem .8rem;
  border-radius:999px;
  background: var(--gradient-soft);
  border:1px solid rgba(124,58,237,.35);
  color:#C4B5FD;
  letter-spacing:.03em;
}

.app-card__actions { display:flex; gap:.7rem; }
.app-card__actions .btn { flex:1; }

/* Mini phone frame used in cards & modal */
.mini-phone {
  width:150px;
  border-radius:22px;
  padding:5px;
  background: linear-gradient(160deg, rgba(255,255,255,.25), rgba(255,255,255,.04) 40%, rgba(0,212,255,.18));
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 34px rgba(59,130,246,.25);
  transition: transform var(--dur) var(--ease-out);
}
.mini-phone__screen {
  border-radius:18px;
  overflow:hidden;
  aspect-ratio: 9/18;
  background: linear-gradient(180deg, #0a1026, #0d1330);
  position:relative;
}
.mini-phone__screen::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, rgba(255,255,255,.1) 0%, transparent 30%, transparent 70%, rgba(0,212,255,.05) 100%);
  pointer-events:none;
}

/* Shared app screenshot visuals */
.app-shot { padding:20px 10px 12px; display:flex; flex-direction:column; }
.app-shot__status {
  display:flex; justify-content:space-between;
  font-size:7px; font-weight:600; opacity:.8;
  margin-bottom:6px;
}
.app-shot__header {
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; font-weight:700; font-family:var(--font-heading);
  margin-bottom:6px;
}
.app-shot__plus {
  width:16px; height:16px;
  display:grid; place-items:center;
  border-radius:6px;
  background:var(--gradient);
  font-size:9px;
}
.app-shot__task {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  padding:5px 6px;
  margin-bottom:5px;
}
.app-shot__task > span {
  width:11px; height:11px;
  border-radius:50%;
  border:1px solid var(--muted);
  flex-shrink:0;
  font-size:7px;
  display:grid; place-items:center;
}
.app-shot__task--done > span { background:var(--success); border-color:var(--success); color:#fff; }
.app-shot__task b { font-size:7.5px; display:block; line-height:1.2; }
.app-shot__task small { font-size:6px; color:var(--muted); }
.app-shot__task--done b { text-decoration:line-through; opacity:.6; }

/* Fitness */
.app-shot__ring { position:relative; display:grid; place-items:center; margin:10px 0 8px; }
.app-shot__ring svg { width:74px; height:74px; }
.app-shot__ring-progress { animation: ring-draw 2s var(--ease-out) both; }
@keyframes ring-draw { from { stroke-dashoffset:326; } }
.app-shot__ring-num {
  position:absolute;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
}
.app-shot__ring-label {
  position:absolute;
  margin-top:28px;
  font-size:6px;
  letter-spacing:.14em;
  color:var(--muted);
}
.app-shot__stats { display:flex; justify-content:space-around; font-size:7px; color:var(--text-secondary); margin-top:auto; }

/* Mail */
.app-shot__mail-search {
  font-size:7.5px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--border-glass);
  border-radius:999px;
  padding:4px 8px;
  margin-bottom:8px;
  color:var(--muted);
}
.app-shot__mail {
  display:flex; gap:6px;
  padding:5px 6px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
  margin-bottom:5px;
}
.app-shot__avatar {
  width:18px; height:18px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:8px; font-weight:700;
  flex-shrink:0;
  color:#fff;
}
.app-shot__avatar--p { background:linear-gradient(135deg,#8B5CF6,#6D28D9); }
.app-shot__avatar--g { background:linear-gradient(135deg,#3B82F6,#2563EB); }
.app-shot__avatar--t { background:linear-gradient(135deg,#F59E0B,#D97706); }
.app-shot__mail b { font-size:7.5px; display:block; line-height:1.3; }
.app-shot__mail small { font-size:6px; color:var(--accent); display:block; }
.app-shot__mail p { font-size:6.5px; color:var(--muted); line-height:1.3; margin-top:1px; }

/* Finance */
.app-shot__balance { text-align:center; margin:8px 0 6px; }
.app-shot__balance small { font-size:6px; color:var(--muted); display:block; }
.app-shot__balance b { font-size:16px; font-family:var(--font-heading); }
.app-shot__trend {
  font-size:6.5px;
  color:var(--success);
  display:block;
  margin-top:2px;
}
.app-shot__chart {
  display:flex; align-items:flex-end; gap:4px;
  height:52px;
  margin-bottom:8px;
  padding:0 4px;
}
.app-shot__chart span {
  flex:1;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--primary), rgba(59,130,246,.2));
  animation: chart-grow 1.2s var(--ease-out) both;
}
.app-shot__chart span:nth-child(2) { animation-delay:.08s; }
.app-shot__chart span:nth-child(3) { animation-delay:.16s; }
.app-shot__chart span:nth-child(4) { animation-delay:.24s; }
.app-shot__chart span:nth-child(5) { animation-delay:.32s; }
.app-shot__chart span:nth-child(6) { animation-delay:.4s; }
.app-shot__chart span:nth-child(7) { animation-delay:.48s; }
@keyframes chart-grow { from { transform:scaleY(0); transform-origin:bottom; } }
.app-shot__txn {
  display:flex; justify-content:space-between;
  font-size:7px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
  border-radius:8px;
  padding:5px 7px;
  margin-bottom:4px;
}
.app-shot__txn-plus { color:var(--success); }

/* Notes */
.app-shot__note {
  border-radius:10px;
  padding:7px 8px;
  margin-bottom:6px;
  border:1px solid rgba(255,255,255,.08);
}
.app-shot__note b { font-size:8px; display:block; margin-bottom:2px; }
.app-shot__note p { font-size:6.5px; color:var(--muted); line-height:1.3; }
.app-shot__note--1 { background:rgba(59,130,246,.12); }
.app-shot__note--2 { background:rgba(124,58,237,.12); }
.app-shot__note--3 { background:rgba(0,212,255,.1); }
.app-shot__note-btn {
  margin-top:auto;
  width:20px; height:20px;
  border-radius:8px;
  background:var(--gradient);
  display:grid; place-items:center;
  font-size:10px;
  align-self:flex-end;
  box-shadow:0 4px 12px rgba(59,130,246,.35);
}

/* Sky */
.app-shot__sky-sun { font-size:30px; text-align:center; margin-top:16px; filter:drop-shadow(0 0 12px rgba(255,210,64,.7)); }
.app-shot__sky-temp { font-size:36px; font-weight:700; font-family:var(--font-heading); text-align:center; margin-top:2px; }
.app-shot__sky-city { text-align:center; font-size:8px; color:var(--text-secondary); margin-bottom:10px; }
.app-shot__sky-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px;
  margin-top:auto;
}
.app-shot__sky-row span {
  background:rgba(255,255,255,.06);
  border:1px solid var(--border-glass);
  border-radius:8px;
  padding:5px 2px;
  text-align:center;
  font-size:6.5px;
  color:var(--text-secondary);
}

/* ==========================================================================
   11. APP DETAILS MODAL
   ========================================================================== */
.modal {
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:grid;
  place-items:center;
  padding:1.2rem;
  visibility:hidden;
  opacity:0;
  transition: visibility .4s, opacity .4s var(--ease-out);
}
.modal.is-open { visibility:visible; opacity:1; }

.modal__backdrop {
  position:absolute;
  inset:0;
  background:rgba(3,6,18,.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity .4s;
}

.modal__panel {
  position:relative;
  z-index:2;
  width:100%;
  max-width:860px;
  max-height:88vh;
  overflow-y:auto;
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap:2.2rem;
  padding:2.8rem;
  border-radius:var(--radius-xl);
  background: linear-gradient(160deg, rgba(11,16,32,.92), rgba(5,8,22,.96));
  border:1px solid var(--border-glass);
  box-shadow: var(--shadow-lg), var(--glow-blue);
  transform: translateY(24px) scale(.98);
  transition: transform .45s var(--ease-out);
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }

.modal__close {
  position:absolute;
  top:1.1rem; right:1.1rem;
  width:40px; height:40px;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border-glass);
  color:var(--text-secondary);
  transition: all var(--dur) var(--ease-out);
  z-index:5;
}
.modal__close:hover {
  background:rgba(255,255,255,.14);
  color:#fff;
  transform:rotate(90deg);
}

.modal__gallery { display:flex; flex-direction:column; gap:1rem; }
.modal__main-shot {
  display:flex;
  justify-content:center;
  padding:1.6rem 0;
  border-radius:var(--radius-md);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(59,130,246,.18), transparent 65%),
    rgba(255,255,255,.02);
  border:1px solid var(--border-glass);
}
.mini-phone--lg { width:220px; }
.modal__thumbs { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.modal__thumb {
  width:52px; height:52px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border-glass);
  cursor:pointer;
  opacity:.6;
  transition:all var(--dur);
  padding:0;
}
.modal__thumb:hover { opacity:.9; transform:translateY(-2px); }
.modal__thumb.is-active { opacity:1; border-color:var(--accent); box-shadow:0 0 16px rgba(0,212,255,.35); }
.modal__thumb .mini-phone { width:52px; }
.modal__thumb .mini-phone__screen { border-radius:8px; }

.modal__content { display:flex; flex-direction:column; gap:1.1rem; }
.modal__header { display:flex; align-items:center; gap:1rem; }
.modal__title { font-size:1.7rem; }
.modal__category { font-size:.8rem; color:var(--accent); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
.modal__desc { color:var(--text-secondary); font-size:.98rem; }

.modal__facts {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.6rem;
}
.modal__fact {
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-glass);
  border-radius:12px;
  padding:.6rem .4rem;
  text-align:center;
}
.modal__fact span { display:block; font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.2rem; }
.modal__fact strong { font-family:var(--font-mono); font-size:.85rem; color:#fff; }

.modal__section h4 {
  font-size:.95rem;
  margin-bottom:.55rem;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.modal__section h4::before {
  content:"";
  width:4px; height:16px;
  border-radius:4px;
  background:var(--gradient);
}
.modal__list { display:flex; flex-wrap:wrap; gap:.5rem; }
.modal__list li {
  font-size:.8rem;
  padding:.4rem .9rem;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-glass);
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  gap:.4rem;
}
.modal__list li::before { content:"✓"; color:var(--success); font-weight:700; }
.modal__changelog { font-size:.9rem; color:var(--text-secondary); }
.modal__permissions { display:flex; flex-wrap:wrap; gap:.5rem; }
.modal__permissions span {
  font-size:.75rem;
  font-family:var(--font-mono);
  padding:.35rem .85rem;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-glass);
  color:var(--muted);
}

.modal__video {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.3rem;
  border-radius:var(--radius-md);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(59,130,246,.15), transparent 60%),
    rgba(255,255,255,.03);
  border:1px dashed rgba(96,165,250,.4);
  cursor:pointer;
  transition:all var(--dur);
}
.modal__video:hover { border-color:var(--accent); background:rgba(0,212,255,.05); }
.modal__video-icon {
  width:44px; height:44px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--gradient);
  font-size:1rem;
  color:#fff;
  box-shadow:0 8px 24px rgba(59,130,246,.4);
  flex-shrink:0;
}
.modal__video span { font-weight:600; font-size:.95rem; }
.modal__video small { margin-left:auto; color:var(--muted); font-size:.75rem; }

.modal__actions .btn { width:100%; }

body.modal-open { overflow:hidden; }

/* ==========================================================================
   12. WHY ORINEXA
   ========================================================================== */
.why { padding: var(--space-xl) 0; position:relative; }
.why::before {
  content:"";
  position:absolute;
  top:30%;
  right:-20%;
  width:50vw; height:50vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,212,255,.06), transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}
.why__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.why-card {
  padding:2rem 1.8rem;
  text-align:left;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow), border-color var(--dur-slow);
}
.why-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md), var(--glow-blue);
  border-color: rgba(0,212,255,.35);
  animation: card-float 3s var(--ease-out) infinite;
}
@keyframes card-float {
  0%,100% { transform: translateY(-8px); }
  50%     { transform: translateY(-14px); }
}
.why-card__icon {
  width:56px; height:56px;
  border-radius:16px;
  display:grid; place-items:center;
  font-size:1.6rem;
  background:var(--gradient-soft);
  border:1px solid var(--border-glass);
  margin-bottom:1.2rem;
  box-shadow:0 8px 24px rgba(59,130,246,.2);
  transition: transform var(--dur-slow) var(--ease-out);
}
.why-card:hover .why-card__icon {
  transform: rotate(-8deg) scale(1.12);
  box-shadow:0 8px 32px rgba(59,130,246,.5);
}
.why-card h3 { font-size:1.2rem; margin-bottom:.55rem; }
.why-card p { color:var(--text-secondary); font-size:.92rem; line-height:1.6; }

/* ==========================================================================
   13. DEVELOPMENT PROCESS TIMELINE
   ========================================================================== */
.process { padding: var(--space-xl) 0; position:relative; }
.timeline { position:relative; max-width:1080px; margin:0 auto; padding:2rem 0; }
.timeline__line {
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  background:rgba(255,255,255,.06);
}
.timeline__line-progress {
  position:absolute;
  top:0; left:0;
  width:100%;
  height:0%;
  background:var(--gradient);
  box-shadow:0 0 16px rgba(59,130,246,.6);
  transition:height .1s linear;
}
.timeline__item {
  position:relative;
  width:50%;
  padding:0 3rem 3rem 0;
  text-align:right;
}
.timeline__item:nth-child(even) {
  margin-left:50%;
  padding:0 0 3rem 3rem;
  text-align:left;
}
.timeline__dot {
  position:absolute;
  top:0;
  right:-14px;
  width:28px; height:28px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:.85rem;
  background:var(--bg-secondary);
  border:2px solid var(--primary);
  box-shadow:0 0 0 4px rgba(59,130,246,.15), 0 0 20px rgba(59,130,246,.4);
  z-index:2;
}
.timeline__item:nth-child(even) .timeline__dot { right:auto; left:-14px; }
.timeline__item h3 { font-size:1.15rem; margin-bottom:.3rem; }
.timeline__item p { color:var(--text-secondary); font-size:.9rem; line-height:1.55; }

/* ==========================================================================
   14. SCREENSHOTS SHOWCASE
   ========================================================================== */
.showcase { padding: var(--space-xl) 0 var(--space-lg); overflow:hidden; position:relative; }
.showcase__track-wrap {
  position:relative;
  overflow:hidden;
  padding:2rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.showcase__track {
  display:flex;
  gap:2.5rem;
  width:max-content;
  will-change: transform;
}
.showcase__slide { flex-shrink:0; text-align:center; }
.mini-phone--showcase { width:170px; }
.showcase__slide:hover .mini-phone--showcase { transform: translateY(-8px) scale(1.05); }
.showcase__label {
  display:block;
  margin-top:1rem;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--text-secondary);
  letter-spacing:.06em;
}
.showcase__slide:nth-child(even) .mini-phone--showcase { margin-top:2rem; }
.showcase__fade {
  position:absolute;
  top:0; bottom:0;
  width:10%;
  z-index:2;
  pointer-events:none;
}
.showcase__fade--left  { left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.showcase__fade--right { right:0; background:linear-gradient(-90deg, var(--bg), transparent); }

/* ==========================================================================
   15. TECHNOLOGIES
   ========================================================================== */
.tech { padding: var(--space-xl) 0; position:relative; }
.tech::after {
  content:"";
  position:absolute;
  bottom:10%;
  left:10%;
  width:40vw; height:40vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.07), transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}
.tech__grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.5rem;
}
.tech-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
  padding:1.8rem 1rem;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-glass);
  cursor:default;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow), border-color var(--dur-slow), background var(--dur-slow);
}
.tech-item:hover {
  transform: translateY(-6px) rotate(1.5deg) scale(1.05);
  background:rgba(255,255,255,.06);
  border-color:rgba(96,165,250,.4);
  box-shadow:0 16px 48px rgba(0,0,0,.4), var(--glow-blue);
}
.tech-item__icon {
  width:60px; height:60px;
  border-radius:18px;
  display:grid; place-items:center;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.2rem;
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition: transform var(--dur-slow) var(--ease-out);
}
.tech-item:hover .tech-item__icon { transform: rotate(360deg) scale(1.1); }
.tech-item__icon--html     { background:linear-gradient(135deg,#E44D26,#F16529); }
.tech-item__icon--css      { background:linear-gradient(135deg,#2965F1,#3C83E8); }
.tech-item__icon--js       { background:linear-gradient(135deg,#F7DF1E,#E8C41A); color:#1a1a1a; }
.tech-item__icon--android  { background:linear-gradient(135deg,#0F2030,#1B3A4B); }
.tech-item__icon--kotlin   { background:linear-gradient(135deg,#7F52FF,#B044F7); }
.tech-item__icon--firebase { background:linear-gradient(135deg,#FFA000,#FFCA28); }
.tech-item__icon--supabase { background:linear-gradient(135deg,#3ECF8E,#1E9E6E); }
.tech-item__icon--sqlite   { background:linear-gradient(135deg,#0F80CC,#3BA7E9); }
.tech-item__icon--material { background:linear-gradient(135deg,#E91E63,#9C27B0); }
.tech-item__icon--github   { background:linear-gradient(135deg,#24292E,#57606A); }
.tech-item__icon--play     { background:linear-gradient(135deg,#00D4FF,#0284C7); }
.tech-item__icon svg { transition:transform var(--dur-slow) var(--ease-out); }
.tech-item:hover .tech-item__icon svg { transform:rotate(360deg); }
.tech-item__label { font-size:.85rem; color:var(--text-secondary); font-family:var(--font-mono); }

/* ==========================================================================
   16. TESTIMONIALS
   ========================================================================== */
.testimonials { padding: var(--space-xl) 0; position:relative; }
.testimonials__viewport {
  max-width:720px;
  margin:0 auto;
  overflow:hidden;
  position:relative;
}
.testimonials__track {
  display:flex;
  transition: transform .7s var(--ease-out);
}
.testimonial {
  flex:0 0 100%;
  padding:2.4rem 2.6rem;
  text-align:center;
  scroll-snap-align:center;
}
.testimonial__stars {
  color:#FBBF24;
  font-size:1.1rem;
  letter-spacing:.2em;
  margin-bottom:1.2rem;
  filter: drop-shadow(0 0 12px rgba(251,191,36,.4));
}
.testimonial__text {
  font-size:1.1rem;
  color:var(--text);
  line-height:1.7;
  margin-bottom:1.6rem;
  font-weight:400;
}
.testimonial__author { display:flex; align-items:center; justify-content:center; gap:.8rem; }
.testimonial__avatar {
  width:46px; height:46px;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:700;
  font-size:.9rem;
  color:#fff;
  background:var(--av, var(--gradient));
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.2);
}
.testimonial__author strong { display:block; font-size:.95rem; }
.testimonial__author small { color:var(--muted); font-size:.78rem; }
.testimonials__nav {
  display:flex;
  justify-content:center;
  margin-top:1.6rem;
  gap:.5rem;
  flex-wrap:wrap;
}
.testimonials__dot {
  width:8px; height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  transition: all var(--dur) var(--ease-out);
  padding:0;
}
.testimonials__dot.is-active {
  width:26px;
  background:var(--gradient);
  box-shadow:0 0 12px rgba(59,130,246,.5);
}

/* ==========================================================================
   17. ABOUT
   ========================================================================== */
.about { padding: var(--space-xl) 0; position:relative; overflow:hidden; }
.about::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 50%, rgba(59,130,246,.08), transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 50%, rgba(124,58,237,.08), transparent 65%);
  pointer-events:none;
}
.about__grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:4rem;
  align-items:center;
}
.about__visual { position:relative; min-height:480px; }
.about__panel {
  position:relative;
  height:100%;
  min-height:420px;
  border-radius:var(--radius-xl);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(59,130,246,.14), transparent 60%),
    rgba(255,255,255,.02);
  border:1px solid var(--border-glass);
  backdrop-filter: blur(12px);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.about__glow {
  position:absolute;
  inset:10%;
  background:var(--gradient-soft);
  filter:blur(80px);
  z-index:-1;
  animation: glow-breathe 6s ease-in-out infinite;
}
.about__orbit { position:relative; width:280px; height:280px; }
.about__orbit-ring {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(0,212,255,.18);
  animation: orbit-spin 14s linear infinite;
}
.about__orbit-ring--2 { inset:34px; border-color:rgba(124,58,237,.22); animation-duration:11s; animation-direction:reverse; }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
.about__orbit-core {
  position:absolute;
  inset:82px;
  border-radius:22px;
  display:grid; place-items:center;
  background:rgba(11,16,32,.7);
  border:1px solid var(--border-glass);
  box-shadow:0 0 44px rgba(59,130,246,.5);
  z-index:2;
}
.about__orbit-dot {
  position:absolute;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 18px var(--accent);
  top:-4px; left:50%;
  transform:translateX(-50%);
}
.about__orbit-dot--2 { top:auto; bottom:-4px; background:var(--secondary); box-shadow:0 0 18px var(--secondary); }
.about__orbit-dot--3 { top:50%; left:-4px; transform:translateY(-50%); background:var(--primary); box-shadow:0 0 18px var(--primary); }
.about__badge {
  position:absolute;
  padding:.7rem 1.1rem;
  border-radius:14px;
  background:rgba(11,16,32,.85);
  border:1px solid var(--border-glass);
  box-shadow:var(--shadow-md), var(--glow-blue);
  backdrop-filter:blur(12px);
  animation:chip-float 5s ease-in-out infinite;
}
.about__badge strong { display:block; font-family:var(--font-mono); font-size:1.3rem; color:var(--text); }
.about__badge span { font-size:.7rem; color:var(--muted); letter-spacing:.05em; }
.about__badge--1 { top:12%; left:8%; }
.about__badge--2 { top:34%; right:4%; animation-delay:1.4s; }
.about__badge--3 { bottom:10%; left:26%; animation-delay:2.4s; }

.about__content { position:relative; z-index:2; }
.about__block {
  display:flex;
  gap:1.2rem;
  padding:1.4rem 1.8rem;
  margin-bottom:1rem;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-glass);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.about__block:hover {
  transform:translateX(8px);
  border-color:rgba(96,165,250,.35);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.about__icon {
  font-size:1.4rem;
  flex-shrink:0;
  filter:drop-shadow(0 4px 12px rgba(59,130,246,.4));
}
.about__block h3 { font-size:1.1rem; margin-bottom:.3rem; }
.about__block p { color:var(--text-secondary); font-size:.92rem; line-height:1.6; }

/* ==========================================================================
   18. FAQ
   ========================================================================== */
.faq { padding: var(--space-xl) 0; }
.faq__list { max-width:780px; margin:0 auto; }
.faq__item {
  margin-bottom:1rem;
  overflow:hidden;
  border-radius:var(--radius-md);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.faq__item:hover { border-color:rgba(96,165,250,.3); }
.faq__item[open] {
  border-color:rgba(0,212,255,.35);
  box-shadow:var(--shadow-md), var(--glow-cyan);
}
.faq__question {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.4rem 1.6rem;
  cursor:pointer;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:1.05rem;
  list-style:none;
  user-select:none;
}
.faq__question::-webkit-details-marker { display:none; }
.faq__icon {
  position:relative;
  width:28px; height:28px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--border-glass);
  transition: all var(--dur) var(--ease-out);
}
.faq__icon::before,
.faq__icon::after {
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:var(--accent);
  border-radius:2px;
  transition: all var(--dur) var(--ease-out);
}
.faq__icon::before { width:12px; height:2px; }
.faq__icon::after  { width:2px; height:12px; }
.faq__item[open] .faq__icon {
  background:var(--gradient);
  border-color:transparent;
}
.faq__item[open] .faq__icon::after { transform:translate(-50%,-50%) scaleY(0); }
.faq__item[open] .faq__icon::before { background:#fff; }
.faq__answer { padding:0 1.6rem 1.5rem; }
.faq__answer p { color:var(--text-secondary); font-size:.96rem; line-height:1.7; }
.faq__answer a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   19. CONTACT
   ========================================================================== */
.contact { padding: var(--space-xl) 0 var(--space-xl); position:relative; }
.contact__grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:start;
}
.contact__card { padding:2.4rem; }
.contact__form { display:flex; flex-direction:column; gap:1.3rem; }

.field { position:relative; }
.field input,
.field textarea {
  width:100%;
  padding:1rem 1.1rem;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-glass);
  color:var(--text);
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
  resize:vertical;
}
.field input:focus,
.field textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,212,255,.15), 0 0 24px rgba(0,212,255,.15);
  background:rgba(255,255,255,.06);
}
.field label {
  position:absolute;
  left:1.1rem; top:.95rem;
  color:var(--muted);
  font-size:.95rem;
  pointer-events:none;
  padding:0 .3rem;
  border-radius:6px;
  background:transparent;
  transition: all var(--dur) var(--ease-out);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  top:-.6rem;
  font-size:.72rem;
  color:var(--accent);
  background:var(--bg-secondary);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.contact__submit { align-self:flex-start; }
.contact__status { font-size:.88rem; color:var(--success); min-height:1.3em; }
.contact__status.is-error { color:#EF4444; }

.contact__info { display:flex; flex-direction:column; gap:1rem; }
.contact__link {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.4rem;
  border-radius:var(--radius-md);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.contact__link:hover {
  transform:translateX(6px);
  border-color:rgba(96,165,250,.4);
  box-shadow:var(--shadow-sm), var(--glow-blue);
}
.contact__link-icon {
  width:44px; height:44px;
  border-radius:13px;
  display:grid; place-items:center;
  font-size:1.15rem;
  background:var(--gradient-soft);
  border:1px solid var(--border-glass);
  flex-shrink:0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.contact__link:hover .contact__link-icon { transform:rotate(-8deg) scale(1.1); }
.contact__link strong { display:block; font-size:.92rem; }
.contact__link span { display:block; font-size:.8rem; color:var(--muted); }

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.footer {
  border-top:1px solid var(--border-glass);
  background:
    radial-gradient(ellipse 60% 60% at 50% 120%, rgba(59,130,246,.08), transparent 65%),
    var(--bg-secondary);
  padding:var(--space-lg) 0 2rem;
}
.footer__top {
  display:grid;
  grid-template-columns:1.4fr .7fr .7fr .8fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--border-glass);
}
.footer__logo {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.4rem;
  margin-bottom:1rem;
}
.footer__logo svg { filter:drop-shadow(0 0 16px rgba(59,130,246,.45)); }
.footer__desc { color:var(--muted); font-size:.92rem; max-width:300px; line-height:1.7; }
.footer__col h3,
.footer__social h3 {
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  margin-bottom:1.1rem;
  font-family:var(--font-body);
  font-weight:600;
}
.footer__col li { margin-bottom:.6rem; }
.footer__col a {
  color:var(--text-secondary);
  font-size:.92rem;
  transition: color var(--dur), padding-left var(--dur);
  position:relative;
}
.footer__col a:hover { color:var(--accent); padding-left:6px; }
.footer__social-row { display:flex; gap:.7rem; }
.footer__social-row a {
  width:42px; height:42px;
  border-radius:12px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-glass);
  color:var(--text-secondary);
  font-size:1rem;
  transition: all var(--dur) var(--ease-out);
}
.footer__social-row a:hover {
  background:var(--gradient);
  color:#fff;
  transform:translateY(-4px) rotate(-6deg);
  box-shadow:0 10px 28px rgba(59,130,246,.4);
}
.footer__bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1.8rem;
  color:var(--muted);
  font-size:.85rem;
}
.footer__tagline { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; }

/* ==========================================================================
   21. CURSOR GLOW
   ========================================================================== */
.cursor-glow {
  position:fixed;
  top:0; left:0;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.08), rgba(124,58,237,.05) 40%, transparent 70%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:var(--z-cursor);
  opacity:0;
  transition:opacity .6s;
  will-change:transform;
  mix-blend-mode:screen;
}
@media (hover:hover) and (pointer:fine) {
  .cursor-glow { opacity:1; }
}

/* ==========================================================================
   22. SCROLL REVEAL ANIMATIONS
   ========================================================================== */
.reveal {
  opacity:0;
  transform: translateY(36px);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out),
    filter .9s var(--ease-out);
  transition-delay: calc(var(--delay, 0) * 120ms);
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

/* Parallax layers inside hero */
[data-depth] { will-change: transform; }

/* ==========================================================================
   23. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1100px) {
  .apps__grid { grid-template-columns:repeat(2,1fr); }
  .tech__grid { grid-template-columns:repeat(4,1fr); }
  .footer__top { grid-template-columns:1.2fr .7fr .7fr; }
  .footer__social { grid-column:1 / -1; }
}

@media (max-width: 900px) {
  .hero__content { grid-template-columns:1fr; gap:2rem; }
  .hero__visual { min-height:520px; order:2; }
  .hero__text { order:1; text-align:center; }
  .hero__subtitle { margin-inline:auto; }
  .hero__actions { justify-content:center; }
  .hero__metrics { justify-content:center; }
  .phone-mock--front { left:10%; }
  .phone-mock--back { right:6%; }

  .stats__grid { grid-template-columns:repeat(2,1fr); }
  .why__grid { grid-template-columns:repeat(2,1fr); }
  .contact__grid { grid-template-columns:1fr; }
  .about__grid { grid-template-columns:1fr; gap:2rem; }
  .about__visual { min-height:420px; }

  .modal__panel { grid-template-columns:1fr; max-width:560px; gap:1.6rem; }
  .modal__gallery { flex-direction:row; }
  .modal__main-shot { flex:1; }
  .modal__thumbs { flex-direction:column; }

  /* Mobile nav */
  .navbar__links {
    position:fixed;
    top:0; right:-100%;
    width:min(320px, 82vw);
    height:100vh;
    flex-direction:column;
    justify-content:center;
    gap:2.2rem;
    background:rgba(5,8,22,.92);
    backdrop-filter:blur(28px);
    border-left:1px solid var(--border-glass);
    transition:right .5s var(--ease-out);
    z-index:5;
  }
  .navbar__links.is-open { right:0; }
  .navbar__link { font-size:1.25rem; }
  .navbar__toggle { display:flex; }
  .navbar__actions { margin-right:auto; }
}

@media (max-width: 640px) {
  :root { --nav-height: 66px; --fs-hero: clamp(38px, 10vw, 48px); }
  .section-head { margin-bottom:2rem; }
  .section-title { font-size:clamp(28px, 8vw, 36px); }

  .apps__grid { grid-template-columns:1fr; }
  .why__grid { grid-template-columns:1fr; }
  .tech__grid { grid-template-columns:repeat(3,1fr); }
  .tech-item { padding:1.2rem .6rem; }
  .stats__grid { gap:1rem; }
  .stat-card { padding:1.6rem 1rem; }
  .stat-card__number { font-size:2.1rem; }

  /* Timeline becomes vertical left line */
  .timeline__line { left:14px; transform:none; }
  .timeline__item,
  .timeline__item:nth-child(even) {
    width:100%;
    margin-left:0;
    padding:0 0 2.4rem 44px;
    text-align:left;
  }
  .timeline__dot,
  .timeline__item:nth-child(even) .timeline__dot {
    left:0; right:auto;
  }

  .hero__visual { min-height:460px; }
  .phone-mock--front { width:190px; left:2%; }
  .phone-mock--back { width:150px; }
  .hero__chip--3 { bottom:0; left:14%; }
  .hero__scroll-hint { display:none; }

  .showcase__track { gap:1.4rem; }
  .mini-phone--showcase { width:140px; }

  .modal__panel { padding:1.6rem; max-height:92vh; }
  .modal__facts { grid-template-columns:repeat(2,1fr); }
  .modal__gallery { flex-direction:column; }
  .modal__thumbs { flex-direction:row; }
  .modal__video small { display:none; }

  .footer__top { grid-template-columns:1fr; }
  .footer__bottom { justify-content:center; text-align:center; }

  .contact__card { padding:1.6rem; }
  .testimonial { padding:1.8rem 1.4rem; }
  .testimonial__text { font-size:1rem; }
}

@media (max-width: 420px) {
  .tech__grid { grid-template-columns:repeat(2,1fr); }
  .hero__metrics { gap:1rem; }
  .hero__metric-divider { height:30px; }
  .navbar__actions .btn span { display:none; }
  .navbar__actions .btn { padding:.6rem .85rem; }
}

/* Larger screens */
@media (min-width: 1600px) {
  :root { --container: 1320px; --fs-hero: clamp(72px, 5vw, 90px); }
}

/* ==========================================================================
   24. REDUCED MOTION (Accessibility)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal { opacity:1; transform:none; filter:none; }
  .hero__aurora, .hero__mesh, .hero__rays, .hero__ring,
  .phone-glow, .hero__mouse-glow, .cursor-glow { display:none; }
  html { scroll-behavior:auto; }
}