* { box-sizing: border-box; }
    :root{
      --orange:#f47d16;
      --dark:#4b3b3b;
      --gold-1:#c96b16;
      --gold-2:#d89a24;
      --gold-3:#ebd26c;
      --cream:#f7f4f1;
      --panel:#efefef;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--cream);
      color: var(--dark);
      line-height: 1.5;
    }

    img { max-width: 100%; display: block; }
    a { text-decoration: none; }

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

    header {
      background: #f6f5f5;
      padding: 22px 0;
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .nav-left,
    .nav-right {
      display: flex;
      align-items: center;
      gap: 42px;
      flex: 1;
    }

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

    .nav a {
      color: var(--dark);
      font-size: 20px;
      font-weight: 600;
    }

    .logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 240px;
    }

    .logo-wrap img {
      max-width: 210px;
      width: 100%;
      height: auto;
    }

    .register-btn {
      border: 2px solid var(--orange);
      color: var(--dark);
      padding: 12px 28px;
      border-radius: 999px;
      font-size: 18px;
      font-weight: 700;
      background: #fff;
      white-space: nowrap;
    }
    
    

    .hero-section {
      position: relative;
      overflow: visible;
      padding-bottom: 150px;
    }

    .hero {
      min-height: 700px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.28) 1px, transparent 1.8px),
        radial-gradient(circle at 70% 45%, rgba(255,255,255,0.18) 1px, transparent 1.8px),
        linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 100%);
      background-size: 9px 9px, 13px 13px, cover;
      position: relative;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 78% 40%, rgba(255,255,255,0.16), transparent 34%),
        radial-gradient(circle at 78% 50%, rgba(152, 99, 10, 0.08), transparent 40%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 470px 1fr;
      align-items: center;
      gap: 50px;
      padding: 24px 0 0;
    }

    .ganesh-wrap {
      display: flex;
      justify-content: center;
      align-items: end;
      padding-top: 24px;
    }

    .ganesh-wrap img {
      width: min(100%, 430px);
      filter: drop-shadow(0 10px 12px rgba(93, 52, 4, 0.18));
    }

    .hero-copy {
      color: #fff;
      padding-right: 30px;
    }

    .hero-copy h1 {
      margin: 0 0 18px;
      font-size: clamp(44px, 5vw, 72px);
      line-height: 1.08;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .hero-copy p {
      margin: 0 0 38px;
      font-size: clamp(22px, 2vw, 30px);
      line-height: 1.35;
      font-weight: 500;
      max-width: 780px;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 350px;
      padding: 18px 42px;
      background: #fff;
      color: #34292a;
      border: 2px solid #d57a1d;
      border-radius: 999px;
      font-size: 28px;
      font-weight: 800;
      box-shadow: 0 10px 30px rgba(120, 64, 5, 0.12);
    }

    .feature-panel {
      position: absolute;
      left: 50%;
      bottom: 34px;
      transform: translateX(-50%);
      width: min(1400px, calc(100% - 72px));
      background: var(--panel);
      border-radius: 26px;
      box-shadow: 0 3px 14px rgba(64, 36, 8, 0.35);
      padding: 24px 28px;
      z-index: 3;
    }

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

    .feature-card {
      background: var(--orange);
      color: #fff;
      border-radius: 18px;
      min-height: 112px;
      padding: 20px 22px;
      display: flex;
      align-items: center;
      gap: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
    }

    .feature-icon {
      width: 58px;
      height: 58px;
      flex: 0 0 58px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature-text {
      font-size: 22px;
      line-height: 1.2;
      font-weight: 500;
    }

    .feature-text strong { display: block; font-weight: 700; }

    section.content-section { padding: 80px 0; }
    .section-light { background: #fff; }
    .section-soft { background: #faf7f2; }

    .section-title {
      text-align: center;
      margin: 0 0 16px;
      font-size: clamp(32px, 3.4vw, 52px);
      color: #3e2f2a;
    }

    .section-subtitle {
      text-align: center;
      max-width: 920px;
      margin: 0 auto 44px;
      font-size: 19px;
      color: #6b5954;
    }

    .two-col {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
    }

    .info-card {
      background: #fff;
      border-radius: 24px;
      padding: 34px;
      box-shadow: 0 10px 24px rgba(55, 35, 8, 0.07);
      border: 1px solid rgba(219, 153, 43, 0.15);
    }

    .info-card h3 {
      margin: 0 0 14px;
      font-size: 30px;
      color: #d36f10;
    }

    .info-card p {
      margin: 0;
      font-size: 18px;
      color: #5c4b46;
    }

    .program-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
      margin-top: 12px;
    }

    .program-card {
      background: linear-gradient(180deg, #fff 0%, #fff9f2 100%);
      border-radius: 24px;
      padding: 34px;
      border: 1px solid rgba(234, 176, 76, 0.25);
      box-shadow: 0 14px 34px rgba(80, 49, 8, 0.08);
    }

    .badge {
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(244, 125, 22, 0.12);
      color: #d76d0e;
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 18px;
      letter-spacing: .02em;
    }

    .program-card h3 {
      margin: 0 0 12px;
      font-size: 30px;
      line-height: 1.2;
      color: #3b2d2a;
    }

    .program-card p {
      margin: 0 0 20px;
      font-size: 18px;
      color: #61524d;
    }

    .program-card ul {
      padding-left: 20px;
      margin: 0 0 26px;
      color: #534440;
      font-size: 17px;
    }

    .program-card li + li { margin-top: 10px; }

    .cta-btn {
      display: inline-block;
      background: var(--orange);
      color: #fff;
      padding: 14px 26px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 17px;
    }

    footer {
      background: #34292a;
      color: #fff;
      padding: 28px 0;
      text-align: center;
      font-size: 15px;
    }

    svg {
      width: 100%;
      height: 100%;
      stroke: #fff;
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  :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: 700px;
      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: 31px;
      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; }
    }