:root{
    --bg:#fafaf9;
    --surface: rgba(10,10,13,0.035);
    --surface-hi: rgba(10,10,13,0.065);
    --hairline: rgba(10,10,13,0.10);
    --text:#0c0c0e;
    --muted:#5a5a63;
    --muted-2:#8d8d95;
    --disc-a:#1a1a1d;
    --disc-b:#0c0c0e;
    --glow-1: rgba(228,32,43,0.10);
    --glow-2: rgba(224,33,138,0.09);
    --glow-3: rgba(247,168,27,0.10);

    --pink:#c8177a;
    --amber:#c9820a;
    --red:#d31c26;
    --blue:#2e86f5;
  }
  html.dark{
    --bg:#0a0a0d;
    --surface: rgba(255,255,255,0.045);
    --surface-hi: rgba(255,255,255,0.08);
    --hairline: rgba(255,255,255,0.10);
    --text:#f5f5f6;
    --muted:#a3a3ac;
    --muted-2:#75757e;
    --disc-a:#232328;
    --disc-b:#0e0e11;
    --glow-1: rgba(228,32,43,0.16);
    --glow-2: rgba(224,33,138,0.14);
    --glow-3: rgba(247,168,27,0.13);

    --pink:#f0389c;
    --amber:#f7a81b;
    --red:#ef2c37;
    --blue:#4a97ff;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:
      radial-gradient(1000px 600px at 10% -10%, var(--glow-3), transparent 60%),
      radial-gradient(900px 560px at 95% 4%, var(--glow-2), transparent 55%),
      radial-gradient(800px 700px at 50% 118%, var(--glow-1), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    transition: background-color .5s ease, color .4s ease;
  }
  .font-display{ font-family:'Space Grotesk',sans-serif; }
  .font-script{ font-family:'Caveat',cursive; }

  ::-webkit-scrollbar{ width:6px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:var(--muted-2); border-radius:10px; opacity:.4; }

  /* ---- Layout shell ---- */
  .wrap{
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding: 56px 18px 40px;
  }
  .card{
    width:100%;
    max-width:530px;
    position:relative;
    z-index:2;
  }

  .noise{
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---- Theme toggle ---- */
  .theme-toggle{
    position:fixed; top:20px; right:20px; z-index:50;
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--hairline);
    background:var(--surface);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:var(--text);
    cursor:pointer;
    transition: all .3s ease;
  }
  .theme-toggle:hover{ background:var(--surface-hi); transform:scale(1.06); }
  .theme-toggle i{ font-size:16px; }
  #icon-sun{ display:none; }
  html.dark #icon-sun{ display:block; }
  html.dark #icon-moon{ display:none; }

  /* ---- Aura ring behind the logo: the "round table" of the Adda ---- */
  .aura-stage{
    position:relative;
    width:172px; height:172px;
    margin:0 auto 22px;
  }
  .aura-ring{
    position:absolute; inset:-14px;
    border-radius:50%;
    padding:2px;
    background: conic-gradient(from 0deg, var(--red), var(--pink), var(--amber), var(--red));
    animation: spin 10s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    filter: drop-shadow(0 0 20px var(--glow-2)) drop-shadow(0 0 20px var(--glow-3));
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .aura-ring{ animation:none; } .orbit-dot{ animation:none !important; } }

  .orbit-dot{
    position:absolute; width:8px; height:8px; border-radius:50%;
    top:50%; left:50%;
    transform-origin: 0 0;
    animation: orbit 10s linear infinite;
    box-shadow:0 0 10px currentColor;
  }
  @keyframes orbit{ to{ transform: rotate(360deg) translateX(93px) rotate(-360deg); } }

  .logo-disc{
    position:absolute; inset:0;
    border-radius:50%;
    background: linear-gradient(155deg, var(--disc-a), var(--disc-b));
    display:flex; align-items:center; justify-content:center;
    box-shadow: inset 0 0 0 1px var(--hairline), 0 18px 40px -14px rgba(0,0,0,0.35);
    transition: background .4s ease;
  }
  .logo-disc img{
    width:70%; height:auto; object-fit:contain;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
  }

  /* ---- Chips / tags ---- */
  .tag{
    font-size:10.5px; letter-spacing:.09em; font-weight:700; text-transform:uppercase;
    padding:6px 12px; border-radius:999px;
    border:1px solid var(--hairline);
    background:var(--surface);
    color:var(--muted);
  }

  /* ---- Quick action buttons ---- */
  .quick-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:7px; padding:16px 8px;
    border-radius:18px;
    border:1px solid var(--hairline);
    background:var(--surface);
    transition: all .35s cubic-bezier(.4,0,.2,1);
  }
  .quick-btn:hover{
    background:var(--surface-hi);
    transform:translateY(-3px);
    border-color: var(--muted-2);
  }
  .quick-btn i{ font-size:17px; }
  .quick-btn span{ font-size:10px; letter-spacing:.08em; font-weight:700; text-transform:uppercase; color:var(--muted); }

  /* ---- Link / social cards ---- */
  .link-card{
    display:flex; align-items:center;
    padding:13px 14px;
    border-radius:18px;
    border:1px solid var(--hairline);
    background:var(--surface);
    transition: all .35s cubic-bezier(.4,0,.2,1);
    position:relative;
    overflow:hidden;
  }
  .link-card:hover{
    transform: translateY(-3px);
    border-color: var(--muted-2);
    background:var(--surface-hi);
  }

  .icon-badge{
    width:44px; height:44px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }

  /* ---- section label ---- */
  .section-eyebrow{
    font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
    color:var(--muted-2);
    display:flex; align-items:center; gap:10px;
    margin: 30px 2px 14px;
  }
  .section-eyebrow::after{
    content:''; flex:1; height:1px; background:var(--hairline);
  }

  .fade-up{
    opacity:0; transform:translateY(16px);
    animation: fadeUp .7s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

  .phone-chip{
    display:flex; align-items:center; gap:8px;
    padding:10px 14px;
    border-radius:13px;
    border:1px solid var(--hairline);
    background:var(--surface);
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-size:13.5px;
    color:var(--text);
    transition: all .3s;
  }
  .phone-chip:hover{ background:var(--surface-hi); border-color:var(--muted-2); transform:translateY(-2px); }
  .phone-chip i{ font-size:12px; color:var(--amber); }

  /* ---- Responsive tuning ---- */
  @media (max-width: 480px){
    .wrap{ padding: 44px 14px 32px; }
    .aura-stage{ width:148px; height:148px; }
    .orbit-dot{ width:7px; height:7px; }
    @keyframes orbit{ to{ transform: rotate(360deg) translateX(80px) rotate(-360deg); } }
    .icon-badge{ width:40px; height:40px; font-size:16px; border-radius:12px; }
    .link-card{ padding:12px; border-radius:16px; }
    .quick-btn{ padding:13px 6px; border-radius:16px; }
    .quick-btn i{ font-size:16px; }
    .phone-chip{ font-size:12.5px; padding:10px 10px; }
    .section-eyebrow{ margin: 24px 2px 12px; }
  }
  @media (max-width: 360px){
    .aura-stage{ width:130px; height:130px; }
    h1{ font-size:26px !important; }
    .grid.grid-cols-2{ grid-template-columns: 1fr; }
  }
  @media (min-width: 481px) and (max-width: 640px){
    .aura-stage{ width:160px; height:160px; }
  }

  img{ max-width:100%; }
  a, button{ -webkit-tap-highlight-color: transparent; }
  .theme-toggle:focus-visible,
  .link-card:focus-visible,
  .quick-btn:focus-visible,
  .phone-chip:focus-visible{
    outline: 2px solid var(--pink);
    outline-offset: 2px;
  }