:root{
    --font-display: 'Trebuchet MS', 'Segoe UI', Verdana, Arial, sans-serif;
    --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, Arial, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    --bg-0:#040810;
    --bg-1:#081827;
    --bg-2:#0e2438;
    --teal-1:#6df0fb;
    --teal-2:#1ea6c4;
    --navy-deep:#0a2535;
    --ink:#eef8fb;
    --muted:#86a3b6;
    --amber:#ffb454;
    --line:rgba(120,200,220,0.14);
    --orbit-scale:1;
  }

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

  html,body{ height:100%; overflow-x:hidden; max-width:100%; }

  body{
    font-family:var(--font-body);
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(30,166,196,0.18), transparent 60%),
      radial-gradient(ellipse 70% 50% at 85% 100%, rgba(255,180,84,0.07), transparent 60%),
      linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-0) 100%);
    color:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
    width:100%;
    position:relative;
  }

  /* ---------- ambient grid backdrop ---------- */
  .grid-bg{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 38%, black 10%, transparent 75%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 38%, black 10%, transparent 75%);
    opacity:0.5;
  }

  /* ---------- top bar ---------- */
  .topbar{
    position:relative; z-index:5;
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:28px clamp(20px,5vw,64px) 0;
    font-family:var(--font-mono);
    font-size:12px; letter-spacing:0.06em;
    color:var(--muted);
  }
  .topbar .gstin span{ display:block; color:var(--teal-1); font-weight:500; }
  .topbar .contact{ text-align:right; }
  .topbar .contact strong{ display:block; color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:0; margin-bottom:2px; }

  /* ---------- hero / scene ---------- */
  .scene{
    position:relative; z-index:2;
    width:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding-top:clamp(10px, 4vh, 40px);
    perspective:1800px;
  }

  .orbit-field{
    position:relative;
    width:800px; height:400px;
    max-width:96vw;
    transform: scale(var(--orbit-scale)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transform-style:preserve-3d;
    transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
  }

  .orbit-svg{
    position:absolute; inset:0; width:100%; height:100%;
    overflow:visible;
  }
  .orbit-path{
    fill:none;
    stroke:url(#orbitGrad);
    stroke-width:1.5;
    stroke-dasharray:6 10;
    opacity:0.55;
    animation: dash-move 18s linear infinite;
  }
  @keyframes dash-move{ to{ stroke-dashoffset:-320; } }

  /* ---------- center logo ---------- */
  .logo-core{
    position:absolute; left:400px; top:200px;
    width:230px; height:230px;
    transform: translate(-50%,-50%) translateZ(70px);
    display:flex; align-items:center; justify-content:center;
    animation: breathe 7s ease-in-out infinite;
  }
  @keyframes breathe{
    0%,100%{ transform: translate(-50%,-50%) translateZ(70px) scale(1); }
    50%{ transform: translate(-50%,-50%) translateZ(95px) scale(1.045); }
  }
  .logo-core svg{ width:100%; height:100%; overflow:visible; }
  .logo-glow{ filter: blur(18px); opacity:0.65; }

  /* ---------- floating device icons ---------- */
  .device{
    position:absolute; left:0; top:0;
    width:108px; height:108px;
    margin:-54px 0 0 -54px;
    offset-rotate:0deg;
    animation-name: travel;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
  }
  .device-inner{
    width:100%; height:100%;
    transform-style:preserve-3d;
    animation: bob 5s ease-in-out infinite;
    filter:drop-shadow(0 18px 24px rgba(0,0,0,0.45));
  }
  .device-inner svg{ width:100%; height:100%; display:block; }

  @keyframes bob{
    0%,100%{ transform: translateY(0) translateZ(0) rotateY(0deg); }
    50%{ transform: translateY(-14px) translateZ(40px) rotateY(8deg); }
  }

  @keyframes travel{
    0%{ offset-distance:0%; }
    100%{ offset-distance:100%; }
  }

  .d1{ offset-path:path("M400,200 C400,117 333,50 250,50 C167,50 100,117 100,200 C100,283 167,350 250,350 C333,350 400,283 400,200 C400,117 467,50 550,50 C633,50 700,117 700,200 C700,283 633,350 550,350 C467,350 400,283 400,200 Z"); animation-duration:26s; animation-delay:0s; }
  .d2{ offset-path:path("M400,200 C400,117 333,50 250,50 C167,50 100,117 100,200 C100,283 167,350 250,350 C333,350 400,283 400,200 C400,117 467,50 550,50 C633,50 700,117 700,200 C700,283 633,350 550,350 C467,350 400,283 400,200 Z"); animation-duration:26s; animation-delay:-5.2s; }
  .d3{ offset-path:path("M400,200 C400,117 333,50 250,50 C167,50 100,117 100,200 C100,283 167,350 250,350 C333,350 400,283 400,200 C400,117 467,50 550,50 C633,50 700,117 700,200 C700,283 633,350 550,350 C467,350 400,283 400,200 Z"); animation-duration:26s; animation-delay:-10.4s; }
  .d4{ offset-path:path("M400,200 C400,117 333,50 250,50 C167,50 100,117 100,200 C100,283 167,350 250,350 C333,350 400,283 400,200 C400,117 467,50 550,50 C633,50 700,117 700,200 C700,283 633,350 550,350 C467,350 400,283 400,200 Z"); animation-duration:26s; animation-delay:-15.6s; }
  .d5{ offset-path:path("M400,200 C400,117 333,50 250,50 C167,50 100,117 100,200 C100,283 167,350 250,350 C333,350 400,283 400,200 C400,117 467,50 550,50 C633,50 700,117 700,200 C700,283 633,350 550,350 C467,350 400,283 400,200 Z"); animation-duration:26s; animation-delay:-20.8s; }

  .d2 .device-inner{ animation-duration:6.2s; animation-delay:-1s; }
  .d3 .device-inner{ animation-duration:4.4s; animation-delay:-2.3s; }
  .d4 .device-inner{ animation-duration:5.6s; animation-delay:-0.6s; }
  .d5 .device-inner{ animation-duration:4.9s; animation-delay:-3.1s; }

  /* ---------- content block ---------- */
  .content{
    position:relative; z-index:3;
    text-align:center;
    width:100%;
    margin-top:clamp(-30px,-3vw,10px);
    padding:0 20px;
  }

  .brand{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.6rem, 9vw, 6.4rem);
    line-height:1;
    letter-spacing:0.01em;
    text-transform:uppercase;
  }
  .brand .a{
    background:linear-gradient(100deg, var(--teal-1) 10%, var(--teal-2) 55%, var(--navy-deep) 110%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .brand .b{ color:var(--ink); }

  .tagline{
    font-family:var(--font-mono);
    font-size:clamp(0.78rem,1.6vw,1rem);
    letter-spacing:0.42em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:14px;
  }

  /* services ticker */
  .ticker-wrap{
    margin:34px auto 0;
    max-width:760px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
    mask-image:linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  }
  .ticker{
    display:flex; gap:34px; white-space:nowrap;
    width:max-content;
    animation:scroll-left 28s linear infinite;
    font-family:var(--font-mono);
    font-size:0.78rem; letter-spacing:0.08em;
    color:var(--teal-1); text-transform:uppercase;
  }
  .ticker span{ opacity:0.85; }
  .ticker span::after{ content:'◆'; color:var(--amber); margin-left:34px; opacity:0.6; font-size:0.6rem; vertical-align:middle; }
  @keyframes scroll-left{ to{ transform:translateX(-50%); } }

  /* coming soon */
  .coming-soon{
    margin-top:46px;
    display:flex; gap:0.35em; justify-content:center; flex-wrap:wrap;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.8rem, 11vw, 7.5rem);
    line-height:1;
    text-transform:uppercase;
    letter-spacing:0.02em;
  }
  .coming-soon span{
    background:linear-gradient(120deg, var(--ink) 30%, var(--teal-1) 50%, var(--amber) 65%, var(--ink) 85%);
    background-size:240% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shimmer 6s linear infinite;
  }
  .coming-soon span:last-child{ animation-delay:-1.2s; }
  @keyframes shimmer{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
  }

  .sub{
    max-width:560px; margin:22px auto 0;
    color:var(--muted);
    font-size:0.98rem; line-height:1.7;
  }
  .sub strong{ color:var(--ink); font-weight:600; }

  /* notify form */
  .notify{
    margin:34px auto 0;
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
    max-width:480px;
  }
  .notify input{
    flex:1 1 240px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(120,200,220,0.25);
    border-radius:999px;
    padding:14px 22px;
    color:var(--ink);
    font-family:var(--font-body); font-size:0.95rem;
    outline:none;
    transition:border-color 0.2s, background 0.2s;
  }
  .notify input::placeholder{ color:var(--muted); }
  .notify input:focus{ border-color:var(--teal-1); background:rgba(255,255,255,0.07); }

  .notify button{
    flex:0 0 auto;
    background:linear-gradient(120deg, var(--teal-1), var(--teal-2));
    color:#04141c;
    border:none; border-radius:999px;
    padding:14px 30px;
    font-family:var(--font-display); font-weight:600; font-size:0.95rem;
    letter-spacing:0.02em;
    cursor:pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow:0 8px 24px rgba(30,166,196,0.35);
  }
  .notify button:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(30,166,196,0.5); }
  .notify button:focus-visible, .notify input:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

  .notify-msg{
    margin-top:14px; font-size:0.85rem; color:var(--teal-1);
    font-family:var(--font-mono);
    min-height:1.2em;
  }

  /* ---------- footer ---------- */
  footer{
    position:relative; z-index:3;
    margin-top:clamp(40px,8vh,90px);
    border-top:1px solid var(--line);
    padding:28px clamp(20px,5vw,64px) 36px;
    display:flex; flex-wrap:wrap; gap:18px 40px;
    align-items:center; justify-content:space-between;
    font-size:0.85rem; color:var(--muted);
  }
  footer .brand-mini{
    font-family:var(--font-display); font-weight:700;
    color:var(--ink); letter-spacing:0.04em; font-size:0.95rem;
  }
  footer .brand-mini .a{ color:var(--teal-1); }
  footer .links{ display:flex; flex-wrap:wrap; gap:10px 28px; }
  footer .links a{
    color:var(--muted); text-decoration:none;
    display:flex; align-items:center; gap:8px;
    transition:color 0.2s;
  }
  footer .links a:hover{ color:var(--teal-1); }
  footer .links svg{ width:15px; height:15px; flex:none; }
  footer .addr{ max-width:280px; line-height:1.6; }

  @media (max-width:760px){
    .orbit-field{ transform: scale(0.42) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); margin:-90px 0; }
    .topbar{ flex-direction:column; gap:10px; align-items:flex-start; }
    .topbar .contact{ text-align:left; }
    .brand{ font-size:clamp(2.1rem, 11vw, 4rem); }
    .coming-soon{ font-size:clamp(2.4rem, 15vw, 5rem); }
    footer{ flex-direction:column; align-items:flex-start; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }