/* HomieAU Luxury Premium Landing — Deep Navy + Soft Gold */
:root{
  --navy:#0B1224;
  --navy2:#101B33;
  --ink:#0A1020;
  --gold:#D6B36A;
  --gold2:#B58A3A;

  --bg:#F6F7FB;
  --surface:rgba(255,255,255,.78);
  --surfaceSolid:#FFFFFF;
  --text:#0B1224;
  --muted:#4B5565;
  --line:rgba(11,18,36,.10);

  --radius:18px;
  --radius2:22px;
  --shadow: 0 24px 80px rgba(2,6,23,.14);
  --shadow2: 0 12px 36px rgba(2,6,23,.10);
  --shadow3: 0 8px 20px rgba(2,6,23,.08);

  --max: 1140px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(214,179,106,.16), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(59,130,246,.08), transparent 60%),
    var(--bg);
  line-height: 1.55;
}

a{color:inherit;text-decoration:none}
.container{width:min(var(--max), calc(100% - 40px)); margin: 0 auto;}
.mt-16{margin-top:16px}

.skip{
  position:absolute; left:-999px; top:-999px;
  background: var(--surfaceSolid); padding: 10px 12px; border-radius: 10px;
}
.skip:focus{left:18px; top:18px; z-index:9999}

.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(246,247,251,.68);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:900}
.brand-logo{width:30px;height:30px; object-fit:contain}
.brand-name{letter-spacing:-.35px}

.nav-links{display:flex; gap:18px; font-weight:700; color: rgba(11,18,36,.78)}
.nav-links a{
  padding:10px 12px;
  border-radius: 999px;
  transition: background .18s ease;
}
.nav-links a:hover{background: rgba(11,18,36,.06)}

.nav-cta{display:flex; align-items:center; gap:10px}
.icon-btn{
  display:none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 10px;
  cursor:pointer;
}

.mobile-menu{
  display:none;
  border-top: 1px solid var(--line);
  padding: 12px 0 16px;
}
.mobile-menu .container{display:flex; flex-direction:column; gap:10px}
.mobile-menu a{
  padding:12px 12px;
  border-radius: 14px;
  background: rgba(11,18,36,.04);
}
.mobile-menu a.btn{background: var(--navy); color:#fff}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary{
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  color:#fff;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow3);
}
.btn-primary:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.btn-ghost{
  background: rgba(255,255,255,.62);
}
.btn-ghost:hover{transform: translateY(-1px); box-shadow: var(--shadow3)}
.w-full{width:100%}

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
  padding-top: 10px;
}
.bg-blobs{position:absolute; inset:0; pointer-events:none}
.blob{position:absolute; filter: blur(28px); opacity:.9;}
.blob.b1{
  width: 520px; height: 520px;
  left:-120px; top:-160px;
  background: radial-gradient(circle at 30% 30%, rgba(214,179,106,.42), transparent 62%);
}
.blob.b2{
  width: 620px; height: 620px;
  right:-220px; top:-180px;
  background: radial-gradient(circle at 40% 40%, rgba(59,130,246,.16), transparent 62%);
}
.blob.b3{
  width: 520px; height: 520px;
  left: 40%; bottom:-280px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(214,179,106,.18), transparent 62%);
}
.grain{
  position:absolute; inset:-20%;
  opacity:.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  transform: rotate(8deg);
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 44px;
  padding: 64px 0 44px;
  align-items:center;
  position:relative;
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,18,36,.10);
  box-shadow: var(--shadow3);
  font-weight:800;
  color: rgba(11,18,36,.84);
}
.pill .dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(214,179,106,.18);
}

.hero-copy h1{
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -1.0px;
  margin: 16px 0 12px;
}
.gold{color: var(--gold)}
.lead{
  font-size: 17px;
  color: rgba(75,85,101,.98);
  max-width: 58ch;
  margin: 0 0 22px;
}

.cta-row{
  display:flex; gap: 12px; flex-wrap:wrap;
  margin: 18px 0 12px;
}

.store-btn{
  display:flex; align-items:center; gap: 12px;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(11,18,36,.10);
  box-shadow: var(--shadow3);
  min-width: 200px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.store-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.75);
}
.store-btn.is-disabled{
  opacity: .72;
  cursor: default;
}
.store-btn.is-disabled:hover{
  transform: none;
  box-shadow: var(--shadow3);
  background: rgba(255,255,255,.62);
}
.store-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(11,18,36,.08), rgba(214,179,106,.18));
  font-size: 18px;
}
.store-text{display:flex; flex-direction:column; line-height:1.06}
.store-small{font-size: 12px; color: rgba(75,85,101,.92); font-weight:800}
.store-big{font-size: 15px; font-weight: 950; letter-spacing:-.25px}

.sub-cta{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 18px}
.link-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(11,18,36,.10);
  font-weight: 850;
  color: rgba(11,18,36,.78);
  transition: transform .18s ease, background .18s ease;
}
.link-pill:hover{transform: translateY(-1px); background: rgba(255,255,255,.70)}

.trust-row{
  display:flex; gap: 14px; flex-wrap:wrap;
}
.trust-item{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,18,36,.10);
  border-radius: 18px;
  padding: 12px 14px;
  min-width: 170px;
  box-shadow: var(--shadow3);
}
.trust-item strong{display:block; font-weight: 950}
.trust-item span{color: rgba(75,85,101,.92); font-weight:700; font-size: 13px}

/* Hero device */
.hero-visual{position:relative; display:flex; justify-content:center}
.phone{
  width: 350px;
  border-radius: 38px;
  background: linear-gradient(180deg, #0b1224, #0f172a);
  padding: 12px;
  box-shadow: 0 46px 100px rgba(2,6,23,.28);
  border: 1px solid rgba(255,255,255,.12);
}
.phone-top, .phone-bottom{
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.phone-top{margin-bottom: 10px}
.phone-bottom{margin-top: 10px}
.phone-screen{
  background: rgba(248,250,252,.06);
  border-radius: 30px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
}

.mock-header{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.mock-logo{
  width: 30px; height: 30px; border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, rgba(214,179,106,.95), rgba(11,18,36,.92));
}
.mock-title{color:#fff; font-weight:950}
.mock-chip{
  margin-left:auto;
  color: var(--navy);
  background: rgba(214,179,106,.98);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
}

.mock-card{
  display:flex; gap: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 10px;
}
.mock-card.featured{
  border-color: rgba(214,179,106,.45);
  box-shadow: 0 0 0 1px rgba(214,179,106,.22);
}
.mock-photo{
  width: 112px; height: 100px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(214,179,106,.22), rgba(59,130,246,.12));
}
.mock-photo.small{width: 72px; height: 58px}
.mock-lines{flex:1}
.line{height: 10px; border-radius: 999px; background: rgba(255,255,255,.10); margin-bottom: 10px}
.w70{width:70%}
.w65{width:65%}
.w60{width:60%}
.w55{width:55%}
.w45{width:45%}
.w40{width:40%}
.badges{display:flex; gap:6px; flex-wrap:wrap; margin: 6px 0 10px}
.badge{
  font-size: 11px; font-weight: 950;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(214,179,106,.20);
  color: #fff;
  border: 1px solid rgba(214,179,106,.18);
}
.row{display:flex; align-items:center; justify-content:space-between}
.price{color: rgba(214,179,106,.95); font-weight: 950}
.mini-btn{
  color: #0b1224;
  background: rgba(214,179,106,.98);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

/* strip */
.strip{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.52);
}
.strip-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 0;
  gap: 16px;
  flex-wrap:wrap;
}
.strip-title{font-weight: 950}
.mini-tag{
  display:inline-flex;
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(214,179,106,.18);
  border: 1px solid rgba(214,179,106,.22);
  color: rgba(11,18,36,.86);
  font-weight: 900;
  font-size: 12px;
}
.strip-points{display:flex; gap: 14px; flex-wrap:wrap; color: rgba(75,85,101,.92); font-weight: 750}

/* Sections */
.section{padding: 78px 0}
.section.alt{
  background: rgba(255,255,255,.52);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}
.section-head{max-width: 780px}
.section-head h2{
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.6px;
  margin: 0 0 10px;
}
.section-head p{margin:0; color: rgba(75,85,101,.96); font-weight: 650}

.grid-3{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(11,18,36,.10);
  border-radius: var(--radius2);
  padding: 20px;
  box-shadow: var(--shadow3);
  backdrop-filter: blur(10px);
}
.card h3{margin: 14px 0 6px}
.card p{margin:0; color: rgba(75,85,101,.96); font-weight: 650}

.icon{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 16px;
  border: 1px solid rgba(11,18,36,.10);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}
.icon svg{width:22px;height:22px}
.icon.gold{background: rgba(214,179,106,.18); color: var(--gold2)}
.icon.navy{background: rgba(11,18,36,.08); color: var(--navy)}

.steps{
  margin-top: 30px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.step{
  display:flex; gap: 12px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(11,18,36,.10);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow3);
  backdrop-filter: blur(10px);
}
.step-num{
  width: 44px; height: 44px;
  border-radius: 16px;
  background: rgba(214,179,106,.22);
  color: var(--navy);
  display:grid; place-items:center;
  font-weight: 950;
}

.compare{
  margin-top: 28px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.compare-col{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(11,18,36,.10);
  border-radius: var(--radius2);
  padding: 20px;
  box-shadow: var(--shadow3);
  backdrop-filter: blur(10px);
}
.compare-col.muted{background: rgba(255,255,255,.56)}
.compare-col h3{margin:0 0 10px}
.compare-col ul{margin:0; padding-left: 18px; color: rgba(75,85,101,.96); font-weight: 700}
.compare-col li{margin: 8px 0}

.cta-banner{
  margin-top: 22px;
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  color: #fff;
  border-radius: 26px;
  padding: 22px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.cta-banner h3{margin:0 0 4px; font-family:"Playfair Display", serif}
.cta-banner p{margin:0; color: rgba(255,255,255,.84); font-weight: 650}

.faq{margin-top: 28px; display:grid; gap: 12px}
.faq-item{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(11,18,36,.10);
  border-radius: var(--radius2);
  padding: 16px 18px;
  box-shadow: var(--shadow3);
  backdrop-filter: blur(10px);
}
.faq-item summary{cursor:pointer; font-weight: 950}
.faq-item p{margin: 10px 0 0; color: rgba(75,85,101,.96); font-weight: 650}

.footer-cta{
  margin-top: 26px;
  text-align:center;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(11,18,36,.10);
  border-radius: 26px;
  padding: 26px 18px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}
.footer-cta h3{margin:0 0 6px; font-family:"Playfair Display", serif}
.footer-cta p{margin:0 0 18px; color: rgba(75,85,101,.96); font-weight: 700}
.note{margin-top: 12px; color: rgba(75,85,101,.96); font-weight: 650}
.note code{background: rgba(11,18,36,.06); padding: 2px 6px; border-radius: 8px}

.footer{
  padding: 26px 0;
  background: rgba(255,255,255,.56);
  border-top: 1px solid var(--line);
}
.footer-inner{
  display:grid;
  grid-template-columns: minmax(260px, 1.4fr) auto auto;
  align-items:center;
  gap: 18px;
}
.footer-left{max-width: 520px}
.footer .muted{color: rgba(75,85,101,.96); font-weight: 650}
.footer-links{display:flex; gap: 14px; align-items:center; flex-wrap:wrap; font-weight: 900; color: rgba(11,18,36,.76)}
.footer-links a{padding:10px 12px; border-radius: 999px}
.footer-links a:hover{background: rgba(11,18,36,.06)}
.footer-year{
  color: rgba(75,85,101,.96);
  font-weight: 850;
  white-space: nowrap;
  text-align: right;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; padding: 52px 0 34px}
  .hero-visual{order: -1}
  .phone{width: 338px}
  .grid-3{grid-template-columns: 1fr;}
  .steps{grid-template-columns: 1fr}
  .compare{grid-template-columns: 1fr}
  .nav-links{display:none}
  .icon-btn{display:inline-flex}
  .container{width:min(var(--max), calc(100% - 28px))}

  .footer-inner{
    grid-template-columns: 1fr;
    align-items:start;
  }

  .footer-year{
    text-align: left;
  }
}

/* Legal pages */
.legal-page{
  min-height: 100vh;
}

.legal-main{
  padding: 42px 0 70px;
}

.legal-hero{
  margin-bottom: 18px;
}

.legal-kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,18,36,.10);
  background: rgba(255,255,255,.62);
  color: rgba(75,85,101,.95);
  font-weight: 850;
  font-size: 13px;
}

.legal-title{
  margin: 16px 0 8px;
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.6px;
}

.legal-sub{
  margin: 0;
  color: rgba(75,85,101,.98);
  font-weight: 650;
  max-width: 70ch;
}

.legal-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items:start;
}

.legal-side{
  position: sticky;
  top: 90px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(11,18,36,.10);
  border-radius: var(--radius2);
  padding: 14px;
  box-shadow: var(--shadow3);
}

.legal-side a{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(75,85,101,.98);
  font-weight: 800;
}

.legal-side a:hover{
  background: rgba(11,18,36,.06);
}

.legal-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,18,36,.10);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}

.legal-card h2{
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -.35px;
}

.legal-card h3{
  margin: 22px 0 8px;
  font-size: 19px;
}

.legal-card p{
  margin: 0 0 12px;
  color: rgba(75,85,101,.96);
  font-weight: 650;
}

.legal-card ul{
  margin: 0 0 12px;
  padding-left: 18px;
  color: rgba(75,85,101,.96);
  font-weight: 650;
}

.legal-card li{
  margin: 6px 0;
}

.legal-meta{
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,18,36,.10);
  color: rgba(75,85,101,.96);
  font-size: 14px;
  font-weight: 700;
}

.support-layout{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.support-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,18,36,.10);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}

.support-card h2{
  margin: 0 0 8px;
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 2.5vw, 31px);
  letter-spacing: -.3px;
}

.support-card p{
  margin: 0 0 14px;
  color: rgba(75,85,101,.96);
  font-weight: 650;
}

.support-email{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(11,18,36,.05);
  border: 1px solid rgba(11,18,36,.10);
  color: rgba(11,18,36,.9);
  font-weight: 900;
  margin-bottom: 14px;
}

.support-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-secondary{
  background: rgba(11,18,36,.06);
}

.btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow3);
}

.support-faq{
  margin-top: 26px;
}

.toast{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  padding: 10px 14px;
  font-weight: 850;
  box-shadow: var(--shadow2);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px){
  .legal-main{
    padding: 30px 0 56px;
  }

  .legal-layout{
    grid-template-columns: 1fr;
  }

  .legal-side{
    position: static;
  }

  .support-layout{
    grid-template-columns: 1fr;
  }
}