/* ==========================================================================
   SmartCity — modern UX polish layer (loaded after each page's inline CSS)
   Additive + override layer: gradients, glass, reveals, cards, footer, floats
   ========================================================================== */

:root{
  --f-head:"Playfair Display",Georgia,serif;
  --brand-l:#ff9d42;
  --grad:linear-gradient(135deg,#ff9d42 0%,#f58320 48%,#e06500 100%);
  --grad-soft:linear-gradient(135deg,#fff4e8 0%,#ffe7cc 100%);
  --ink-2:#6c6d70;
  --line:#ece9e4;
  --shadow-s:0 4px 14px rgba(17,17,17,.06);
  --shadow-m:0 14px 34px rgba(17,17,17,.10);
  --shadow-l:0 26px 60px rgba(17,17,17,.16);
  --glow:0 12px 30px rgba(245,131,32,.38);
  --glass:rgba(255,255,255,.72);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- header : spark white + elegant type ---------- */
.site-header{padding:0;background:transparent}
.header-inner{height:89px;border-radius:0 0 50px 50px;background:
  radial-gradient(ellipse 60% 130% at 50% -30%,rgba(255,255,255,.95),transparent 62%),
  linear-gradient(180deg,#ffffff 0%,#fcfcfd 100%);
  box-shadow:0 0 14px rgba(0,0,0,.10)}
.site-header.shrink .header-inner{height:65px}
.brand img{height:65px}
.nav-main a{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:14px;letter-spacing:.05em;padding:.6rem .8rem}
.h-social a{width:38px;height:38px;background:#fff;border:1px solid #efeee9;box-shadow:0 3px 10px rgba(17,17,17,.06);color:var(--dark);transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .25s,background .25s}
.h-social svg{width:18px;height:18px}
.h-social a:hover{transform:translateY(-3px);box-shadow:var(--glow)}
@media (max-width:767px){
  .site-header{padding-top:0}
  .header-inner{height:72px}
  .brand img{height:52px}
}

body{overflow-x:hidden}
::selection{background:var(--brand);color:#fff}

/* ---------- custom scrollbar ---------- */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#f1efec}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff9d42,#e06500);border-radius:99px;border:2px solid #f1efec}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffb05e,#f58320)}
html{scrollbar-color:#f58320 #f1efec;scrollbar-width:thin}

/* ---------- scroll progress bar ---------- */
.ux-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:var(--grad);box-shadow:0 0 12px rgba(245,131,32,.7);transition:width .1s linear;border-radius:0 3px 3px 0}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- section heads : eyebrow + gradient title ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:11.5px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--brand-d);margin-bottom:.9rem}
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px}
.eyebrow.solo::after{display:none}
.midband,.gal-sec,.p-intro{text-align:center}
.section-head h1,.section-head h2{font-weight:600;letter-spacing:.01em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .section-head h1,.section-head h2{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.section-head p{color:var(--ink-2)}

/* ---------- buttons : glow + shine sweep ---------- */
.pcard .cta,.fflex .btn,.f-btn,.cta-inner .s,.p-cta .s,.p-cta .g,.ux-btn,.ux-cta .btn{
  position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s
}
.pcard .cta::after,.fflex .btn::after,.f-btn::after,.cta-inner .s::after,.p-cta .s::after,.ux-btn::after,.ux-cta .btn::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .65s var(--ease)
}
.pcard .cta:hover::after,.fflex .btn:hover::after,.f-btn:hover::after,.cta-inner .s:hover::after,.p-cta .s:hover::after,.ux-btn:hover::after,.ux-cta .btn:hover::after{left:150%}
.pcard .cta,.ux-btn,.ux-cta .btn{background:var(--grad);box-shadow:0 8px 20px rgba(245,131,32,.28)}
.pcard .cta:hover,.ux-btn:hover,.ux-cta .btn:hover{box-shadow:var(--glow);transform:translateY(-2px)}
.f-btn{background:var(--grad);box-shadow:0 10px 24px rgba(245,131,32,.3)}
.f-btn:hover{transform:translateY(-2px);box-shadow:var(--glow)}

/* ---------- hero : badge + scroll cue + glow ---------- */
.hero .dim{background:
  radial-gradient(ellipse 60% 55% at 50% 46%,rgba(0,0,0,.42),transparent 74%),
  linear-gradient(180deg,rgba(0,0,0,.34),transparent 34%,rgba(0,0,0,.30) 72%,rgba(0,0,0,.5))}
.hero .glow{position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);width:min(900px,120%);height:70%;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(245,131,32,.42),transparent 68%);filter:blur(20px);opacity:.85}
.hero-badge{position:absolute;top:clamp(128px,18vh,182px);left:50%;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem 1.05rem;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--brand-l);box-shadow:0 0 0 0 rgba(255,157,66,.7);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,157,66,.7)}70%{box-shadow:0 0 0 12px rgba(255,157,66,0)}100%{box-shadow:0 0 0 0 rgba(255,157,66,0)}}
.hero-scroll{position:absolute;bottom:1.5rem;right:1.6rem;z-index:6;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.85);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;writing-mode:vertical-rl;text-decoration:none}
.hero-scroll .track{width:1px;height:52px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero-scroll .track::after{content:"";position:absolute;top:-60%;left:0;width:100%;height:60%;background:var(--brand-l);animation:scrolldot 1.9s var(--ease) infinite}
@keyframes scrolldot{0%{top:-60%}100%{top:110%}}
@media (max-width:767px){.hero-badge{font-size:9.5px;letter-spacing:.18em;padding:.42rem .8rem}.hero-scroll{display:none}}

/* ---------- welcome : elegant backdrop + grand serif ---------- */
.welcome{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 62% 46% at 50% 22%,rgba(245,131,32,.14),transparent 68%),
    radial-gradient(ellipse 45% 40% at 88% 94%,rgba(31,42,58,.06),transparent 70%),
    linear-gradient(180deg,#fffefa 0%,#fdf8ef 48%,#faf2e3 100%)}
.welcome::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(90,91,93,.16) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 22%,#000 6%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 22%,#000 6%,transparent 72%)}
.welcome .section-head{position:relative}
.welcome .section-head h1{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:clamp(1.72rem,4.08vw,2.93rem);letter-spacing:.01em;line-height:1.08;margin-bottom:1.05rem;text-wrap:balance;color:#1e5fb4;
  filter:drop-shadow(0 12px 28px rgba(46,110,204,.26))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .welcome .section-head h1{background:linear-gradient(135deg,#1e5fb4 0%,#2c7bd6 52%,#1e5fb4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.welcome .section-head .eyebrow{letter-spacing:.34em}
.welcome .lead{font-family:var(--f-quote);font-style:italic;font-weight:500;font-size:clamp(1.04rem,1.9vw,1.22rem);letter-spacing:.3px;color:#5A5B5D;max-width:720px;margin-inline:auto;line-height:1.85;text-align:center;text-wrap:balance}

/* ---------- stats : floating glass cards ---------- */
.stats{gap:1.05rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-s);position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.stat::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.stat:hover{transform:translateY(-7px);box-shadow:var(--shadow-m)}
.stat:hover::before{transform:scaleX(1)}
.stat .ic{background:var(--grad);color:#fff;box-shadow:0 9px 20px rgba(245,131,32,.32)}
.stat b{background:none}

/* ---------- projects : richer cards ---------- */
.projects{position:relative}
.pcard{border-radius:18px;box-shadow:var(--shadow-s);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pcard::after{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.pcard:hover{transform:translateY(-9px);box-shadow:var(--shadow-l)}
.pcard:hover::after{opacity:.9}
.pcard .th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.45));opacity:0;transition:opacity .4s}
.pcard:hover .th::after{opacity:1}
.pcard .tag{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pcard h3{transition:color .3s}

/* ---------- feature grid ---------- */
.ux-features{padding:5rem 0;background:#fff;position:relative;overflow:hidden}
.ux-features::before{content:"";position:absolute;top:-120px;right:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(245,131,32,.10),transparent 70%)}
.ux-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.8rem;position:relative}
.ux-feat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.9rem 1.7rem;box-shadow:var(--shadow-s);transition:transform .4s var(--ease),box-shadow .4s var(--ease);position:relative;overflow:hidden}
.ux-feat::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ux-feat:hover{transform:translateY(-8px);box-shadow:var(--shadow-m)}
.ux-feat:hover::before{transform:scaleX(1)}
.ux-feat .ic{width:58px;height:58px;border-radius:16px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 10px 22px rgba(245,131,32,.32);margin-bottom:1.1rem}
.ux-feat .ic svg{width:28px;height:28px}
.ux-feat b{display:block;font-family:var(--f-head);font-weight:500;font-size:1.28rem;color:var(--dark);margin-bottom:.45rem}
.ux-feat p{font-size:.9rem;color:var(--ink-2)}

/* ---------- marquee trust strip ---------- */
.ux-marquee{background:linear-gradient(90deg,#1b1d21,#2a2d33 50%,#1b1d21);color:#fff;overflow:hidden;padding:.95rem 0;position:relative}
.ux-marquee .row{display:flex;width:max-content;animation:marq 28s linear infinite}
.ux-marquee .row span{display:inline-flex;align-items:center;gap:1.4rem;padding:0 1.4rem;font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap}
.ux-marquee .row span i{width:6px;height:6px;border-radius:50%;background:var(--brand-l);display:inline-block}
@keyframes marq{to{transform:translateX(-50%)}}
.ux-marquee:hover .row{animation-play-state:paused}

/* ---------- areas / locations ---------- */
.ux-areas{padding:5rem 0;background:var(--sec);position:relative}
.ux-areas .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem;max-width:940px;margin-inline:auto}
.ux-areas .chips span{display:flex;align-items:center;justify-content:center;gap:.55rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.05rem 1rem;font-size:13.5px;font-weight:600;color:var(--dark);text-align:center;white-space:nowrap;box-shadow:var(--shadow-s);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.ux-areas .chips span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none}
.ux-areas .chips span:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--brand)}
.ux-areas .chips span:last-child:nth-child(7){grid-column:2}
.ux-areas .section-head p{max-width:660px;margin-inline:auto}

/* ---------- testimonials ---------- */
.ux-testi{padding:5rem 0;background:#fff}
.ux-tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
.ux-quote{background:#fff;border:1px solid var(--line);border-radius:20px;padding:2rem 1.8rem;box-shadow:var(--shadow-s);position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ux-quote:hover{transform:translateY(-8px);box-shadow:var(--shadow-m)}
.ux-quote .mark{font-family:var(--f-quote);font-size:3.4rem;line-height:.5;color:var(--brand);opacity:.35}
.ux-quote .stars{color:#f5a623;font-size:13px;letter-spacing:3px;margin:.4rem 0 .8rem}
.ux-quote p{font-size:.94rem;color:var(--ink);line-height:1.75;font-style:italic}
.ux-quote .who{display:flex;align-items:center;gap:.8rem;margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed var(--line)}
.ux-quote .av{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1rem;box-shadow:0 8px 18px rgba(245,131,32,.3)}
.ux-quote .who b{display:block;color:var(--dark);font-size:.92rem;font-family:var(--f-body)}
.ux-quote .who span{font-size:.78rem;color:var(--ink-2)}

/* ---------- FAQ ---------- */
.ux-faq{padding:0 0 5rem;background:#fbfbfb}
.ux-faq .section-head{margin-bottom:2.6rem}
.ux-fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:1000px;margin:0 auto}
.ux-fq{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-s);transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.ux-fq:hover{border-color:var(--brand);box-shadow:0 12px 28px rgba(245,131,32,.15);transform:translateY(-3px)}
.ux-fq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.9rem;font-weight:600;color:var(--dark);font-size:.96rem;padding:1.1rem 1.3rem;position:relative}
.ux-fq summary::-webkit-details-marker{display:none}
.ux-fq summary::after{content:"+";margin-left:auto;font-size:1.3rem;font-weight:700;color:var(--brand);transition:transform .35s var(--ease)}
.ux-fq[open] summary::after{transform:rotate(45deg)}
.ux-fq[open] summary{border-bottom:1px solid #f0efec}
.ux-fq p{padding:0 1.3rem 1.25rem;color:var(--ink-2);font-size:.92rem;line-height:1.7}

/* ---------- CTA band ---------- */
.ux-cta{padding:0 0 5rem;background:#fff}
.ux-cta .panel{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(125deg,#1c1e22 0%,#2b2f36 55%,#3a2a1c 100%);color:#fff;padding:3.4rem 3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;box-shadow:var(--shadow-l)}
.ux-cta .panel::before{content:"";position:absolute;top:-40%;right:-8%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(245,131,32,.5),transparent 66%);filter:blur(6px)}
.ux-cta .panel::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 80% 50%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 80% 50%,#000,transparent 75%)}
.ux-cta .txt{position:relative;z-index:2;max-width:620px}
.ux-cta .txt .eyebrow{color:var(--brand-l)}
.ux-cta .txt .eyebrow::before,.ux-cta .txt .eyebrow::after{background:var(--brand-l)}
.ux-cta h3{font-family:var(--f-head);font-weight:500;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.2;margin-bottom:.7rem}
.ux-cta p{color:rgba(255,255,255,.8);font-size:.96rem;max-width:520px}
.ux-cta .acts{position:relative;z-index:2;display:flex;gap:.8rem;flex-wrap:wrap}
.ux-cta .btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--grad);color:#fff;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;padding:1rem 1.9rem;border-radius:99px}
.ux-cta .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.4);box-shadow:none}
.ux-cta .btn.ghost:hover{background:rgba(255,255,255,.1)}

/* ---------- footer : dark premium ---------- */
footer{background:linear-gradient(180deg,#1b1d21 0%,#23262b 100%);color:#c9cbcf;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--grad)}
footer::after{content:"";position:absolute;bottom:-160px;left:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(245,131,32,.14),transparent 70%);pointer-events:none}
footer .fflex{position:relative;z-index:2}
.fflex h3{color:var(--brand-l)}
.fflex p{color:#a9abb0}
.fflex ul li{color:#b7b9be}
.fflex ul a{color:#b7b9be;transition:color .25s}
.fflex ul a:hover{color:var(--brand-l);text-decoration:underline;text-underline-offset:3px}
.fflex .abi img{background:#fff;padding:8px 12px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.fflex .con .ico{color:var(--brand-l)}
.fflex .con a{color:#b7b9be}
.fflex .con a:hover{color:var(--brand-l)}
.fflex .btn{background:var(--grad);box-shadow:0 10px 24px rgba(245,131,32,.3)}
.social a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#c9cbcf}
.social a:hover{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-3px)}
.fbottom{border-top:1px solid rgba(255,255,255,.1)}
.fbottom a{color:var(--brand-l)}
.fbottom a+a::before{background:rgba(255,255,255,.2)}
.fcopy{border-top:1px solid rgba(255,255,255,.1);color:#8f9196}
.fcopy b{color:var(--brand-l)}
.fbottom{justify-content:center}
.fcopy{justify-content:center;text-align:center}

/* ---------- floating actions ---------- */
.ux-top,.ux-wa{position:fixed;right:1.1rem;z-index:90;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:0;box-shadow:var(--shadow-m);transition:transform .3s var(--ease),opacity .3s,box-shadow .3s}
.ux-top{bottom:1.1rem;background:#fff;color:var(--brand-d);opacity:0;visibility:hidden;transform:translateY(14px)}
.ux-top.show{opacity:1;visibility:visible;transform:none}
.ux-top:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.ux-wa{bottom:4.9rem;background:#25d366;color:#fff}
.ux-wa:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 14px 30px rgba(37,211,102,.5)}
.ux-wa svg{width:27px;height:27px}
.ux-top svg{width:20px;height:20px}
body.floats-hidden .ux-top,body.floats-hidden .ux-wa{opacity:0!important;visibility:hidden!important;transform:translateY(10px);pointer-events:none}
@media (max-width:767px){
  .ux-top,.ux-wa{width:46px;height:46px;right:.85rem}
  .ux-wa{bottom:4.4rem}
  .ux-top{bottom:.85rem}
}

/* ---------- shared inner-page polish ---------- */
.phero h1{letter-spacing:-.5px}
.phero .veil{background:linear-gradient(180deg,rgba(10,12,16,.5),rgba(10,12,16,.72))}
.ab-card,.c-form,.c-card,.step,.ben,.ux-quote,.value{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ab-card:hover,.c-card:hover,.step:hover,.ben:hover,.value:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.c-card .ic,.value .ic,.step .n{background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(245,131,32,.3)}
.a-stat{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.a-stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.midband{background:var(--grad-soft)}
.cta-inner{background:linear-gradient(125deg,#1c1e22,#2b2f36 60%,#3a2a1c)!important;color:#fff;border:0!important;box-shadow:var(--shadow-l)}
.cta-inner h3{color:#fff!important}
.cta-inner p{color:rgba(255,255,255,.8)!important}
.cta-inner .s{background:var(--grad)!important}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .ux-fgrid{grid-template-columns:repeat(2,1fr)}
  .ux-tgrid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .ux-features,.ux-areas,.ux-testi{padding:3.2rem 0}
  .ux-areas .chips{grid-template-columns:repeat(2,1fr)}
  .ux-areas .chips span:last-child:nth-child(7){grid-column:1/-1}
  .ux-faq{padding:0 0 3.2rem}
  .ux-fgrid{grid-template-columns:1fr}
  .ux-cta .panel{padding:2.2rem 1.5rem;border-radius:20px}
  .ux-cta{padding:0 0 3.2rem}
  .ux-marquee .row span{font-size:11px;letter-spacing:.16em;padding:0 1rem;gap:1rem}
}
@media (max-width:460px){.ux-areas .chips{grid-template-columns:1fr}}

/* ---------- mobile footer navbar ---------- */
.m-nav{position:fixed;bottom:0;left:0;right:0;z-index:70;display:none;justify-content:space-around;align-items:stretch;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(245,131,32,.2);box-shadow:0 -8px 24px rgba(17,17,17,.10);
  padding:.4rem .35rem calc(.4rem + env(safe-area-inset-bottom))}
.m-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;flex:1;
  color:#6c6d70;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.3rem .1rem;
  border-radius:14px;text-decoration:none;transition:color .25s}
.m-nav a svg{width:21px;height:21px;display:block}
.m-nav a.on{color:var(--brand)}
.m-nav a:active{transform:scale(.94)}
@media (max-width:767px){
  .nav-burger{display:none!important}
  .m-menu{display:none}
  .m-nav{display:flex}
  .ux-top{bottom:5.6rem}
  .ux-wa{bottom:7.6rem}
  footer{padding-bottom:5.2rem}
}

/* ---------- gallery : energetic property cards ---------- */
@property --gal-ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.gal a{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.gal a > img{transition:transform .6s var(--ease)}
.gal a::before{content:"";position:absolute;inset:0;z-index:2;border-radius:16px;padding:2px;background:conic-gradient(from var(--gal-ang),#ff9d42,#fff3d6 28%,#f58320 55%,#e06500 82%,#ff9d42);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none;animation:galSpin 2.4s linear infinite;transition:opacity .35s}
.gal a::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);transform:translateX(-130%) skewX(-14deg);transition:transform .75s var(--ease);pointer-events:none}
@keyframes galSpin{to{--gal-ang:360deg}}
.gal a:hover{transform:translateY(-8px);box-shadow:var(--glow);border-radius:16px}
.gal a:hover::before{opacity:1}
.gal a:hover::after{transform:translateX(130%) skewX(-14deg)}
.gal a:hover > img{transform:scale(1.12) rotate(1deg)}
.gal .cap{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:linear-gradient(180deg,transparent 38%,rgba(8,10,14,.84));padding:.9rem 1rem;opacity:1;font-size:12px;letter-spacing:.08em}
.gal .cap::after{content:"+";width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font-size:1.05rem;font-weight:700;display:grid;place-items:center;box-shadow:0 6px 16px rgba(245,131,32,.55);transform:scale(.5);opacity:0;transition:transform .35s var(--ease),opacity .3s}
.gal a:hover .cap::after{transform:scale(1);opacity:1}
.gal-sub{font-family:var(--f-head);font-weight:600;font-size:1.3rem;color:var(--dark);margin:2.6rem 0 1.1rem;display:flex;align-items:center;gap:.7rem}
.gal-sub::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(245,131,32,.45),transparent)}
.ban{padding:.4rem 0 3.4rem}
.ban img{display:block;width:100%;max-width:1080px;margin:0 auto;border-radius:18px;box-shadow:0 18px 44px rgba(10,12,16,.16)}
.c-shot img{width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin:.4rem 0 1.2rem;box-shadow:var(--shadow-s)}

/* ===== video band (home) ===== */
.ux-video{padding:4.4rem 0 6rem}
.ux-video .section-head{margin-bottom:2.6rem}
.ux-vwrap{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:#0b0e13;box-shadow:0 26px 60px rgba(9,12,18,.30);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ux-vbg{position:absolute;inset:0}
.ux-vbg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.ux-vwrap:hover .ux-vbg img{transform:scale(1.05)}
.ux-vbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,12,.05),rgba(5,8,12,.42) 82%)}
.ux-vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:86px;height:86px;border:0;border-radius:50%;background:linear-gradient(135deg,#f58320,#ee4f10);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:0 16px 38px rgba(245,131,32,.46);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ux-vplay svg{width:36px;height:36px;margin-left:5px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.22))}
.ux-vwrap:hover .ux-vplay{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 20px 46px rgba(245,131,32,.58)}
.ux-vplay:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:4px}
.ux-vtag{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);z-index:2;color:#fff;font:700 .82rem/1 var(--f-head);letter-spacing:.24em;text-transform:uppercase;background:rgba(8,11,16,.55);border:1px solid rgba(255,255,255,.22);padding:.72rem 1.3rem;border-radius:99px;backdrop-filter:blur(6px);white-space:nowrap}
.ux-vplay:active ~ .ux-vtag,.ux-vwrap.playing .ux-vtag{opacity:0;pointer-events:none}
@keyframes uxVpulse{0%{box-shadow:0 0 0 0 rgba(238,79,16,.45)}70%{box-shadow:0 0 0 26px rgba(238,79,16,0)}100%{box-shadow:0 0 0 0 rgba(238,79,16,0)}}
.ux-vplay{animation:uxVpulse 2.4s var(--ease) infinite}
@media(max-width:767px){.ux-vplay{width:70px;height:70px}.ux-vplay svg{width:30px;height:30px;margin-left:4px}.ux-vtag{font-size:.7rem;padding:.6rem 1rem;bottom:14%}}
.ux-vwrap.playing .ux-vplay,.ux-vwrap.loaded iframe{top:0;left:0;transform:none}
.ux-vwrap.playing .ux-vplay,.ux-vwrap.loaded .ux-vbg,.ux-vwrap.loaded .ux-vtag{display:none}
.ux-vwrap .ux-viframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.ux-vwrap.loaded .ux-viframe{display:block}