/* EstateCompassX Landing Page Widgets — shared design tokens & section styles */
:root{
  --ecx-bg:#0a0c10; --ecx-bg-alt:#0e1117; --ecx-surface:#141821; --ecx-surface-2:#1a1f2b;
  --ecx-gold:#c6a664; --ecx-gold-light:#e4cd94; --ecx-gold-dim:rgba(198,166,100,.5);
  --ecx-text:#f3f1ea; --ecx-text-dim:#9aa1ae; --ecx-text-faint:#5c6270;
  --ecx-border:rgba(198,166,100,.16); --ecx-border-soft:rgba(255,255,255,.07);
  --ecx-radius:14px; --ecx-maxw:1180px;
}
.ecx-section{position:relative; padding:88px 0; font-family:'Inter',sans-serif; color:var(--ecx-text); line-height:1.6}
@media(max-width:640px){.ecx-section{padding:56px 0}}
.ecx-section *{box-sizing:border-box}
.ecx-section a{color:inherit; text-decoration:none}
.ecx-section img{max-width:100%; display:block}
.ecx-section h1,.ecx-section h2,.ecx-section h3,.ecx-serif{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.01em; margin:0}
.ecx-wrap{max-width:var(--ecx-maxw); margin:0 auto; padding:0 24px; position:relative; z-index:2}

/* ---------- Background Effects ---------- */
.ecx-bgfx{position:fixed; inset:0; z-index:-1; background:var(--ecx-bg); overflow:hidden; pointer-events:none}
.ecx-orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.35}
.ecx-orb1{width:520px; height:520px; background:radial-gradient(circle,var(--ecx-gold) 0%,transparent 70%); top:-10%; left:-10%; animation:ecxDrift1 26s ease-in-out infinite}
.ecx-orb2{width:460px; height:460px; background:radial-gradient(circle,#3a4a5c 0%,transparent 70%); bottom:0; right:-8%; animation:ecxDrift2 32s ease-in-out infinite}
@keyframes ecxDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,80px)}}
@keyframes ecxDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-70px,-50px)}}
.ecx-grain{position:absolute; inset:0; opacity:.025;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.ecx-has-bg{background:var(--ecx-bg); overflow-x:hidden}

/* ---------- Header / Logo ---------- */
.ecx-header{text-align:center; padding:28px 0 0}
.ecx-header img{height:44px; margin:0 auto; opacity:.96}

/* ---------- Hero ---------- */
.ecx-hero{padding:64px 0 20px; text-align:center}
.ecx-compass{position:absolute; top:50%; left:50%; width:920px; height:920px; margin:-460px 0 0 -460px;
  border-radius:50%; border:1px solid var(--ecx-border); z-index:0; pointer-events:none; animation:ecxSpin 140s linear infinite}
.ecx-compass::before,.ecx-compass::after{content:'';position:absolute; inset:60px; border-radius:50%; border:1px solid var(--ecx-border)}
.ecx-compass::after{inset:120px}
.ecx-compass i{position:absolute; width:1px; height:14px; background:var(--ecx-gold-dim); top:0; left:50%}
@keyframes ecxSpin{to{transform:rotate(360deg)}}
@media(max-width:768px){.ecx-compass{width:560px;height:560px;margin:-280px 0 0 -280px}}
.ecx-eyebrow{display:inline-block; font-size:13px; color:var(--ecx-gold-light); border:1px solid var(--ecx-border);
  padding:6px 16px; border-radius:100px; margin-bottom:22px; background:rgba(198,166,100,.06)}
.ecx-h1{font-size:clamp(32px,5.4vw,58px); line-height:1.08; max-width:900px; margin:0 auto 20px;
  animation:ecxRise .9s cubic-bezier(.2,.8,.2,1) both}
.ecx-h1 em{font-style:italic; color:var(--ecx-gold-light)}
.ecx-sub{font-size:18px; color:var(--ecx-text-dim); max-width:560px; margin:0 auto; animation:ecxRise .9s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes ecxRise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:translateY(0)}}

/* ---------- CTA button ---------- */
.ecx-cta-wrap{text-align:center}
.ecx-cta{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--ecx-gold-light),var(--ecx-gold));
  color:#1a1508; font-weight:600; font-size:16px; padding:16px 34px; border-radius:100px;
  box-shadow:0 8px 30px -6px rgba(198,166,100,.45); transition:transform .25s ease, box-shadow .25s ease}
.ecx-cta:hover{transform:translateY(-2px); box-shadow:0 12px 36px -6px rgba(198,166,100,.6)}
.ecx-cta-note{display:block; font-size:13px; color:var(--ecx-text-faint); margin-top:12px}

/* ---------- Video ---------- */
.ecx-video-frame{max-width:820px; margin:0 auto; padding:6px; border-radius:18px;
  background:linear-gradient(135deg,var(--ecx-gold),transparent 60%,var(--ecx-gold-dim));
  animation:ecxRise .9s .24s cubic-bezier(.2,.8,.2,1) both}
.ecx-video-inner{border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:#000}
.ecx-video-inner iframe{width:100%; height:100%; border:0}

/* ---------- Marquee ---------- */
.ecx-marquee-wrap{padding:34px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ecx-marquee-label{text-align:center; font-size:13px; color:var(--ecx-text-faint); margin:0 0 22px}
.ecx-marquee-track{display:flex; gap:20px; width:max-content}
.ecx-mq-ltr{animation:ecxScrollL 38s linear infinite}
.ecx-mq-rtl{animation:ecxScrollR 34s linear infinite}
@keyframes ecxScrollL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ecxScrollR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ecx-logo-chip{flex:0 0 auto; width:150px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:var(--ecx-surface); border:1px solid var(--ecx-border-soft); border-radius:12px; padding:14px; text-align:center; overflow:hidden}
.ecx-logo-chip img{width:100%; height:100%; object-fit:contain}
.ecx-logo-chip span{font-family:'Fraunces',serif; font-size:14px; color:var(--ecx-text-dim); line-height:1.25}

/* ---------- Section head ---------- */
.ecx-head{text-align:center; max-width:640px; margin:0 auto 48px}
.ecx-head h2{font-size:clamp(26px,3.6vw,40px); line-height:1.15}
.ecx-head p{color:var(--ecx-text-dim); margin:14px 0 0; font-size:16px}

/* ---------- Benefits ---------- */
.ecx-b-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media(max-width:720px){.ecx-b-grid{grid-template-columns:1fr}}
.ecx-b-card{background:var(--ecx-surface); border:1px solid var(--ecx-border-soft); border-radius:var(--ecx-radius); padding:30px;
  transition:border-color .25s ease, transform .25s ease}
.ecx-b-card:hover{border-color:var(--ecx-border); transform:translateY(-3px)}
.ecx-b-card .ic{width:42px; height:42px; border-radius:10px; background:rgba(198,166,100,.1); border:1px solid var(--ecx-border);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--ecx-gold-light); font-size:18px}
.ecx-b-card h3{font-size:19px; margin-bottom:9px; font-weight:600; font-family:'Inter',sans-serif}
.ecx-b-card p{color:var(--ecx-text-dim); font-size:15px; margin:0}

/* ---------- Comparison ---------- */
.ecx-cmp-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:820px; margin:0 auto}
@media(max-width:640px){.ecx-cmp-grid{grid-template-columns:1fr}}
.ecx-cmp-col{background:var(--ecx-surface); border:1px solid var(--ecx-border-soft); border-radius:var(--ecx-radius); padding:28px}
.ecx-cmp-col.win{border-color:var(--ecx-border); background:linear-gradient(180deg,rgba(198,166,100,.07),var(--ecx-surface))}
.ecx-cmp-col h3{font-size:17px; margin-bottom:18px; font-weight:600; font-family:'Inter',sans-serif}
.ecx-cmp-col ul{list-style:none; margin:0; padding:0}
.ecx-cmp-col li{display:flex; gap:10px; font-size:14.5px; color:var(--ecx-text-dim); padding:9px 0; border-top:1px solid var(--ecx-border-soft)}
.ecx-cmp-col li:first-child{border-top:0}
.ecx-cmp-col.win li{color:var(--ecx-text)}
.ecx-cmp-col .x{color:#8a7a6a}
.ecx-cmp-col .ok{color:var(--ecx-gold-light)}

/* ---------- Process ---------- */
.ecx-p-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
@media(max-width:860px){.ecx-p-grid{grid-template-columns:repeat(2,1fr); gap:28px}}
.ecx-p-item{padding:0 20px}
.ecx-p-item+.ecx-p-item{border-left:1px solid var(--ecx-border-soft)}
@media(max-width:860px){.ecx-p-item+.ecx-p-item{border-left:0}}
.ecx-p-num{font-family:'Fraunces',serif; font-size:15px; color:var(--ecx-gold-light); margin-bottom:10px}
.ecx-p-item h3{font-size:17px; margin-bottom:8px; font-weight:600; font-family:'Inter',sans-serif}
.ecx-p-item p{color:var(--ecx-text-dim); font-size:14.5px; margin:0}

/* ---------- Stats ---------- */
.ecx-s-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
@media(max-width:640px){.ecx-s-grid{grid-template-columns:repeat(2,1fr)}}
.ecx-s-num{font-family:'Fraunces',serif; font-size:clamp(28px,4vw,44px); color:var(--ecx-gold-light)}
.ecx-s-label{color:var(--ecx-text-dim); font-size:14px; margin-top:6px}

/* ---------- Calculator ---------- */
.ecx-calc-box{max-width:640px; margin:0 auto; background:var(--ecx-surface); border:1px solid var(--ecx-border-soft); border-radius:var(--ecx-radius); padding:34px}
.ecx-calc-row{margin-bottom:26px}
.ecx-calc-row label{display:flex; justify-content:space-between; font-size:14px; color:var(--ecx-text-dim); margin-bottom:10px}
.ecx-calc-row label b{color:var(--ecx-gold-light); font-family:'Fraunces',serif; font-size:15px; font-weight:500}
.ecx-calc-box input[type=range]{width:100%; accent-color:var(--ecx-gold)}
.ecx-calc-out{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; padding-top:26px; border-top:1px solid var(--ecx-border-soft)}
.ecx-calc-out div{text-align:center}
.ecx-calc-out .n{font-family:'Fraunces',serif; font-size:30px; color:var(--ecx-gold-light)}
.ecx-calc-out .l{font-size:13px; color:var(--ecx-text-faint); margin-top:4px}
.ecx-calc-note{font-size:12px; color:var(--ecx-text-faint); text-align:center; margin:18px 0 0}

/* ---------- Case studies ---------- */
.ecx-case-track{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 6px 20px; scrollbar-width:none}
.ecx-case-track::-webkit-scrollbar{display:none}
.ecx-case-card{scroll-snap-align:start; flex:0 0 min(320px,84vw); background:var(--ecx-surface); border:1px solid var(--ecx-border-soft);
  border-radius:var(--ecx-radius); overflow:hidden}
.ecx-case-img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ecx-surface-2)}
.ecx-case-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.ecx-case-card:hover .ecx-case-img img{transform:scale(1.06)}
.ecx-case-tag{position:absolute; top:12px; left:12px; background:rgba(10,12,16,.72); backdrop-filter:blur(4px);
  color:var(--ecx-gold-light); font-size:12px; padding:5px 12px; border-radius:100px; border:1px solid var(--ecx-border)}
.ecx-case-body{padding:22px}
.ecx-case-body h3{font-size:18px; font-weight:600; font-family:'Inter',sans-serif; margin-bottom:8px}
.ecx-case-body .desc{font-size:14px; color:var(--ecx-text-dim); margin-bottom:16px; min-height:58px}
.ecx-case-metric{display:flex; align-items:center; gap:8px; padding-top:14px; border-top:1px solid var(--ecx-border-soft)}
.ecx-case-metric .dot{width:6px; height:6px; border-radius:50%; background:var(--ecx-gold-light); flex:0 0 auto}
.ecx-case-metric span{font-size:13px; color:var(--ecx-gold-light); font-weight:600}
.ecx-case-hint{text-align:center; font-size:13px; color:var(--ecx-text-faint); margin:4px 0 0}

/* ---------- FAQ ---------- */
.ecx-faq-list{max-width:700px; margin:0 auto}
.ecx-faq-item{border-bottom:1px solid var(--ecx-border-soft); padding:6px 0}
.ecx-faq-item summary{cursor:pointer; list-style:none; font-size:16px; font-weight:600; padding:16px 30px 16px 0; position:relative}
.ecx-faq-item summary::-webkit-details-marker{display:none}
.ecx-faq-item summary::after{content:'+'; position:absolute; right:0; top:12px; font-size:22px; color:var(--ecx-gold-light); transition:transform .2s}
.ecx-faq-item[open] summary::after{transform:rotate(45deg)}
.ecx-faq-item p{color:var(--ecx-text-dim); font-size:14.5px; padding:0 0 18px; margin:0}

/* ---------- Qualifier ---------- */
.ecx-q-box{max-width:640px; margin:0 auto; background:var(--ecx-surface); border:1px solid var(--ecx-border-soft); border-radius:var(--ecx-radius); padding:34px; text-align:center}
.ecx-q-list{text-align:left; max-width:420px; margin:22px auto 26px; list-style:none; padding:0}
.ecx-q-list li{display:flex; gap:12px; font-size:15px; color:var(--ecx-text-dim); padding:8px 0}
.ecx-q-list li::before{content:'✓'; color:var(--ecx-gold-light); font-weight:700}

/* ---------- Final CTA ---------- */
.ecx-final{text-align:center}
.ecx-final h2{font-size:clamp(28px,4.2vw,42px); max-width:680px; margin:0 auto 16px}
.ecx-final p{color:var(--ecx-text-dim); max-width:480px; margin:0 auto 32px}

/* ---------- Footer ---------- */
.ecx-footer{text-align:center; border-top:1px solid var(--ecx-border-soft); padding:40px 0 28px}
.ecx-footer img{height:32px; margin:0 auto 14px; opacity:.85}
.ecx-footer .addr{color:var(--ecx-text-faint); font-size:13px; max-width:420px; margin:0 auto 14px}
.ecx-footer .links{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; font-size:13px; color:var(--ecx-text-dim); margin-bottom:14px}
.ecx-footer .copy{color:var(--ecx-text-faint); font-size:12px; margin:0}

/* ---------- Sticky mobile CTA ---------- */
.ecx-sticky-cta{position:fixed; bottom:0; left:0; right:0; z-index:9999; display:none; padding:12px 16px;
  background:linear-gradient(0deg,var(--ecx-bg) 60%,transparent); backdrop-filter:blur(6px)}
.ecx-sticky-cta a{display:block; text-align:center; background:linear-gradient(135deg,var(--ecx-gold-light),var(--ecx-gold));
  color:#1a1508; font-weight:600; padding:14px; border-radius:100px; font-size:15px}
@media(max-width:640px){.ecx-sticky-cta{display:block}}

@media(prefers-reduced-motion:reduce){
  .ecx-compass,.ecx-orb1,.ecx-orb2,.ecx-mq-ltr,.ecx-mq-rtl,.ecx-h1,.ecx-sub,.ecx-video-frame{animation:none !important}
}