:root {
      --sun:    #F5A623;
      --dsun:   #C97D00;
      --gold:   #C9A84C;
      --goldl:  #F0D070;
      --goldp:  #FDF5DC;
      --navy:   #0D1B2A;
      --dnavy:  #060E16;
      --teal:   #1A4A5C;
      --ivory:  #FDFAF0;
      --cream:  #FAF3D8;
      --dark:   #0D0800;
    }

    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      font-family: 'Noto Serif Gujarati', serif;
      background: var(--ivory);
      color: var(--dark);
      overflow-x: hidden;
    }
    ::-webkit-scrollbar { width:6px; }
    ::-webkit-scrollbar-track { background: var(--cream); }
    ::-webkit-scrollbar-thumb { background: var(--gold); border-radius:3px; }

    /* ===== NAV ===== */
    nav {
      position:fixed; top:0; left:0; right:0; z-index:1000;
      background: rgba(6,14,22,0.97);
      backdrop-filter: blur(14px);
      display:flex; align-items:center; justify-content:space-between;
      padding:0 52px; height:58px;
      border-bottom: 2px solid var(--sun);
    }
    .nav-brand {
      font-family: 'Cinzel Decorative', serif;
      color: var(--goldl); font-size:0.82rem; letter-spacing:3px;
    }
    .nav-brand span { color: var(--sun); }
    .nav-links { display:flex; gap:28px; list-style:none; }
    .nav-links a {
      color: var(--goldp); text-decoration:none; font-size:0.9rem;
      transition:color 0.3s; position:relative; padding-bottom:4px;
    }
    .nav-links a::after {
      content:''; position:absolute; bottom:0; left:0; right:0;
      height:1px; background:var(--sun);
      transform:scaleX(0); transform-origin:left; transition:transform 0.3s;
    }
    .nav-links a:hover { color:var(--sun); }
    .nav-links a:hover::after { transform:scaleX(1); }

    /* ===== HERO ===== */
    #hero {
      min-height:100vh;
      background: radial-gradient(ellipse at 80% 50%, #1A2A3A 0%, #0D1B2A 45%, #050A0F 100%);
      display:grid; grid-template-columns:1fr 1fr;
      align-items:center;
      padding:80px 64px 0 64px;
      position:relative; overflow:visible;
    }
    /* Rays burst background */
    #hero::before {
      content:'';
      position:absolute; inset:0; pointer-events:none;
      background: conic-gradient(
        from 0deg at 75% 48%,
        transparent 0deg,
        rgba(245,166,35,0.03) 5deg,
        transparent 10deg,
        rgba(245,166,35,0.02) 15deg,
        transparent 20deg,
        rgba(245,166,35,0.03) 25deg,
        transparent 30deg,
        rgba(245,166,35,0.02) 35deg,
        transparent 40deg,
        rgba(245,166,35,0.03) 45deg,
        transparent 50deg,
        rgba(245,166,35,0.02) 55deg,
        transparent 60deg,
        rgba(245,166,35,0.03) 65deg,
        transparent 70deg,
        rgba(245,166,35,0.02) 75deg,
        transparent 80deg,
        rgba(245,166,35,0.03) 85deg,
        transparent 90deg,
        rgba(245,166,35,0.02) 95deg,
        transparent 100deg,
        rgba(245,166,35,0.03) 105deg,
        transparent 110deg,
        rgba(245,166,35,0.02) 115deg,
        transparent 120deg
      );
    }
    #hero::after {
      content:'';
      position:absolute; inset:0; pointer-events:none;
      background-image: radial-gradient(circle, rgba(245,166,35,0.05) 1px, transparent 1px);
      background-size:44px 44px;
    }

    /* Hero Left — Slokas */
    .hero-left { position:relative; z-index:2; padding-right:48px; }
    .hero-eyebrow {
      display:block; color:var(--sun); font-size:0.72rem;
      letter-spacing:5px; text-transform:uppercase;
      margin-bottom:14px; opacity:0.9;
    }
    .hero-title {
      font-family:'Cinzel Decorative',serif;
      color:var(--goldl);
      font-size:clamp(1.1rem,2vw,1.55rem);
      line-height:1.6; margin-bottom:6px;
    }
    .hero-sub { color:var(--sun); font-size:1rem; margin-bottom:38px; opacity:0.85; }

    .sloka-wrap {
      background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(13,27,42,0.55));
      border:1px solid rgba(245,166,35,0.25);
      border-left:4px solid var(--sun);
      border-radius:0 14px 14px 0;
      padding:30px 34px; min-height:152px;
      position:relative; overflow:hidden;
    }
    .sloka-wrap::before {
      content:'"'; position:absolute; top:-16px; left:12px;
      font-size:8rem; line-height:1;
      color:rgba(245,166,35,0.08); font-family:Georgia,serif;
      pointer-events:none;
    }
    .sloka-text {
      position:absolute; inset:30px 34px;
      color:#F5E6C0; font-size:1.05rem; line-height:1.95;
      opacity:0; transition:opacity 0.85s, transform 0.85s;
      transform:translateY(12px);
    }
    .sloka-text.active { opacity:1; transform:translateY(0); }
    .sloka-dots { display:flex; gap:8px; margin-top:164px; }
    .s-dot {
      width:8px; height:8px; border-radius:50%;
      background:rgba(245,166,35,0.25); cursor:pointer; transition:all 0.3s;
    }
    .s-dot.active { background:var(--sun); transform:scale(1.35); }

    /* Hero Right — Temple Image */
    .hero-right {
      position:relative; z-index:2;
      display:flex; justify-content:center;
      margin-bottom:-100px;
    }
    .img-frame { position:relative; width:400px; cursor:pointer; }
    .img-frame::before {
      content:''; position:absolute; inset:-10px;
      border:2px solid rgba(245,166,35,0.5); border-radius:14px;
      clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
      pointer-events:none; z-index:3;
    }
    .img-frame::after {
      content:''; position:absolute; inset:-20px;
      border:1px solid rgba(245,166,35,0.2); border-radius:18px;
      clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
      pointer-events:none; z-index:2;
    }
    .img-day, .img-night {
      width:100%; border-radius:12px 12px 0 0; display:block;
      clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
      transition:opacity 0.65s;
    }
    .img-night {
      position:absolute; top:0; left:0; opacity:0;
      filter:brightness(0.35) saturate(2) hue-rotate(30deg) contrast(1.2);
    }
    .img-glow {
      position:absolute; inset:0; border-radius:12px 12px 0 0;
      clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
      background:radial-gradient(ellipse at 50% 30%, rgba(245,166,35,0.25), transparent 65%);
      opacity:0; transition:opacity 0.65s; pointer-events:none; z-index:2;
    }
    .img-night-label {
      position:absolute; bottom:24%; left:50%; transform:translateX(-50%);
      color:rgba(255,210,100,0.9); font-size:0.75rem; letter-spacing:4px;
      opacity:0; transition:opacity 0.65s; pointer-events:none; z-index:4;
      text-shadow:0 0 10px rgba(255,180,0,0.9); white-space:nowrap;
    }
    .img-frame:hover .img-night { opacity:1; }
    .img-frame:hover .img-day   { opacity:0.08; }
    .img-frame:hover .img-glow  { opacity:1; }
    .img-frame:hover .img-night-label { opacity:1; }

    /* ===== SECTION HEADER ===== */
    .sec-header { text-align:center; margin-bottom:52px; }
    .sec-eyebrow {
      display:block; color:var(--sun); font-size:0.7rem;
      letter-spacing:5px; text-transform:uppercase; margin-bottom:10px;
    }
    .sec-header h2 { font-size:clamp(1.7rem,3vw,2.5rem); color:var(--navy); line-height:1.3; }
    .sec-line {
      width:56px; height:3px; margin:14px auto 0; border-radius:2px;
      background:linear-gradient(to right, var(--sun), var(--gold));
    }

    /* ===== WELCOME ===== */
    #welcome {
      background:linear-gradient(180deg, #FAF3D8 0%, var(--ivory) 100%);
      padding:130px 64px 90px; position:relative;
    }
    #welcome::before {
      content:'☀'; position:absolute; right:5%; top:52%;
      transform:translateY(-50%);
      font-size:14rem; color:rgba(245,166,35,0.06);
      pointer-events:none; line-height:1;
    }
    .welcome-grid {
      max-width:1100px; margin:0 auto;
      display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
    }
    .welcome-text p { font-size:1.02rem; line-height:2.05; color:#100800; margin-bottom:18px; }
    .welcome-text p:first-child::first-letter {
      font-size:3.5rem; float:left; line-height:0.78;
      margin:10px 12px 0 0; color:var(--sun); font-weight:700;
    }
    .stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    .stat-card {
      background:white; border-radius:12px; padding:28px 22px;
      text-align:center; box-shadow:0 4px 22px rgba(13,27,42,0.10);
      border-top:3px solid var(--sun);
      transition:transform 0.3s, box-shadow 0.3s;
    }
    .stat-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(13,27,42,0.15); }
    .stat-num { display:block; font-size:2.1rem; font-weight:700; color:var(--sun); }
    .stat-lbl { display:block; font-size:0.86rem; color:#2A1800; margin-top:6px; }

    /* ===== PARALLAX ===== */
    #parallax {
      position:relative; height:440px; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
    }
    .par-bg {
      /*position:absolute; inset:-80px 0;
      background-color: #060E16;
      background-image:
        /* sunrise/sunset glow */
       /* radial-gradient(ellipse 90% 60% at 50% 80%, rgba(245,120,0,0.45) 0%, transparent 65%),
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(200,80,0,0.5)  0%, transparent 55%),
        radial-gradient(ellipse 50% 30% at 30% 40%,  rgba(30,60,90,0.6)  0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 70% 40%,  rgba(20,40,70,0.6)  0%, transparent 60%),
        /* star-like dot field */
       /* radial-gradient(circle, rgba(245,200,100,0.15) 1px, transparent 1px),
        radial-gradient(circle, rgba(245,200,100,0.07) 1.5px, transparent 1.5px);
      background-size:
        100% 100%, 100% 100%, 100% 100%, 100% 100%,
        28px 28px, 80px 80px;
      background-position:
        0 0, 0 0, 0 0, 0 0,
        0 0, 14px 14px;
      will-change:transform;
      z-index:0;*/
      position: absolute; inset: -60px;
      background: url('modhera-img/Modheshwari_Temple\,_Modhera.jpg') center/cover no-repeat;
      filter: brightness(0.35) saturate(0.4);
      will-change: transform;
    }
    .par-overlay {
      position:absolute; inset:0; z-index:1;
      background:linear-gradient(180deg,
        rgba(6,14,22,0.6) 0%, rgba(6,14,22,0.2) 40%,
        rgba(6,14,22,0.2) 60%, rgba(6,14,22,0.6) 100%
      );
    }
    /* Mandala ring */
    #parallax::after {
      content:''; position:absolute;
      width:480px; height:480px;
      top:50%; left:50%; transform:translate(-50%,-50%);
      border-radius:50%;
      border:1px solid rgba(245,166,35,0.12);
      box-shadow:
        0 0 0 24px rgba(245,166,35,0.05),
        0 0 0 72px rgba(245,166,35,0.03);
      pointer-events:none; z-index:2;
    }
    .par-content { /*position:relative;*/ z-index:4; text-align:center; padding:0 48px; }
    .par-decor { display:block; color:var(--sun); font-size:1.4rem; margin-bottom:22px; letter-spacing:14px; }
    .par-quote {
      color:var(--goldl); font-size:clamp(1rem,2.2vw,1.55rem);
      line-height:1.95; max-width:820px; margin:0 auto;
      position:absolute; left:50%; width:100%;
      opacity:0; transition:opacity 0.9s, transform 0.9s; z-index:4;
    }
    .par-quote.active { opacity:1; transform:translateX(-50%) translateY(0); }
    .par-quote.exit   { opacity:0; transform:translateX(-50%) translateY(-18px); }
    .par-quote.enter  { opacity:0; transform:translateX(-50%) translateY(18px); }

    /* ===== HISTORY ===== */
    #history { background:var(--ivory); padding:100px 64px; }
    .history-intro {
      max-width:820px; margin:0 auto 60px;
      text-align:center; font-size:1.02rem; line-height:2.05; color:#100800;
    }
    .timeline { max-width:1100px; margin:0 auto; position:relative; }
    .timeline::before {
      content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
      background:linear-gradient(to bottom,transparent, var(--sun) 8%, var(--sun) 92%, transparent);
      transform:translateX(-50%);
    }
    .tl-row { display:grid; grid-template-columns:1fr 56px 1fr; margin-bottom:52px; align-items:start; }
    .tl-row.right .tl-card { grid-column:3; }
    .tl-row.left  .tl-card { grid-column:1; }
    .tl-dot-col { grid-column:2; display:flex; align-items:flex-start; justify-content:center; padding-top:14px; }
    .tl-dot { width:16px; height:16px; border-radius:50%; flex-shrink:0; background:var(--sun); border:3px solid white; box-shadow:0 0 0 3px var(--sun); }
    .tl-card { background:white; border-radius:12px; padding:24px 28px; box-shadow:0 4px 20px rgba(13,27,42,0.09); transition:transform 0.3s, box-shadow 0.3s; }
    .tl-row.right .tl-card { border-left:4px solid var(--sun); }
    .tl-row.left  .tl-card { border-right:4px solid var(--sun); text-align:right; }
    .tl-card:hover { transform:translateY(-4px); box-shadow:0 10px 34px rgba(13,27,42,0.15); }
    .tl-era { display:block; font-size:0.7rem; letter-spacing:3px; color:var(--sun); text-transform:uppercase; margin-bottom:7px; }
    .tl-card h3 { font-size:1.04rem; color:var(--navy); margin-bottom:10px; }
    .tl-card p  { font-size:0.93rem; line-height:1.9; color:#1A1000; }

    /* ===== MODH DYNASTY ===== */
    #dynasty {
      background:linear-gradient(160deg, var(--navy) 0%, #0A1520 60%, #060E16 100%);
      padding:90px 64px;
    }
    .dynasty-grid {
      max-width:1100px; margin:0 auto;
      display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px;
    }
    .dynasty-card {
      background:rgba(255,255,255,0.03);
      border:1px solid rgba(245,166,35,0.2);
      border-radius:14px; padding:32px 28px;
      position:relative; overflow:hidden;
      transition:background 0.3s, transform 0.3s;
    }
    .dynasty-card::before {
      content:''; position:absolute; top:-40px; left:-40px;
      width:120px; height:120px; border-radius:50%;
      background:radial-gradient(circle, rgba(245,166,35,0.07), transparent);
      pointer-events:none;
    }
    .dynasty-card:hover { background:rgba(255,255,255,0.06); transform:translateY(-4px); }
    .dynasty-icon { display:block; font-size:2.2rem; margin-bottom:14px; }
    .dynasty-card h3 { color:var(--goldl); font-size:1.08rem; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid rgba(245,166,35,0.18); }
    .dynasty-card p { color:rgba(253,242,195,0.78); font-size:0.91rem; line-height:1.9; }

    /* ===== SUN TEMPLE FEATURE ===== */
    #suntemple {
      background: var(--ivory);
      padding:90px 64px;
    }
    .suntemple-inner {
      max-width:1100px; margin:0 auto;
      display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
    }
    .suntemple-img {
      position:relative; border-radius:14px; overflow:hidden;
      box-shadow:0 16px 48px rgba(13,27,42,0.18);
    }
    .suntemple-img img {
      width:100%; display:block; border-radius:14px;
      transition:transform 0.6s;
    }
    .suntemple-img:hover img { transform:scale(1.03); }
    .suntemple-img::after {
      content:''; position:absolute; inset:0; border-radius:14px;
      border:2px solid rgba(245,166,35,0.3); pointer-events:none;
    }
    .suntemple-badge {
      position:absolute; top:16px; right:16px;
      background:rgba(13,27,42,0.88); backdrop-filter:blur(8px);
      color:var(--goldl); font-size:0.7rem; letter-spacing:2px;
      padding:6px 14px; border-radius:20px;
      border:1px solid rgba(245,166,35,0.35);
    }
    .suntemple-text h3 { font-size:1.5rem; color:var(--navy); margin-bottom:18px; }
    .suntemple-text p { font-size:0.98rem; line-height:2; color:#1A1000; margin-bottom:16px; }
    .feature-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
    .pill {
      background:rgba(245,166,35,0.1); color:var(--dsun);
      border:1px solid rgba(245,166,35,0.35);
      border-radius:20px; padding:6px 16px;
      font-size:0.8rem; letter-spacing:0.5px;
    }

    /* ===== 3 INFO BLOCKS ===== */
    #inforow {
      background:linear-gradient(150deg, var(--navy) 0%, #060E16 100%);
      padding:80px 64px;
    }
    .info-blocks {
      max-width:1100px; margin:0 auto;
      display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px;
    }
    .info-block {
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(245,166,35,0.2);
      border-radius:16px; padding:38px 30px;
      position:relative; overflow:hidden;
      transition:background 0.3s, transform 0.3s;
    }
    .info-block::before {
      content:''; position:absolute; top:-50px; right:-50px;
      width:130px; height:130px; border-radius:50%;
      background:radial-gradient(circle,rgba(245,166,35,0.07),transparent);
      pointer-events:none;
    }
    .info-block:hover { background:rgba(255,255,255,0.07); transform:translateY(-5px); }
    .block-icon { display:block; font-size:2.5rem; margin-bottom:16px; }
    .info-block h3 { color:var(--goldl); font-size:1.18rem; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(245,166,35,0.18); }
    .info-block p, .info-block li { color:rgba(253,242,195,0.82); font-size:0.92rem; line-height:1.95; }
    .info-block ul { list-style:none; }
    .info-block ul li { padding:4px 0; }
    .info-block ul li::before { content:'✦ '; color:var(--sun); font-size:0.65rem; }
    .info-block a { color:var(--goldl); text-decoration:none; }
    .info-block a:hover { text-decoration:underline; }
    .c-row { display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; }
    .c-lbl { color:var(--sun); font-size:0.75rem; letter-spacing:1px; min-width:52px; padding-top:2px; flex-shrink:0; }
    .c-val { color:rgba(253,242,195,0.8); font-size:0.91rem; line-height:1.65; }

    /* ===== FOOTER ===== */
    footer {
      background:#020608; padding:26px 60px;
      display:flex; align-items:center; justify-content:space-between;
      border-top:1px solid rgba(245,166,35,0.18);
      flex-wrap:wrap; gap:16px;
    }
    .foot-left { color:rgba(201,168,76,0.5); font-size:0.8rem; line-height:1.75; }
    .foot-left strong { color:var(--sun); }
    .audio-player {
      display:flex; align-items:center; gap:12px;
      background:rgba(245,166,35,0.07);
      border:1px solid rgba(245,166,35,0.2);
      border-radius:40px; padding:10px 20px;
    }
    .play-btn {
      width:36px; height:36px; border-radius:50%;
      background:linear-gradient(135deg, var(--sun), var(--dsun));
      border:none; cursor:pointer; color:white; font-size:1rem;
      display:flex; align-items:center; justify-content:center;
      transition:transform 0.2s; flex-shrink:0;
    }
    .play-btn:hover { transform:scale(1.12); }
    .audio-info { color:rgba(245,166,35,0.6); font-size:0.76rem; line-height:1.55; }
    .audio-info strong { display:block; color:var(--sun); font-size:0.82rem; }
    .wave-bars { display:flex; gap:3px; align-items:center; height:18px; }
    .wave-bar { width:3px; background:var(--sun); border-radius:2px; animation:wave 1.2s ease-in-out infinite; opacity:0.2; }
    .wave-bar:nth-child(1){height:7px;animation-delay:0s}
    .wave-bar:nth-child(2){height:13px;animation-delay:.15s}
    .wave-bar:nth-child(3){height:18px;animation-delay:.3s}
    .wave-bar:nth-child(4){height:13px;animation-delay:.45s}
    .wave-bar:nth-child(5){height:7px;animation-delay:.6s}
    .wave-bar.playing { opacity:1; }
    @keyframes wave { 0%,100%{transform:scaleY(0.55)} 50%{transform:scaleY(1)} }

    .float-top {
      position:fixed; bottom:76px; right:22px;
      width:50px; height:50px; border-radius:50%;
      background:linear-gradient(135deg, var(--sun), var(--dsun));
      display:flex; align-items:center; justify-content:center;
      color:white; font-size:1.2rem;
      box-shadow:0 4px 22px rgba(245,166,35,0.42);
      text-decoration:none; z-index:999;
      transition:transform 0.3s;
    }
    .float-top:hover { transform:scale(1.13) rotate(15deg); }

    /* Scroll reveal */
    .fade-up { opacity:0; transform:translateY(30px); transition:opacity 0.7s, transform 0.7s; }
    .fade-up.visible { opacity:1; transform:translateY(0); }
    .fade-up.d1 { transition-delay:0.12s; }
    .fade-up.d2 { transition-delay:0.24s; }
    .fade-up.d3 { transition-delay:0.36s; }

    /* Responsive */
    @media(max-width:900px){
      #hero { grid-template-columns:1fr; padding:96px 28px 0; }
      .hero-right { margin-bottom:-60px; }
      .img-frame { width:290px; }
      #welcome,#history,#dynasty,#suntemple,#inforow { padding-left:28px; padding-right:28px; }
      .welcome-grid, .suntemple-inner { grid-template-columns:1fr; gap:40px; }
      .dynasty-grid, .info-blocks { grid-template-columns:1fr; }
      .timeline::before { left:22px; }
      .tl-row { grid-template-columns:44px 1fr; }
      .tl-dot-col { grid-column:1; }
      .tl-row.left .tl-card, .tl-row.right .tl-card {
        grid-column:2; text-align:left; border-left:4px solid var(--sun); border-right:none;
      }
      nav { padding:0 20px; }
      .nav-links { gap:14px; }
      footer { padding:20px 24px; }
    }