:root{
    --ink:#0B1215;
    --panel:#121A1E;
    --panel-2:#161F24;
    --brass:#b79767;
    --brass2:#997949;
    --brass-dim:#8E764C;
    --sage:#8C9A8B;
    --ivory:#F1EDE4;
    --muted:#9BA3A0;
    --hair:rgba(241,237,228,0.12);
    --green:#17494a;
  }

  ::selection{ background:var(--brass); color:var(--ink); }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--ink);
    color:var(--ivory);
    font-family:'Inter', sans-serif;
    font-weight:300;
    overflow-x:hidden;
  }

  h1,h2,h3,h4, .display-font{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
  }

  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }

  .text-brass{ color:var(--brass) !important; }
  .text-sage{ color:var(--sage) !important; }
  .text-muted-c{ color:var(--muted) !important; }
  .bg-panel{ background:var(--panel); }
  .bg-panel-2{ background:var(--panel-2); }

  a{ color:var(--brass); text-decoration:none; }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--brass);
  }

  hr.hair{ border-top:1px solid var(--hair); opacity:1; margin:0; }

  /* ---------- Navbar ---------- */
  .navbar-custom{
    background:var(--green);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--hair);
  }
  .navbar-custom .nav-link{
    color:var(--ivory);
    font-size:0.82rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-family:'IBM Plex Mono', monospace;
    opacity:0.75;
    margin:0 0.6rem;
    transition:opacity .2s;
  }
  .navbar-custom .nav-link:hover{ opacity:1; color:var(--brass); }
  .brand-mark{
    font-family:'Fraunces', serif;
    font-size:1.35rem;
    letter-spacing:0.02em;
    color:var(--ivory) !important;
  }
  .brand-mark span{ color:var(--brass); }

  .btn-brass{
    background:var(--brass);
    color:var(--ink);
    border:1px solid var(--brass);
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:0.65rem 1.4rem;
    border-radius:2px;
    transition: all .25s ease;
  }
  .btn-brass:hover{ background:transparent; color:var(--brass); }
  .btn-black{
    background:var(--ink);
    color:var(--ivory);
    border:1px solid var(--brass);
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:0.65rem 1.4rem;
    border-radius:2px;
    transition: all .25s ease;
  }
  .btn-outline-brass{
    background:transparent;
    color:var(--ivory);
    border:1px solid var(--hair);
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:0.65rem 1.4rem;
    border-radius:2px;
    transition: all .25s ease;
  }
  .btn-outline-brass:hover{ border-color:var(--brass); color:var(--brass); }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
     color:var(--ink);
    display:flex;
    align-items:center;
    background:
      radial-gradient(ellipse at 80% 20%, rgba(201,164,105,0.10), transparent 55%),
      linear-gradient(180deg, var(--ink) 0%, #0D1518 100%);
  }

  .skyline-svg{ display:block; width:100%; height:auto; }
  .skyline-svg .tower{ fill:none; stroke:var(--brass); stroke-width:1; opacity:0.9; }
  .skyline-svg .tower-fill{ fill:var(--panel-2); stroke:var(--hair); stroke-width:1; }
  .skyline-svg .window{ fill:var(--brass); opacity:0.35; }
  .skyline-svg .window.lit{ opacity:0.85; }
  .skyline-svg .ground{ stroke:var(--hair); stroke-width:1; }

  .hero-kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size:1rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--ink);
    
  }

  .hero h1{
    font-size:clamp(2.6rem, 6vw, 5.2rem);
    line-height:1.02;
    color:var(--ink);
  }
  .hero h1 em{
    font-style:italic;
    color:var(--brass2);
  }
  

  .hero-stat{
    border-left:1px solid var(--hair);
    padding-left:1rem;
  }
  .hero-stat .num{
    font-family:'Fraunces', serif;
    font-size:1.7rem;
    color:var(--brass);
  }
  .hero-stat .lbl{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
  }

  .scroll-cue{
    position:absolute;
    bottom:2rem; left:50%;
    transform:translateX(-50%);
    font-family:'IBM Plex Mono', monospace;
    font-size:0.65rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--muted);
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
  }
  .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--brass), transparent); animation: pulse-line 2s ease-in-out infinite; }
  @keyframes pulse-line{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

  /* ---------- Section rhythm ---------- */
  section{ padding:7rem 0; position:relative; }
  .section-head{ max-width:640px; }
  .section-head h2{ font-size:clamp(2rem, 3.4vw, 2.9rem); }

  /* ---------- About ---------- */
  .about-frame{
    position:relative;
    border:1px solid var(--hair);
    padding:0.6rem;
  }
  .about-frame img{ width:100%; display:block; filter:grayscale(0.15) contrast(1.05); }
  .about-frame::before{
    content:"";
    position:absolute; inset:-14px auto auto -14px;
    width:60px; height:60px;
    border-top:1px solid var(--brass);
    border-left:1px solid var(--brass);
  }
  .about-frame::after{
    content:"";
    position:absolute; inset:auto -14px -14px auto;
    width:60px; height:60px;
    border-bottom:1px solid var(--brass);
    border-right:1px solid var(--brass);
  }

  /* ---------- Highlights ---------- */
  .highlight-row{
    border-top:1px solid var(--hair);
    padding:1.6rem 0;
    display:flex;
    align-items:baseline;
    gap:1.5rem;
    transition: padding-left .3s ease;
  }
  .highlight-row:hover{ padding-left:0.8rem; }
  .highlight-row:last-child{ border-bottom:1px solid var(--hair); }
  .highlight-idx{
    font-family:'IBM Plex Mono', monospace;
    color:var(--brass-dim);
    font-size:0.85rem;
    min-width:2.5rem;
  }
  .highlight-row h3{ font-size:1.25rem; color:var(--ivory); margin:0; }

  /* ---------- Floor plans ---------- */
  .plan-card{
    background:var(--panel);
    border:1px solid var(--hair);
    padding:2.2rem;
    height:100%;
    transition: border-color .3s ease, transform .3s ease;
  }
  .plan-card:hover{ border-color:var(--brass-dim); transform:translateY(-4px); }
  .plan-card .config{ font-size:2.4rem; color:var(--brass); }
  .plan-card .area{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.95rem;
    color:var(--muted);
  }

  /* ---------- Amenities ---------- */
  .amenity{
    border:1px solid var(--hair);
    padding:1.6rem 1.2rem;
    text-align:center;
    height:100%;
    transition: background .3s ease, border-color .3s ease;
  }
  .amenity:hover{ background:var(--panel); border-color:var(--brass-dim); }
  .amenity i{ color:var(--brass); font-size:1.3rem; margin-bottom:0.7rem; display:block; }
  .amenity span{ font-size:0.85rem; color:var(--ivory); }

  /* ---------- Connectivity ---------- */
  .conn-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.1rem 0;
    border-bottom:1px solid var(--hair);
  }
  .conn-time{
    font-family:'IBM Plex Mono', monospace;
    color:var(--brass);
    font-size:0.9rem;
  }

  /* ---------- Legacy / stats ---------- */
  .legacy-band{
    background:var(--panel-2);
    border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);
  }
  .legacy-stat .num{
    font-family:'Fraunces', serif;
    font-size:clamp(2.2rem,4vw,3.2rem);
    color:var(--brass);
  }
  .legacy-stat .lbl{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* ---------- FAQ ---------- */
  .accordion-item{
    background:transparent;
    border:none;
    border-bottom:1px solid var(--hair);
    border-radius:0 !important;
  }
  .accordion-button{
    background:transparent;
    color:var(--ivory);
    font-family:'Fraunces', serif;
    font-size:1.15rem;
    font-weight:500;
    padding:1.4rem 0;
    box-shadow:none !important;
  }
  .accordion-button:not(.collapsed){ color:var(--brass); background:transparent; }
  .accordion-button::after{ filter: invert(72%) sepia(28%) saturate(478%) hue-rotate(357deg) brightness(94%) contrast(89%); }
  .accordion-body{ color:var(--muted); padding:0 0 1.6rem 0; font-weight:300; line-height:1.7; }

  /* ---------- CTA / Footer ---------- */
  .cta-band{
    background:
      radial-gradient(ellipse at 30% 50%, rgba(201,164,105,0.12), transparent 60%),
      var(--ink);
    border-top:1px solid var(--hair);
    text-align:center;
  }
  .cta-band h2{ font-size:clamp(2.1rem,4.4vw,3.6rem); }

  footer{
    background:#090F12;
    border-top:1px solid var(--hair);
    padding:3rem 0 1.5rem;
    font-size:0.85rem;
    color:var(--muted);
  }
  footer a{ color:var(--muted); }
  footer a:hover{ color:var(--brass); }
  .rera-note{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.04em;
    color:var(--muted);
    max-width:900px;
  }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .scroll-cue .line{ animation:none; }
  }

  @media (max-width: 767px){
    section{ padding:4.5rem 0; }
    .hero{ padding-top:5.5rem; text-align:left; }
  }