/* ===== Inspiro Realty — static styles ===== */
:root{
  --navy-950:#030A14; --navy-900:#071120; --navy-800:#091321; --navy-700:#0D1C2F;
  --gold:#D4AF37; --gold-600:#B8962E;
  --text:#F8FAFC; --muted:#94A3B8; --muted-2:#64748B;
  --border:rgba(212,175,55,.15); --border-2:rgba(255,255,255,.06);
  --container:1240px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--navy-950); color:var(--text);
  font-family:'Outfit',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
em{font-style:italic;}
.gold{color:var(--gold);}
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
@media(min-width:640px){.container{padding:0 40px;}}
::selection{background:rgba(212,175,55,.85); color:var(--navy-950);}
::-webkit-scrollbar{width:9px;} ::-webkit-scrollbar-track{background:var(--navy-950);}
::-webkit-scrollbar-thumb{background:#1f2f45; border-radius:9px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}

.grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* typography */
.h2{font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2rem,4vw,3rem); line-height:1.08; margin:20px 0 0;}
.h2.sm{font-size:clamp(1.7rem,3vw,2.25rem);}
.h3{font-family:'Playfair Display',serif; font-weight:600; margin:0; font-size:1.5rem;}
.lead{margin-top:16px; max-width:560px; color:var(--muted); font-weight:300; font-size:1.125rem;}
.lead.small{font-size:1rem;}
.label{display:inline-flex; align-items:center; gap:10px; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.28em; color:var(--gold);}
.label.center{justify-content:center;}
.label-line{width:32px; height:1px; background:rgba(212,175,55,.5);}
.section{position:relative; padding:96px 0;}
@media(min-width:640px){.section{padding:128px 0;}}
.center{text-align:center;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:15px 28px;
  font-size:.9rem; font-weight:500; cursor:pointer; border:1px solid transparent; transition:background-color .3s,border-color .3s,color .3s,transform .3s;}
.btn i{width:16px; height:16px;}
.btn-gold{background:var(--gold); color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-600);}
.btn-gold:hover i{transform:translate(2px,-2px);}
.btn-ghost{border-color:rgba(255,255,255,.15); color:#fff;}
.btn-ghost:hover{border-color:rgba(212,175,55,.6); color:var(--gold);}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background-color .5s,border-color .5s; border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(3,10,20,.8); backdrop-filter:blur(18px); border-bottom-color:rgba(212,175,55,.1);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:80px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{display:grid; place-items:center; width:36px; height:36px; color:var(--gold);}
.logo-mark i{width:20px; height:20px;}
.logo-text{font-family:'Playfair Display',serif; font-size:1.15rem;}
.logo-text em{color:var(--gold);}
.nav-links{display:none; gap:36px;}
.nav-links a{font-size:.9rem; color:#cbd5e1; transition:color .3s;}
.nav-links a:hover{color:var(--gold);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-demo{display:none; padding:10px 20px;}
.nav-toggle{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid rgba(212,175,55,.2); background:transparent; color:#fff; cursor:pointer;}
.nav-toggle i{width:20px; height:20px;}
.nav-mobile{display:none; flex-direction:column; gap:14px; padding:20px 24px; background:rgba(7,17,32,.97); backdrop-filter:blur(18px); border-bottom:1px solid rgba(212,175,55,.1);}
.nav-mobile.open{display:flex;}
.nav-mobile a{color:#e2e8f0;}
@media(min-width:1024px){.nav-links{display:flex;} .nav-demo{display:inline-flex;} .nav-toggle{display:none;}}

/* hero */
.hero{position:relative; overflow:hidden; padding:128px 0 88px;}
.hero-bg{position:absolute; inset:0; z-index:-2; background:
  linear-gradient(to bottom,rgba(3,10,20,.5),rgba(3,10,20,.75),var(--navy-950)),
  url("https://images.unsplash.com/photo-1510507024924-fc3847d49ae2?crop=entropy&cs=srgb&fm=jpg&q=85&w=2000") center/cover no-repeat;}
.hero-radial{position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(212,175,55,.10),transparent 70%);}
.hero-radial.soft{opacity:.6;}
.hero-grid{display:grid; gap:48px; align-items:center;}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.05fr .95fr; gap:64px;}}
.hero-title{font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-.02em; margin:24px 0 0;
  font-size:clamp(2.6rem,6vw,4.2rem); line-height:1.05;}
.mask{display:block; overflow:hidden;}
.mask-in{display:block; transform:translateY(110%); animation:maskUp 1.05s cubic-bezier(.16,1,.3,1) forwards;}
.mask-in.muted{color:#cbd5e1;}
@keyframes maskUp{to{transform:translateY(0);}}
.hero-sub{margin-top:28px; max-width:560px; color:#cbd5e1; font-weight:300; font-size:1.125rem;}
.hero-cta{margin-top:36px; display:flex; flex-wrap:wrap; gap:16px;}
.hero-checks{margin-top:36px; display:flex; flex-wrap:wrap; gap:8px 28px; color:var(--muted); font-size:.9rem;}
.hero-checks span{display:inline-flex; align-items:center; gap:8px;}
.hero-checks i{width:16px; height:16px; color:var(--gold);}
.hero-frame{position:relative;}
.hero-frame-glow{position:absolute; inset:-24px; z-index:-1; border-radius:32px; background:rgba(212,175,55,.05); filter:blur(48px);}
.hero-frame-box{border:1px solid var(--border); background:rgba(9,19,33,.6); backdrop-filter:blur(8px);
  border-radius:16px; padding:8px; box-shadow:0 8px 60px -12px rgba(212,175,55,.25);}
.hero-frame-box img{border:1px solid var(--border-2); border-radius:12px; width:100%;}

/* trust marquee */
.trust{border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); background:rgba(7,17,32,.4); padding:24px 0;}
.trust-label{display:flex; align-items:center; gap:12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.28em; color:var(--muted-2); margin-bottom:20px;}
.trust-label i{width:16px; height:16px; color:rgba(212,175,55,.7);}
.marquee{overflow:hidden;}
.marquee-track{display:flex; white-space:nowrap; width:max-content; animation:scrollx 32s linear infinite;}
@keyframes scrollx{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.trust-item{display:inline-flex; align-items:center; gap:24px; margin:0 24px; color:var(--muted);}
.trust-item .ti{font-family:'Playfair Display',serif; font-style:italic; font-size:1.6rem; color:rgba(203,213,225,.8);}
.trust-item .sep{color:rgba(212,175,55,.5); font-size:1.2rem;}

/* journey flow */
.flow{position:relative; margin-top:80px;}
.flow-line{position:absolute; left:9%; right:9%; top:46px; height:2px; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(to right,rgba(212,175,55,.15),rgba(212,175,55,.6),rgba(212,175,55,.15)); display:none;}
.flow-line.in{transform:scaleX(1); transition:transform 1.4s cubic-bezier(.22,1,.36,1);}
@media(min-width:1024px){.flow-line{display:block;}}
.flow-grid{display:grid; grid-template-columns:1fr; gap:48px;}
@media(min-width:640px){.flow-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:768px){.flow-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.flow-grid{display:flex; justify-content:space-between; gap:12px;}}
.flow-node{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;}
@media(min-width:1024px){.flow-node{flex:1; min-width:0;}}
.flow-medal{position:relative;}
.flow-medal .circle{display:grid; place-items:center; width:92px; height:92px; border-radius:999px;
  border:1px solid rgba(212,175,55,.25); background:rgba(9,19,33,.8); color:var(--gold);
  box-shadow:0 8px 40px -10px rgba(212,175,55,.25); backdrop-filter:blur(8px); transition:transform .5s,border-color .5s;}
.flow-node:hover .circle{transform:translateY(-4px); border-color:rgba(212,175,55,.6);}
.flow-medal .circle i{width:36px; height:36px;}
.flow-medal .num{position:absolute; top:-4px; right:-4px; display:grid; place-items:center; width:28px; height:28px;
  border-radius:999px; background:var(--gold); color:var(--navy-950); font-size:.75rem; font-weight:600; box-shadow:0 0 0 4px var(--navy-950);}
.flow-node h3{font-family:'Playfair Display',serif; font-size:1.125rem; margin:24px 0 0; color:#fff; line-height:1.2;}
.flow-node p{margin:10px 8px 0; font-size:.82rem; font-weight:300; color:var(--muted); line-height:1.6;}

/* platform rows */
.rows{margin-top:80px; display:flex; flex-direction:column; gap:112px;}
.row{display:grid; gap:48px; align-items:center;}
@media(min-width:1024px){.row{grid-template-columns:1fr 1fr;}}
.row.flip .row-media{order:-1;}
@media(min-width:1024px){.row.flip .row-copy{order:2;} .row.flip .row-media{order:1;}}
.row-tag{display:inline-flex; align-items:center; gap:10px; color:var(--gold);}
.row-tag .ic{display:grid; place-items:center; width:40px; height:40px; border-radius:999px; border:1px solid rgba(212,175,55,.25); background:rgba(212,175,55,.1);}
.row-tag .ic i{width:16px; height:16px;}
.row-tag span{font-size:.72rem; text-transform:uppercase; letter-spacing:.24em;}
.row-copy h3{font-family:'Playfair Display',serif; font-weight:600; font-size:clamp(1.6rem,2.5vw,2.1rem); margin:24px 0 0; line-height:1.15;}
.row-copy .rp{margin-top:20px; color:var(--muted); font-weight:300; font-size:1.125rem;}
.row-copy ul{margin:28px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.row-copy li{display:flex; align-items:center; gap:12px; color:#cbd5e1; font-weight:300;}
.row-copy li .ck{display:grid; place-items:center; width:20px; height:20px; border-radius:999px; background:rgba(212,175,55,.15); color:var(--gold);}
.row-copy li .ck i{width:12px; height:12px;}
.row-media{position:relative;}
.row-media .glow{position:absolute; inset:-16px; z-index:-1; border-radius:24px; background:rgba(212,175,55,.05); filter:blur(32px);}
.row-media .pic{overflow:hidden; border:1px solid var(--border); border-radius:24px;}
.row-media .pic img{height:420px; width:100%; object-fit:cover;}
.row:nth-child(odd) .pic{transform:rotate(-1deg);}
.row:nth-child(even) .pic{transform:rotate(1deg);}

/* capabilities */
.caps{position:relative;}
.caps-desktop{display:none;}
@media(min-width:1024px){.caps-desktop{display:block;} .caps-mobile{display:none !important;}}
.caps-sticky{position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden;}
.caps-grid{display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:center; margin-top:40px;}
.caps-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
.caps-list li{position:relative; display:flex; align-items:center; gap:16px; padding:10px 16px; border-radius:12px; opacity:.45; transition:opacity .3s;}
.caps-list li.active{opacity:1;}
.caps-list li .hl{position:absolute; inset:0; border-radius:12px; border:1px solid rgba(212,175,55,.3); background:rgba(212,175,55,.07); opacity:0; transition:opacity .3s;}
.caps-list li.active .hl{opacity:1;}
.caps-list li .ic{position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.05); color:var(--muted); transition:background-color .3s,color .3s;}
.caps-list li.active .ic{background:var(--gold); color:var(--navy-950);}
.caps-list li .ic i{width:16px; height:16px;}
.caps-list li .nm{position:relative; font-size:.95rem; font-weight:500; color:#cbd5e1;}
.caps-list li.active .nm{color:#fff;}
.caps-preview{max-width:none;}
.frame{overflow:hidden; border:1px solid var(--border); border-radius:16px; background:rgba(9,19,33,.5); backdrop-filter:blur(18px);}
.frame-chrome{display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border-2); padding:10px 16px;}
.frame-chrome .dot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.15);}
.frame-chrome .dot.gold{background:rgba(212,175,55,.4);}
.frame-url{margin-left:12px; font-size:.72rem; color:var(--muted-2); background:rgba(3,10,20,.6); padding:4px 12px; border-radius:6px;}
.frame-body{position:relative; aspect-ratio:16/10; background:var(--navy-800);}
.frame-body img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cap-meta{margin-top:24px;}
.cap-meta .tag{font-size:.72rem; text-transform:uppercase; letter-spacing:.24em; color:var(--gold);}
.cap-meta .h3{margin-top:6px;}
.cap-desc{margin-top:8px; color:var(--muted); font-weight:300; font-size:.95rem; line-height:1.6;}
.caps-dots{display:flex; gap:6px; margin-top:32px;}
.caps-dots span{height:4px; width:12px; border-radius:999px; background:rgba(255,255,255,.15); transition:all .3s;}
.caps-dots span.active{width:32px; background:var(--gold);}
/* caps mobile */
.caps-mobile{padding:96px 24px;}
.caps-mobile .cap-card{margin-top:56px;}
.caps-mobile .cap-card:first-of-type{margin-top:48px;}

/* value */
.value-grid{margin-top:64px; display:grid; gap:1px; background:rgba(255,255,255,.06); border:1px solid var(--border-2); border-radius:24px; overflow:hidden; grid-template-columns:1fr;}
@media(min-width:640px){.value-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.value-grid{grid-template-columns:repeat(3,1fr);}}
.value-card{background:var(--navy-950); padding:36px; transition:background-color .5s;}
.value-card:hover{background:rgba(9,19,33,.6);}
.value-card .ic{display:grid; place-items:center; width:48px; height:48px; border-radius:12px; border:1px solid rgba(212,175,55,.2); background:rgba(212,175,55,.08); color:var(--gold); transition:transform .5s;}
.value-card:hover .ic{transform:translateY(-4px);}
.value-card .ic i{width:20px; height:20px;}
.value-card h3{font-family:'Playfair Display',serif; font-size:1.25rem; margin:24px 0 0;}
.value-card p{margin-top:12px; color:var(--muted); font-weight:300; font-size:.95rem; line-height:1.6;}

/* stats */
.stats{position:relative; overflow:hidden; border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); padding:80px 0;}
.marquee.stroke{margin-bottom:56px;}
.stroke-text{font-family:'Playfair Display',serif; font-size:clamp(3rem,8vw,5.5rem); padding:0 24px;
  -webkit-text-stroke:1px rgba(255,255,255,.12); color:transparent; white-space:nowrap;}
.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
.stat .v{font-family:'Playfair Display',serif; font-size:clamp(2.5rem,5vw,3.75rem); color:var(--gold);}
.stat .l{margin-top:12px; font-size:.85rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted);}

/* faq */
.faq-wrap{max-width:820px;}
.faq{margin-top:56px; display:flex; flex-direction:column; gap:16px;}
.faq-item{border:1px solid var(--border-2); border-radius:16px; background:rgba(255,255,255,.02); backdrop-filter:blur(18px); overflow:hidden; transition:border-color .3s;}
.faq-item.open{border-color:rgba(212,175,55,.3);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px;
  background:none; border:none; cursor:pointer; text-align:left; color:#fff; font-family:'Playfair Display',serif; font-size:1.1rem;}
.faq-q i{width:20px; height:20px; color:var(--gold); transition:transform .3s; flex-shrink:0;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease; color:var(--muted); font-weight:300; font-size:.95rem; line-height:1.7;}
.faq-a-inner{padding:0 24px 24px;}

/* demo */
.demo-card{overflow:hidden; border:1px solid var(--border); border-radius:32px; background:rgba(9,19,33,.4); backdrop-filter:blur(18px); display:grid; grid-template-columns:1fr;}
@media(min-width:1024px){.demo-card{grid-template-columns:1fr 1fr;}}
.demo-media{position:relative; min-height:320px;}
.demo-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.demo-media-overlay{position:absolute; inset:0; background:linear-gradient(to top,var(--navy-950),rgba(3,10,20,.3),transparent);}
@media(min-width:1024px){.demo-media-overlay{background:linear-gradient(to right,var(--navy-950),rgba(3,10,20,.35),transparent);}}
.demo-media-copy{position:absolute; left:0; bottom:0; padding:40px;}
.demo-media-copy .pill{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(212,175,55,.3); background:rgba(3,10,20,.7); padding:8px 16px; border-radius:999px; font-size:.72rem; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); backdrop-filter:blur(8px);}
.demo-media-copy .pill i{width:16px; height:16px;}
.demo-media-copy p{margin:20px 0 0; max-width:280px; font-family:'Playfair Display',serif; font-size:1.5rem; line-height:1.2; color:#fff;}
.demo-form-side{padding:32px;}
@media(min-width:1024px){.demo-form-side{padding:64px;}}
.demo-form{margin-top:36px; display:flex; flex-direction:column; gap:28px;}
.grid2{display:grid; gap:28px;}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr;}}
.demo-form label{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted);}
.demo-form input{margin-top:12px; width:100%; border:none; border-bottom:1px solid rgba(255,255,255,.2); background:transparent;
  padding-bottom:10px; color:#fff; font-size:1rem; font-family:inherit; outline:none; transition:border-color .3s;}
.demo-form input::placeholder{color:#475569;}
.demo-form input:focus{border-bottom-color:var(--gold);}
.field-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted);}
.pills{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px;}
.pills button{border:1px solid rgba(255,255,255,.15); background:transparent; color:#cbd5e1; padding:8px 16px; border-radius:999px; font-size:.85rem; cursor:pointer; font-family:inherit; transition:border-color .3s,background-color .3s,color .3s;}
.pills button.active{border-color:var(--gold); background:var(--gold); color:var(--navy-950);}
.demo-success{margin-top:40px; border:1px solid rgba(212,175,55,.3); background:rgba(212,175,55,.1); border-radius:16px; padding:32px; text-align:center;}
.success-check{margin:0 auto; display:grid; place-items:center; width:56px; height:56px; border-radius:999px; background:var(--gold); color:var(--navy-950);}
.success-check i{width:28px; height:28px;}
.demo-success h3{margin-top:20px;}
.demo-success p{margin-top:8px; color:#cbd5e1; font-weight:300;}

/* footer */
.footer{border-top:1px solid rgba(255,255,255,.1); background:var(--navy-950); padding:64px 0;}
.footer-grid{display:grid; gap:48px; grid-template-columns:1fr;}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr;}}
.footer-about{margin-top:20px; max-width:360px; color:var(--muted); font-weight:300; font-size:.9rem; line-height:1.7;}
.socials{margin-top:24px; display:flex; gap:12px;}
.socials a{display:grid; place-items:center; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.1); color:var(--muted); transition:border-color .3s,color .3s;}
.socials a:hover{border-color:rgba(212,175,55,.5); color:var(--gold);}
.socials i{width:16px; height:16px;}
.footer h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.24em; color:var(--gold); margin:0;}
.footer ul{margin:20px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.footer ul a{color:var(--muted); font-size:.9rem; transition:color .3s;}
.footer ul a:hover{color:#fff;}
.footer-bottom{margin-top:56px; padding-top:32px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:16px; justify-content:space-between; color:var(--muted-2); font-size:.75rem;}
@media(min-width:640px){.footer-bottom{flex-direction:row; align-items:center;}}

/* reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1; transform:none;}
.fade-up{opacity:0; transform:translateY(22px); animation:fadeUp .9s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes fadeUp{to{opacity:1; transform:none;}}

section[id]{scroll-margin-top:90px;}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;} .reveal,.fade-up{opacity:1; transform:none;} .mask-in{transform:none;}}