:root {
      --bg: #fbf5ee;
      --bg-soft: #fffaf4;
      --card: rgba(255, 255, 255, 0.9);
      --card-border: rgba(122, 78, 166, 0.12);
      --text: #2f2344;
      --muted: #746784;
      --accent: #f28a1f;
      --accent-2: #7b4ec3;
      --gold: #e7b34a;
      --success: #20b26b;
      --shadow: 0 18px 42px rgba(96, 58, 131, 0.10);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(244,181,68,0.14), transparent 22%),
        radial-gradient(circle at top right, rgba(123,78,195,0.08), transparent 24%),
        linear-gradient(180deg, #fffaf4 0%, #fbf2e8 45%, #f7ecdf 100%);
      min-height: 100vh;
    }

    .container {
      width: min(1280px, calc(100% - 32px));
      margin: 0 auto;
    }

    .topbar {
      background: #f6f4f2;
      border-bottom: 1px solid rgba(0,0,0,0.03);
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(10px);
    }

    .nav {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      min-height: 112px;
      gap: 16px;
    }

    .nav-links,
    .nav-right {
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
    }

    .nav-right {
      justify-content: flex-end;
    }

    .nav a {
      text-decoration: none;
      color: #5c4a56;
      font-weight: 700;
      font-size: 18px;
    }

    .logo {
      text-align: center;
      line-height: 1;
    }

    .logo-mark {
      font-size: 18px;
      color: var(--gold);
      margin-bottom: 2px;
    }

    .logo-title {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: var(--accent);
    }

    .logo-sub {
      font-size: 12px;
      letter-spacing: 0.45em;
      color: #c98a1d;
      font-weight: 700;
      margin-left: 7px;
      margin-top: 4px;
    }

    .login-btn {
      border: 2px solid var(--accent);
      padding: 13px 28px;
      border-radius: 999px;
      color: #4c3a42;
      background: rgba(255,255,255,0.9);
      font-weight: 700;
      min-width: 200px;
      text-align: center;
      display: inline-block;
    }

    .hero-top {
      padding: 0 0 34px;
      position: relative;
    }

    .hero-banner {
      position: relative;
      min-height: 780px;
      /*overflow: hidden; */
      border-bottom-left-radius: 26px;
      border-bottom-right-radius: 26px;
      background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.10), transparent 25%),
        radial-gradient(circle at 75% 20%, rgba(255,255,255,0.10), transparent 18%),
        linear-gradient(90deg, #c96e16 0%, #d88a25 26%, #ddb044 68%, #e0bf55 100%);
    }

    .hero-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1.6px);
      background-size: 12px 12px;
      opacity: 0.38;
      pointer-events: none;
    }

    .hero-banner::after {
      content: "";
      position: absolute;
      right: -180px;
      top: -50px;
      width: 760px;
      height: 760px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 46%, transparent 60%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      align-items: center;
      gap: 20px;
      padding: 44px 42px 160px;
      min-height: 700px;
    }

    .deity-wrap {
      display: flex;
      align-items: end;
      justify-content: center;
      min-height: 520px;
    }

    .deity-card {
      width: min(100%, 520px);
      aspect-ratio: 0.86 / 1;
      border-radius: 28px;
      position: relative;
      background:
        radial-gradient(circle at 50% 35%, rgba(255,243,220,0.75), rgba(255,233,190,0.35) 28%, transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .halo {
      position: absolute;
      width: 72%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      top: 6%;
      left: 14%;
      border: 8px solid rgba(229,178,57,0.95);
      box-shadow: 0 0 0 10px rgba(166,95,8,0.25), 0 0 34px rgba(255,234,185,0.34);
      background:
        radial-gradient(circle, rgba(255,252,241,0.95), rgba(255,241,210,0.7) 60%, rgba(214,140,20,0.25) 100%);
    }

    .ganesha {
      position: relative;
      z-index: 1;
      font-size: clamp(180px, 22vw, 310px);
      line-height: 1;
      filter: drop-shadow(0 14px 20px rgba(110,49,7,0.18));
    }

    .hero-copy {
      text-align: center;
      color: #fff;
      padding-right: 20px;
    }

    .hero-copy h1 {
      font-size: clamp(44px, 6vw, 72px);
      line-height: 1.08;
      margin: 0 0 16px;
      letter-spacing: -0.03em;
      font-weight: 800;
      text-shadow: 0 4px 18px rgba(0,0,0,0.10);
    }

    .hero-copy p {
      margin: 0 auto 34px;
      font-size: clamp(22px, 2.2vw, 34px);
      line-height: 1.35;
      max-width: 780px;
      color: rgba(255,255,255,0.97);
      font-weight: 500;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 340px;
      padding: 18px 36px;
      border-radius: 999px;
      text-decoration: none;
      font-size: 26px;
      font-weight: 800;
      color: #3b2a33;
      background: #fff;
      border: 3px solid var(--accent);
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    }

    .quick-actions {
      position: absolute;
      left: 50%;
      bottom: -64px;
      transform: translateX(-50%);
      z-index: 2;
      width: min(1400px, calc(100% - 64px));
      background: #f0efef;
      border-radius: 24px;
      padding: 24px 28px;
      box-shadow: 0 10px 26px rgba(88, 55, 35, 0.18);
      border: 1px solid rgba(94,68,46,0.12);
    }

    .quick-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
    }

    .quick-card {
      background: var(--accent);
      color: #fff;
      border-radius: 18px;
      text-decoration: none;
      min-height: 112px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px;
      font-size: 22px;
      font-weight: 700;
      line-height: 1.3;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .page-section {
      padding: 110px 0 30px;
    }

    .section {
      padding: 26px 0;
    }

    .section-head {
      text-align: center;
      margin-bottom: 22px;
    }

    .section-head h2 {
      margin: 0 0 8px;
      font-size: clamp(28px, 4vw, 42px);
      letter-spacing: -0.02em;
    }

    .section-head p {
      margin: 0 auto;
      color: var(--muted);
      max-width: 820px;
      line-height: 1.7;
      font-size: 17px;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .step {
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: 24px;
      padding: 22px 18px;
      box-shadow: var(--shadow);
      min-height: 240px;
    }

    .step-no {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(244,181,68,0.15);
      color: #9d6811;
      font-weight: 800;
      margin-bottom: 16px;
      border: 1px solid rgba(244,181,68,0.22);
    }

    .step h3 {
      margin: 0 0 10px;
      font-size: 20px;
    }

    .step p {
      margin: 0;
      color: var(--muted);
      line-height: 1.7;
      font-size: 15px;
    }

    .payment-panel {
      margin-top: 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      align-items: stretch;
    }

    .panel {
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: 28px;
      box-shadow: var(--shadow);
      padding: 28px;
    }

    .panel h3 {
      margin: 0 0 10px;
      font-size: 28px;
    }

    .panel p {
      margin: 0 0 18px;
      color: var(--muted);
      line-height: 1.7;
      font-size: 16px;
    }

    .scan-box {
      border-radius: 24px;
      border: 1px dashed rgba(122,78,166,0.18);
      padding: 20px;
      background: rgba(255,255,255,0.48);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 280px;
    }

    .qr-frame {
      width: 240px;
      background: white;
      border-radius: 20px;
      padding: 18px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.10);
      text-align: center;
      color: #111827;
    }

    .qr {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 12px;
      background-image:
        linear-gradient(45deg, #111 25%, transparent 25%),
        linear-gradient(-45deg, #111 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #111 75%),
        linear-gradient(-45deg, transparent 75%, #111 75%);
      background-size: 28px 28px;
      background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
      margin-bottom: 14px;
      border: 8px solid #fff;
      outline: 1px solid #ddd;
    }

    .qr-title {
      font-weight: 800;
      font-size: 17px;
      margin-bottom: 6px;
    }

    .qr-note {
      font-size: 13px;
      color: #4b5563;
      line-height: 1.5;
    }

    .feature-list {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .feature-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      background: rgba(255,255,255,0.66);
      border: 1px solid rgba(122,78,166,0.08);
      padding: 14px 16px;
      border-radius: 16px;
    }

    .tick {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(32,178,107,0.12);
      color: #16965a;
      font-weight: 800;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .cta {
      padding: 16px 0 62px;
    }

    .cta-box {
      background: linear-gradient(135deg, rgba(244,181,68,0.14), rgba(123,78,195,0.10));
      border: 1px solid rgba(122,78,166,0.12);
      border-radius: 30px;
      padding: 34px;
      text-align: center;
      box-shadow: var(--shadow);
    }

    .cta-box h2 {
      margin: 0 0 10px;
      font-size: clamp(30px, 4vw, 46px);
    }

    .cta-box p {
      margin: 0 auto 22px;
      max-width: 760px;
      color: var(--muted);
      line-height: 1.7;
      font-size: 17px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: center;
    }

    .btn {
      text-decoration: none;
      border: 0;
      border-radius: 14px;
      padding: 15px 22px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 168px;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent), #ffd881);
      color: #4d2f00;
      box-shadow: 0 12px 28px rgba(244,181,68,0.22);
    }

    .btn-secondary {
      background: rgba(255,255,255,0.72);
      color: var(--text);
      border: 1px solid rgba(122,78,166,0.12);
    }

    .mini-note {
      margin-top: 14px;
      color: #7b6d90;
      font-size: 14px;
    }

    @media (max-width: 1180px) {
      .nav { grid-template-columns: 1fr; padding: 18px 0; }
      .nav-links, .nav-right { justify-content: center; }
      .hero-inner { grid-template-columns: 1fr; padding: 30px 24px 170px; }
      .hero-copy { padding-right: 0; }
      .deity-wrap { min-height: 360px; }
      .quick-grid { grid-template-columns: repeat(2, 1fr); }
      .steps { grid-template-columns: repeat(2, 1fr); }
      .payment-panel { grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
      .container { width: min(100%, calc(100% - 20px)); }
      .nav-links, .nav-right { gap: 18px; }
      .nav a { font-size: 16px; }
      .logo-title { font-size: 26px; }
      .hero-banner { min-height: auto; }
      .hero-inner { padding: 22px 16px 220px; min-height: auto; }
      .hero-copy h1 { font-size: 36px; }
      .hero-copy p { font-size: 19px; }
      .hero-cta { min-width: 100%; font-size: 22px; }
      .quick-actions { width: calc(100% - 24px); bottom: -110px; padding: 18px; }
      .quick-grid { grid-template-columns: 1fr; gap: 16px; }
      .quick-card { min-height: 90px; font-size: 20px; }
      .page-section { padding-top: 150px; }
      .steps { grid-template-columns: 1fr; }
      .cta-box, .panel, .step { padding: 22px; }
    }