:root{--accent:#E6498A;--bg:#0f1115;--fg:#f4f4f4}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;transition:.45s}
body.light{background:#f8f8f5;color:#282828}
.grid{position:fixed;inset:-30%;pointer-events:none;transform:perspective(1400px) rotateX(78deg);background-image:linear-gradient(rgba(255,255,255,.09)1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09)1px,transparent 1px);background-size:56px 56px}
body.light .grid{background-image:linear-gradient(rgba(0,0,0,.08)1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08)1px,transparent 1px)}
.hero{position:relative;z-index:2;max-width:1200px;margin:auto;padding:20vh 8vw}
.eyebrow{color:var(--accent);font-weight:800;letter-spacing:.35em;font-size:.82rem}
h1{font-size:clamp(2.25rem,4.2vw,4rem);line-height:1.04;white-space:nowrap;margin:.25em 0 .9em}
p{max-width:720px;font-size:1.08rem;line-height:1.8;font-weight:100}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 28px;
border-radius:999px;
text-decoration:none;
color:inherit;
font-size:.95rem;
font-weight:500;
background:rgba(255,255,255,.045);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.14);
box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.22);
transition:all .28s ease;
}
.lamp{position:fixed;top:0;right:72px;display:flex;flex-direction:column;align-items:center;z-index:5}
.cord{position:relative;width:2px;height:140px;background:#777}
#spark{position:absolute;left:-3px;top:-8px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff,0 0 22px var(--accent);opacity:0}
#lampBtn{background:none;border:0;padding:0;cursor:pointer}
#lampBtn img{width:88px;display:block}
#room{position:fixed;top:-220px;right:-220px;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(255,248,220,.30),transparent 70%);filter:blur(65px);opacity:.15;transition:.5s;pointer-events:none}
body.light #room{opacity:.72}
#cursor{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;filter:blur(70px);background:radial-gradient(circle,rgba(230,73,138,.22),transparent 70%)}

@media (max-width:1199px){
.hero{padding:20vh 7vw}
.lamp{right:36px}
#lampBtn img{width:76px}
#room{width:620px;height:620px}
}
@media (max-width:900px){
h1{white-space:normal}
.hero{padding:220px 8vw 60px;text-align:center}
p{max-width:100%;font-size:1rem}
.btn{width:100%;max-width:320px}
.lamp{left:50%;right:auto;transform:translateX(-50%)}
.cord{height:110px}
#lampBtn img{width:58px}
#room{left:50%;right:auto;transform:translateX(-50%);top:-260px;width:520px;height:520px}
}
@media (max-width:600px){
.hero{padding:205px 24px 40px}
.eyebrow{font-size:.72rem;letter-spacing:.28em}
h1{font-size:2.3rem}
.grid{background-size:40px 40px}
#room{width:420px;height:420px}
}
@media (hover:none),(pointer:coarse){
#cursor{display:none}
}

.secondary{color:rgba(230,73,138,.82);font-weight:500}

.btn:hover{
transform:translateY(-2px);
background:rgba(230,73,138,.10);
border-color:rgba(230,73,138,.35);
box-shadow:
inset 0 1px rgba(255,255,255,.10),
0 16px 34px rgba(0,0,0,.28),
0 0 22px rgba(230,73,138,.14);
}
body.light .btn{
background:rgba(255,255,255,.75);
border:1px solid rgba(0,0,0,.08);
box-shadow:0 10px 26px rgba(0,0,0,.08);
}
body.light .btn:hover{
background:#fff;
border-color:rgba(230,73,138,.28);
}



/* ===== Typography refinement ===== */

.hero{
    max-width:1200px;
}

.hero h1{
    margin-bottom:0.9em;
}

.hero p{
    max-width:700px;
    margin:0 0 1.5rem 0;

    text-align:justify;
    text-align-last:left;
    text-justify:inter-word;

    line-height:1.8;

    hyphens:none;
    -webkit-hyphens:none;
    -ms-hyphens:none;

    word-break:normal;
    overflow-wrap:normal;
    line-break:auto;
}

.hero .secondary{
    max-width:700px;
    margin:0 0 1.5rem 0;
    color:rgba(230,73,138,.82);
    font-weight:500;
    text-align:left;
}

@media (max-width:900px){
    .hero{
        padding:220px 8vw 60px;
    }

    .hero h1{
        text-align:center;
        margin-bottom:0.8em;
    }

    .hero p{
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .hero p{
        text-align:justify;
        text-align-last:left;
    }

    .hero .secondary{
      text-align:center;
    }
}

@media (max-width:480px){
    .hero p{
        text-align:justify;
        text-align-last:left;
    }

    .hero .secondary{
        text-align:center;
    }
}


/* ===== Natural pendulum swing ===== */
.lamp{
    transform-origin: top center;
    animation: lampSwing 3.9s cubic-bezier(.445,.05,.55,.95) infinite alternate;
    will-change: transform;
}

@keyframes lampSwing{
    from{ transform: rotate(-2.3deg); }
    to{ transform: rotate(2.3deg); }
}

@media (max-width:900px){
    .lamp{
        animation: lampSwingMobile 3.9s cubic-bezier(.445,.05,.55,.95) infinite alternate;
    }

    @keyframes lampSwingMobile{
        from{ transform: translateX(-50%) rotate(-2.3deg); }
        to{ transform: translateX(-50%) rotate(2.3deg); }
    }
}


/* Premium polish */
body{
  transition:background-color .8s ease,color .8s ease;
}
.grid{
  opacity:.045 !important;
  filter:blur(.15px);
  mask-image:radial-gradient(circle at center, rgba(0,0,0,1) 35%, rgba(0,0,0,.65) 70%, transparent 100%);
  -webkit-mask-image:radial-gradient(circle at center, rgba(0,0,0,1) 35%, rgba(0,0,0,.65) 70%, transparent 100%);
  transition:opacity .8s ease;
}


/* ---- V12 Premium tuning ---- */
.grid{
  opacity:0.75 !important;
  filter:blur(.1px);
}

body.light-mode .grid,
body.lamp-on .grid,
html.light .grid{
  opacity:0.7 !important;
  background-image:
    linear-gradient(rgba(200,206,216,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,206,216,.07) 1px, transparent 1px) !important;
}

@media (max-width:991px){
  .hero .secondary{
    text-align:left !important;
    margin-inline:auto;
  }
}

/* RC1 mobile alignment */
@media (max-width:1024px){
  .hero.secondary{
    text-align:center!important;
    margin-left:auto;
    margin-right:auto;
    width:100%;
  }
}

body.light-mode .particle,
html.light .particle{
    filter:blur(0.8px);
}

body.light-mode{
    --particle-grey:#bcc3cd;
    --particle-pink:#d73089;
    --particle-purple:#875dcb;
}

body.light-mode .hero{
    text-shadow:0 0 32px rgba(255,248,235,.55);
}