/* ============================================================
   DHANISHTA TECHNOLOGIES — dhanishta.net
   Retro × Modern. A sky across a day:
   dawn purple → golden day → dusk orange → stormy blue night.
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer}

/* ---------- Tokens ---------- */
:root{
  --paper:#FFF3D4;        /* mostly-yellow warm field */
  --paper-2:#FDE9B8;
  --yellow:#FFC22E;       /* the beautiful golden yellow */
  --yellow-hi:#FFDD76;
  --yellow-glow:#FFD43C;  /* the card's luminous sun-gold */
  --gold-deep:#D4A032;    /* the card's deep ornament gold */
  --cream:#FFF7E2;        /* warm cream highlight */
  --night:#0F1A33;        /* deep blue-black — gold-on-dark tiles */
  --storm:#23407A;        /* stormy sky blue */
  --storm-deep:#15264C;   /* deepest night blue — ink */
  --dawn:#7E6BB0;         /* dawn purple */
  --dusk:#E8743B;         /* dusk orange */
  --ink:#15264C;
  --ink-soft:#3C4D77;

  --maxw:1180px;
  --gut:clamp(20px,5vw,64px);
  --display:"Playfair Display",Georgia,serif;
  --body:"Manrope",system-ui,sans-serif;
  --mono:"Space Mono","SFMono-Regular",monospace;
}

/* ---------- Base ---------- */
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html{overflow-x:hidden}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* selection */
::selection{background:var(--dusk);color:var(--paper)}

/* ---------- Film grain ---------- */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1.5px solid var(--ink);
}
.wordmark{
  font-family:var(--display);font-weight:900;font-size:1.05rem;
  letter-spacing:.14em;display:inline-flex;align-items:center;gap:.5ch;
}
.wordmark .star{color:var(--dusk);font-size:.9em;transform:translateY(-1px)}
.nav-links{display:flex;gap:clamp(14px,3vw,34px);font-family:var(--mono);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.nav-links a{padding-bottom:2px;border-bottom:1.5px solid transparent;transition:border-color .2s}
.nav-links a:hover{border-color:var(--dusk)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:clamp(560px,86vh,860px);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;
  padding-block:clamp(40px,7vw,90px);
}
.hero-copy{position:relative;z-index:2}
.eyebrow{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--storm);margin-bottom:22px;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:34px;height:1.5px;background:var(--dusk)}
.hero h1{
  font-family:var(--display);
  font-weight:900;font-optical-sizing:auto;
  font-size:clamp(2.7rem,7vw,5.4rem);
  line-height:.96;letter-spacing:-.02em;
  margin-bottom:26px;
  text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--dusk);font-weight:600}
.lede{font-size:clamp(1.02rem,1.6vw,1.22rem);max-width:46ch;color:var(--ink-soft);margin-bottom:34px}
.cta{
  display:inline-flex;align-items:center;gap:12px;border-radius:10px;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 24px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,247,226,.14),0 16px 34px -18px rgba(21,38,76,.7);
  transition:transform .18s ease, background .2s, color .2s, box-shadow .2s;
}
.cta:hover{background:var(--dusk);border-color:var(--dusk);color:var(--paper);transform:translateY(-2px);
  box-shadow:0 18px 38px -16px rgba(232,116,59,.6)}
.cta .arrow{transition:transform .2s}
.cta:hover .arrow{transform:translateY(3px)}

/* ---------- The Sun — the card's radiant disc × retrowave ---------- */
.sun-stage{position:relative;display:grid;place-items:center;z-index:1}
.sun-stage::before{ /* luminous halo — the card's sun-glow */
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:128%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,205,70,.34) 0%,rgba(232,116,59,.12) 46%,transparent 70%);
  filter:blur(4px);
}
.sun{
  position:relative;isolation:isolate;z-index:1;
  width:min(58vw,440px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 38% 33%,rgba(255,247,226,.95) 0%,rgba(255,247,226,0) 44%),
    linear-gradient(180deg,var(--yellow-hi) 0%,var(--yellow) 42%,#F2933B 72%,var(--dusk) 100%);
  box-shadow:
    0 0 60px rgba(255,205,60,.5),
    0 0 150px rgba(255,160,40,.34),
    0 36px 90px -24px rgba(232,116,59,.5),
    inset 0 2px 10px rgba(255,247,226,.5);
  animation:breathe 9s ease-in-out infinite;
}
.sun::after{ /* softened venetian stripes — retro signature, kept as a whisper */
  content:"";position:absolute;inset:0;border-radius:50%;opacity:.45;
  background:repeating-linear-gradient(180deg,var(--cream) 0 4px,transparent 4px 24px);
  -webkit-mask:linear-gradient(180deg,transparent 50%,#000 57%);
          mask:linear-gradient(180deg,transparent 50%,#000 57%);
}
.sun .rays{
  position:absolute;inset:-18%;z-index:-1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,212,60,.30) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 47%,#000 48%);
          mask:radial-gradient(circle,transparent 47%,#000 48%);
  animation:spin 70s linear infinite;
}
@keyframes breathe{50%{transform:scale(1.018)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Card motifs: corner brackets + gem rule ---------- */
.corner{position:absolute;width:18px;height:18px;border:1.5px solid var(--gold-deep);opacity:.6;pointer-events:none}
.corner.tl{top:16px;left:16px;border-width:1.5px 0 0 1.5px}
.corner.tr{top:16px;right:16px;border-width:1.5px 1.5px 0 0}
.corner.bl{bottom:16px;left:16px;border-width:0 0 1.5px 1.5px}
.corner.br{bottom:16px;right:16px;border-width:0 1.5px 1.5px 0}
.gemrule{display:flex;align-items:center;gap:14px}
.gemrule .ln{height:1px;width:min(120px,16vw);background:linear-gradient(to right,transparent,var(--gold-deep))}
.gemrule .ln.r{background:linear-gradient(to left,transparent,var(--gold-deep))}
.gemrule .gem{width:7px;height:7px;background:var(--yellow);transform:rotate(45deg);box-shadow:0 0 12px var(--yellow);flex-shrink:0}

/* ---------- Marquee ---------- */
.marquee{
  border-block:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  overflow:hidden;white-space:nowrap;
}
.marquee-track{display:inline-flex;gap:0;animation:scroll 28s linear infinite;will-change:transform}
.marquee span{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.7rem);padding:14px 30px;display:inline-flex;align-items:center;gap:30px;
}
.marquee span::after{content:"✦";color:var(--yellow);font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Section scaffolding ---------- */
.section{padding-block:clamp(70px,11vw,150px)}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(34px,5vw,64px)}
.sec-head .idx{font-family:var(--mono);font-size:.8rem;color:var(--dusk);letter-spacing:.1em}
.sec-head h2{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,4.2vw,3rem);letter-spacing:-.015em}

/* ---------- Apps list ---------- */
.app{border-top:1.5px solid var(--ink)}
.app:last-child{border-bottom:1.5px solid var(--ink)}
.app a,.app .row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,4vw,48px);
  padding:clamp(26px,4vw,44px) 4px;
}
.app .num{font-family:var(--mono);font-size:.86rem;color:var(--ink-soft)}
.app .name{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2rem,6vw,4rem);line-height:1;letter-spacing:-.02em}
.app .desc{display:block;font-size:.96rem;color:var(--ink-soft);max-width:42ch;margin-top:10px}
.app .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 12px;border:1.5px solid var(--ink);border-radius:7px;white-space:nowrap}

/* live (Room) — glossy gold-on-dark tile (the card, in miniature) */
.app--live{border:none;margin:10px 0 30px}
.app--live a{
  position:relative;overflow:hidden;border-radius:16px;
  padding:clamp(30px,4vw,48px);color:var(--cream);
  background:
    radial-gradient(130% 150% at 82% -20%,rgba(255,212,80,.24),transparent 56%),
    linear-gradient(180deg,#1b2c52 0%,var(--storm-deep) 60%,var(--night) 100%);
  border:1px solid rgba(255,210,90,.3);
  box-shadow:0 34px 80px -34px rgba(232,116,59,.55),inset 0 1px 0 rgba(255,247,226,.12);
  transition:transform .3s ease,box-shadow .3s ease;
}
.app--live a:hover{
  transform:translateY(-4px);
  box-shadow:0 44px 96px -34px rgba(255,170,50,.7),inset 0 1px 0 rgba(255,247,226,.18);
}
.app--live .num{color:rgba(255,247,226,.55)}
.app--live .name{color:var(--yellow-hi);text-shadow:0 0 34px rgba(255,200,60,.5)}
.app--live .desc{color:rgba(255,247,226,.8)}
.app--live .tag{background:linear-gradient(180deg,var(--yellow-hi),var(--yellow));border:none;
  color:var(--storm-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.app--live .go{font-size:1.6rem;color:var(--yellow-hi);transition:transform .25s}
.app--live a:hover .go{transform:translate(6px,-2px)}

/* forthcoming rows */
.app--soon .row{opacity:.5}
.app--soon .name{color:var(--ink-soft)}
.app--soon .tag{border-style:dashed}

/* ---------- Contact / philosophy band ---------- */
.band{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 120% at 80% -10%,rgba(255,205,70,.14),transparent 55%),
    linear-gradient(180deg,var(--storm-deep),var(--night));
  color:var(--paper);
  border-block:1.5px solid var(--ink);
}
.band .wrap{padding-block:clamp(70px,11vw,140px)}
.band .pre{font-family:var(--mono);font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:24px}
.band .big{font-family:var(--display);font-weight:600;font-style:italic;
  font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.18;max-width:22ch;text-wrap:balance;margin-bottom:38px}
.band .big b{font-style:normal;font-weight:900;color:var(--yellow)}
.band-links{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;font-family:var(--mono);
  font-size:.82rem;letter-spacing:.06em}
.pill{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:10px;
  border:1.5px solid rgba(255,247,226,.55);
  background:linear-gradient(180deg,rgba(255,247,226,.08),rgba(255,247,226,.02));
  box-shadow:inset 0 1px 0 rgba(255,247,226,.18);
  transition:background .2s,color .2s,transform .18s,box-shadow .2s}
.pill:hover{background:linear-gradient(180deg,var(--yellow-hi),var(--yellow));border-color:var(--yellow);
  color:var(--storm-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(255,194,46,.6)}

/* ---------- Footer ---------- */
.foot{padding:40px var(--gut);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* =========================================================
   ROOM PAGE
   ========================================================= */
.room-hero{padding-block:clamp(60px,9vw,120px) clamp(40px,6vw,70px)}
.room-hero .eyebrow{color:var(--dawn)}
.room-hero h1{font-family:var(--display);font-weight:900;font-size:clamp(3.4rem,13vw,9rem);
  line-height:.9;letter-spacing:-.03em;margin-bottom:18px}
.room-hero .sub{font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(1.3rem,3.4vw,2.2rem);color:var(--dusk)}

/* dual state */
.dual{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);border-radius:16px;overflow:hidden}
.dual > div{position:relative;padding:clamp(28px,4vw,52px);min-height:clamp(240px,30vw,360px);display:flex;flex-direction:column;justify-content:space-between}
.dual .space{background:radial-gradient(120% 140% at 80% -10%,var(--yellow-hi),var(--yellow));color:var(--storm-deep)}
.dual .room{
  background:
    radial-gradient(120% 140% at 80% -10%,rgba(255,205,70,.16),transparent 55%),
    linear-gradient(180deg,var(--storm-deep),var(--night));
  color:var(--paper);border-left:1.5px solid var(--ink)}
.dual .room .label{color:var(--yellow-hi)}
.dual .label{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.dual h3{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1;margin-block:auto 14px}
.dual p{font-size:.98rem;max-width:34ch}
.dual .room p{color:#C9D2E6}

/* ideals */
.ideals{display:grid;gap:1.5px;background:var(--ink);border:1.5px solid var(--ink);border-radius:16px;overflow:hidden}
.ideal{background:linear-gradient(180deg,#FFF7E0,var(--paper));padding:clamp(28px,4vw,50px)}
.ideal .n{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,5vw,3.4rem);color:var(--dusk);line-height:1}
.ideal h3{font-family:var(--display);font-weight:900;font-size:clamp(1.3rem,2.6vw,1.8rem);margin:14px 0 12px;letter-spacing:-.01em}
.ideal p{color:var(--ink-soft);font-size:.98rem;max-width:48ch}

/* prose — Apple-calm: a large lead, airy spacing, no drop cap */
.prose{max-width:48ch}
.prose p{font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.75;margin-bottom:1.5em;color:var(--ink)}
.prose p:last-child{margin-bottom:0}
.prose p b{font-weight:700;color:var(--storm)}
.prose .lead{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.7rem,3.8vw,2.6rem);line-height:1.22;letter-spacing:-.01em;
  color:var(--ink);max-width:24ch;margin-bottom:1.1em;
}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;text-align:left}
  .sun-stage{order:-1;margin-bottom:10px;max-width:100%;overflow:hidden}
  .sun{width:min(72vw,340px)}
  .sun-stage::before{width:100%}
  .dual,.ideals{grid-template-columns:1fr}
  .dual .room{border-left:none;border-top:1.5px solid var(--ink)}
  /* regular soon rows */
  .app--soon .row{grid-template-columns:auto 1fr;gap:16px}
  .app--soon .tag{grid-column:2;justify-self:start;margin-top:10px}
  .nav-links{gap:16px}
  /* Room live tile — full reflow on mobile */
  .app--live a{
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    padding:24px 20px 22px;
  }
  .app--live .num{font-size:.8rem}
  .app--live .name{font-size:clamp(2.2rem,10vw,3rem)}
  .app--live .desc{font-size:.92rem;max-width:100%}
  .app--live a > span:last-child{display:flex;align-items:center;gap:14px;margin-top:4px}
  .app--live .corner{display:none}
}
@media (max-width:520px){
  .nav-links a:not(.nav-cta){display:none}
  .marquee span{font-size:1rem;padding:12px 20px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}