:root{
  --bg:#07080d;
  --bg2:#0c0e16;
  --panel:#11131c;
  --text:#f4f1f5;
  --muted:#aaa7b4;
  --line:#252836;
  --violet:#b34cff;
  --violet2:#7c2cff;
  --cyan:#6bc5d8;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 6%, rgba(108,38,168,.18), transparent 28rem),
    radial-gradient(circle at 85% 20%, rgba(40,96,128,.11), transparent 30rem),
    var(--bg);
  font-family:"Inter",system-ui,sans-serif;
  font-weight:300;
  line-height:1.65;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.shell{width:min(calc(100% - 40px),var(--max));margin:auto}

.topbar{
  position:fixed;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  height:72px;
  padding:0 max(20px,calc((100vw - var(--max))/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(5,6,10,.72);
  backdrop-filter:blur(16px);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Cormorant Garamond",serif;
  font-size:28px;
  letter-spacing:.02em;
}
.brand-mark{font-size:18px;color:var(--violet)}
nav{display:flex;align-items:center;gap:28px}
nav a{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  color:#d4d0d8;
  transition:.2s ease;
}
nav a:hover{color:white}
.nav-cta{color:white;border-bottom:1px solid var(--violet);padding-bottom:5px}

.hero{
  position:relative;
  min-height:790px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-backdrop{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,6,10,.98) 0%,rgba(7,8,13,.88) 34%,rgba(7,8,13,.24) 70%,rgba(7,8,13,.85) 100%),
    url("images/tower.webp") center/cover no-repeat;
  filter:saturate(.85);
  opacity:.78;
}
.hero-backdrop::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 40% 52%, rgba(127,37,188,.28), transparent 24rem),
    linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.56));
}
.hero-content{
  position:relative;
  min-height:790px;
  padding-top:128px;
  display:grid;
  grid-template-columns:1fr .88fr;
  align-items:center;
  gap:48px;
}
.hero-copy{z-index:2;padding-bottom:40px}
.eyebrow,.section-label,.section-note{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:11px;
}
.eyebrow{color:#c7b2d6;margin-bottom:12px}
h1,h2,h3{font-family:"Cormorant Garamond",serif;font-weight:500}
h1{
  margin:0;
  font-size:clamp(72px,9vw,132px);
  line-height:.82;
  letter-spacing:-.045em;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.ornament{width:320px;max-width:75%;display:flex;align-items:center;gap:10px;margin:30px 0 22px;color:#ddd0e8}
.ornament span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#8e6aa8)}
.ornament span:last-child{background:linear-gradient(90deg,#8e6aa8,transparent)}
.tagline{
  font-family:"Cormorant Garamond",serif;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:21px;
  margin:0 0 22px;
}
.intro{max-width:600px;color:#cfccd3;font-size:16px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  min-height:50px;
  padding:0 22px;
  border:1px solid #474a59;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:12px;
  font-weight:500;
  transition:.2s ease;
}
.button:hover{transform:translateY(-2px);border-color:#8d62a9}
.button-primary{
  border-color:#a03fe4;
  background:linear-gradient(135deg,rgba(157,51,223,.94),rgba(80,32,128,.94));
  box-shadow:0 0 28px rgba(165,56,225,.22);
}
.button-primary:hover{box-shadow:0 0 34px rgba(165,56,225,.38)}
.button-ghost{background:rgba(8,9,14,.55)}
.whisper{
  margin-top:48px;
  color:#aaa0b4;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
  font-style:italic;
  letter-spacing:.06em;
}
.hero-art-wrap{
  position:relative;
  align-self:end;
  height:650px;
  display:flex;
  align-items:end;
  justify-content:center;
}
.hero-art{
  max-height:620px;
  width:auto;
  filter:drop-shadow(0 0 42px rgba(87,40,129,.28));
  opacity:.97;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 26px 70px rgba(0,0,0,.44);
}

.section{padding:92px 0}
.about{background:linear-gradient(180deg,#090a10,#0b0d14)}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.section-label{color:#c66dff;margin:0 0 14px}
h2{
  font-size:clamp(42px,5vw,66px);
  line-height:.95;
  letter-spacing:-.025em;
  margin:0 0 28px;
}
.lead{font-family:"Cormorant Garamond",serif;font-size:24px;line-height:1.35;color:#f3ecf7}
.section-copy p:not(.section-label){max-width:520px;color:#bbb7c1}
.about-image{
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:#06070b;
}
.about-image img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:brightness(.8) saturate(.8);
}
.about-image figcaption,.shot figcaption{
  padding:11px 14px;
  color:#aba6b1;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.22em;
}

.media{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}
.section-heading h2{margin-bottom:0}
.section-note{color:#767381;margin:0 0 8px}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.shot{
  margin:0;
  overflow:hidden;
  border:1px solid #2c2f3b;
  background:#090a0f;
  transition:.25s ease;
}
.shot:hover{transform:translateY(-3px);border-color:#5e4a70}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.86) saturate(.86)}
.shot-wide{grid-column:span 1}

.features{background:linear-gradient(180deg,#0a0b11,#07080d)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px}
.feature-grid article{padding:26px 42px 10px;border-right:1px solid var(--line)}
.feature-grid article:first-child{padding-left:0}
.feature-grid article:last-child{border-right:0;padding-right:0}
.feature-icon{
  width:58px;height:58px;border:1px solid #8147a0;border-radius:50%;
  display:grid;place-items:center;color:#dba6ff;font-size:22px;margin-bottom:22px
}
h3{text-transform:uppercase;letter-spacing:.13em;font-size:23px;margin:0 0 8px}
.feature-grid p{color:#aaa6b0;margin:0}

.final-cta{
  position:relative;
  padding:76px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(7,8,13,.96),rgba(7,8,13,.78)),
    url("images/tower.webp") center 52%/cover no-repeat;
}
.final-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
.final-inner h2{font-size:48px;margin-bottom:0}

footer{padding:42px 0;background:#05060a}
.footer-inner{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center}
.studio-logo{width:112px;max-height:112px;object-fit:contain}
.footer-copy{display:flex;flex-direction:column}
.footer-copy strong{font-family:"Cormorant Garamond",serif;font-size:29px;font-weight:500}
.footer-copy span{color:#8f8b95;font-size:12px}
.footer-links{display:flex;gap:22px}
.footer-links a{color:#a8a3ad;text-transform:uppercase;letter-spacing:.14em;font-size:10px}
.footer-links a:hover{color:white}

@media (max-width:900px){
  .topbar{height:64px}
  nav{gap:16px}
  nav a{font-size:9px}
  .hero,.hero-content{min-height:auto}
  .hero-content{padding-top:116px;padding-bottom:60px;grid-template-columns:1fr}
  .hero-art-wrap{height:auto;order:-1}
  .hero-art{max-height:480px}
  .hero-copy{text-align:center}
  .ornament{margin-left:auto;margin-right:auto}
  .intro{margin-left:auto;margin-right:auto}
  .actions{justify-content:center}
  .about-grid{grid-template-columns:1fr;gap:42px}
  .feature-grid{grid-template-columns:1fr}
  .feature-grid article{border-right:0;border-bottom:1px solid var(--line);padding:28px 0}
  .feature-grid article:last-child{border-bottom:0}
  .final-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:620px){
  .shell{width:min(calc(100% - 28px),var(--max))}
  .brand{font-size:22px}
  nav a:not(.nav-cta){display:none}
  .hero-content{padding-top:92px}
  h1{font-size:72px}
  .tagline{font-size:16px}
  .section{padding:64px 0}
  .gallery{grid-template-columns:1fr}
  .section-heading{align-items:start;flex-direction:column;gap:12px}
  .final-inner h2{font-size:38px}
  .footer-inner{grid-template-columns:82px 1fr}
  .studio-logo{width:78px}
  .footer-links{grid-column:1/-1}
}