:root{
    --deep-navy:#020617;
    --dark-navy:#061126;
    --blue:#3682F6;
    --blue-electric:#06B6FF;
    --purple:#8B5CF6;
    --violet:#6D4AFF;
    --cyan:#06B6D4;
    --muted:#94A3B8;
    --edge:rgba(56,130,246,0.22);
    --grad-primary:linear-gradient(135deg,#06B6FF,#3682F6,#8B5CF6);
    --grad-secondary:linear-gradient(135deg,#06B6D4,#3682F6);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--deep-navy);
    color:#fff;
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;margin:0;padding:0;}
  img{max-width:100%;display:block;}

  /* Layered background */
  .bg-layers{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--deep-navy);}
  #particle-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;}
  .bg-layers::before{
    content:"";position:absolute;inset:0;
    background-image:
      radial-gradient(ellipse 900px 600px at 15% 8%, rgba(54,130,246,0.16), transparent 60%),
      radial-gradient(ellipse 800px 700px at 88% 22%, rgba(139,92,246,0.14), transparent 60%),
      radial-gradient(ellipse 700px 600px at 50% 95%, rgba(6,182,212,0.10), transparent 60%);
  }
  .bg-layers::after{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(56,130,246,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(56,130,246,0.05) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 100%);
    mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 100%);
  }
  .content{position:relative;z-index:1;}

  .wrap{max-width:1280px;margin:0 auto;padding:0 20px;}
  @media(min-width:768px){.wrap{padding:0 32px;}}

  .glass{background:rgba(8,18,40,0.65);border:1px solid var(--edge);backdrop-filter:blur(16px);}
  .card{background:rgba(7,18,38,0.75);border:1px solid var(--edge);border-radius:16px;padding:24px;transition:transform .15s ease-out, box-shadow .3s, border-color .3s;transform-style:preserve-3d;will-change:transform;}
  .proj-card{transition:transform .15s ease-out, box-shadow .3s, border-color .3s;transform-style:preserve-3d;will-change:transform;}
  .card:hover{transform:translateY(-4px);border-color:rgba(6,182,255,.5);box-shadow:0 0 40px -8px rgba(56,130,246,.45);}
  .badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--edge);background:rgba(255,255,255,.05);padding:7px 16px;border-radius:999px;font-size:12px;font-weight:500;color:var(--blue-electric);}
  .badge .dot{width:6px;height:6px;border-radius:999px;background:var(--blue-electric);box-shadow:0 0 8px 2px rgba(6,182,255,.8);}
  .text-gradient{
    color:#06B6FF; /* fallback if background-clip:text isn't supported */
    background:var(--grad-primary);
    -webkit-background-clip:text;
    background-clip:text;
  }
  @supports (background-clip:text) or (-webkit-background-clip:text){
    .text-gradient{ color:transparent; -webkit-text-fill-color:transparent; }
  }
  .muted{color:var(--muted);}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 26px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:.3s;}
  .btn-primary{background:var(--grad-primary);color:#fff;box-shadow:0 0 40px -8px rgba(56,130,246,.45);}
  .btn-primary:hover{transform:scale(1.03);box-shadow:0 0 40px -8px rgba(139,92,246,.5);}
  .btn-secondary{background:transparent;border:1px solid var(--edge);color:#fff;}
  .btn-secondary:hover{border-color:var(--blue-electric);background:rgba(255,255,255,.05);}
  .btn svg{width:16px;height:16px;transition:.3s;}
  .btn:hover svg{transform:translateX(3px);}

  /* Navbar */
  header.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:16px;}
  nav{width:100%;max-width:1280px;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-radius:16px;transition:.3s;border:1px solid transparent;}
  nav.scrolled{background:rgba(2,6,23,.75);border-color:var(--edge);backdrop-filter:blur(20px);box-shadow:0 8px 30px -12px rgba(2,6,23,.6);}
  .logo{display:flex;align-items:center;gap:10px;}
  .logo-mark{width:36px;height:36px;border-radius:10px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;box-shadow:0 0 40px -8px rgba(56,130,246,.45);}
  .logo-text{font-size:14px;font-weight:600;line-height:1.2;}
  .logo-text small{display:block;font-size:9px;font-weight:500;letter-spacing:.05em;color:var(--muted);}
  .nav-links{display:none;align-items:center;gap:32px;}
  .nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,.8);}
  .nav-links a:hover{color:#fff;}
  .nav-cta{display:none;}
  .hamburger{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--edge);border-radius:10px;background:transparent;color:#fff;cursor:pointer;}
  @media(min-width:1024px){
    .nav-links{display:flex;}
    .nav-cta{display:inline-flex;}
    .hamburger{display:none;}
  }
  .mobile-menu{position:fixed;inset:0;z-index:40;background:#020617;display:none;flex-direction:column;padding-top:96px;}
  .mobile-menu.open{display:flex;}
  .mobile-menu ul{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;}
  .mobile-menu a{font-size:24px;font-weight:600;}
  .mobile-menu .btn-wrap{display:flex;justify-content:center;padding-bottom:56px;}

  /* Hero */
  .hero{position:relative;overflow:hidden;padding:160px 0 80px;}
  @media(min-width:768px){.hero{padding:190px 0 110px;}}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:64px;align-items:center;}
  @media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;}}
  .hero h1{font-size:38px;font-weight:700;line-height:1.1;letter-spacing:-0.02em;margin:24px 0 0;}
  @media(min-width:640px){.hero h1{font-size:48px;}}
  @media(min-width:768px){.hero h1{font-size:58px;}}
  .hero p.desc{margin-top:24px;max-width:520px;color:var(--muted);font-size:16px;line-height:1.7;}
  @media(min-width:768px){.hero p.desc{font-size:18px;}}
  .hero-ctas{margin-top:36px;display:flex;flex-direction:column;gap:16px;}
  @media(min-width:640px){.hero-ctas{flex-direction:row;}}
  .trust-line{margin-top:32px;display:flex;flex-wrap:wrap;gap:20px;}
  .trust-line span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
  .trust-line svg{width:14px;height:14px;color:var(--cyan);}

  .ecosystem{position:relative;margin:0 auto;width:100%;max-width:500px;height:440px;display:none;perspective:1200px;}
  @media(min-width:768px){.ecosystem{display:block;}}
  .orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:26px;border:1px solid rgba(6,182,255,.4);background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;box-shadow:0 0 50px -6px rgba(139,92,246,.55);animation:pulseGlow 3.5s ease-in-out infinite;z-index:2;transform-style:preserve-3d;}
  .orb-inner{display:inline-block;animation:orbSpin3d 12s linear infinite;}
  @keyframes orbSpin3d{0%{transform:perspective(300px) rotateY(0deg);}100%{transform:perspective(300px) rotateY(360deg);}}
  .node{position:absolute;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;font-size:12px;font-weight:500;animation:floaty3d 6s ease-in-out infinite;transform-style:preserve-3d;}
  .node .dot{width:6px;height:6px;border-radius:999px;background:var(--cyan);}
  svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

  @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
  @keyframes floaty3d{0%,100%{transform:translateY(0) translateZ(0) rotateY(0deg);}50%{transform:translateY(-12px) translateZ(20px) rotateY(6deg);}}
  @keyframes pulseGlow{0%,100%{opacity:.6;}50%{opacity:1;}}
  @keyframes gradMove{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
  .anim-gradient{background-size:200% auto;animation:gradMove 6s ease infinite;}

  /* reveal on scroll — visible by default; JS only adds a subtle entrance if it loads */
  .reveal{opacity:1;transform:translateY(0);transition:opacity .6s ease, transform .6s ease;}
  .js-ready .reveal{opacity:0;transform:translateY(24px);}
  .js-ready .reveal.in{opacity:1;transform:translateY(0);}

  /* Stats */
  .stats-wrap{position:relative;margin-top:-40px;z-index:2;}
  .stats-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;border-radius:16px;padding:32px 24px;box-shadow:0 8px 30px -12px rgba(2,6,23,.6);}
  @media(min-width:640px){.stats-panel{grid-template-columns:repeat(4,1fr);padding:32px 40px;}}
  .stat-item{display:flex;align-items:center;gap:12px;}
  .stat-icon{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.05);align-items:center;justify-content:center;color:var(--blue-electric);flex-shrink:0;}
  @media(min-width:640px){.stat-icon{display:flex;}}
  .stat-value{font-size:26px;font-weight:700;}
  @media(min-width:768px){.stat-value{font-size:30px;}}
  .stat-label{font-size:12px;color:var(--muted);margin:0;}
  @media(min-width:768px){.stat-label{font-size:14px;}}

  /* Section heading */
  section{position:relative;padding:96px 0;}
  @media(min-width:768px){section{padding:128px 0;}}
  .sec-head{display:flex;flex-direction:column;gap:16px;}
  @media(min-width:768px){.sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;}}
  .sec-head h2{font-size:30px;font-weight:700;letter-spacing:-.01em;margin:16px 0 0;}
  @media(min-width:768px){.sec-head h2{font-size:36px;}}
  .sec-head p{margin-top:12px;color:var(--muted);font-size:16px;max-width:640px;}
  @media(min-width:768px){.sec-head p{font-size:18px;}}
  .sec-center{align-items:center;text-align:center;}
  .sec-center .sec-inner{margin:0 auto;}

  .grid-3{display:grid;grid-template-columns:1fr;gap:20px;margin-top:56px;}
  @media(min-width:640px){.grid-3{grid-template-columns:1fr 1fr;}}
  @media(min-width:1024px){.grid-3{grid-template-columns:1fr 1fr 1fr;}}
  .grid-4{display:grid;grid-template-columns:1fr;gap:20px;margin-top:56px;}
  @media(min-width:640px){.grid-4{grid-template-columns:1fr 1fr;}}
  @media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr);}}
  .grid-5{display:grid;grid-template-columns:1fr;gap:20px;margin-top:56px;}
  @media(min-width:640px){.grid-5{grid-template-columns:1fr 1fr;}}
  @media(min-width:1024px){.grid-5{grid-template-columns:repeat(5,1fr);}}

  .icon-tile{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.05);color:var(--blue-electric);margin-bottom:16px;}
  .card h3{font-size:16px;font-weight:600;margin:0;}
  .card p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted);}
  .card .link-arrow{margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--blue-electric);opacity:0;transition:.3s;}
  .card:hover .link-arrow{opacity:1;}
  .card .link-arrow.purple{color:var(--purple);}

  /* Why D1Codes */
  .why-section{border-top:1px solid rgba(56,130,246,.35);border-bottom:1px solid rgba(56,130,246,.35);background:rgba(6,17,38,.4);}
  .why-grid{display:grid;grid-template-columns:1fr;gap:64px;align-items:center;}
  @media(min-width:1024px){.why-grid{grid-template-columns:1fr 1fr;}}
  .principles{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px;}
  @media(min-width:640px){.principles{grid-template-columns:1fr 1fr;}}
  .principle{border:1px solid var(--edge);background:rgba(255,255,255,.03);border-radius:12px;padding:20px;}
  .principle .num{font-size:12px;font-weight:700;color:var(--blue-electric);}
  .principle h3{font-size:14px;font-weight:600;margin:6px 0 0;}
  .principle p{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6;}

  .stack-visual{position:relative;margin:0 auto;width:100%;max-width:460px;height:400px;display:none;perspective:1200px;}
  @media(min-width:1024px){.stack-visual{display:block;}}
  .stack-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;}
  .stack-layer{width:170px;height:60px;margin-top:-10px;border-radius:16px;border:1px solid rgba(6,182,255,.3);display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 0 40px -8px rgba(56,130,246,.45);animation:floaty3d 5s ease-in-out infinite;transform-style:preserve-3d;}
  .orbit-node{position:absolute;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:500;animation:floaty3d 6s ease-in-out infinite;transform-style:preserve-3d;}

  /* Process */
  .process-wrap{position:relative;margin-top:64px;}
  .process-line{position:absolute;left:0;right:0;top:24px;height:1px;background:linear-gradient(90deg, var(--blue-electric), var(--cyan), var(--purple));display:none;}
  @media(min-width:768px){.process-line{display:block;}}
  .process-grid{display:grid;grid-template-columns:1fr;gap:32px;}
  @media(min-width:640px){.process-grid{grid-template-columns:1fr 1fr;}}
  @media(min-width:768px){.process-grid{grid-template-columns:repeat(5,1fr);}}
  .process-step{display:flex;flex-direction:column;align-items:center;text-align:center;}
  @media(min-width:768px){.process-step{align-items:flex-start;text-align:left;}}
  .process-num{width:48px;height:48px;border-radius:999px;border:1px solid rgba(6,182,255,.4);background:var(--deep-navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--blue-electric);box-shadow:0 0 40px -8px rgba(56,130,246,.45);margin-bottom:16px;position:relative;z-index:1;}

  /* Tech stack */
  .tech-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;}
  .tech-card h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--blue-electric);margin:0;}
  .tech-card ul{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
  .tech-card li{font-size:14px;color:rgba(255,255,255,.9);}
  .tech-card svg{align-self:flex-end;margin-top:16px;color:var(--muted);}

  /* Portfolio */
  .proj-card{border:1px solid var(--edge);background:rgba(7,18,38,.75);border-radius:16px;overflow:hidden;transition:.3s;}
  .proj-card:hover{transform:translateY(-4px);border-color:rgba(6,182,255,.5);box-shadow:0 0 40px -8px rgba(56,130,246,.45);}
  .proj-thumb{position:relative;height:160px;border-bottom:1px solid var(--edge);background:linear-gradient(135deg, rgba(6,182,255,.2), transparent, rgba(139,92,246,.2));display:flex;align-items:center;justify-content:center;}
  .proj-thumb span{font-size:30px;font-weight:700;color:rgba(255,255,255,.1);}
  .proj-body{padding:24px;}
  .proj-cat{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--blue-electric);}
  .tag{display:inline-block;border:1px solid var(--edge);background:rgba(255,255,255,.05);padding:2px 10px;border-radius:999px;font-size:10px;font-weight:500;color:var(--muted);margin:4px 4px 0 0;}

  /* Products preview UI */
  .mini-ui{margin-bottom:20px;height:96px;border:1px solid var(--edge);background:rgba(255,255,255,.03);border-radius:10px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;}
  .mini-ui .dots{display:flex;gap:6px;}
  .mini-ui .dots span{width:8px;height:8px;border-radius:999px;}
  .mini-ui .bar1{height:6px;width:75%;border-radius:999px;background:linear-gradient(90deg, rgba(6,182,255,.4), rgba(139,92,246,.4));}
  .mini-ui .bar2{height:6px;width:50%;border-radius:999px;background:rgba(255,255,255,.1);margin-top:6px;}

  /* About */
  .about-grid{display:grid;grid-template-columns:1fr;gap:64px;align-items:center;}
  @media(min-width:1024px){.about-grid{grid-template-columns:1fr 1fr;}}
  .values-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .value-card{border:1px solid var(--edge);background:rgba(7,18,38,.75);border-radius:16px;padding:24px;}
  .value-card .num{font-size:24px;font-weight:700;}
  .value-card .label{margin-top:8px;font-size:14px;font-weight:600;}

  /* CTA */
  .cta-section{position:relative;overflow:hidden;text-align:center;}
  .cta-glow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
  .cta-glow .b1{width:420px;height:420px;border-radius:999px;background:rgba(6,182,255,.2);filter:blur(100px);animation:pulseGlow 3.5s ease-in-out infinite;}
  .cta-glow .b2{position:absolute;width:320px;height:320px;border-radius:999px;background:rgba(139,92,246,.25);filter:blur(90px);animation:pulseGlow 3.5s ease-in-out infinite 1.5s;}
  .cta-inner{position:relative;max-width:900px;margin:0 auto;}
  .cta-inner h2{font-size:36px;font-weight:700;line-height:1.15;}
  @media(min-width:768px){.cta-inner h2{font-size:48px;}}
  .cta-inner p{margin:20px auto 0;max-width:560px;color:var(--muted);font-size:16px;line-height:1.7;}
  @media(min-width:768px){.cta-inner p{font-size:18px;}}
  .cta-btns{margin-top:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
  @media(min-width:640px){.cta-btns{flex-direction:row;}}

  /* Contact */
  .contact-grid{display:grid;grid-template-columns:1fr;gap:56px;}
  @media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr;}}
  .contact-item{display:flex;align-items:center;gap:16px;margin-top:20px;}
  .contact-item .ic{width:44px;height:44px;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:var(--blue-electric);flex-shrink:0;}
  .contact-item .lbl{font-size:12px;color:var(--muted);margin:0;}
  .contact-item .val{font-size:14px;font-weight:500;margin:0;}
  form.glass{border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:16px;}
  .form-row{display:grid;grid-template-columns:1fr;gap:16px;}
  @media(min-width:640px){.form-row{grid-template-columns:1fr 1fr;}}
  input,select,textarea{width:100%;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.04);padding:12px 16px;font-size:14px;color:#fff;outline:none;font-family:inherit;transition:.2s;}
  input::placeholder,textarea::placeholder{color:rgba(148,163,184,.7);}
  input:focus,select:focus,textarea:focus{border-color:var(--blue-electric);}
  select option{background:var(--deep-navy);}
  .submit-msg{text-align:center;font-size:12px;color:var(--cyan);margin:0;}

  /* Footer */
  footer{border-top:1px solid rgba(56,130,246,.35);padding-top:64px;}
  .footer-grid{display:grid;grid-template-columns:1fr;gap:48px;}
  @media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
  .footer-desc{margin-top:16px;max-width:280px;font-size:14px;line-height:1.6;color:var(--muted);}
  .socials{margin-top:24px;display:flex;gap:12px;}
  .socials a{width:36px;height:36px;border-radius:10px;border:1px solid var(--edge);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.2s;}
  .socials a:hover{border-color:var(--blue-electric);color:#fff;}
  footer h4{font-size:14px;font-weight:600;margin:0;}
  footer ul{margin-top:16px;display:flex;flex-direction:column;gap:12px;}
  footer ul a{font-size:14px;color:var(--muted);}
  footer ul a:hover{color:#fff;}
  .footer-bottom{margin-top:56px;border-top:1px solid rgba(56,130,246,.35);padding:32px 0;text-align:center;font-size:12px;color:var(--muted);}

  /* Respect reduced-motion preference: stop decorative 3D/float/spin animations */
  @media (prefers-reduced-motion: reduce) {
    #particle-canvas{display:none;}
    .orb-inner,.node,.stack-layer,.orbit-node,.orb{animation:none !important;}
    .card,.proj-card{transition:none !important;}
    *{scroll-behavior:auto !important;}
  }