:root {
    --bg: #191127;
    --surface: #23133a;
    --border: #3a1c63;
    --accent: #883CF0;
    --accent2: #7c3aed;
    --accent3: #b29dce;
    --text: #e8edf5;
    --muted: #d6d6d6;
    --glow: rgba(115, 0, 255, 0.15);
    --font-head: 'Syne', sans-serif;
    --font-mono: 'DM Mono', monospace;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    overflow-x: hidden;
    cursor: none;
  }

  /* Custom cursor */
  #cursor {
    position: fixed; top:0; left:0; width:12px; height:12px;
    background: var(--accent); border-radius:50%;
    pointer-events:none; z-index:2;
    transition: transform 0.1s ease;
    mix-blend-mode: screen;
  }
  #cursor-ring {
    position: fixed; top:0; left:0; width:36px; height:36px;
    border:1px solid var(--accent); border-radius:50%;
    pointer-events:none; z-index:2;
    transition: all 0.12s ease;
    opacity:0.5;
  }

  /* Scanline overlay */
  body::before {
    content:''; position:fixed; inset:0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 4px
    );
    pointer-events:none;
  }

  /* Grid BG */
  body::after {
    content:''; position:fixed; inset:0;
    background-image:
      linear-gradient(rgba(144, 0, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(115, 0, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events:none;
  }

  /* NAV */
  nav {
    position: fixed; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 48px;
    background: #180f26;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: 2;
  }
  .logo {
    font-family: var(--font-head);
    font-size: 1.4rem; font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .logo span { color: var(--accent); }
  .nav-links { display:flex; gap:32px; }
  .nav-links a {
    font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase;
    color: var(--muted); text-decoration:none;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--accent); }
  .nav-cta {
    background: var(--accent); color: var(--bg);
    border:none; padding:10px 24px;
    font-family: var(--font-mono); font-size:0.75rem;
    letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
    cursor:none; transition: all 0.2s;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  }
  .nav-cta:hover { background: #fff; transform:translateY(-1px); }

  /* HERO */
  #hero {
    position:relative; min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding: 160px 48px 80px;
    overflow:hidden;
  }
  .hero-tag {
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
    color: var(--accent); margin-bottom:24px;
  }
  .hero-tag::before {
    content:''; display:block; width:32px; height:1px; background:var(--accent);
  }
  h1 {
    font-family: var(--font-head);
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 800; line-height: 0.95;
    letter-spacing: -0.03em;
    max-width: 800px;
    animation: slideUp 0.8s ease both;
  }
  h1 .outline {
    -webkit-text-stroke: 1px var(--text);
    color: transparent;
  }
  h1 .glow-word {
    color: var(--accent);
    text-shadow: 0 0 40px rgba(140, 0, 255, 0.5);
  }
  .hero-sub {
    margin-top:32px; max-width:480px;
    font-size:0.9rem; line-height:1.7; color: var(--muted);
    animation: slideUp 0.8s 0.15s ease both;
  }
  .hero-actions {
    display:flex; gap:16px; margin-top:48px;
    animation: slideUp 0.8s 0.3s ease both;
  }
  .btn-primary {
    background: var(--accent); color: var(--bg);
    padding:14px 36px; border:none; cursor:none;
    font-family: var(--font-mono); font-size:0.8rem;
    letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
    transition: all 0.25s;
    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  }
  .btn-primary:hover {
    background:#fff; transform:translateY(-2px);
    box-shadow: 0 8px 32px #be52e50f;
  }
  .btn-ghost {
    background: transparent; color: var(--text);
    padding:14px 36px; border: 1px solid var(--border); cursor:none;
    font-family: var(--font-mono); font-size:0.8rem;
    letter-spacing:0.1em; text-transform:uppercase;
    transition: all 0.25s;
  }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

  /* Animated numbers strip */
  .stats-strip {
    position:absolute; bottom:40px; right:48px;
    display:flex; gap:48px;
    animation: slideUp 0.8s 0.45s ease both;
  }
  .stat-item { text-align:right; }
  .stat-num {
    font-family: var(--font-head);
    font-size:2.5rem; font-weight:800;
    color: var(--accent); line-height:1;
  }
  .stat-label { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color: var(--muted); margin-top:4px; }

  /* Floating orb */
  .hero-orb {
    position:absolute; right:-100px; top:50%;
    transform: translateY(-50%);
    width: 600px; height: 600px; border-radius:50%;
    background: radial-gradient(circle, rgba(170, 0, 255, 0.15) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
  }

  /* OSI Layer visual */
  .osi-visual {
    position:absolute; right:80px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:4px;
    animation: slideUp 0.8s 0.6s ease both;
  }
  .osi-layer {
    display:flex; align-items:center; gap:12px;
    padding:8px 16px;
    border-left: 2px solid var(--border);
    transition: all 0.3s;
    cursor:none;
  }
  .osi-layer:hover { border-left-color: var(--accent); background: var(--glow); }
  .osi-layer.active-layer {
    border-left-color: var(--accent);
    background: linear-gradient(90deg, var(--glow), transparent);
  }
  .osi-layer.active-layer .layer-num { color: var(--accent); }
  .layer-num { font-size:0.65rem; width:20px; color: var(--muted); }
  .layer-name { font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; }
  .layer-bar {
    height:2px; flex:1; max-width:80px;
    background: var(--border);
    position:relative; overflow:hidden;
  }
  .layer-bar::after {
    content:''; position:absolute; inset:0;
    background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s ease;
  }
  .osi-layer.active-layer .layer-bar::after { transform: scaleX(1); }

  /* SECTION base */
  section { position:relative; }
  .section-inner { padding: 120px 48px; }
  .section-label {
    font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase;
    color: var(--accent); margin-bottom:16px;
    display:flex; align-items:center; gap:12px;
  }
  .section-label::after { content:''; flex:1; max-width:60px; height:1px; background:var(--accent); }
  h2 {
    font-family: var(--font-head);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight:800; line-height:1; letter-spacing:-0.03em;
    max-width: 700px;
  }

  /* SERVICES */
  #services { background: var(--surface); }
  .services-grid {
    display:grid; grid-template-columns: repeat(2, 1fr);
    gap:1px; margin-top:64px;
    border: 1px solid var(--border);
    overflow:hidden;
  }
  .service-card {
    padding:48px; background: var(--bg);
    transition: background 0.3s;
    cursor:none; position:relative; overflow:hidden;
  }
  .service-card::before {
    content:''; position:absolute;
    top:0; left:0; right:0; height:2px;
    background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s ease;
  }
  .service-card:hover::before { transform: scaleX(1); }
  .service-card:hover { background: #1f1232; }
  .service-icon {
    width:48px; height:48px; margin-bottom:24px;
    display:flex; align-items:center; justify-content:center;
    border: 1px solid var(--border);
    font-size:1.4rem;
  }
  .service-num {
    position:absolute; top:24px; right:24px;
    font-family: var(--font-head); font-size:4rem; font-weight:800;
    color: var(--border); line-height:1;
    transition: color 0.3s;
  }
  .service-card:hover .service-num { color: #2a1647; }
  .service-title {
    font-family: var(--font-head); font-size:1.4rem; font-weight:700;
    margin-bottom:12px;
  }
  .service-desc { font-size:0.82rem; line-height:1.7; color: var(--muted); }
  .service-link {
    display:inline-flex; align-items:center; gap:8px;
    margin-top:24px; font-size:0.7rem; letter-spacing:0.15em;
    text-transform:uppercase; color: var(--accent);
    text-decoration:none; transition: gap 0.2s;
  }
  .service-link:hover { gap:16px; }

  /* TIMELINE / APPROACH */
  #approach { border-top: 1px solid var(--border); }
  .timeline {
    display:grid; grid-template-columns: repeat(3,1fr);
    gap:1px; margin-top:64px;
    position:relative;
  }
  .timeline::before {
    content:''; position:absolute;
    top:32px; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent), transparent);
    z-index:0;
  }
  .phase {
    padding:48px 32px;
    border: 1px solid var(--border);
    position:relative; background: var(--bg);
    transition: all 0.3s; cursor:none;
  }
  .phase:hover { background: var(--surface); border-color: var(--accent); }
  .phase-dot {
    width:16px; height:16px; border-radius:50%;
    background: var(--bg); border: 2px solid var(--muted);
    position:relative; margin-bottom:32px;
    transition: all 0.3s;
  }
  .phase:hover .phase-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 20px var(--accent); }
  .phase-time {
    font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase;
    color: var(--accent); margin-bottom:8px;
  }
  .phase-title {
    font-family: var(--font-head); font-size:2rem; font-weight:800;
    margin-bottom:16px;
  }
  .phase-desc { font-size:0.8rem; line-height:1.7; color: var(--muted); }

  /* INDUSTRIES */
  #industries { background: var(--surface); }
  .industries-grid {
    display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:64px;
  }
  .industry-card {
    border: 1px solid var(--border);
    padding:40px 32px;
    position:relative; overflow:hidden;
    cursor:none; transition: all 0.3s;
    background: var(--bg);
  }
  .industry-card::after {
    content:''; position:absolute;
    bottom:0; left:0; right:0; height:200px;
    background: linear-gradient(to top, #68489565, transparent);
    opacity:0; transition: opacity 0.3s;
  }
  .industry-card:hover::after { opacity:1; }
  .industry-card:hover { border-color: var(--accent); transform: translateY(-4px); }
  .industry-icon { font-size:2.5rem; margin-bottom:24px; }
  .industry-name {
    font-family: var(--font-head); font-size:1.5rem; font-weight:700; margin-bottom:12px;
  }
  .industry-desc { font-size:0.8rem; line-height:1.7; color: var(--muted); }
  .industry-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
  .tag {
    font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase;
    padding:4px 10px; border: 1px solid var(--border); color: var(--muted);
    transition: all 0.2s;
  }
  .industry-card:hover .tag { border-color: #3a1c63; color: var(--accent); }

  /* TERMINAL SECTION */
  #terminal-section { border-top: 1px solid var(--border); }
  .terminal-wrapper {
    display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:64px; align-items:start;
  }
  .terminal {
    background: #0f0818; border: 1px solid var(--border);
    border-radius:4px; overflow:hidden;
    font-family: var(--font-mono);
  }
  .term-bar {
    background: var(--surface); padding:12px 16px;
    display:flex; align-items:center; gap:8px;
    border-bottom: 1px solid var(--border);
  }
  .term-dot { width:10px; height:10px; border-radius:50%; }
  .term-title { font-size:0.7rem; color: var(--muted); margin-left:8px; }
  .term-body { padding:24px; font-size:0.78rem; line-height:1.9; }
  .term-line { display:flex; gap:8px; }
  .term-prompt { color: var(--accent); }
  .term-cmd { color: var(--text); }
  .term-out { color: var(--muted); }
  .term-success { color: var(--accent3); }
  .term-warn { color: var(--accent2); }
  .cursor-blink {
    display:inline-block; width:8px; height:14px;
    background: var(--accent); animation: blink 1s step-end infinite;
    vertical-align: middle;
  }

  /* FAQ Accordion */
  .faq-list { margin-top:0; }
  .faq-item {
    border-bottom: 1px solid var(--border); overflow:hidden;
  }
  .faq-q {
    width:100%; text-align:left; background:transparent; border:none; cursor:none;
    padding:24px 0; display:flex; align-items:center; justify-content:space-between;
    font-family: var(--font-mono); font-size:0.9rem; color: var(--text);
    transition: color 0.2s;
  }
  .faq-q:hover { color: var(--accent); }
  .faq-icon {
    width:24px; height:24px; border: 1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; color: var(--muted); transition: all 0.3s; flex-shrink:0;
  }
  .faq-item.open .faq-icon { border-color: var(--accent); color: var(--accent); transform: rotate(45deg); }
  .faq-a {
    max-height:0; overflow:hidden; transition: max-height 0.4s ease, padding 0.3s;
    font-size:0.82rem; line-height:1.7; color: var(--muted);
  }
  .faq-item.open .faq-a { max-height:200px; padding-bottom:20px; }

  /* CTA */
  #cta {
    background: var(--surface); border-top: 1px solid var(--border);
    text-align:center;
  }
  #cta .section-inner {
    display:flex; flex-direction:column; align-items:center; gap:32px;
  }
  #cta h2 { text-align:center; }
  .cta-sub { color: var(--muted); font-size:0.85rem; max-width:400px; line-height:1.7; }
  .cta-group { display:flex; gap:16px; }

  /* FOOTER */
  footer {
    border-top: 1px solid var(--border);
    padding:40px 48px;
    display:flex; align-items:center; justify-content:space-between;
    position:relative;
  }
  .footer-copy { font-size:0.7rem; color: var(--muted); }
  .footer-links { display:flex; gap:24px; }
  .footer-links a { font-size:0.7rem; color: var(--muted); text-decoration:none; transition: color 0.2s; }
  .footer-links a:hover { color: var(--accent); }

  /* ANIMATIONS */
  @keyframes slideUp {
    from { opacity:0; transform:translateY(30px); }
    to { opacity:1; transform:translateY(0); }
  }
  @keyframes pulse {
    0%,100% { opacity:0.5; transform:translateY(-50%) scale(1); }
    50% { opacity:1; transform:translateY(-50%) scale(1.05); }
  }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }

  .reveal {
    opacity:0; transform:translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.visible { opacity:1; transform:translateY(0); }

  /* TICKER */
  .ticker-wrap {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    overflow:hidden; padding:12px 0;
    position:relative;
  }
  .ticker {
    display:flex; gap:0;
    animation: ticker 30s linear infinite;
    white-space:nowrap;
  }
  .ticker span {
    padding:0 40px; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase;
    color: var(--muted);
  }
  .ticker span.highlight { color: var(--accent); }
  @keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* Responsive */
  @media(max-width:768px) {
    nav { padding:16px 24px; }
    .nav-links { display:none; }
    .section-inner { padding:80px 24px; }
    h1 { font-size:3rem; }
    .services-grid { grid-template-columns:1fr; }
    .timeline { grid-template-columns:1fr; }
    .industries-grid { grid-template-columns:1fr; }
    .terminal-wrapper { grid-template-columns:1fr; }
    .osi-visual { display:none; }
    .stats-strip { position:static; margin-top:48px; }
    footer { flex-direction:column; gap:16px; text-align:center; }
  }