/* ===================================
   TRIDARIUS LTD — Premium Design System v2
   3D Hero + Device Mockups + Animations
   =================================== */

/* ─── 1. Custom Properties ─── */
:root {
  --primary: #0A7AFF;
  --primary-light: #3D9AFF;
  --primary-dark: #0A5FCC;
  --primary-glow: rgba(10, 122, 255, 0.25);
  --secondary: #8C9BAA;
  --accent: #D4A636;
  --accent-light: #E8C46A;
  --accent-glow: rgba(212, 166, 54, 0.2);
  --bg-dark: #0A0E1A;
  --bg-surface: #111827;
  --bg-surface-2: #1A2332;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --text-primary: #F0F2F5;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(10, 122, 255, 0.35);
  --border-accent: rgba(212, 166, 54, 0.3);
  --glass-bg: rgba(17, 24, 39, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(20px);
  --success: #22C55E;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --section-padding: clamp(64px, 10vw, 120px);
  --container-max: 1200px;
  --container-padding: clamp(20px, 5vw, 40px);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 500ms cubic-bezier(.4,0,.2,1);
  --shadow-glow-blue: 0 0 40px rgba(10,122,255,0.15);
  --shadow-glow-gold: 0 0 40px rgba(212,166,54,0.1);
  --z-cursor: 9999;
  --z-nav: 1000;
  --z-mobile-menu: 999;
  --z-hero-content: 10;
  --z-hero-canvas: 1;
}

/* ─── 2. Reset & Base ─── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; scroll-padding-top:80px; }
body { font-family:var(--font-body); background:var(--bg-dark); color:var(--text-primary); line-height:1.6; overflow-x:hidden; }
@media (hover:hover) and (pointer:fine) { body,a,button,input,textarea,select,label { cursor:none; } }
a { text-decoration:none; color:inherit; transition:color var(--transition-fast); }
button { border:none; outline:none; font-family:inherit; background:transparent; }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }
input,textarea,select { font-family:inherit; font-size:inherit; }
::selection { background:var(--primary); color:#fff; }

/* ─── 3. Typography ─── */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:700; line-height:1.15; color:var(--text-primary); }
h1 { font-size:clamp(2.2rem, 5vw, 3.8rem); letter-spacing:-0.02em; }
h2 { font-size:clamp(1.875rem, 4vw, 2.75rem); letter-spacing:-0.015em; }
h3 { font-size:clamp(1.2rem, 2.5vw, 1.4rem); }
p { color:var(--text-secondary); line-height:1.7; }
.gradient-text {
  background:linear-gradient(135deg, var(--primary-light), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ─── 4. Layout ─── */
.container { max-width:var(--container-max); margin:0 auto; padding:0 var(--container-padding); width:100%; }
section { padding:var(--section-padding) 0; position:relative; }
.section-header { text-align:center; margin-bottom:clamp(40px, 6vw, 72px); }
.section-label {
  display:inline-flex; align-items:center; gap:12px;
  font-size:0.8125rem; font-weight:600; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent); margin-bottom:20px;
}
.section-label::before { content:''; width:40px; height:2px; background:linear-gradient(90deg, transparent, var(--accent)); }
.section-subtitle { font-size:clamp(1rem, 2vw, 1.125rem); max-width:600px; margin:12px auto 0; }
.section-divider { height:1px; background:linear-gradient(90deg, transparent, var(--border-subtle), transparent); border:none; margin:0; }

/* ─── Buttons ─── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 32px; border-radius:var(--radius-md);
  font-family:var(--font-heading); font-weight:600; font-size:0.9375rem;
  transition:all var(--transition-base); position:relative; overflow:hidden; white-space:nowrap;
}
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.08)); opacity:0; transition:opacity var(--transition-base); }
.btn:hover::after { opacity:1; }
.btn-primary { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; box-shadow:0 4px 16px rgba(10,122,255,0.2); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(10,122,255,0.35); }
.btn-secondary { background:transparent; color:var(--text-primary); border:1px solid var(--border-light); }
.btn-secondary:hover { border-color:var(--primary); background:rgba(10,122,255,0.08); transform:translateY(-2px); }
.btn-accent { background:linear-gradient(135deg, var(--accent), #B8922E); color:#0A0E1A; box-shadow:0 4px 16px var(--accent-glow); }
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(212,166,54,0.35); }

/* ─── 5. Navigation ─── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); padding:20px 0; transition:all var(--transition-base); }
.navbar.scrolled { padding:12px 0; background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--glass-border); }
.navbar .container { display:flex; align-items:center; justify-content:space-between; }
.nav-logo img { height:44px; width:auto; transition:height var(--transition-base); }
.navbar.scrolled .nav-logo img { height:36px; }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a { font-family:var(--font-heading); font-size:0.875rem; font-weight:500; color:var(--text-secondary); letter-spacing:0.02em; position:relative; padding:4px 0; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--primary); transition:width var(--transition-base); }
.nav-links a:hover, .nav-links a.active { color:var(--text-primary); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:16px; }
.lang-toggle { display:flex; align-items:center; background:rgba(255,255,255,0.06); border-radius:var(--radius-full); padding:3px; }
.lang-btn { padding:6px 14px; border-radius:var(--radius-full); font-size:0.8125rem; font-weight:600; color:var(--text-muted); transition:all var(--transition-fast); font-family:var(--font-heading); }
.lang-btn.active { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(10,122,255,0.3); }
.lang-btn:hover:not(.active) { color:var(--text-primary); }
.nav-cta { padding:10px 24px !important; font-size:0.8125rem !important; }
.nav-burger { display:none; flex-direction:column; gap:5px; width:28px; background:transparent; padding:4px; }
.nav-burger span { display:block; height:2px; background:var(--text-primary); border-radius:2px; transition:all var(--transition-base); transform-origin:center; }
.nav-burger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-burger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-burger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.mobile-menu { display:none; position:fixed; inset:0; background:rgba(10,14,26,0.95); backdrop-filter:blur(30px); z-index:var(--z-mobile-menu); flex-direction:column; align-items:center; justify-content:center; gap:32px; opacity:0; transition:opacity var(--transition-slow); pointer-events:none; }
.mobile-menu.open { display:flex; opacity:1; pointer-events:all; }
.mobile-menu a { font-family:var(--font-heading); font-size:1.75rem; font-weight:600; color:var(--text-secondary); transition:color var(--transition-fast); }
.mobile-menu a:hover { color:var(--primary-light); }

/* ─── 6. HERO (Vertical: Logo → Text → Devices) ─── */
.hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding-top:90px;
  padding-bottom:80px;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(10,122,255,0.13) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(212,166,54,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(10,122,255,0.07) 0%, transparent 40%),
    var(--bg-dark);
}
#hero-canvas { position:absolute; inset:0; z-index:var(--z-hero-canvas); pointer-events:none; }

/* —— Hero Top: Logo + Text centered —— */
.hero-top {
  position:relative;
  z-index:var(--z-hero-content);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.hero-logo-wrap {
  margin-bottom:28px;
  animation:fadeInDown 0.9s ease both;
}
.hero-logo-big {
  height:clamp(100px, 14vw, 180px);
  width:auto;
  filter:
    drop-shadow(0 0 40px rgba(10,122,255,0.35))
    drop-shadow(0 0 80px rgba(212,166,54,0.2))
    drop-shadow(0 8px 30px rgba(0,0,0,0.4));
  animation:float 5s ease-in-out infinite;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px; padding:8px 20px;
  background:rgba(212,166,54,0.1); border:1px solid rgba(212,166,54,0.25);
  border-radius:var(--radius-full); color:var(--accent-light); font-size:0.8125rem;
  font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:24px;
  animation:fadeInUp 0.8s 0.3s ease both;
}
.hero-badge svg { width:16px; height:16px; fill:var(--accent); }
.hero h1 { margin-bottom:16px; animation:fadeInUp 0.8s 0.45s ease both; }
.hero-subtitle {
  font-size:clamp(1rem, 2vw, 1.2rem); margin-bottom:32px;
  animation:fadeInUp 0.8s 0.6s ease both;
  color:var(--text-secondary);
}
.hero-cta { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; animation:fadeInUp 0.8s 0.75s ease both; }

.hero-scroll { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:var(--z-hero-content); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-muted); font-size:0.75rem; letter-spacing:2px; text-transform:uppercase; animation:fadeInUp 0.8s 1.2s ease both; }
.scroll-indicator { width:24px; height:40px; border:2px solid var(--border-light); border-radius:12px; position:relative; }
.scroll-indicator::after { content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:var(--primary); border-radius:2px; animation:scrollBounce 2s infinite; }

/* —— Device Showcase Row —— */
.hero-devices {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(16px, 3vw, 48px);
  width:100%;
  max-width:1100px;
  padding:clamp(32px, 5vw, 56px) clamp(16px, 4vw, 40px) 0;
  position:relative;
  z-index:var(--z-hero-content);
  animation:fadeInUp 1s 0.9s ease both;
}

/* Generic device wrapper */
.hero-device { display:flex; flex-direction:column; align-items:center; gap:12px; }
.hd-label {
  font-size:0.75rem; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--text-muted); opacity:0.8;
}

/* ─── CSS Phone Mockup ─── */
.hero-phone { flex-shrink:0; }
.hero-phone-left { transform:rotate(-6deg) translateY(20px); animation:heroPhoneLeft 6s ease-in-out infinite; }
.hero-phone-right { transform:rotate(6deg) translateY(20px); animation:heroPhoneRight 6s ease-in-out infinite 0.8s; }

.hd-phone-frame {
  width:clamp(130px, 14vw, 185px);
  background:linear-gradient(160deg, #252545 0%, #1a1a30 60%, #141428 100%);
  border-radius:36px;
  padding:12px 8px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 20px 60px rgba(0,0,0,0.6),
    0 0 50px rgba(10,122,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.12);
  position:relative;
  transition:transform 0.4s ease, box-shadow 0.4s ease;
}
.hero-phone:hover .hd-phone-frame {
  transform:translateY(-10px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 30px 80px rgba(0,0,0,0.7),
    0 0 70px rgba(10,122,255,0.14);
}
.hd-phone-notch {
  width:50px; height:10px;
  background:#0A0E1A;
  border-radius:0 0 10px 10px;
  margin:0 auto 8px;
  position:relative; z-index:2;
}
.hd-phone-screen {
  border-radius:20px;
  overflow:hidden;
  background:#0A0E1A;
  aspect-ratio:9/19.5;
  display:flex; align-items:stretch;
}
.hd-phone-screen img {
  width:100%; height:100%;
  object-fit:cover; object-position:top;
  display:block;
}
.hd-phone-btn {
  width:3px; height:50px;
  background:rgba(255,255,255,0.06);
  border-radius:2px;
  position:absolute; right:-3px; top:80px;
}

/* ─── CSS Laptop Mockup ─── */
.hero-laptop {
  flex-shrink:0;
  animation:heroLaptop 7s ease-in-out infinite 0.4s;
}
.hd-laptop-screen-wrap {
  width:clamp(340px, 40vw, 520px);
  background:linear-gradient(160deg, #252545 0%, #1a1a30 100%);
  border-radius:16px 16px 0 0;
  padding:10px 10px 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07),
    0 -4px 30px rgba(10,122,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.1);
  position:relative;
}
.hd-laptop-cam {
  width:8px; height:8px;
  background:#22C55E;
  border-radius:50%;
  margin:0 auto 6px;
  box-shadow:0 0 8px rgba(34,197,94,0.5);
}
.hd-laptop-display {
  border-radius:8px 8px 0 0;
  overflow:hidden;
  background:#0A0E1A;
  aspect-ratio:16/10;
  transition:box-shadow 0.4s ease;
}
.hero-laptop:hover .hd-laptop-display {
  box-shadow:0 0 40px rgba(10,122,255,0.12);
}
.hd-laptop-display img {
  width:100%; height:100%;
  object-fit:cover; object-position:top;
  display:block;
}
.hd-laptop-hinge {
  width:clamp(340px, 40vw, 520px);
  height:4px;
  background:linear-gradient(90deg, #111120, #2a2a45, #111120);
  position:relative;
}
.hd-laptop-base {
  width:clamp(370px, 43vw, 555px);
  height:clamp(28px, 3.5vw, 42px);
  background:linear-gradient(180deg, #1e1e38 0%, #141428 100%);
  border-radius:0 0 12px 12px;
  padding:6px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 20px 60px rgba(0,0,0,0.5);
}
.hd-laptop-keyboard {
  width:80%; height:8px;
  background:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 8px,
    transparent 8px, transparent 10px
  );
  border-radius:2px;
}
.hd-laptop-touchpad {
  width:28%; height:5px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:3px;
}

@keyframes heroPhoneLeft {
  0%,100% { transform:rotate(-6deg) translateY(20px); }
  50% { transform:rotate(-4deg) translateY(10px); }
}
@keyframes heroPhoneRight {
  0%,100% { transform:rotate(6deg) translateY(20px); }
  50% { transform:rotate(4deg) translateY(10px); }
}
@keyframes heroLaptop {
  0%,100% { transform:translateY(0px); }
  50% { transform:translateY(-10px); }
}

/* ─── 8. Services ─── */
#services {
  background:radial-gradient(ellipse at 0% 100%, rgba(10,122,255,0.06) 0%, transparent 40%), var(--bg-dark);
}
.services-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-bottom:32px; }
.service-card {
  background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:32px 24px; transition:all var(--transition-base); position:relative; overflow:hidden;
}
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--primary), var(--accent)); opacity:0; transition:opacity var(--transition-base); }
.service-card:hover { background:var(--bg-card-hover); border-color:var(--border-hover); transform:translateY(-8px); box-shadow:var(--shadow-glow-blue); }
.service-card:hover::before { opacity:1; }
.service-icon { width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:rgba(10,122,255,0.1); margin-bottom:16px; transition:all var(--transition-base); }
.service-icon svg { width:26px; height:26px; fill:var(--primary-light); }
.service-card:hover .service-icon { background:rgba(10,122,255,0.2); box-shadow:0 0 20px var(--primary-glow); }
.service-card h3 { margin-bottom:8px; }
.service-card p { font-size:0.9rem; }
.bespoke-card {
  display:flex; align-items:center; gap:32px;
  background:linear-gradient(135deg, rgba(212,166,54,0.05), rgba(10,122,255,0.05));
  border:1px solid rgba(212,166,54,0.15); border-radius:var(--radius-xl); padding:40px 36px;
  position:relative; overflow:hidden;
}
.bespoke-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), var(--primary), var(--accent)); }
.bespoke-card:hover { border-color:var(--border-accent); box-shadow:var(--shadow-glow-gold); }
.bespoke-icon { width:64px; height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-lg); background:rgba(212,166,54,0.1); }
.bespoke-icon svg { width:32px; height:32px; fill:var(--accent); }
.bespoke-content { flex:1; }
.bespoke-content h3 { font-size:clamp(1.2rem, 2.5vw, 1.5rem); margin-bottom:10px; }
.bespoke-note { display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:8px 16px; background:rgba(212,166,54,0.08); border-radius:var(--radius-full); color:var(--accent-light); font-size:0.875rem; font-weight:500; font-style:italic; }

/* ─── 9. Stats Strip ─── */
.stats-strip { background:var(--bg-surface); padding:clamp(40px, 6vw, 64px) 0; }
.stats-strip::before, .stats-strip::after { content:''; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--border-subtle), transparent); }
.stats-strip::before { top:0; }
.stats-strip::after { bottom:0; }
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.stat-card { text-align:center; padding:28px 16px; border-radius:var(--radius-lg); background:rgba(255,255,255,0.02); border:1px solid var(--border-subtle); transition:all var(--transition-base); }
.stat-card:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.stat-number { font-family:var(--font-heading); font-size:clamp(2rem, 4vw, 2.75rem); font-weight:700; color:var(--primary-light); line-height:1; margin-bottom:6px; }
.stat-suffix { color:var(--accent); }
.stat-label { font-size:0.8125rem; color:var(--text-muted); font-weight:500; }

/* ─── 10. PORTFOLIO — Device Mockups ─── */
#portfolio { background:var(--bg-dark); }

.portfolio-project {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
  align-items:center;
  margin-bottom:clamp(60px, 10vw, 100px);
  position:relative;
}
.portfolio-project-reverse { grid-template-columns:1fr 1.3fr; }
.portfolio-project-reverse .project-screenshots { order:2; }
.portfolio-project-reverse .project-info { order:1; }

/* Project Info */
.project-info { padding:8px 0; }
.project-client {
  font-family:var(--font-heading); font-size:clamp(1.5rem, 3vw, 2.25rem);
  font-weight:700; color:var(--text-primary); letter-spacing:0.06em;
  display:block; margin-bottom:4px;
}
.project-type {
  font-size:0.8rem; color:var(--accent); text-transform:uppercase;
  letter-spacing:2px; font-weight:600; display:block; margin-bottom:16px;
}
.project-info h3 { font-size:clamp(1.1rem, 2vw, 1.35rem); margin-bottom:12px; }
.project-info p { font-size:0.9rem; margin-bottom:16px; }
.tech-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tech-badge { padding:4px 12px; border-radius:var(--radius-full); background:rgba(10,122,255,0.1); border:1px solid rgba(10,122,255,0.2); color:var(--primary-light); font-size:0.75rem; font-weight:500; }
.project-platform { display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--text-muted); font-weight:500; }
.project-platform svg { fill:var(--text-muted); }

/* Screenshots Container */
.project-screenshots {
  position:relative;
  min-height:400px;
  perspective:1200px;
}

/* ── CSS Laptop Mockup ── */
.screenshot-laptop {
  position:relative;
  z-index:2;
  transform:perspective(1200px) rotateY(-8deg) rotateX(3deg);
  transition:transform 0.6s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) {
  .screenshot-laptop:hover {
    transform:perspective(1200px) rotateY(-3deg) rotateX(1deg) scale(1.02);
  }
}
.laptop-frame {
  background:#1a1a30;
  border-radius:12px 12px 0 0;
  padding:8px 8px 0;
  box-shadow:0 10px 40px rgba(0,0,0,0.5), 0 0 60px rgba(10,122,255,0.08);
}
.laptop-screen {
  background:#0A0E1A;
  border-radius:6px 6px 0 0;
  overflow:hidden;
  aspect-ratio:16/10;
}
.laptop-screen img { width:100%; height:100%; object-fit:cover; }
.laptop-base {
  height:14px;
  background:linear-gradient(180deg, #222240, #1a1a30);
  border-radius:0 0 8px 8px;
  position:relative;
}
.laptop-base::after {
  content:'';
  position:absolute;
  top:4px; left:50%; transform:translateX(-50%);
  width:60px; height:4px;
  background:rgba(255,255,255,0.08); border-radius:4px;
}

/* Floating extra screenshots */
.screenshot-float {
  position:absolute;
  width:45%;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,0.4), 0 0 30px rgba(10,122,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  transition:transform 0.5s ease, box-shadow 0.5s ease;
  z-index:3;
}
@media (hover: hover) {
  .screenshot-float:hover {
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 16px 50px rgba(0,0,0,0.5), 0 0 40px rgba(10,122,255,0.1);
  }
}
.screenshot-float img { width:100%; display:block; }
.screenshot-float-1 { bottom:-20px; right:-10px; animation:float 5s ease-in-out infinite; }
.screenshot-float-2 { top:10px; right:-30px; width:35%; animation:float 6s ease-in-out infinite 1s; }

/* ── CSS Phone Mockup ── */
.screenshot-phone {
  position:absolute;
  transition:transform 0.6s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) {
  .screenshot-phone:hover { transform:translateY(-10px) scale(1.03) !important; }
}

.phone-frame {
  background:linear-gradient(145deg, #2a2a45, #1a1a30);
  border-radius:28px;
  padding:10px;
  box-shadow:0 15px 50px rgba(0,0,0,0.5), 0 0 50px rgba(10,122,255,0.06), inset 0 1px 0 rgba(255,255,255,0.08);
  position:relative;
}
.phone-frame::before {
  content:'';
  position:absolute;
  top:6px; left:50%; transform:translateX(-50%);
  width:40px; height:5px;
  background:rgba(255,255,255,0.08); border-radius:3px;
}
.phone-frame-dark { background:linear-gradient(145deg, #1a1a2e, #0e0e20); }
.phone-screen {
  border-radius:20px;
  overflow:hidden;
  background:#0A0E1A;
}
.phone-screen img { width:100%; display:block; }

.screenshot-phone-main {
  left:50%; top:50%; transform:translate(-50%, -50%);
  width:35%; z-index:3;
  animation:float 4s ease-in-out infinite;
}
.screenshot-phone-secondary {
  left:5%; top:15%; width:28%; z-index:2;
  transform:rotate(-8deg);
  animation:float 5s ease-in-out infinite 0.5s;
}
.screenshot-phone-tertiary {
  right:5%; top:20%; width:28%; z-index:2;
  transform:rotate(6deg);
  animation:float 5.5s ease-in-out infinite 1s;
}

/* Portfolio CTA */
.portfolio-cta { text-align:center; margin-top:20px; }

/* ─── 11. Process ─── */
#process {
  background:radial-gradient(ellipse at 100% 0%, rgba(212,166,54,0.06) 0%, transparent 40%), var(--bg-dark);
}
.process-timeline { max-width:700px; margin:0 auto; position:relative; padding-left:60px; }
.process-timeline::before { content:''; position:absolute; left:23px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, var(--primary), var(--accent), var(--primary)); opacity:0.3; }
.process-step { position:relative; padding-bottom:40px; }
.process-step:last-child { padding-bottom:0; }
.step-marker { position:absolute; left:-60px; top:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg-dark); border:2px solid var(--primary); color:var(--primary-light); font-family:var(--font-heading); font-weight:700; font-size:1.1rem; z-index:2; transition:all var(--transition-base); }
.process-step:hover .step-marker { background:var(--primary); color:#fff; box-shadow:0 0 24px var(--primary-glow); }
.step-content { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:24px; transition:all var(--transition-base); }
.process-step:hover .step-content { border-color:var(--border-hover); background:var(--bg-card-hover); }
.step-content h3 { margin-bottom:6px; }
.step-content p { font-size:0.9rem; }

/* ─── 12. Contact ─── */
#contact { background:var(--bg-surface); position:relative; }
#contact::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--border-subtle), transparent); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-group label { display:block; font-size:0.875rem; font-weight:500; color:var(--text-secondary); margin-bottom:8px; }
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:14px 16px; background:rgba(255,255,255,0.04);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  color:var(--text-primary); font-size:0.9375rem; transition:all var(--transition-base); outline:none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--text-muted); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--primary); background:rgba(10,122,255,0.04); box-shadow:0 0 0 3px rgba(10,122,255,0.1); }
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; }
.form-group select option { background:var(--bg-surface); color:var(--text-primary); }
.form-group textarea { min-height:120px; resize:vertical; }
.form-submit { width:100%; padding:16px; }
.contact-info { padding:36px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); }
.contact-info h3 { margin-bottom:20px; }
.contact-item { display:flex; align-items:flex-start; gap:16px; padding:14px 0; border-bottom:1px solid var(--border-subtle); }
.contact-item:last-child { border-bottom:none; }
.contact-item-icon { width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:rgba(10,122,255,0.1); }
.contact-item-icon svg { width:20px; height:20px; fill:var(--primary-light); }
.contact-item-text h4 { font-size:0.9rem; margin-bottom:4px; }
.contact-item-text p { font-size:0.85rem; color:var(--text-muted); }
.contact-global { margin-top:20px; padding:16px; background:rgba(10,122,255,0.05); border-radius:var(--radius-lg); border:1px solid rgba(10,122,255,0.1); text-align:center; }
.contact-global p { font-size:0.85rem; color:var(--text-secondary); }
.contact-global strong { color:var(--primary-light); }

/* ─── 13. Footer ─── */
.footer { padding:48px 0 24px; background:var(--bg-dark); border-top:1px solid var(--border-subtle); }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px solid var(--border-subtle); }
.footer-brand img { height:40px; margin-bottom:16px; }
.footer-brand p { font-size:0.9rem; max-width:300px; }
.footer-links h4, .footer-legal h4 { font-size:0.875rem; text-transform:uppercase; letter-spacing:2px; color:var(--text-muted); margin-bottom:20px; }
.footer-links a, .footer-legal a { display:block; color:var(--text-secondary); font-size:0.9rem; padding:6px 0; transition:color var(--transition-fast); }
.footer-links a:hover, .footer-legal a:hover { color:var(--primary-light); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; }
.footer-bottom p { font-size:0.8125rem; color:var(--text-muted); }
.footer-socials { display:flex; gap:16px; }
.footer-socials a { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,0.05); transition:all var(--transition-base); }
.footer-socials a svg { width:18px; height:18px; fill:var(--text-muted); transition:fill var(--transition-fast); }
.footer-socials a:hover { background:rgba(10,122,255,0.15); transform:translateY(-2px); }
.footer-socials a:hover svg { fill:var(--primary-light); }

/* ─── 14. Custom Cursor ─── */
.cursor-dot, .cursor-ring { display:none; }
@media (hover:hover) and (pointer:fine) {
  .cursor-dot, .cursor-ring { display:block; position:fixed; pointer-events:none; z-index:var(--z-cursor); border-radius:50%; will-change:transform; top:0; left:0; }
  .cursor-dot { width:6px; height:6px; background:var(--primary); transition:transform 0.1s ease; }
  .cursor-ring { width:36px; height:36px; border:1.5px solid rgba(10,122,255,0.4); transition:width 0.3s ease, height 0.3s ease, border-color 0.3s ease; }
  .cursor-hover .cursor-dot { transform:scale(2.5); background:var(--accent); }
  .cursor-hover .cursor-ring { width:50px; height:50px; border-color:rgba(212,166,54,0.3); }
}

/* ─── 15. Animations ─── */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes scrollBounce { 0%,100% { transform:translate(-50%,0); opacity:1; } 50% { transform:translate(-50%,12px); opacity:0.3; } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

/* Scroll Reveal */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1); }
.reveal.revealed { opacity:1; transform:translate(0); }
.reveal-d1 { transition-delay:0.1s; }
.reveal-d2 { transition-delay:0.2s; }
.reveal-d3 { transition-delay:0.3s; }
.reveal-d4 { transition-delay:0.4s; }

/* ─── 16. Responsive ─── */
@media (max-width:1024px) {
  /* Hero devices scale down */
  .hero-devices { gap:clamp(12px, 2vw, 28px); }
  .services-grid { grid-template-columns:repeat(2, 1fr); }
  .stats-grid { grid-template-columns:repeat(2, 1fr); }
  .portfolio-project, .portfolio-project-reverse {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 32px !important;
  }
  .project-screenshots {
    order: 1 !important;
    width: 100% !important;
    min-height: 420px !important;
  }
  .project-info {
    order: 2 !important;
    width: 100% !important;
  }
  .portfolio-project-reverse .project-screenshots { order: 1 !important; }
  .portfolio-project-reverse .project-info { order: 2 !important; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand { grid-column:1 / -1; }
}

@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-cta { display:none !important; }
  .nav-burger { display:flex; }
  .hero { padding-top:90px; padding-bottom:48px; }
  /* Hide side phones on mobile, keep laptop only */
  .hero-phone { display:none; }
  .hero-devices { padding-top:24px; justify-content:center; }
  .hd-laptop-screen-wrap { width:clamp(280px, 90vw, 420px); }
  .hd-laptop-hinge { width:clamp(280px, 90vw, 420px); }
  .hd-laptop-base { width:clamp(300px, 96vw, 450px); }
  .services-grid { grid-template-columns:1fr; }
  .bespoke-card { flex-direction:column; text-align:center; padding:28px 20px; }
  .stats-grid { gap:16px; }
  .stat-card { padding:20px 12px; }
  .project-screenshots { min-height:420px !important; margin-bottom: 24px !important; display: block !important; width: 100% !important; }
  .screenshot-phone-main { width:38% !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
  .screenshot-phone-secondary { width:28% !important; left:6% !important; top: 18% !important; }
  .screenshot-phone-tertiary { width:28% !important; right:6% !important; top: 22% !important; }
  .screenshot-laptop { transform:perspective(1200px) rotateY(-4deg) rotateX(2deg) !important; margin-bottom: 24px !important; }
  .screenshot-float-2 { display:none !important; }
  .process-timeline { padding-left:48px; }
  .step-marker { left:-48px; width:40px; height:40px; font-size:0.95rem; }
  .contact-info { padding:24px; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:16px; text-align:center; }
  .hero-cta { flex-direction:column; }
  .hero-cta .btn { width:100%; }
}

@media (max-width:600px) {
  /* On small screens, show one phone + laptop only */
  .hero-phone-left { display:flex; }
  .hero-phone-right { display:none; }
  .hero-devices { gap:12px; }
  .hd-phone-frame { width:100px; border-radius:24px; }
  .hd-laptop-screen-wrap { width:clamp(220px, 85vw, 320px); }
  .hd-laptop-hinge { width:clamp(220px, 85vw, 320px); }
  .hd-laptop-base { width:clamp(240px, 92vw, 350px); }
}

@media (max-width:480px) {
  .stat-number { font-size:1.75rem; }
  .hero-badge { font-size:0.7rem; padding:6px 14px; }
  .hero-phone-left { display:none !important; }
  .project-screenshots { min-height:300px !important; margin-bottom: 24px !important; display: block !important; width: 100% !important; }
  .screenshot-phone-main { width:38% !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important; }
  .screenshot-phone-secondary { display:block !important; width:28% !important; left:3% !important; top: 18% !important; }
  .screenshot-phone-tertiary { display:block !important; width:28% !important; right:3% !important; top: 22% !important; }
}

/* ─── 17. Reduced Motion ─── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
  #hero-canvas { display:none; }
}