/* =============================================
       SINGLE :root — merged Site-0 + Site-1 tokens
    ============================================= */
    :root {
      /* Site-0 tokens (hero/navbar) */
      --primary-blue:   #0099ff;
      --accent-blue:    #00d4ff;
      --dark-bg:        #0a0e27;
      --text-white:     #ffffff;
      --text-gray:      #b8c5d6;

      /* Site-1 tokens (about → footer) */
      --bg:             #030712;
      --surface:        #0f172a;
      --surface-hi:     #1e293b;
      --primary:        #3b82f6;
      --primary-glow:   #60a5fa;
      --accent:         #06b6d4;
      --accent-glow:    #22d3ee;
      --text-primary:   #f8fafc;
      --text-secondary: #94a3b8;
      --text-muted:     #64748b;
      --border:         rgba(148, 163, 184, 0.1);
      --border-hi:      rgba(59, 130, 246, 0.3);
      --font-head:      'Outfit', sans-serif;
      --font-body:      'DM Sans', sans-serif;
      --font-mono:      'JetBrains Mono', monospace;
    }

    /* =============================================
       SINGLE RESET
    ============================================= */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* =============================================
       SINGLE html / body
    ============================================= */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      font-family: var(--font-body);
      background-color: var(--bg);
      color: var(--text-primary);
      font-size: 16px;
      line-height: 1.7;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Noise texture overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
      opacity: 0.04;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }
    button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }

    h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: 0.3px; }

    /* =============================================
       UTILITY CLASSES
    ============================================= */
    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px;
    }

    @media (max-width: 768px) {
      .container { padding: 0 20px; }
    }

    .overline {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .glow-text      { text-shadow: 0 0 40px rgba(6, 182, 212, 0.4); }
    .blue-glow-text { text-shadow: 0 0 40px rgba(59, 130, 246, 0.5); }

    /* Reveal animation */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.visible        { opacity: 1; transform: translateY(0); }
    .reveal-delay-1        { transition-delay: 0.1s; }
    .reveal-delay-2        { transition-delay: 0.2s; }
    .reveal-delay-3        { transition-delay: 0.3s; }
    .reveal-delay-4        { transition-delay: 0.4s; }
    .reveal-delay-5        { transition-delay: 0.5s; }

    /* =============================================
       SINGLE .btn-primary
    ============================================= */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--primary);
      color: #fff;
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 14px 32px;
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 6px;
      position: relative;
      overflow: hidden;
      transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
      cursor: pointer;
      text-decoration: none;
    }
    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .btn-primary:hover {
      background: var(--primary-glow);
      box-shadow: 0 0 30px rgba(59, 130, 246, 0.45), 0 4px 20px rgba(0,0,0,0.4);
      transform: translateY(-2px);
    }
    .btn-primary:hover::before { opacity: 1; }

    /* =============================================
       SINGLE .btn-secondary
    ============================================= */
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: var(--text-secondary);
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 14px 32px;
      border: 2px solid rgba(0, 153, 255, 0.8);
      border-radius: 6px;
      transition: color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, background 0.3s ease;
      cursor: pointer;
      text-decoration: none;
    }
    .btn-secondary:hover {
      color: var(--text-primary);
      background: rgba(0, 153, 255, 0.15);
      border-color: var(--accent-blue);
      transform: translateY(-2px);
    }

    /* =============================================
       NAVBAR  (Site-0 HTML uses <nav class="navbar">)
    ============================================= */
    .navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.2rem 6%;
  background: transparent;               /* ← transparent */
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
}

/* Scrolled state — darkens automatically when user scrolls */
.navbar.scrolled {
  background: rgba(10, 14, 39, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0.9rem 6%;
}
    .nav-container {
      max-width: 1400px; margin: 0 auto;
      display: flex; justify-content: space-between; align-items: center;
    }
    .logo {
      display: flex; align-items: center;
      text-decoration: none; color: var(--text-white); gap: 12px;
    }
    .logo-icon {
      width: 48px; height: 48px;
      background: linear-gradient(135deg,#0099ff 0%,#00d4ff 100%);
      border-radius: 10px; display: flex; align-items: center;
      justify-content: center; font-weight: 700; font-size: 1.6rem;
      color: #fff; box-shadow: 0 4px 15px rgba(0,153,255,0.3);
      position: relative; overflow: hidden;
    }
    .logo-icon::before {
      content: ''; position: absolute; top: -50%; right: -50%;
      width: 100%; height: 100%;
      background: linear-gradient(45deg,transparent,rgba(255,255,255,0.3),transparent);
      transform: rotate(45deg);
    }
    .logo-text  { display: flex; flex-direction: column; line-height: 1.2; }
    .logo-main  { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
    .logo-sub   {
      font-size: 0.58rem; color: #3cd2ed; letter-spacing: 2.2px;
      font-weight: 500; text-transform: uppercase; margin-top: 2px;
    }
    .nav-menu { display: flex; list-style: none; gap: 3rem; align-items: center; }
    .nav-menu a {
      color: #c5cdd8; text-decoration: none; font-size: 0.95rem;
      font-weight: 500; transition: all 0.3s ease; position: relative; padding: 0.3rem 0;
    }
    .nav-menu a::after {
      content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
      background: linear-gradient(90deg,var(--primary-blue),var(--accent-blue));
      transition: width 0.3s ease;
    }
    .nav-menu a:hover         { color: var(--accent-blue); }
    .nav-menu a:hover::after  { width: 100%; }
    .nav-menu a.active        { color: var(--accent-blue); }
    .nav-menu a.active::after { width: 100%; }

    /* =============================================
       SINGLE .hamburger  (all 4 duplicates → 1)
    ============================================= */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
    }
    .hamburger span {
      display: block; width: 24px; height: 2px;
      background: #c5cdd8; border-radius: 2px;
      transition: all 0.3s ease;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* =============================================
       HERO  (Site-0 HTML uses <section class="hero">)
    ============================================= */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(10,14,39,0.88) 0%, rgba(15,25,50,0.65) 45%, rgba(10,14,39,0.35) 100%),
        url('https://customer-assets.emergentagent.com/job_renai-cloud-native/artifacts/2j4k0o3g_bg1.png');
      background-size: cover;
      background-position: 65% center;
      background-attachment: fixed;
      padding: 10rem 6% 5rem;
    }
    .hero::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(ellipse at 80% 50%, rgba(0,153,255,0.08), transparent 65%);
      pointer-events: none;
    }
    .hero-content { max-width: 700px; z-index: 2; }
    .hero-content h1 {
      font-size: clamp(2.5rem,5.5vw,4.2rem); line-height: 1.18;
      margin-bottom: 1.8rem; font-weight: 600; color: #fff;
      animation: fadeInUp 0.8s ease 0.2s both;
    }
    .hero-content p {
      font-size: 1.15rem; color: #b8c5d6; margin-bottom: 2.8rem;
      line-height: 1.75; max-width: 620px;
      animation: fadeInUp 0.8s ease 0.4s both;
    }
    .hero-buttons {
      display: flex; gap: 1.2rem; margin-bottom: 5rem; flex-wrap: wrap;
      animation: fadeInUp 0.8s ease 0.6s both;
    }
    .hero-features {
      display: flex; gap: 4rem; flex-wrap: wrap;
      animation: fadeInUp 0.8s ease 0.8s both;
    }
    .feature-badge  { display: flex; align-items: center; gap: 1rem; }
    .feature-icon {
      width: 50px; height: 50px;
      background: rgba(0,153,255,0.12);
      border: 1px solid rgba(0,212,255,0.25); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; flex-shrink: 0; transition: all 0.3s ease;
    }
    .feature-badge:hover .feature-icon {
      background: rgba(0,153,255,0.2); border-color: var(--accent-blue); transform: scale(1.05);
    }
    .feature-text { font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: #e8eef5; }

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

    /* =============================================
       RESPONSIVE — NAVBAR / HERO
    ============================================= */
    @media (max-width: 968px) {
      .navbar     { padding: 1rem 5%; }
      .nav-menu   { gap: 2rem; }
      .hero       { padding: 9rem 5% 4rem; }
      .hero-features { gap: 2.5rem; }
    }
    @media (max-width: 768px) {
      .logo-main  { font-size: 1.3rem; }
      .logo-sub   { font-size: 0.52rem; letter-spacing: 1.8px; }
      .logo-icon  { width: 42px; height: 42px; font-size: 1.4rem; }
      .nav-menu   { gap: 1.5rem; font-size: 0.88rem; }
      .hero-content h1  { font-size: 2.5rem; }
      .hero-features    { flex-direction: column; gap: 1.8rem; }
    }
    @media (max-width: 480px) {
      .logo-main  { font-size: 1.15rem; }
      .logo-sub   { font-size: 0.48rem; letter-spacing: 1.5px; }
      .hamburger  { display: flex; }
      .nav-menu {
        display: none; flex-direction: column; gap: 0;
        position: absolute; top: 100%; left: 0; right: 0;
        background: rgba(10,14,39,0.99); padding: 1rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }
      .nav-menu.open { display: flex; }
      .nav-menu li a  { padding: 0.8rem 6%; display: block; border-bottom: 1px solid rgba(255,255,255,0.05); }
      .hero           { padding: 8rem 5% 3rem; background-position: center; }
      .hero-buttons   { flex-direction: column; gap: 1rem; }
      .btn-primary, .btn-secondary { width: 100%; text-align: center; }
    }

    /* =============================================
       SITE-1 SECTION STYLES (About → Footer)
    ============================================= */

    /* =============================================
       BUTTONS (Site-1 additions — nav-cta)
    ============================================= */
    .nav-cta {
      font-family: var(--font-head);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 10px 22px;
      background: transparent;
      border: 1px solid var(--primary);
      color: var(--primary-glow);
      transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    }
    .nav-cta:hover {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }

    /* Site-1 nav (mobile) */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
    }
    .nav-links a {
      font-family: var(--font-head);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-secondary);
      position: relative;
      transition: color 0.3s ease;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0;
      width: 0; height: 1px;
      background: var(--accent);
      transition: width 0.3s ease;
    }
    .nav-links a:hover             { color: var(--text-primary); }
    .nav-links a:hover::after      { width: 100%; }

    .mobile-nav {
      display: none; flex-direction: column; gap: 0;
      position: absolute; top: 100%; left: 0; right: 0;
      background: rgba(3,7,18,0.98);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 20px 0 30px;
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav a {
      font-family: var(--font-head);
      font-size: 14px; font-weight: 500;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-secondary);
      padding: 14px 40px;
      border-bottom: 1px solid var(--border);
      transition: color 0.3s ease, padding-left 0.3s ease;
    }
    .mobile-nav a:hover { color: var(--text-primary); padding-left: 48px; }

    @media (max-width: 900px) {
      .nav-links, .nav-cta { display: none; }
      .hamburger            { display: flex; }
    }

    /* =============================================
       #hero — Site-1 hero section styles
       (used only when #hero ID is present in HTML)
    ============================================= */
    #hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding-top: 100px;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('ai-hero.png');
      background-size:cover;
      background-position:center;
      opacity: 0.18;
      transform: scale(1.05);
      transition: transform 0.1s linear;
      filter: contrast(1.1) brightness(1);

    }
    .hero-gradient {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59,130,246,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 50%, rgba(6,182,212,0.08) 0%, transparent 60%),
        linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
    }
    .hero-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
        linear-gradient(to right, rgba(59,130,246,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
    }
    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 900px;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(6,182,212,0.08);
      border: 1px solid rgba(6,182,212,0.2);
      padding: 8px 18px; margin-bottom: 40px;
    }
    .hero-badge-dot {
      width: 6px; height: 6px;
      background: var(--accent); border-radius: 50%;
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(0.8); }
    }
    .hero-badge-text {
      font-family: var(--font-mono); font-size: 11px;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
    }
    .hero-h1 {
      font-family: var(--font-head);
      font-size: clamp(42px,6vw,80px); font-weight: 800;
      line-height: 1.08; letter-spacing: -0.02em;
      color: var(--text-primary); margin-bottom: 32px;
    }
    .hero-h1 .highlight {
      background: linear-gradient(135deg, var(--primary-glow), var(--accent-glow));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-desc {
      font-size: 18px; line-height: 1.7;
      color: var(--text-secondary); max-width: 620px; margin-bottom: 52px;
    }
    .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 80px; }
    .hero-stats {
      display: flex; gap: 48px;
      padding-top: 48px; border-top: 1px solid var(--border); flex-wrap: wrap;
    }
    .stat-value {
      font-family: var(--font-head); font-size: 36px; font-weight: 800;
      color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px;
    }
    .stat-value span { color: var(--accent); }
    .stat-label {
      font-family: var(--font-mono); font-size: 11px;
      letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted);
    }
    .hero-panel {
      position: absolute; right: 0; top: 50%; transform: translateY(-50%);
      width: 340px; background: rgba(15,23,42,0.7);
      backdrop-filter: blur(24px);
      border: 1px solid var(--border); border-right: none;
      padding: 28px; z-index: 2;
    }
    .hero-panel-title {
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
      margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
    }
    .panel-tech-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 0; border-bottom: 1px solid var(--border);
    }
    .panel-tech-item:last-child  { border-bottom: none; }
    .panel-tech-icon {
      width: 32px; height: 32px;
      background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; color: var(--primary-glow); flex-shrink: 0;
    }
    .panel-tech-info  { flex: 1; }
    .panel-tech-name  { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
    .panel-tech-status{ font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.1em; }
    .panel-bar        { width: 50px; height: 4px; background: var(--surface-hi); position: relative; flex-shrink: 0; }
    .panel-bar-fill   { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(to right, var(--primary), var(--accent)); }
    @media (max-width: 1100px) { .hero-panel { display: none; } }

    /* =============================================
       SECTION COMMON
    ============================================= */
    section { padding: 120px 0; position: relative; }
    .section-header { margin-bottom: 72px; }
    .section-header .overline { display: block; margin-bottom: 16px; }
    .section-h2 {
      font-family: var(--font-head);
      font-size: clamp(32px,4vw,52px); font-weight: 700;
      letter-spacing: -0.02em; line-height: 1.1;
      color: var(--text-primary); margin-bottom: 20px;
    }
    .section-sub { font-size: 17px; color: var(--text-secondary); max-width: 560px; line-height: 1.7; }
    .section-divider { width: 60px; height: 2px; background: linear-gradient(to right, var(--primary), var(--accent)); margin-bottom: 20px; }

    /* =============================================
       ABOUT
    ============================================= */
    #about { background: var(--bg); }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .about-image-wrap { position: relative; }
    .about-image { width: 100%; height: 520px; object-fit: cover; opacity: 0.75; filter: saturate(0.8); }
    .about-image-border { position: absolute; inset: 0; border: 1px solid var(--border-hi); pointer-events: none; }
    .about-corner { position: absolute; width: 20px; height: 20px; }
    .about-corner-tl { top:-2px; left:-2px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
    .about-corner-br { bottom:-2px; right:-2px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }
    .about-image-label {
      position: absolute; bottom: 24px; left: 24px;
      background: rgba(3,7,18,0.85); backdrop-filter: blur(12px);
      border: 1px solid var(--border); padding: 12px 16px;
    }
     .about-label-value {
      font-family: var(--font-head);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
    }

    .about-label-text {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent);
      margin-top: 2px;
    }
    .about-text .overline    { display: block; margin-bottom: 16px; }
    .about-pillars { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
    .about-pillar  { display: flex; gap: 16px; align-items: flex-start; }
    .about-pillar-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--accent); padding-top: 4px; flex-shrink: 0; }
    .about-pillar-title { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
    .about-pillar-text  { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
    @media (max-width: 900px) { .about-grid { grid-template-columns:1fr; gap:48px; } }

    /* =============================================
       CLOUD STRIP
    ============================================= */
    #cloudstrip {
      padding: 40px 0; background: var(--surface);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      overflow: hidden;
    }
    .cloud-strip-inner { display: flex; gap: 60px; align-items: center; white-space: nowrap; animation: marquee 30s linear infinite; }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .cloud-strip-item  { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .cloud-strip-item i      { font-size: 20px; color: var(--text-muted); }
    .cloud-strip-item span   { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

    /* =============================================
       SERVICES
    ============================================= */
    #services {
      background: var(--surface); position: relative;
    }
    #services::before {
      content: ''; position: absolute; top:0; left:0; right:0; height:1px;
      background: linear-gradient(to right, transparent, var(--border), transparent);
    }
    #services::after {
      content: ''; position: absolute; bottom:0; left:0; right:0; height:1px;
      background: linear-gradient(to right, transparent, var(--border), transparent);
    }
    .services-header-row {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 40px; margin-bottom: 72px; flex-wrap: wrap;
    }
    .pillar-tabs { display: flex; gap: 0; border: 1px solid var(--border); overflow: hidden; }
    .pillar-tab {
      font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 12px 20px; color: var(--text-muted); background: transparent;
      border-right: 1px solid var(--border);
      transition: background-color 0.3s ease, color 0.3s ease; cursor: pointer;
    }
    .pillar-tab:last-child          { border-right: none; }
    .pillar-tab.active, .pillar-tab:hover { background: rgba(59,130,246,0.1); color: var(--primary-glow); }
    .services-bento { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 2px; }
    .service-card {
      background: var(--bg); border: 1px solid var(--border); padding: 40px;
      position: relative; overflow: hidden;
      transition: border-color 0.4s ease, box-shadow 0.4s ease; cursor: default;
    }
    .service-card:hover { border-color: var(--border-hi); box-shadow: 0 0 40px rgba(59,130,246,0.06); }
    .service-card::before {
      content: ''; position: absolute; top:0; left:0; right:0; height:2px;
      background: linear-gradient(to right, var(--primary), var(--accent));
      transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
    }
    .service-card:hover::before { transform: scaleX(1); }
    .service-card-featured        { grid-row: span 2; }
    .service-card-number { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 24px; }
    .service-card-icon   {
      width:52px; height:52px; background:rgba(59,130,246,0.08); border:1px solid rgba(59,130,246,0.18);
      display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--primary-glow);
      margin-bottom:24px; transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .service-card:hover .service-card-icon { background:rgba(59,130,246,0.14); border-color:rgba(59,130,246,0.35); }
    .service-card-title  { font-family:var(--font-head); font-size:22px; font-weight:700; color:var(--text-primary); margin-bottom:14px; line-height:1.2; }
    .service-card-featured .service-card-title { font-size:30px; }
    .service-card-desc   { font-size:14px; color:var(--text-secondary); line-height:1.7; margin-bottom:28px; }
    .service-card-featured .service-card-desc  { font-size:16px; }
    .service-features    { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
    .service-feature     { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-secondary); }
    .service-feature-icon { color:var(--accent); font-size:11px; flex-shrink:0; }
    .service-image {
      width:100%; height:180px; object-fit:cover; margin-top:24px;
      opacity:0.6; filter:saturate(0.7); transition:opacity 0.4s ease;
    }
    .service-card:hover .service-image { opacity:0.8; }
    .service-card-featured .service-image { height:220px; }
    .service-tag {
      display:inline-block; font-family:var(--font-mono); font-size:10px;
      letter-spacing:0.15em; text-transform:uppercase; padding:5px 10px;
      border:1px solid rgba(6,182,212,0.25); color:var(--accent); background:rgba(6,182,212,0.06);
      margin-right:6px; margin-bottom:6px;
    }
    .service-tags { margin-top:16px; }
    @media (max-width:1024px) { .services-bento { grid-template-columns:1fr 1fr; } .service-card-featured { grid-row:span 1; } }
    @media (max-width:640px)  { .services-bento { grid-template-columns:1fr; } }

    /* =============================================
       TECH STACK
    ============================================= */
    #techstack { background:var(--bg); }
    .techstack-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:60px; }
    .tech-category { background:var(--surface); border:1px solid var(--border); padding:32px; transition:border-color 0.3s ease; }
    .tech-category:hover { border-color:rgba(59,130,246,0.25); }
    .tech-category-title { font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border); }
    .tech-items { display:flex; flex-direction:column; gap:14px; }
    .tech-item  { display:flex; align-items:center; justify-content:space-between; }
    .tech-item-name { font-family:var(--font-head); font-size:14px; font-weight:500; color:var(--text-secondary); display:flex; align-items:center; gap:10px; }
    .tech-item-name i { font-size:15px; color:var(--primary-glow); width:20px; }
    .tech-bar-wrap { flex:1; max-width:100px; height:3px; background:var(--surface-hi); margin-left:16px; position:relative; }
    .tech-bar-fill { position:absolute; left:0; top:0; height:100%; background:linear-gradient(to right,var(--primary),var(--accent)); width:0; transition:width 1.2s cubic-bezier(0.16,1,0.3,1); }
    @media (max-width:900px) { .techstack-grid { grid-template-columns:1fr 1fr; } }
    @media (max-width:600px) { .techstack-grid { grid-template-columns:1fr; } }

    /* =============================================
       CASE STUDIES / METRICS
    ============================================= */
    #casestudies { background:var(--surface); position:relative; overflow:hidden; }
    #casestudies::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,var(--border),transparent); }
    .metrics-row { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-bottom:80px; }
    .metric-card { background:var(--bg); border:1px solid var(--border); padding:36px 28px; text-align:center; transition:border-color 0.3s ease; }
    .metric-card:hover { border-color:rgba(59,130,246,0.3); }
    .metric-value {
      font-family:var(--font-head); font-size:48px; font-weight:800; letter-spacing:-0.03em;
      line-height:1; background:linear-gradient(135deg,var(--text-primary),var(--primary-glow));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px;
    }
    .metric-label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); }
    .cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
    .case-card { background:var(--bg); border:1px solid var(--border); padding:36px; position:relative; overflow:hidden; transition:border-color 0.4s ease; }
    .case-card:hover { border-color:var(--border-hi); }
    .case-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(to right,var(--primary),var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease; }
    .case-card:hover::after { transform:scaleX(1); }
    .case-industry { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
    .case-title    { font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--text-primary); margin-bottom:14px; line-height:1.25; }
    .case-problem  { font-size:13px; color:var(--text-muted); line-height:1.6; margin-bottom:16px; }
    .case-solution { font-size:14px; color:var(--text-secondary); line-height:1.6; margin-bottom:24px; }
    .case-impact   { display:flex; gap:20px; padding-top:20px; border-top:1px solid var(--border); flex-wrap:wrap; }
    .case-impact-value { font-family:var(--font-head); font-size:22px; font-weight:800; color:var(--accent-glow); line-height:1; }
    .case-impact-label { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-top:4px; }
    @media (max-width:900px) { .metrics-row { grid-template-columns:repeat(2,1fr); } .cases-grid { grid-template-columns:1fr; } }

    /* =============================================
       WHY US
    ============================================= */
    #whyus { background:var(--bg); }
    .whyus-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
    .differentiators { display:flex; flex-direction:column; gap:0; margin-top:48px; }
    .diff-item { display:flex; gap:24px; padding:28px 0; border-bottom:1px solid var(--border); }
    .diff-item:first-child { padding-top:0; }
    .diff-num   { font-family:var(--font-mono); font-size:13px; letter-spacing:0.1em; color:var(--accent); flex-shrink:0; padding-top:3px; }
    .diff-title { font-family:var(--font-head); font-size:16px; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
    .diff-text  { font-size:14px; color:var(--text-secondary); line-height:1.7; }
    .whyus-image-wrap { position:relative; }
    .whyus-image { width:100%; height:460px; object-fit:cover; opacity:0.7; filter:saturate(0.8); }
    .whyus-corner-tl { position:absolute; top:-2px; left:-2px; width:20px; height:20px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
    .whyus-corner-br { position:absolute; bottom:-2px; right:-2px; width:20px; height:20px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }
    .whyus-credentials { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
    .cred-item  { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--border); background:var(--surface); }
    .cred-icon  { color:var(--primary-glow); font-size:14px; flex-shrink:0; }
    .cred-text  { font-family:var(--font-head); font-size:12px; font-weight:500; color:var(--text-secondary); letter-spacing:0.02em; }
    @media (max-width:900px) { .whyus-layout { grid-template-columns:1fr; gap:52px; } }

    /* =============================================
       CONTACT
    ============================================= */
    #contact { position:relative; }
    .contact-bg-gradient { position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(59,130,246,0.07) 0%, transparent 70%); pointer-events:none; }
    .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
    .contact-info-items { display:flex; flex-direction:column; gap:24px; margin-top:48px; }
    .contact-info-item  { display:flex; gap:16px; align-items:flex-start; }
    .contact-info-icon  { width:40px; height:40px; background:rgba(59,130,246,0.08); border:1px solid rgba(59,130,246,0.18); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--primary-glow); flex-shrink:0; }
    .contact-info-label { font-family:var(--font-mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
    .contact-info-value { font-family:var(--font-head); font-size:14px; font-weight:500; color:var(--text-secondary); line-height:1.5; }
    .contact-form { background:var(--surface); border:1px solid var(--border); padding:40px; }
    .form-group   { margin-bottom:20px; }
    .form-label   { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
    .form-input, .form-select, .form-textarea {
      width:100%; background:var(--bg); border:1px solid var(--border);
      color:var(--text-primary); font-family:var(--font-body); font-size:14px;
      padding:12px 16px; transition:border-color 0.3s ease, box-shadow 0.3s ease; outline:none;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:rgba(59,130,246,0.4); box-shadow:0 0 0 3px rgba(59,130,246,0.06); }
    .form-select  { appearance:none; cursor:pointer; }
    .form-textarea { min-height:120px; resize:vertical; }
    .form-row     { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .form-submit  { width:100%; justify-content:center; margin-top:8px; }
    .form-success { display:none; text-align:center; padding:24px; }
    .form-success-icon { font-size:32px; color:var(--accent); margin-bottom:12px; }
    .form-success-text { font-family:var(--font-head); font-size:16px; color:var(--text-primary); }
    @media (max-width:900px) { .contact-layout { grid-template-columns:1fr; gap:52px; } .form-row { grid-template-columns:1fr; } }

    /* =============================================
       FOOTER
    ============================================= */
    footer { background:var(--surface); border-top:1px solid var(--border); padding:60px 0 40px; }
    .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; margin-bottom:52px; }
    .footer-brand-text { font-size:14px; color:var(--text-muted); line-height:1.7; margin-top:16px; max-width:280px; }
    .footer-col-title  { font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:20px; }
    .footer-links      { display:flex; flex-direction:column; gap:12px; }
    .footer-links a    { font-size:14px; color:var(--text-muted); transition:color 0.3s ease, padding-left 0.3s ease; }
    .footer-links a:hover { color:var(--text-secondary); padding-left:4px; }
    .footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:28px; border-top:1px solid var(--border); flex-wrap:wrap; gap:16px; }
    .footer-copy   { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); letter-spacing:0.05em; }
    .footer-social { display:flex; gap:12px; }
    .social-btn {
      width:36px; height:36px; background:transparent; border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-muted);
      transition:border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
    }
    .social-btn:hover { border-color:rgba(59,130,246,0.4); color:var(--primary-glow); background:rgba(59,130,246,0.06); }
    @media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; gap:36px; } }
    @media (max-width:560px)  { .footer-grid { grid-template-columns:1fr; } }

    /* =============================================
       SCROLL TO TOP
    ============================================= */
    #scrolltop {
      position:fixed; bottom:32px; right:32px; width:44px; height:44px;
      background:var(--primary); border:none;
      display:flex; align-items:center; justify-content:center;
      font-size:16px; color:#fff; cursor:pointer; z-index:900;
      opacity:0; transform:translateY(16px);
      transition:opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
      pointer-events:none;
    }
    #scrolltop.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
    #scrolltop:hover   { background:var(--primary-glow); box-shadow:0 0 20px rgba(59,130,246,0.4); }

    /* =============================================
       LOADING SCREEN
    ============================================= */
    #loader {
      position:fixed; inset:0; background:var(--bg); z-index:99999;
      display:flex; align-items:center; justify-content:center;
      flex-direction:column; gap:24px;
      transition:opacity 0.6s ease, visibility 0.6s ease;
    }
    #loader.hidden { opacity:0; visibility:hidden; }
    .loader-logo {
      width:56px; height:56px;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-head); font-size:24px; font-weight:800; color:#fff;
      clip-path:polygon(15% 0%,85% 0%,100% 15%,100% 85%,85% 100%,15% 100%,0% 85%,0% 15%);
      animation:loader-pulse 1.5s ease-in-out infinite;
    }
    @keyframes loader-pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(0.95);opacity:0.8;} }
    .loader-bar { width:200px; height:2px; background:var(--surface-hi); position:relative; overflow:hidden; }
    .loader-bar-fill { position:absolute; left:-100%; top:0; height:100%; width:100%; background:linear-gradient(to right,var(--primary),var(--accent)); animation:loader-bar 1.2s ease-in-out forwards; }
    @keyframes loader-bar { 0%{left:-100%;} 100%{left:0%;} }

    /* =============================================
       COUNTER
    ============================================= */
    .counter-num { display:inline-block; }

    /* =============================================
       EXTRA DECORATIVE / MISC
    ============================================= */
    .trace-beam { position:relative; }
    .trace-beam::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,var(--accent),transparent); opacity:0; transition:opacity 0.4s ease; }
    .trace-beam:hover::before { opacity:1; }

    .code-block { background:var(--bg); border:1px solid var(--border); padding:20px 24px; font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); line-height:1.8; margin-top:32px; position:relative; }
    .code-block::before { content:'// ARCHITECTURE OVERVIEW'; position:absolute; top:-10px; left:16px; background:var(--surface); padding:0 8px; font-size:10px; letter-spacing:0.15em; color:var(--accent); }
    .code-keyword { color:#60a5fa; }
    .code-string  { color:#86efac; }
    .code-comment { color:var(--text-muted); }
    .code-accent  { color:var(--accent-glow); }

    .hr-deco { display:flex; align-items:center; gap:16px; margin:40px 0; }
    .hr-line  { flex:1; height:1px; background:var(--border); }
    .hr-dot   { width:6px; height:6px; border:1px solid var(--accent); transform:rotate(45deg); }

    @media (max-width:900px) {
      .hero-h1    { font-size:clamp(34px,9vw,56px); }
      .section-h2 { font-size:clamp(26px,6vw,40px); }
    }
    @media (max-width:768px) {
      section            { padding:80px 0; }
      .hero-stats        { gap:28px; }
      .stat-value        { font-size:28px; }
      .contact-form      { padding:28px; }
    }