:root{
  --bg:#f6f6f6;
  --ink:#1a1a1a;
  --muted:#6b6f76;
  --accent:#e53935;
  --accent-dark:#c62828;
  --card:#ffffff;
  --line:#e6e6e6;
  --soft:#f2f3f5;
  --space-section-y:88px;
  --space-title-gap:16px;
  --space-sub-gap:32px;
  --space-grid-gap:24px;
  --home-portfolio-heading-max:650px;
  --offer-card-title-size:16px;
  --offer-card-text-size:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--bg);
}
html,body{max-width:100%;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{line-height:1.3 !important}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.section{
  padding-top:var(--section-pt, var(--space-section-y));
  padding-bottom:var(--section-pb, var(--space-section-y));
}
.section-title{font-size:60px;line-height:1.15;margin:0 0 var(--space-title-gap);letter-spacing:-0.4px;}
.section-sub{color:var(--muted);font-size:20px;line-height:1.65;max-width:750px;margin:0}
.section-title,
.hero h1,
.auth-title{
  text-wrap:balance;
}

/* Section spacing map (desktop) */
.why-maccento{--section-pt:88px;--section-pb:88px}
.offerings{--section-pt:88px;--section-pb:96px}
.examples-showcase{--section-pt:88px;--section-pb:96px}
#portfolio.section{--section-pt:88px;--section-pb:96px}
.packages{--section-pt:96px;--section-pb:104px}
.cinematic{--section-pt:96px;--section-pb:96px}
.process{--section-pt:88px;--section-pb:96px}
.broker-trust{--section-pt:96px;--section-pb:96px}
.creative-studio{--section-pt:96px;--section-pb:96px}
.testimonials{--section-pt:88px;--section-pb:96px}
.brand-strip{--section-pt:88px;--section-pb:96px}
.final-cta{--section-pt:120px;--section-pb:120px}
.contact{--section-pt:96px;--section-pb:104px}

.heading-word-animate{
  position:relative;
  color:transparent !important;
}
.heading-word-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  user-select:none;
  white-space:normal;
  display:block;
  box-sizing:border-box;
  padding:inherit;
}
.heading-word{
  display:inline-block;
  opacity:0;
  transform:translateY(20px) scale(.985);
  will-change:transform,opacity;
}
.section-reveal.is-visible .heading-word-animate .heading-word{
  animation:heading-word-rise 1s cubic-bezier(.2,.68,.2,1) both;
  animation-delay:var(--word-delay, 0ms);
}
@keyframes heading-word-rise{
  from{
    opacity:0;
    transform:translateY(20px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.header{
  position:fixed;
  top:0;left:0;right:0;z-index:5;
  background:rgba(0,0,0,.60);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;color:#fff}
.nav > *{min-width:0}
.logo{height:46px}
.nav-links{display:flex;gap:34px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.nav-links a{
  transition:color .2s ease;
}
.nav-links a:hover{
  color:var(--accent);
}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-cta{display:flex;gap:10px}
.header-login-btn{
  padding:9px 16px;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  border:1px solid rgba(255,255,255,.48);
  background:rgba(255,255,255,.08);
}
.header-login-btn:hover{
  border-color:var(--accent);
  background:transparent;
  color:var(--accent);
}
.mobile-lang-inline{display:none !important}
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  padding:10px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  border-radius:999px;
  background:#fff;
}
.nav-toggle span + span{margin-top:5px}
.mobile-menu{
  display:none;
  border-top:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(8,10,14,.96) 0%, rgba(11,14,20,.97) 100%);
  backdrop-filter:blur(8px);
}
.mobile-menu-inner{
  display:grid;
  gap:12px;
  padding:14px 22px 18px;
  text-align:center;
}
.mobile-menu a{
  color:#f3f4f6;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  text-align:center;
  font-weight:600;
}
.mobile-menu-link:hover{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
}
.mobile-menu-login{
  margin-top:6px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 10px 20px rgba(197,39,39,.2);
}
.mobile-menu-lang{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:2px;
}
.mobile-menu-lang .lang-btn{
  width:100%;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#eef2f7;
  font-size:13px;
  font-weight:700;
  padding:10px 12px;
}
.mobile-menu-lang .lang-btn.active{
  background:#fff;
  border-color:#fff;
  color:#232933;
}
.mobile-menu-lang .lang-btn:hover{
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);
}
.mobile-menu-lang .lang-btn.active:hover{
  background:#fff;
  border-color:#fff;
  color:#232933;
}
.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(4px);
}
.lang-btn{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.88);
  font-size:13px;
  font-weight:600;
  line-height:1;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s ease;
}
.lang-btn.active{
  background:#fff;
  color:#6c7076;
}
.lang-btn:not(.active):hover{color:#fff}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
  border:1px solid transparent;
  transform:translateY(0) scale(1);
  transform-origin:center center;
  will-change:transform;
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease;
}
.btn:hover{
  transform:translateY(0) scale(1.04);
  box-shadow:0 10px 22px rgba(17,24,39,.16);
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{transform:translateY(0) scale(1.04)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}

.hero{ 
  position:relative;
  min-height:100vh;
  min-height:100svh;
  color:#fff;
  overflow:hidden;
}
.hero video,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.36) 42%, rgba(0,0,0,.7) 100%);
}
.hero .container{
  position:relative;
  z-index:2;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:128px 22px 72px;
  max-width:1040px;
}
.hero h1{
  max-width:750px;
  margin:0 0 14px;
  font-size:clamp(38px, 4.1vw, 59px);
  line-height:1.04;
  letter-spacing:-0.03em;
  font-weight:700;
  text-shadow:0 14px 36px rgba(0,0,0,.42);
}
.hero .home-hero-title{
  width:min(100%, 760px);
  max-width:760px;
  text-align:center;
}
.hero-sub{
  max-width:900px;
  margin:0;
  color:rgba(244,246,248,.92);
  font-size:clamp(11px, 1.31vw, 18px);
  line-height:1.32;
  font-weight:300;
  text-shadow:0 10px 24px rgba(0,0,0,.36);
}
.hero p{margin:0;color:#e7ecea}
.hero .cta-row{margin-top:34px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.hero .cta-row .btn{
  min-width:171px;
  justify-content:center;
  padding:12px 27px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  border-radius:999px;
}
.hero .cta-row .btn-primary{
  box-shadow:0 14px 30px rgba(229,57,53,.42);
}
.hero .cta-row .btn-ghost{
  border-color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(4px);
}
.hero .cta-row .btn-ghost:hover{
  background:rgba(255,255,255,.17);
  border-color:#fff;
}
.hero-pills{margin-top:100px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-pill{
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
}

.page-intro{
  background:linear-gradient(180deg, #141922 0%, #1c2430 100%);
  color:#fff;
  --section-pt:152px;
  --section-pb:72px;
}
.page-intro-title{
  text-align:center;
  margin:0 auto;
  max-width:760px;
  font-size:clamp(40px, 5vw, 60px);
}
.about-page{
  --section-pt:146px;
  --section-pb:88px;
  background:#fbfcfe;
}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px, 1.05fr);
  gap:46px;
  align-items:start;
}
.about-copy{
  padding-top:20px;
  padding-bottom:30px;
  align-self:start;
}
.about-kicker{
  display:inline-block;
  margin:0 0 10px;
  color:#4f658d;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:lowercase;
}
.about-title{
  margin:0 0 16px;
  max-width:760px;
  font-size:clamp(42px, 5vw, 72px);
  line-height:1.02;
  letter-spacing:-0.03em;
  color:#111827;
  text-align:left;
  white-space:pre-line;
}
.about-title.heading-word-animate .heading-word-overlay{
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  text-align:inherit;
}
.about-sub{
  max-width:700px;
  margin:0 0 24px;
  color:#4d5868;
  font-size:18px;
}
.about-cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.about-ghost-btn{
  border-color:#c7cfdd;
  background:#fff;
  color:#1b2a44;
}
.about-collage{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  grid-template-rows:repeat(8, 48px);
  gap:14px;
}
.about-card{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #e6eaf1;
  box-shadow:0 12px 24px rgba(17,24,39,.08);
}
.about-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.about-card.card-a{grid-column:1 / span 3; grid-row:1 / span 3;}
.about-card.card-b{grid-column:4 / span 3; grid-row:1 / span 3;}
.about-card.card-c{grid-column:1 / span 2; grid-row:4 / span 4;}
.about-card.card-d{grid-column:3 / span 2; grid-row:4 / span 3;}
.about-card.card-e{grid-column:5 / span 2; grid-row:4 / span 4;}
.why-maccento{background:#f8f8f8}
.why-stack{display:flex;flex-direction:column;gap:18px}
.why-head{text-align:center}
.why-head .section-title{margin:0 auto 8px;max-width:650px;text-align:center}
.why-head .section-sub{margin:0 auto}
.why-maccento .section-sub{margin-bottom:30px}
.why-orbit{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);
  gap:30px;
  align-items:center;
  max-width:1160px;
  margin:0 auto;
}
.why-col{
  display:grid;
  gap:18px;
}
.why-center-media{
  width:300px;
  height:300px;
  border-radius:50%;
  overflow:hidden;
  border:5px solid #fff;
  box-shadow:0 18px 42px rgba(17,24,39,.2), 0 0 0 1px rgba(229,57,53,.26);
  justify-self:center;
  background:#0f1116;
}
.why-center-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.why-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding:4px 6px;
  background:transparent;
  border:0;
  box-shadow:none;
  transition:transform .2s ease;
  transform:translateY(0);
  transform-origin:center center;
  will-change:transform;
}
.why-item:hover{
  transform:translateY(-2px);
}
.why-item-icon{
  width:94px;
  height:94px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(229,57,53,.24);
  background:#fff;
  box-shadow:0 8px 20px rgba(17,24,39,.10);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.why-item:hover .why-item-icon{
  transform:scale(1.06);
  border-color:rgba(229,57,53,.55);
  box-shadow:0 10px 22px rgba(229,57,53,.18);
}
.why-item-icon img{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
}
.why-item h4{margin:2px 0 4px;font-size:18px;font-weight:700}
.why-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
@keyframes perkFloat{
  0%,100%{transform:translateY(-2px)}
  50%{transform:translateY(-5px)}
}
.hero-quote{
  position:relative;
  background:var(--quote-bg, #fff);
  padding:60px 0;
}
.hero-quote .container{position:relative;text-align:center}
.hero-quote .q-mark{
  position:absolute;
  left:50%;
  top:-10px;
  transform:translateX(-50%);
  font-size:var(--quote-mark-size, 160px);
  line-height:1;
  color:rgba(229,57,53,var(--quote-mark-opacity, .2));
  font-weight:700;
  pointer-events:none;
}
.hero-quote p{
  margin:0;
  font-size:var(--quote-font-size, 52px);
  font-weight:500;
  color:#1a1a1a;
}

.stats-band{background:var(--accent);color:#fff;padding:18px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;font-weight:600;font-size:14px}
.stat b{display:block;font-size:20px;line-height:1.1}

.offerings{background:#fff}
.offerings .section-title,.offerings .section-sub{text-align:center}
.offerings .section-sub{margin:0 auto 64px}
.offer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-grid-gap);margin-top:0}
.offer{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:left;font-size:12px;color:#2d3b35
}
.offer{
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  transform:translateY(0) scale(1);
  transform-origin:center center;
  will-change:transform;
}
.offer:hover{
  border-color:rgba(229,57,53,.55);
  transform:translateY(0) scale(1.1) !important;
  box-shadow:0 26px 54px rgba(229,57,53,.24) !important;
}
.offer h4{margin:8px 0 6px;font-size:var(--offer-card-title-size);font-weight:700;color:#111}
.offer p{margin:0;color:var(--muted);font-size:var(--offer-card-text-size);line-height:1.5 !important}
.offer .offer-icon{width:30px;height:30px;margin:0 0 10px;display:block}

.services-page{
  --section-pt:132px;
  --section-pb:96px;
  background:linear-gradient(180deg, #fdf8f8 0%, #fff 100%);
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
.service-card{
  border:1px solid rgba(229,57,53,.28);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 28px rgba(162,19,19,.08);
  transition:transform .42s cubic-bezier(.22,.61,.36,1), border-color .42s ease, box-shadow .42s ease;
}
.service-card:hover{
  transform:translateY(0) scale(1.015);
  border-color:var(--accent);
  box-shadow:0 18px 34px rgba(229,57,53,.16);
}
.service-media{
  position:relative;
  height:220px;
  margin:0;
  overflow:hidden;
}
.service-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.34) 100%);
}
.service-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.service-card:hover .service-media img{
  transform:scale(1.035);
}
.service-content{
  padding:18px 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,1) 100%),
    radial-gradient(120% 120% at 0% 0%, rgba(229,57,53,.08) 0%, rgba(229,57,53,0) 52%);
}
.service-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.service-content h3{
  margin:0;
  font-size:21px;
  line-height:1.25;
  color:#151922;
}
.service-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(229,57,53,.45);
  background:linear-gradient(180deg, #fff 0%, #fff5f5 100%);
  color:var(--accent);
  box-shadow:0 6px 14px rgba(229,57,53,.16);
  cursor:pointer;
  flex:0 0 auto;
}
.service-toggle-icon{
  font-size:25px;
  font-weight:700;
  line-height:1;
  transition:transform .25s ease;
}
.service-card.is-open .service-toggle-icon{
  transform:rotate(180deg);
}
.service-toggle:hover{
  border-color:var(--accent);
  background:linear-gradient(180deg, #fff 0%, #ffeceb 100%);
}
.service-reveal-copy{
  margin:10px 0 0;
  color:#59616d;
  line-height:1.7;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(10px);
  transition:max-height 1.15s cubic-bezier(.22,.61,.36,1), opacity .65s ease, transform .65s ease;
  will-change:max-height,opacity,transform;
}
.service-card:hover .service-reveal-copy{
  max-height:11.2em;
  opacity:1;
  transform:translateY(0);
}

.examples-showcase{background:linear-gradient(180deg,#fff6f6 0%,#ffffff 100%)}
.examples-head{text-align:center;margin-bottom:var(--space-sub-gap)}
.examples-head .section-sub{text-align:center;margin:0 auto 64px}
.examples-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-grid-gap)}
.example-card{
  border:1px solid #edd2d1;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 26px rgba(136,32,26,.08);
}
.example-media{position:relative}
.example-media.video-card video{width:100%;height:230px;object-fit:cover;display:block}
.example-label{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.compare-media{
  position:relative;
  height:230px;
  overflow:hidden;
  --compare-pos:50%;
  touch-action:pan-y;
  user-select:none;
  cursor:ew-resize;
}
.compare-before,
.compare-after{
  width:100%;
  height:230px;
  object-fit:cover;
  display:block;
}
.compare-after-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 0 0 var(--compare-pos));
}
.compare-after{
  width:100%;
  height:100%;
  object-position:center;
}
.compare-tag.before{
  left:10px;
}
.compare-tag.after{
  right:10px;
  left:auto;
}
.compare-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--compare-pos);
  transform:translateX(-50%);
  width:42px;
  border:0;
  background:transparent;
  padding:0;
  cursor:ew-resize;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  touch-action:none;
}
.compare-handle-line{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  z-index:1;
}
.compare-handle-knob{
  position:relative;
  z-index:2;
  width:36px;
  height:36px;
  border-radius:999px;
  background:#fff;
  color:var(--accent);
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(229,57,53,.5);
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}
.compare-media.is-dragging .compare-handle-knob{
  transform:scale(1.04);
}
.split-tag{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  background:rgba(17,18,20,.82);
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.example-copy{padding:16px}
.example-copy h3{margin:0 0 10px;font-size:22px;color:#111}
.example-copy ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.example-copy li{position:relative;padding-left:24px;color:#515861;font-size:14px;line-height:1.45}
.example-copy li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-weight:700;
}

.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:0}
.gallery-item{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#e9ecef;min-height:180px}
.gallery-item img,.gallery-item video{width:100%;height:100%;object-fit:cover;display:block}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35))}
.gallery-item.big{grid-column:span 7;grid-row:span 2;min-height:380px}
.gallery-item.wide{grid-column:span 5;min-height:180px}
.gallery-item.tall{grid-column:span 4;grid-row:span 2;min-height:380px}
.gallery-item.small{grid-column:span 3;min-height:180px}
.gallery-item.video::after{background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55))}
.gallery-tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:#111;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;z-index:2}
.portfolio-head{text-align:center;margin-bottom:var(--space-sub-gap)}
.portfolio-head .section-title{
  display:block;
  font-size:40px;
  width:min(100%, 850px);
  max-width:850px;
  padding-top:40px;
  padding-bottom:20px;
  margin:0 auto var(--space-title-gap);
  text-align:center;
  text-wrap:normal;
  line-height:1.0;
}
.services-page-heading{
  display:block;
  width:100%;
  max-width:850px;
  margin:0 auto var(--space-title-gap);
  padding-top:30px;
  padding-bottom:35px;
  font-size:40px;
  text-align:center;
  text-wrap:normal;
  line-height:1.3;
}
.services-heading-wrap,
.plan-heading-wrap{
  width:100%;
  max-width:850px;
  margin:0 auto;
}
.portfolio-page-heading{
  display:block;
  width:min(100%, 850px);
  max-width:850px;
  margin:0 auto var(--space-title-gap);
  padding-top:40px;
  padding-bottom:35px;
  font-size:40px;
  text-align:center;
  text-wrap:normal;
  line-height:1.0;
}
@media (min-width: 1101px){
  #portfolio .portfolio-page-heading:not(.home-portfolio-heading){
    white-space:nowrap;
  }
}
.home-portfolio-heading{
  font-size:60px !important;
  width:min(100%, 650px) !important;
  max-width:650px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.plan-page-heading{
  display:block;
  width:100%;
  max-width:850px;
  margin:0 auto var(--space-title-gap);
  padding-top:30px;
  padding-bottom:35px;
  font-size:40px;
  text-align:center;
  text-wrap:normal;
  line-height:1.0;
}
.packages .plan-page-heading{
  line-height:1.3 !important;
}
.services-page .services-page-heading,
.packages .plan-page-heading{
  display:block !important;
  width:100% !important;
  max-width:850px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-wrap:wrap !important;
  line-height:1.2 !important;
}
.portfolio-head .section-sub{text-align:center;margin:0 auto}
.portfolio-tabs{
  display:flex;
  justify-content:center;
  gap:34px;
  margin:0;
  padding-bottom:14px;
  border-bottom:1px solid #e6e7ea;
}
.portfolio-btn{
  border:0;
  border-bottom:3px solid transparent;
  background:transparent;
  color:#4a4e55;
  padding:6px 2px 10px;
  font-size:34px;
  font-size:clamp(20px, 1.6vw, 30px);
  font-weight:600;
  transition:color .22s ease, border-color .22s ease;
  cursor:pointer;
}
.portfolio-btn:hover{color:var(--accent)}
.portfolio-btn.active{border-color:var(--accent);color:var(--accent)}
.portfolio-media-row{
  margin:18px 0 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}
.portfolio-media-tabs{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.portfolio-media-btn{
  border:1px solid #d7d9de;
  border-radius:999px;
  background:#fff;
  color:#3c4047;
  font-size:clamp(13px, 1vw, 18px);
  font-weight:600;
  padding:5px 10px;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.portfolio-media-btn:hover{
  color:var(--accent);
  border-color:rgba(229,57,53,.48);
  background:#fff8f8;
}
.portfolio-media-btn.active{
  color:var(--accent);
  border-color:var(--accent);
  background:#fff5f5;
}
.portfolio-view{
  border:1px solid #d7d9de;
  border-radius:999px;
  background:#fff;
  color:#3c4047;
  font-size:clamp(13px, 1vw, 18px);
  font-weight:600;
  letter-spacing:0;
  padding:5px 10px;
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.portfolio-view:hover{
  border-color:rgba(229,57,53,.48);
  color:var(--accent);
  background:#fff8f8;
}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.portfolio-grid.is-switching{pointer-events:none}
#portfolio .portfolio-grid{
  position:relative;
  isolation:isolate;
}
#portfolio .portfolio-grid::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 45%, rgba(255,255,255,0) 100%);
  transform:translateX(-18%);
}
#portfolio .portfolio-grid.is-switching::after{
  opacity:1;
  animation:portfolioSwitchSweep .9s cubic-bezier(.22,.61,.36,1);
}
@keyframes portfolioSwitchSweep{
  0%{opacity:0;transform:translateX(-24%)}
  12%{opacity:.92}
  100%{opacity:0;transform:translateX(24%)}
}
.portfolio-item{
  border-radius:0;
  overflow:visible;
  border:0;
  background:transparent;
  opacity:1;
  transform:translateY(0) scale(1);
  filter:none;
  transition:opacity .28s cubic-bezier(.25,.46,.45,.94),transform .28s cubic-bezier(.25,.46,.45,.94);
}
.portfolio-media{
  margin:0;
  border-radius:2px;
  overflow:hidden;
  border:1px solid #e0e1e4;
  aspect-ratio: 16 / 10;
}
.portfolio-item img,.portfolio-item video{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-caption{
  margin:10px 0 0;
  color:#1f2329;
  font-size:16px;
  font-weight:600;
  line-height:1.35;
}
.portfolio-mobile-controls{
  display:none;
}
.portfolio-item.mobile-slide-hidden{
  display:none !important;
}
.portfolio-item.mobile-slide-active{
  animation:portfolio-mobile-fade .35s ease both;
}
@keyframes portfolio-mobile-fade{
  from{opacity:0;transform:translateX(12px)}
  to{opacity:1;transform:translateX(0)}
}
.portfolio-item.is-entering,
.portfolio-item.is-leaving{
  opacity:0;
  transform:translateY(6px);
}
#portfolio .portfolio-item.is-leaving{
  opacity:0;
  transform:translateY(12px) scale(.985);
}
#portfolio .portfolio-item.is-entering{
  opacity:0;
  transform:translateY(14px) scale(.99);
}
.portfolio-item.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:none;
}
#portfolio .portfolio-item.is-active{
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
}
.portfolio-grid.is-slide-left .portfolio-item.is-entering{transform:translateX(16px)}
.portfolio-grid.is-slide-left .portfolio-item.is-leaving{transform:translateX(-12px)}
.portfolio-grid.is-slide-right .portfolio-item.is-entering{transform:translateX(-16px)}
.portfolio-grid.is-slide-right .portfolio-item.is-leaving{transform:translateX(12px)}
#portfolio .portfolio-grid.is-slide-left .portfolio-item.is-entering{transform:translateX(30px) translateY(12px) scale(.99)}
#portfolio .portfolio-grid.is-slide-left .portfolio-item.is-leaving{transform:translateX(-22px) translateY(8px) scale(.985)}
#portfolio .portfolio-grid.is-slide-right .portfolio-item.is-entering{transform:translateX(-30px) translateY(12px) scale(.99)}
#portfolio .portfolio-grid.is-slide-right .portfolio-item.is-leaving{transform:translateX(22px) translateY(8px) scale(.985)}
.portfolio-item.hidden{display:none}
.portfolio-item{cursor:pointer}

.portfolio-lightbox{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  grid-template-columns:72px minmax(0, 1fr) 72px;
  align-items:center;
  gap:18px;
  padding:40px;
  background:rgba(9,13,22,.58);
  backdrop-filter:blur(10px);
}
.portfolio-lightbox[hidden]{display:none}
.portfolio-lightbox-stage-wrap{
  width:min(1120px, 100%);
  margin:0 auto;
}
.portfolio-lightbox-stage{
  border-radius:16px;
  overflow:hidden;
  background:#0f1624;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  aspect-ratio:16 / 9;
  display:grid;
  place-items:center;
}
.portfolio-lightbox-media{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#0f1624;
}
.portfolio-lightbox-caption{
  margin:14px 0 0;
  color:#fff;
  text-align:center;
  font-size:16px;
  line-height:1.4;
}
.portfolio-lightbox-nav,
.portfolio-lightbox-close{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);
  color:#fff;
  width:52px;
  height:52px;
  border-radius:999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:20px;
  transition:all .2s ease;
}
.portfolio-lightbox-nav:hover,
.portfolio-lightbox-close:hover{
  border-color:var(--accent);
  background:rgba(229,57,53,.9);
  color:#fff;
}
.portfolio-lightbox-close{
  position:absolute;
  top:20px;
  right:20px;
  font-size:34px;
  line-height:1;
}

body.lightbox-open{
  overflow:hidden;
}

.packages{background:#fff}
.packages .container{max-width:1200px;padding-top:20px;}
.packages .section-sub{text-align:center;max-width:750px;margin:0 auto 64px !important}
.home-packages-title{
  font-size:60px !important;
  line-height:1.15;
  width:min(100%, 650px) !important;
  max-width:650px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
  text-wrap:balance;
}
.package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-grid-gap);margin-top:0;align-items:stretch;isolation:isolate}
.package{
  position:relative;
  background:#f7f8f7;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  height:100%;
  transform:translateY(0) scale(1);
  transform-origin:center center;
  will-change:transform;
}
.package{
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,filter .25s ease;
}
.package::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(229,57,53,.06), rgba(229,57,53,0) 38%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.package:hover{
  border-color:rgba(229,57,53,.55);
  transform:translateY(0) scale(1.2);
  box-shadow:0 22px 44px rgba(229,57,53,.2);
}
.package:hover::before{opacity:1}
.package-hero{position:relative;height:190px;overflow:hidden}
.package-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.package:hover .package-hero img{transform:scale(1.06)}
.package-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.package-label{position:absolute;top:12px;left:12px;background:#fff;color:#111;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600}
.package-label.red{
  background:var(--accent);
  color:#fff;
  box-shadow:0 8px 18px rgba(229,57,53,.32);
}
.package-label{z-index:1}
.package-body{
  background:#fff;
  padding:18px;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  flex:1;
  text-align:center;
}
.package h3{margin:0 0 8px;font-size:22px;color:#111;line-height:1.2;min-height:52px;display:flex;align-items:center;justify-content:center}
.package-sub{margin:0 0 10px;color:#5d646d;font-size:13px;line-height:1.45;min-height:58px}
.package-start{margin:2px 0 2px;color:#666;font-size:14px}
.package-amount{margin:0 0 12px;color:#111;font-size:46px;font-weight:700;line-height:1}
.package-cta{
  width:100%;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  padding:20px;
  border-radius:999px;
  font-size:18px;
  font-weight:700;
}
.package-cta:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.package-list{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  text-align:left;
}
.package-list li{
  position:relative;
  padding-left:26px;
  color:#2f3338;
  font-size:16px;
  line-height:1.45;
}
.package-list li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-weight:700;
}
.package-list li{transition:transform .2s ease,color .2s ease}
.package:hover .package-list li{transform:translateX(2px)}

.package-popular{
  border-color:rgba(229,57,53,.45);
  box-shadow:0 14px 32px rgba(229,57,53,.18);
  transform:none;
  z-index:2;
}
.package-popular::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:linear-gradient(90deg, #ef3f3b 0%, #c62320 100%);
  z-index:2;
}
.package-popular .package-body{
  background:linear-gradient(180deg, #fff 0%, #fff7f7 100%);
  min-height:410px;
  padding-top:22px;
  padding-bottom:24px;
}
.package-popular .package-cta{
  background:linear-gradient(90deg, #ef3f3b 0%, #ca2622 100%);
  border-color:#cc2a27;
}
.package-popular .package-label.red{
  animation:popularPulse 1.8s ease-in-out infinite;
}
@keyframes popularPulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}

.package-custom{
  border-color:rgba(229,57,53,.62);
  box-shadow:0 16px 34px rgba(229,57,53,.2);
}
.package-custom::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid rgba(229,57,53,.62);
  border-radius:18px;
  pointer-events:none;
}
.package-custom .package-body{
  background:linear-gradient(180deg, #fff 0%, #fff3f3 100%);
}
.package.package-custom .package-body h3{
  font-size:18px;
  color:var(--accent-dark) !important;
}
.package.package-custom .package-body .package-amount{
  color:var(--accent-dark) !important;
}
.package-custom .package-cta{
  background:linear-gradient(90deg, #ef3f3b 0%, #b81f1b 100%);
  border-color:#b81f1b;
}
.package-custom:hover{
  transform:translateY(0) scale(1.02);
  box-shadow:0 20px 42px rgba(229,57,53,.24);
}

/* Package cards v2: clean pricing layout (image-free) */
.packages .package{
  position:relative;
  background:#fff;
  border:1px solid #dfe3ea;
  border-radius:18px;
  overflow:visible;
  box-shadow:0 10px 24px rgba(17,24,39,.08);
  transform:none;
  z-index:1;
}
.packages .package::before,
.packages .package::after{
  display:none;
}
.packages .package-hero{
  display:none;
}
.packages .package-body{
  background:#fff;
  padding:58px 20px 20px;
  text-align:center;
  min-height:100%;
}
.packages .package h3{
  margin:0 0 6px;
  min-height:0;
  display:block;
  justify-content:flex-start;
  font-size:clamp(24px, 2vw, 30px);
  line-height:1.1;
}
.packages .package-start{
  margin:8px 0 4px;
  color:#5f6670;
  font-size:13px;
}
.packages .package-amount{
  margin:0 0 10px;
  font-size:clamp(42px, 3.4vw, 56px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
}
.packages .package-sub{
  margin:0 0 12px;
  min-height:0;
  color:#616874;
  font-size:14px;
  line-height:1.4;
}
.packages .package-list{
  margin:4px 0 0;
  gap:8px;
  text-align:left;
}
.packages .package-list li{
  font-size:14px;
  line-height:1.45;
  padding-left:22px;
}
.packages .package-cta{
  width:100%;
  margin-top:16px;
  justify-content:center;
  border-radius:999px;
  font-size:16px;
  padding:12px 18px;
}
.packages .package-ribbon{
  position:absolute;
  top:12px;
  left:-12px;
  z-index:6;
  background:#4c84c5;
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  padding:10px 18px 10px 16px;
  border-radius:0 4px 4px 0;
  box-shadow:0 4px 10px rgba(17,24,39,.14);
}
.packages .package-ribbon::after{
  content:"";
  position:absolute;
  top:0;
  right:-10px;
  width:18px;
  height:100%;
  background:inherit;
  transform:skewX(-22deg);
  transform-origin:left center;
  border-radius:0 7px 7px 0;
}
.packages .package-ribbon::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:12px;
  height:4px;
  background:rgba(0,0,0,.18);
  border-radius:0 0 2px 0;
}
.packages .package-ribbon-red{
  background:linear-gradient(90deg, #ef3f3b 0%, #cb2420 100%);
}
.packages .package-ribbon-dark{
  background:#6b7280;
}
.packages .package-popular{
  border-color:#ef3f3b;
  box-shadow:0 14px 32px rgba(239,63,59,.2);
}
.packages .package-popular .package-body,
.packages .package-custom .package-body{
  min-height:100%;
}
.packages .package-custom .package-amount{
  color:#c62828 !important;
}
.packages .package:hover{
  transform:translateY(0) scale(1.06) !important;
  box-shadow:0 26px 54px rgba(229,57,53,.24) !important;
  z-index:4;
}
.packages .package-popular:hover,
.packages .package-custom:hover{
  transform:translateY(0) scale(1.07) !important;
  z-index:5;
}
.packages-included-card{
  margin-top:34px;
  border:1px solid #e3e6ec;
  border-radius:20px;
  background:linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  box-shadow:0 12px 28px rgba(17,24,39,.08);
  padding:32px 26px 28px;
  text-align:center;
}
.packages-included-card h3{
  margin:0 0 10px;
  font-size:36px;
  line-height:1.1;
  color:#171a20;
}
.packages-included-card p{
  margin:0 auto 18px;
  max-width:1000px;
  padding-left:30px;
  padding-right:30px;
  color:#616975;
  font-size:22px;
  line-height:1.45 !important;
}
.packages-included-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.packages-included-list li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid #dfe5ee;
  border-radius:999px;
  background:#fff;
  color:#2f353d;
  font-size:16px;
  line-height:1.2;
}
.packages-included-list li::before{
  content:"\2713";
  color:var(--accent);
  font-weight:700;
}
.included-mobile-cta{
  display:none;
}

.cinematic{
  background:linear-gradient(120deg, #fff5f5 0%, #fdf1f1 35%, #ffffff 100%);
}
.video-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  max-width:980px;
  margin:0 auto;
}
.video-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  padding:8px 18px;
  border-radius:8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  box-shadow:0 8px 18px rgba(229,57,53,.26);
}
.video-copy h2{
  font-size:58px;
  margin:16px 0 16px;
  line-height:1.08;
  letter-spacing:-.02em;
}
.video-copy p{
  margin:0 0 24px;
  color:#5f6368;
  font-size:21px;
  line-height:1.55;
  max-width:640px;
}
.video-copy{
  max-width:680px;
  text-align:center;
  justify-self:center;
}
.video-cta{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:16px;
  align-items:center;
  justify-content:center;
}
.video-cta .btn{
  width:210px;
  justify-content:center;
  border-radius:8px;
  padding:13px 18px;
  font-size:18px;
  font-weight:700;
}
.video-cta .btn-primary{
  box-shadow:0 12px 22px rgba(229,57,53,.25);
}
.video-cta .btn-ghost{
  border-color:#d8d8dd;
  color:#30343a;
  background:#fff;
}
.video-cta .btn-ghost:hover{
  border-color:#c5c8cf;
  background:#fafafa;
  color:#1f2328;
}
.video-media{
  display:flex;
  justify-content:flex-start;
}
#video .video-media{
  justify-content:flex-end;
}
#video .video-media .broker-video{
  width:min(500px, 42vw);
  display:block;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:30px;
  border:15px solid #0f1115;
  background:#111827;
  box-shadow:0 24px 46px rgba(17,24,39,.16);
}

@media (min-width: 1281px){
  #video .video-split{
    max-width:1220px;
    grid-template-columns:minmax(0, 1fr) minmax(420px, 520px);
    gap:36px;
  }
  #video .video-copy{
    max-width:760px;
  }
  #video .video-copy h2{
    font-size:clamp(54px, 4.2vw, 72px);
    line-height:1.04;
    text-wrap:balance;
  }
  #video .video-copy p{
    max-width:720px;
  }
}
.phone-shell{
  position:relative;
  width:clamp(230px, 16vw, 260px);
  aspect-ratio:9 / 19;
  background:linear-gradient(160deg, #121722 0%, #090c13 100%);
  border-radius:36px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 24px 52px rgba(18,22,32,.28), 0 8px 22px rgba(9,12,18,.24);
  padding:8px;
  overflow:hidden;
}
.phone-shell video{
  width:100%;
  height:100%;
  border-radius:30px;
  object-fit:cover;
  display:block;
}
.phone-notch{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:34%;
  height:16px;
  border-radius:0 0 10px 10px;
  background:#0a0d14;
  z-index:3;
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}

.process{
  background:
    radial-gradient(120% 130% at 10% -10%, rgba(229,57,53,.06) 0%, rgba(229,57,53,0) 46%),
    #fff;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.process::before{
  content:"";
  position:absolute;
  inset:auto -10% -100px -10%;
  height:200px;
  background:linear-gradient(90deg, rgba(229,57,53,.05), rgba(229,57,53,0));
  filter:blur(30px);
  pointer-events:none;
}
.process-head{max-width:760px;margin:0 auto}
.process-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  color:#273244;
  border:1px solid rgba(229,57,53,.22);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
}
.process-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 6px rgba(229,57,53,.14);
}
.process .section-sub{text-align:center;margin:0 auto 64px}
.process-timeline{
  position:relative;
  margin-top:var(--space-sub-gap);
  display:grid;
  gap:26px;
}
.process-timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:24px;
  bottom:24px;
  width:3px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(140,149,161,.2), rgba(140,149,161,.8), rgba(140,149,161,.2));
}
.process-timeline::after{
  content:"";
  position:absolute;
  left:50%;
  top:24px;
  bottom:24px;
  width:3px;
  transform:translateX(-50%) scaleY(var(--process-line-fill, 0));
  transform-origin:top center;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(229,57,53,.45), rgba(229,57,53,.92));
  transition:transform .12s linear;
  z-index:1;
}
.t-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);
  align-items:center;
  gap:28px;
  position:relative;
}
.t-row-right .t-visual{grid-column:1}
.t-row-right .t-rail-point{grid-column:2}
.t-row-right .t-card{grid-column:3}
.t-row-left .t-card{grid-column:1}
.t-row-left .t-rail-point{grid-column:2}
.t-row-left .t-visual{grid-column:3}
.t-rail-point{
  width:16px;
  height:16px;
  border-radius:999px;
  border:3px solid #fff;
  margin:0 auto;
  background:var(--accent);
  box-shadow:0 0 0 1px rgba(229,57,53,.3);
  z-index:2;
}
.t-visual{
  position:relative;
  width:138px;
  height:138px;
  margin:0 auto;
  display:grid;
  place-items:center;
}
.t-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:#eff2f4;
  opacity:1;
}
.t-visual svg{
  position:relative;
  width:82px;
  height:82px;
  stroke:#0f1115;
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  z-index:1;
}
.t-visual-circle::before{border-radius:50%}
.t-visual-hex::before{
  clip-path:polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
  border-radius:8px;
}
.t-visual-triangle::before{
  clip-path:polygon(50% 4%, 95% 90%, 5% 90%);
  border-radius:10px;
}
.t-visual-diamond::before{
  clip-path:polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%);
  border-radius:12px;
}
.t-card{
  position:relative;
  min-height:170px;
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:18px;
  padding:22px 22px 20px;
  text-align:left;
  box-shadow:0 12px 26px rgba(17,24,39,.08);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
  transform-origin:center;
}
.t-card.reveal-on-scroll{
  border-color:#e4e7ec;
}
.t-card.reveal-on-scroll.is-visible{
  border-color:rgba(229,57,53,.62);
  box-shadow:0 18px 36px rgba(229,57,53,.16);
}
.t-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg, rgba(229,57,53,.55), rgba(229,57,53,.08));
  pointer-events:none;
}
.t-card:hover{
  transform:scale(1.02);
  border-color:rgba(229,57,53,.38);
  box-shadow:0 18px 34px rgba(229,57,53,.14);
}
.t-step{
  position:relative;
  display:block;
  margin:0 0 16px;
  font-size:15px;
  font-weight:700;
  line-height:1;
  letter-spacing:.18em;
  color:rgba(229,57,53,.72);
}
.t-card h3{
  position:relative;
  margin:0 0 8px;
  font-size:26px;
  line-height:1.12;
  color:#141922;
  letter-spacing:-0.02em;
}
.t-card p{
  position:relative;
  margin:0;
  color:#59616d;
  font-size:17px;
  line-height:1.55;
  max-width:95%;
}
.broker-trust{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(229,57,53,.08) 0%, rgba(229,57,53,0) 42%),
    radial-gradient(110% 120% at 100% 100%, rgba(17,24,39,.1) 0%, rgba(17,24,39,0) 48%),
    linear-gradient(135deg, #ffffff 0%, #fff6f6 52%, #ffffff 100%);
}
.broker-trust::before{
  content:"";
  position:absolute;
  inset:-30% -20%;
  background:linear-gradient(120deg, rgba(229,57,53,.07), rgba(229,57,53,0) 40%, rgba(17,24,39,.06));
  filter:blur(24px);
  animation:brokerGradientShift 10s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes brokerGradientShift{
  0%{transform:translate3d(-2%, 0, 0)}
  100%{transform:translate3d(2%, -2%, 0)}
}
.broker-trust-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,460px);
  gap:32px;
  align-items:center;
}
.broker-copy{
  max-width:680px;
  text-align:center;
  justify-self:center;
}
.broker-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 auto 12px;
  padding:8px 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid rgba(229,57,53,.24);
  color:var(--accent);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.broker-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(229,57,53,.14);
}
.broker-copy .section-title{
  margin-bottom:10px;
  max-width:550px;
  line-height:1.05;
  margin-left:auto;
  margin-right:auto;
}
.broker-copy .section-sub{
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.broker-media{
  border-radius:20px;
  overflow:hidden;
  border:12px solid #0f1115;
  box-shadow:0 24px 46px rgba(17,24,39,.14);
  background:#111827;
}
.broker-media video{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio:16 / 10;
  object-fit:cover;
}

.creative-studio{
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(229,57,53,.06) 0%, rgba(229,57,53,0) 42%),
    linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
}
.creative-head{
  max-width:920px;
  margin:0 auto 28px;
  text-align:center;
}
.creative-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 auto 12px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(229,57,53,.24);
  color:var(--accent);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.creative-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(229,57,53,.14);
}
.creative-head .section-title{
  margin:0 0 12px;
  font-size:clamp(42px, 4vw, 64px);
  line-height:1.08;
  letter-spacing:-0.02em;
  text-wrap:normal;
}
.creative-head .creative-kicker{
  margin:0 auto 12px;
}
.creative-head .section-sub{
  margin:0 auto;
  max-width:760px;
  font-size:clamp(18px, 1.25vw, 22px);
  line-height:1.46;
  color:#5b6572;
}
.creative-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(220px, 300px);
  gap:28px;
  align-items:end;
}
.creative-main{
  min-width:0;
  display:grid;
  gap:18px;
}
.creative-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}
.creative-side-video{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  align-self:end;
}
.creative-side-video .phone-shell{
  width:min(300px, 100%);
}
@media (min-width: 1281px){
  #creative-studio .creative-layout{
    grid-template-columns:minmax(0, 1fr) minmax(220px, 290px);
    gap:34px;
  }
  #creative-studio .creative-head{
    max-width:860px;
  }
  #creative-studio .creative-head .section-title{
    max-width:760px;
    margin:0 auto 12px;
    font-size:clamp(46px, 3.3vw, 58px);
    line-height:1.1;
    text-wrap:normal;
  }
  #creative-studio .creative-head .section-sub{
    max-width:780px;
  }
}
.creative-card{
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:18px;
  padding:24px 24px 22px;
  box-shadow:0 12px 26px rgba(17,24,39,.08);
}
.creative-card h3{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.1;
  color:#141922;
  letter-spacing:-0.02em;
}
.creative-card p{
  margin:0 0 16px;
  color:#59616d;
  font-size:17px;
  line-height:1.55;
}
.creative-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.creative-list li{
  position:relative;
  margin:0;
  padding-left:24px;
  color:#2e3b4d;
  font-size:16px;
  line-height:1.4;
}
.creative-list li::before{
  content:"";
  position:absolute;
  top:.5em;
  left:0;
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(229,57,53,.14);
}

.testimonials{background:#f6f2ef}
.testimonials .section-title,
.testimonials .section-sub{text-align:center}
.testimonials .section-title{font-size:35px}
.testimonials .section-title{margin-bottom:64px}
.testimonials .section-sub{margin:0 auto var(--space-sub-gap)}
.testimonial-carousel{
  max-width:1030px;
  margin:var(--space-sub-gap) auto 0;
  overflow:hidden;
}
.testimonial-track{
  display:flex;
  align-items:stretch;
  gap:48px;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.testimonial-slide{
  position:relative;
  flex:0 0 calc((100% - 96px) / 3);
  background:#fff;
  border:1px solid rgba(229,57,53,.25);
  border-left:6px solid var(--accent);
  border-radius:18px;
  padding:24px 24px 22px;
  box-shadow:0 14px 30px rgba(17,24,39,.08);
}
.testimonial-slide .stars{color:var(--accent);letter-spacing:2px;font-size:12px;margin-bottom:10px}
.testimonial-copy{
  margin:0;
  font-size:22px;
  line-height:1.45;
  color:#1f2937;
  font-weight:600;
  letter-spacing:-.01em;
}
.testimonial-client{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.client-logo{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #ef3f3b, #b81f1b);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  box-shadow:0 8px 18px rgba(229,57,53,.24);
}
.name{font-weight:700;color:#111}
.client-role{
  color:#6b7280;
  font-size:13px;
  margin-top:2px;
}
.testimonial-controls{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.testimonial-nav{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #d6d7db;
  background:#fff;
  color:#1f2937;
  cursor:pointer;
  transition:all .2s ease;
}
.testimonial-nav:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.testimonial-dots{
  display:flex;
  gap:8px;
}
.testimonial-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:0;
  background:#d1d5db;
  cursor:pointer;
  transition:all .22s ease;
}
.testimonial-dot.is-active{
  width:24px;
  background:var(--accent);
}
.brands{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;color:#6b6f76;font-size:12px}

.brand-strip{
  background:#fff;
}
.brand-strip .section-title{
  text-align:center;
  font-size:35px;
  margin-bottom:60px;
}
.brand-marquee{
  position:relative;
  display:flex;
  gap:36px;
  overflow:hidden;
  padding:6px 0;
  mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.brand-track{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:36px;
  min-width:max-content;
  animation:brandMarquee 36s linear infinite;
}
.brand-logo{
  width:150px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
  transition:opacity .22s ease, transform .22s ease;
}
.brand-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:none;
}
.brand-logo:hover{
  opacity:1;
  transform:scale(1.04);
}
.brand-logo:hover img{
  filter:none;
}
@keyframes brandMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% - 36px))}
}

.cta{background:var(--accent);color:#fff;text-align:center;padding:50px 0}
.cta .btn{background:#fff;color:var(--accent-dark);border-color:#fff;margin-top:10px}

.final-cta{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:var(--section-pt, 120px);
  padding-bottom:var(--section-pb, 120px);
  background:
    radial-gradient(1200px 360px at 50% 10%, rgba(229,57,53,.26) 0%, rgba(229,57,53,0) 70%),
    linear-gradient(180deg, #10131a 0%, #090c12 100%);
}
.final-cta-card{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  text-align:center;
  padding:16px 16px;
}
.final-cta-title{
  margin:0;
  font-size:60px;
  line-height:1.08;
  letter-spacing:-.02em;
  color:#fff;
  max-width:1100px;
  text-wrap:balance;
}
.section-reveal .final-cta-title{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.section-reveal.is-visible .final-cta-title{
  opacity:1;
  transform:translateY(0);
}
.final-cta-btn{
  margin-top:0;
  min-width:260px;
  justify-content:center;
  font-size:22px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  padding:14px 36px;
  border-radius:999px;
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 16px 30px rgba(229,57,53,.35);
}
.final-cta-btn:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
}

.contact{background:linear-gradient(180deg,#fff 0%,#fff7f7 100%)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:920px;margin:0 auto}
.contact-intro{
  padding:0 8px 8px;
  text-align:center;
}
.contact-title{
  font-size:60px;
  line-height:1.12;
  display:block;
  color:#111;
  max-width:800px;
  margin:0 auto;
}
.contact-lead{
  margin:16px auto 72px;
  color:#535960;
  line-height:1.65;
  font-size:20px;
  max-width:750px;
  text-align:center;
}
.form{background:#fff;border:1px solid #ecd8d7;border-radius:22px;padding:24px}
.input{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid #e0d8d4;
  font-size:14px;
  background:#f7f7f7;
  color:#111;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input:focus{
  outline:none;
  border-color:#e53935;
  box-shadow:0 0 0 3px rgba(229,57,53,.14);
  background:#fff;
}
.custom-select{position:relative}
.custom-select-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  text-align:left;
  cursor:pointer;
  padding-right:42px;
}
.custom-select-trigger::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:9px;
  height:9px;
  border-right:2px solid #c03a33;
  border-bottom:2px solid #c03a33;
  transform:translateY(-60%) rotate(45deg);
  transition:transform .2s ease;
}
.custom-select.open .custom-select-trigger{
  border-color:#e53935;
  box-shadow:0 0 0 3px rgba(229,57,53,.14);
  background:#fff;
}
.custom-select.open .custom-select-trigger::after{
  transform:translateY(-40%) rotate(-135deg);
}
.custom-select-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  margin:0;
  padding:8px;
  list-style:none;
  border:1px solid #e4c7c6;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 28px rgba(55,20,18,.12);
  display:none;
  z-index:15;
  max-height:220px;
  overflow:auto;
}
.custom-select.open .custom-select-menu{display:block}
.custom-select-option{
  position:relative;
  padding:12px 14px 12px 46px;
  border-radius:10px;
  color:#272b30;
  font-size:14px;
  line-height:1.25;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.custom-select-option::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:18px;
  height:18px;
  border:1.5px solid #d2d8e1;
  border-radius:5px;
  background:#fff;
  transform:translateY(-50%);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.custom-select-option::after{
  content:"";
  position:absolute;
  left:21px;
  top:50%;
  width:5px;
  height:9px;
  border-right:2px solid transparent;
  border-bottom:2px solid transparent;
  transform:translateY(-60%) rotate(45deg);
  transition:border-color .18s ease;
}
.custom-select-option:hover{
  background:#fff6f5;
  color:#8f241d;
}
.custom-select-option.active{
  background:#fff3f1;
  color:#18293d;
  font-weight:700;
}
.custom-select-option.active::before{
  border-color:#d63a33;
  background:linear-gradient(180deg,#fffdfd 0%, #ffe3df 100%);
  box-shadow:0 0 0 3px rgba(229,57,53,.08);
}
.custom-select-option.active::after{
  border-color:#d63a33;
}
.custom-select-option.is-placeholder{
  color:#6f767f;
  font-weight:600;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
textarea.input{min-height:116px;resize:vertical;border-radius:20px;margin-top:8px}
.contact-submit{
  margin-top:16px;
  width:min(100%, 360px);
  display:flex;
  justify-content:center;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  font-size:20px;
  font-weight:700;
  padding:12px 16px;
}
.contact-submit:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.contact-status{
  margin:12px auto 0;
  width:min(100%, 520px);
  min-height:1.4em;
  text-align:center;
  color:#8f241d;
  font-size:14px;
  font-weight:600;
}
.contact-feedback{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(10, 10, 12, .28);
  backdrop-filter:blur(2px);
  z-index:1200;
}
.contact-feedback.is-active{
  display:flex;
}
.contact-feedback-float{
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:min(92%, 460px);
  border:1px solid #f0c8cd;
  border-radius:999px;
  background:#fff3f5;
  color:#7f1d1d;
  padding:10px 16px;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  box-shadow:0 14px 28px rgba(13, 16, 23, .24);
}
.contact-feedback-spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(190, 30, 45, .3);
  border-top-color:#be1e2d;
  border-radius:999px;
  animation:pbx-spin .8s linear infinite;
}
.contact-success{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:16px;
  background:rgba(8, 10, 14, .58);
  z-index:1210;
}
.contact-success.is-open{
  display:grid;
}
.contact-success-card{
  width:min(420px, 100%);
  border-radius:14px;
  border:1px solid #e6d7da;
  background:#fff;
  padding:18px;
  box-shadow:0 16px 34px rgba(15, 23, 42, .25);
}
.contact-success-card h3{
  margin:0 0 8px;
  font-size:24px;
}
.contact-success-card p{
  margin:0 0 8px;
}
.contact-success-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}

.footer{
  background:linear-gradient(180deg, #11141a 0%, #0b0d12 100%);
  color:#dfe4ea;
  padding:56px 0 24px;
  font-size:14px;
}
.footer-inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
 .footer-logo{
  height:78px;
  width:auto;
  margin:0 auto;
}
.footer-desc{
  margin:16px auto 0;
  color:#d2d9e3;
  font-size:20px;
  line-height:1.7;
  max-width:500px;
}
.footer-divider{
  width:100%;
  height:1px;
  margin:24px 0 16px;
  background:linear-gradient(90deg, rgba(255,91,87,0) 0%, rgba(255,91,87,.9) 50%, rgba(255,91,87,0) 100%);
}
.footer-contact-line{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer-contact-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#dfe4ea;
  text-decoration:none;
  transition:color .2s ease;
}
.footer-contact-item:hover{color:#fff}
.footer-contact-dot{
  color:#ff5b57;
  font-size:18px;
  line-height:1;
}
.footer .contact-icon{width:18px;height:18px;display:inline-block;color:#ff5b57}
.footer .contact-icon svg{width:18px;height:18px;display:block}
.footer .contact-text{color:#dfe4ea}
.footer-bottom{
  margin-top:16px;
  text-align:center;
  color:#9ea8b6;
  font-size:13px;
}
.footer-social{
  margin-top:16px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.social-link{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);
  color:#f5f7fa;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
.social-link svg{
  width:18px;
  height:18px;
  display:block;
}
.social-link:hover{
  transform:translateY(-1px);
  border-color:#ff5b57;
  background:rgba(255,91,87,.15);
  color:#fff;
}

/* Login page */
.auth-page{
  min-height:100vh;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(229,57,53,.1) 0%, rgba(229,57,53,0) 45%),
    radial-gradient(100% 90% at 100% 100%, rgba(17,24,39,.08) 0%, rgba(17,24,39,0) 42%),
    #eef0f2;
  padding:24px;
}
.auth-wrap{
  width:min(1260px, 100%);
  min-height:calc(100vh - 48px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1.65fr) minmax(320px, .85fr);
  gap:24px;
}
.auth-card{
  background:#fff;
  border-radius:20px;
  border:1px solid #e8dbda;
  padding:34px 30px 30px;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 40px rgba(17,24,39,.08);
}
.auth-kicker{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.auth-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(229,57,53,.14);
}
.auth-title{
  margin:14px 0 8px;
  font-size:52px;
  line-height:1.08;
  color:#10151d;
  letter-spacing:-.02em;
}
.auth-subtitle{
  margin:0 0 18px;
  color:#65707c;
  font-size:17px;
}
.auth-alert{
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
  margin:0 0 12px;
}
.auth-alert-success{
  border:1px solid #b7d7cb;
  background:#edf8f3;
  color:#1f6a4f;
}
.auth-alert-error{
  border:1px solid #f0b8b8;
  background:#fff1f1;
  color:#942626;
}
.auth-alert-info{
  border:1px solid #c7d6f0;
  background:#eef4ff;
  color:#2f4f8b;
}
.auth-form{
  display:grid;
  gap:14px;
}
.auth-register-form{gap:12px}
.auth-label{
  color:#4f5964;
  font-size:14px;
  font-weight:600;
}
.auth-input{
  width:100%;
  border:1px solid #d8dde3;
  border-radius:12px;
  background:#f8fafb;
  color:#111;
  height:62px;
  padding:0 18px;
  font-size:24px;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.auth-input:focus{
  outline:none;
  border-color:#d63a35;
  box-shadow:0 0 0 4px rgba(229,57,53,.12);
  background:#fff;
}
.auth-input::placeholder{color:#9ea4aa}
.auth-input-md{font-size:18px;height:54px}
.auth-btn{
  margin-top:4px;
  border:0;
  border-radius:12px;
  height:56px;
  background:#e8ecef;
  color:#6a7380;
  font-size:22px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
.auth-btn:hover{transform:translateY(-1px)}
.auth-divider{
  margin:22px 0;
  display:flex;
  align-items:center;
  gap:14px;
  color:#78818c;
  font-size:14px;
  font-weight:500;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:#d9dde1;
}
.auth-otp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.auth-otp-request form{margin:0}
.auth-otp-btn{
  border:1px solid #d4dbe2;
  border-radius:12px;
  height:50px;
  background:#fff;
  color:#49515b;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  width:100%;
}
.auth-verify-form{
  margin-top:20px;
}
.auth-btn-verify{
  background:linear-gradient(90deg, #ef3f3b 0%, #ca2622 100%);
  color:#fff;
}
.auth-btn-verify:hover{
  background:linear-gradient(90deg, #d83834 0%, #b71f1b 100%);
  color:#fff;
}
.auth-create{
  margin:28px 0 0;
  text-align:center;
  color:#1c222b;
  font-size:14px;
}
.auth-create a{
  color:var(--accent);
  text-decoration:underline;
  font-weight:700;
}
.auth-terms{
  margin:24px auto 0;
  text-align:center;
  color:#727c87;
  max-width:420px;
  font-size:12px;
  line-height:1.6;
}
.auth-terms a{
  color:#1b2027;
  font-weight:600;
}
.auth-media{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  min-height:100%;
  background:#0d1422;
}
.auth-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.58) saturate(.95);
}
.auth-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(165deg, rgba(239,63,59,.38) 0%, rgba(16,22,34,.2) 45%, rgba(16,22,34,.62) 100%),
    radial-gradient(100% 120% at 100% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 52%);
  pointer-events:none;
}
.auth-pricing{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:min(280px, calc(100% - 36px));
  height:60px;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(5px);
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
  z-index:2;
}
.auth-pricing::before{
  content:"\2197";
  font-size:18px;
  margin-right:10px;
  line-height:1;
}
.auth-pricing:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Sign in specific redesign */
.auth-page-signin{
  background:
    radial-gradient(1100px 600px at 0% 0%, rgba(239,63,59,.16) 0%, rgba(239,63,59,0) 52%),
    radial-gradient(900px 500px at 100% 100%, rgba(15,23,42,.1) 0%, rgba(15,23,42,0) 46%),
    #edf0f3;
}
.auth-wrap-signin{
  grid-template-columns:minmax(0, 1.35fr) minmax(380px, .95fr);
  gap:28px;
}
.auth-card-signin{
  padding:48px 36px;
  border-radius:24px;
  border:1px solid #ead3d2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 100%);
  text-align:center;
  align-items:center;
  justify-content:center;
}
.auth-wrap-signup{
  grid-template-columns:minmax(0, 1.35fr) minmax(380px, .95fr);
  gap:28px;
}
.auth-card-signup{
  padding:48px 36px;
  border-radius:24px;
  border:1px solid #ead3d2;
  background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 100%);
  text-align:center;
  align-items:center;
  justify-content:center;
}
.auth-card-signup .auth-kicker{justify-content:center}
.auth-card-signup .auth-title{
  font-size:56px;
  margin-top:16px;
}
.auth-card-signup .auth-subtitle{
  margin-bottom:20px;
  font-size:18px;
}
.auth-card-signup .auth-alert,
.auth-card-signup .auth-form,
.auth-card-signup .auth-create,
.auth-card-signup .auth-terms{
  width:100%;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.auth-card-signup .auth-label{
  text-align:center;
}
.auth-card-signup .auth-input{
  text-align:center;
}
.signin-head{
  max-width:700px;
  margin:0 auto;
}
.auth-card-signin .auth-kicker{justify-content:center}
.auth-card-signin .auth-title{
  font-size:56px;
  margin-top:16px;
}
.auth-card-signin .auth-subtitle{
  margin-bottom:20px;
  font-size:18px;
}
.signin-shell{
  margin-top:8px;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
.auth-card-signin .auth-alert,
.auth-card-signin .auth-form,
.auth-card-signin .auth-divider,
.auth-card-signin .auth-otp-grid,
.auth-card-signin .auth-verify-form,
.auth-card-signin .auth-create,
.auth-card-signin .auth-terms{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.auth-input-signin{
  height:60px;
  font-size:18px;
  border-radius:14px;
  text-align:center;
}
.auth-card-signin .auth-btn{
  height:56px;
  font-size:18px;
  border-radius:14px;
}
.auth-card-signin .auth-otp-grid{
  gap:12px;
}
.auth-card-signin .auth-otp-btn{
  height:48px;
  border-radius:12px;
  font-size:14px;
}
.signin-foot{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #eceff3;
  width:100%;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.signin-foot .auth-create{
  margin-top:0;
}
.signin-foot .auth-terms{
  max-width:520px;
}
.auth-media--signin{
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 24px 42px rgba(15,23,42,.2);
}

@media (max-width: 1200px){
  .container{max-width:1080px}
  .section-title{font-size:52px}
  .offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portfolio-grid{gap:16px}
  .video-copy h2{font-size:50px}
  .video-copy p{font-size:19px}
  .contact-title{font-size:56px;max-width:680px}
  .contact-lead{font-size:19px;max-width:720px;margin:16px auto 56px}
  .auth-wrap-signin{grid-template-columns:minmax(0, 1fr) minmax(320px, .86fr)}
  .auth-wrap-signup{grid-template-columns:minmax(0, 1fr) minmax(320px, .86fr)}
  .auth-card-signin .auth-title{font-size:48px}
  .auth-card-signup .auth-title{font-size:48px}
}
@media (max-width: 1100px){
  .offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testimonial-track{gap:32px}
  .testimonial-slide{flex:0 0 calc((100% - 32px) / 2)}
  .auth-wrap,
  .auth-wrap-signin,
  .auth-wrap-signup{
    min-height:auto;
    grid-template-columns:1fr;
    gap:14px;
  }
  .auth-card,
  .auth-card-signin,
  .auth-card-signup{
    padding:32px 24px;
  }
  .auth-media{min-height:320px}
}

/* Light scroll motion */
.section-reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .72s ease,transform .72s ease;
  will-change:opacity,transform;
}
.section-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-on-scroll{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .4s ease,transform .4s ease;
  will-change:opacity,transform;
}
.why-list .why-item.reveal-on-scroll{transform:translateY(12px) scale(1)}
.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0);
}
.offer.reveal-on-scroll.is-visible:hover{
  transform:translateY(0) scale(1.02);
}
.package.reveal-on-scroll.is-visible:hover{
  transform:translateY(0) scale(1.02);
}
.why-list .why-item.reveal-on-scroll.is-visible{transform:translateY(0) scale(1)}
.why-list .why-item.reveal-on-scroll.is-visible:hover{transform:translateY(0) scale(1.02)}

@media (prefers-reduced-motion: reduce){
  .heading-word-animate{
    color:inherit !important;
  }
  .heading-word-overlay{
    display:none !important;
  }
  .heading-word{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
  .portfolio-item,
  .section-reveal,
  .reveal-on-scroll{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
  }
  .why-item .why-icon img{animation:none !important}
  .broker-trust::before{animation:none !important}
  .brand-track{animation:none !important}
}

@media (max-width: 980px){
  :root{
    --space-section-y:68px;
    --space-sub-gap:24px;
    --space-grid-gap:16px;
    --offer-card-title-size:18px;
    --offer-card-text-size:14px;
  }
  .section{
    padding-top:var(--section-pt, var(--space-section-y));
    padding-bottom:var(--section-pb, var(--space-section-y));
  }
  /* Section spacing map (tablet) */
  .why-maccento{--section-pt:72px;--section-pb:72px}
  .offerings{--section-pt:72px;--section-pb:72px}
  .examples-showcase{--section-pt:72px;--section-pb:72px}
  #portfolio.section{--section-pt:72px;--section-pb:72px}
  .packages{--section-pt:72px;--section-pb:80px}
  .cinematic{--section-pt:72px;--section-pb:72px}
  .process{--section-pt:72px;--section-pb:72px}
  .broker-trust{--section-pt:72px;--section-pb:72px}
  .testimonials{--section-pt:72px;--section-pb:72px}
  .brand-strip{--section-pt:72px;--section-pb:72px}
  .final-cta{--section-pt:96px;--section-pb:96px}
  .contact{--section-pt:80px;--section-pb:80px}
  .section-title{font-size:42px;line-height:1.16}
  .section-sub{font-size:18px;line-height:1.6}
  .page-intro{--section-pt:132px;--section-pb:64px}
  .about-page{--section-pt:124px;--section-pb:72px}
  .about-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .about-copy{
    text-align:center;
    max-width:760px;
    margin:0 auto;
  }
  .about-title,
  .about-sub{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .about-title{
    text-align:center;
  }
  .about-cta{
    justify-content:center;
  }
  .about-collage{
    max-width:760px;
    margin:0 auto;
  }
  .header{
    background:#06080c;
    backdrop-filter:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav{padding:14px 0}
  .header .container.nav{
    padding-top:14px;
    padding-bottom:14px;
  }
  .nav-links{display:none}
  .header{overflow-x:clip}
  .nav{gap:8px}
  .nav-cta{display:none}
  .nav-actions > .lang-toggle{display:none}
  .nav-toggle{
    width:36px;
    height:36px;
    padding:8px;
    border-radius:10px;
  }
  .nav-toggle span + span{margin-top:4px}
  .nav-toggle{display:inline-block}
  .mobile-menu{
    display:block;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(-8px);
    transition:max-height .3s ease,opacity .25s ease,transform .25s ease;
  }
  .header.menu-open .mobile-menu{max-height:560px;opacity:1;transform:translateY(0)}
  .mobile-menu-lang{display:grid}
  .header.menu-open .nav-toggle span{transition:transform .2s ease,opacity .2s ease}
  .header.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .header.menu-open .nav-toggle span:nth-child(2){opacity:0}
  .header.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .logo{height:36px}
  .hero,.hero .container{min-height:100vh;min-height:100svh}
  .hero .container{padding:112px 24px 72px}
  .hero h1{font-size:38px}
  .hero-sub{font-size:12px}
  .hero .cta-row .btn{font-size:15px;padding:13px 26px;min-width:186px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  .services-page{
    --section-pt:112px;
    --section-pb:72px;
  }
  .services-page-heading{
    margin-bottom:34px;
    font-size:clamp(28px, 6.2vw, 42px);
    line-height:1.3;
  }
  .packages .package-body{
    padding:52px 16px 16px;
  }
  .packages .package-amount{
    font-size:46px;
  }
  .packages .package-cta{
    font-size:15px;
    padding:11px 14px;
  }
  .services-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .service-media{height:200px}
  .service-content h3{font-size:20px}
  .examples-grid{grid-template-columns:1fr}
  .package-grid{grid-template-columns:repeat(2,1fr)}
  .package-popular,
  .package-custom{transform:none}
  .package-popular .package-body{min-height:auto}
  .gallery-grid{grid-template-columns:repeat(6,1fr)}
  .gallery-item.big{grid-column:span 6}
  .gallery-item.tall{grid-column:span 3}
  .gallery-item.wide{grid-column:span 6}
  .gallery-item.small{grid-column:span 3}
  .portfolio-item{grid-column:auto}
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .portfolio-tabs{gap:24px}
  .portfolio-btn{font-size:clamp(18px, 2vw, 24px)}
  .portfolio-media-row{margin:14px 0 20px}
  .portfolio-media-tabs{gap:12px}
  .portfolio-media-btn{font-size:clamp(12px, 1.45vw, 14px);padding:5px 10px}
  .portfolio-caption{font-size:15px}
  .services-page-heading,
  .portfolio-page-heading,
  .plan-page-heading{
    width:100% !important;
    max-width:850px !important;
    font-size:clamp(30px, 5.2vw, 40px);
    line-height:1.2 !important;
    padding-top:24px;
    padding-bottom:12px;
  }
  .services-page-heading{
    line-height:1.3 !important;
  }
  .home-packages-title{
    font-size:clamp(40px, 6vw, 52px) !important;
    max-width:650px !important;
    line-height:1.12;
  }
  .home-portfolio-heading{
    width:min(100%, var(--home-portfolio-heading-max)) !important;
    max-width:var(--home-portfolio-heading-max) !important;
  }
  .packages-included-card{
    margin-top:28px;
    padding:26px 20px 22px;
  }
  .packages-included-card h3{
    font-size:30px;
  }
  .packages-included-card p{
    font-size:18px;
    max-width:760px;
  }
  .packages-included-list li{
    font-size:15px;
  }
  .testimonial-track{gap:24px}
  .testimonial-slide{flex:0 0 calc((100% - 24px) / 2)}
  .why-grid{grid-template-columns:1fr}
  .why-cards{grid-template-columns:1fr}
  .why-orbit{
    grid-template-columns:1fr;
    gap:20px;
  }
  .why-center-media{
    order:1;
    width:240px;
    height:240px;
  }
  .why-col{
    gap:14px;
  }
  .why-col:first-child{order:2}
  .why-col:last-child{order:3}
  .contact-grid{grid-template-columns:1fr}
  .process-timeline{
    gap:16px;
    padding-left:0;
  }
  .process-timeline::before{
    left:24px;
    top:0;
    bottom:0;
    width:3px;
    transform:none;
  }
  .process-timeline::after{
    left:24px;
    top:0;
    bottom:0;
    width:3px;
    transform:scaleY(var(--process-line-fill, 0));
    transform-origin:top center;
  }
  .t-row{
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
  }
  .t-row .t-rail-point{
    grid-column:1;
    grid-row:1;
    margin-top:24px;
  }
  .t-row .t-card{
    grid-column:2;
    grid-row:1;
  }
  .t-row .t-visual{
    display:none;
  }
  .t-card{
    min-height:auto;
    padding:22px 20px 20px;
  }
  .t-step{
    font-size:13px;
  }
  .t-card h3{
    font-size:26px;
  }
  .t-card p{
    font-size:20px;
    max-width:100%;
  }
  .video-split{grid-template-columns:1fr;gap:18px}
  #video .video-media{
    justify-content:center;
  }
  #video .video-media .broker-video{
    width:min(430px, 92vw);
  }
  .video-copy h2{font-size:40px}
  .video-copy p{font-size:18px;max-width:620px;margin-left:auto;margin-right:auto}
  .final-cta-title{font-size:clamp(34px, 6vw, 52px)}
  .final-cta-btn{font-size:20px;min-width:230px}
  .contact-title{font-size:44px;max-width:620px}
  .contact-lead{font-size:18px;max-width:680px;margin:16px auto 48px}
  .footer-desc{font-size:18px;max-width:460px}
  .phone-shell{width:min(320px, 100%)}
  .broker-trust-grid{grid-template-columns:1fr;gap:20px}
  .broker-copy{text-align:center;max-width:760px;margin:0 auto}
  .broker-copy .section-sub{margin:0 auto}
  .creative-layout{
    grid-template-columns:1fr;
    gap:18px;
    align-items:stretch;
  }
  .creative-head{
    margin:0 auto 18px;
    text-align:center;
  }
  .creative-head .creative-kicker{
    margin:0 auto 12px;
  }
  .creative-head .section-title{
    font-size:clamp(36px, 7vw, 56px);
    line-height:1.08;
  }
  .creative-head .section-sub{
    margin:0 auto;
    max-width:720px;
    font-size:clamp(17px, 2.4vw, 20px);
  }
  .creative-grid{grid-template-columns:1fr;gap:16px}
  .creative-side-video{
    justify-content:center;
    margin-top:2px;
    align-items:center;
    align-self:auto;
  }
  .creative-side-video .phone-shell{margin-left:auto;margin-right:auto;}
  .creative-side-video .phone-shell{width:min(256px, 100%);}
  .creative-card h3{font-size:24px}
  .creative-card p{font-size:18px}
  .creative-list li{font-size:18px}
  .brand-track{gap:28px}
  .brand-logo{width:134px;height:50px}
  .footer-social{margin-top:14px}
  .auth-page{padding:16px}
  .auth-wrap{
    min-height:auto;
    grid-template-columns:1fr;
    gap:12px;
  }
  .auth-card{padding:24px 20px}
  .auth-title{font-size:40px;margin:14px 0 8px}
  .auth-subtitle{font-size:15px}
  .auth-input{font-size:21px;height:56px}
  .auth-input-md{font-size:16px;height:50px}
  .auth-btn{font-size:18px;height:50px}
  .auth-media{min-height:300px}
  .auth-pricing{top:22px}
  .auth-wrap-signin{
    grid-template-columns:1fr;
    gap:14px;
  }
  .auth-wrap-signup{
    grid-template-columns:1fr;
    gap:14px;
  }
  .auth-card-signin{
    padding:28px 22px 24px;
  }
  .auth-card-signup{
    padding:28px 22px;
  }
  .auth-card-signin .auth-title{
    font-size:42px;
  }
  .auth-card-signup .auth-title{
    font-size:42px;
  }
}
@media (max-width: 640px){
  .packages .container{
    display:flex;
    flex-direction:column;
  }
  .packages .plan-heading-wrap{
    order:1;
  }
  .packages .packages-included-card{
    order:2;
  }
  .packages .package-grid{
    order:3;
  }
  :root{
    --space-section-y:56px;
    --space-sub-gap:16px;
    --space-grid-gap:14px;
    --offer-card-title-size:16px;
    --offer-card-text-size:13px;
  }
  .header{
    background:#05070a;
    backdrop-filter:none;
  }
  .logo{
    height:29px;
    width:auto;
    max-width:176px;
  }
  .nav{
    padding:12px 0;
    gap:6px;
  }
  .header .container.nav{
    padding-top:12px;
    padding-bottom:12px;
  }
  .header .container.nav{
    padding-left:12px;
    padding-right:12px;
  }
  .nav-actions{gap:6px}
  .lang-toggle{
    padding:2px;
    gap:2px;
    border-radius:999px;
  }
  .lang-btn{
    padding:6px 9px;
    font-size:11px;
    min-width:34px;
  }
  .nav-toggle{
    width:32px;
    height:32px;
    padding:6px;
    border-radius:8px;
  }
  .nav-toggle span{
    height:1.8px;
  }
  .nav-toggle span + span{
    margin-top:4px;
  }
  .container{padding:0 16px}
  .mobile-menu-inner{
    padding:14px 12px 16px;
    gap:10px;
  }
  .mobile-menu a{
    padding:12px 12px;
  }
  main,.section,.container,.offer-grid,.package-grid,.portfolio-grid,.gallery-grid,.timeline,.t-grid,.contact-grid,.footer-inner{min-width:0}
  .section{
    padding-top:var(--section-pt, var(--space-section-y));
    padding-bottom:var(--section-pb, var(--space-section-y));
  }
  /* Section spacing map (mobile) */
  .why-maccento{--section-pt:56px;--section-pb:56px}
  .offerings{--section-pt:56px;--section-pb:64px}
  .examples-showcase{--section-pt:56px;--section-pb:64px}
  #portfolio.section{--section-pt:56px;--section-pb:64px}
  .packages{--section-pt:64px;--section-pb:64px}
  .cinematic{--section-pt:64px;--section-pb:64px}
  .process{--section-pt:56px;--section-pb:64px}
  .broker-trust{--section-pt:64px;--section-pb:64px}
  .creative-studio{--section-pt:64px;--section-pb:64px}
  .testimonials{--section-pt:56px;--section-pb:64px}
  .brand-strip{--section-pt:56px;--section-pb:56px}
  .final-cta{--section-pt:72px;--section-pb:72px}
  .contact{--section-pt:64px;--section-pb:72px}
  .section-title{font-size:34px;line-height:1.16}
  .process .section-title{
    padding-left:40px;
    padding-right:40px;
  }
  .section-sub{font-size:16px;line-height:1.58}
  .why-maccento .section-sub,
  .offerings .section-sub,
  .examples-showcase .section-sub,
  #portfolio .section-sub,
  .packages .section-sub,
  .process .section-sub,
  .broker-trust .section-sub,
  .creative-studio .section-sub,
  .testimonials .section-sub,
  .brand-strip .section-sub,
  .contact .section-sub{
    padding-left:30px;
    padding-right:30px;
  }
  .page-intro{--section-pt:120px;--section-pb:56px}
  .about-page{--section-pt:112px;--section-pb:56px}
  .about-title{
    font-size:clamp(34px, 9.2vw, 46px);
    line-height:1.04;
  }
  .about-sub{
    font-size:15px;
    padding-left:35px;
    padding-right:35px;
  }
  .why-orbit{
    gap:16px;
  }
  .why-center-media{
    display:none;
  }
  .why-item{
    padding:4px 2px;
  }
  .why-item-icon{
    width:84px;
    height:84px;
  }
  .why-item-icon img{
    width:38px;
    height:38px;
  }
  .why-item h4{
    font-size:16px;
  }
  .why-item p{
    font-size:13px;
    line-height:1.5;
    padding-left:35px;
    padding-right:35px;
  }
  .about-collage{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-rows:auto;
    gap:10px;
  }
  .about-card{
    grid-column:auto !important;
    grid-row:auto !important;
    aspect-ratio:4 / 3;
    border-radius:14px;
  }
  .about-collage .about-card:nth-child(n+5){
    display:none;
  }
  .page-intro-title{font-size:34px}
  .services-page-heading,
  .portfolio-page-heading,
  .plan-page-heading{
    max-width:100% !important;
    font-size:clamp(28px, 8vw, 34px);
    line-height:1.2 !important;
    padding-top:14px;
    padding-bottom:8px;
  }
  .plan-page-heading{
    padding-left:35px;
    padding-right:35px;
  }
  .services-page-heading{
    line-height:1.3 !important;
  }
  .home-packages-title{
    font-size:clamp(30px, 8.6vw, 40px) !important;
    max-width:100% !important;
    line-height:1.12;
    padding-top:6px;
    padding-bottom:4px;
  }
  .home-portfolio-heading{
    width:min(100%, var(--home-portfolio-heading-max)) !important;
    max-width:var(--home-portfolio-heading-max) !important;
  }
  .hero h1{font-size:34px}
  .hero,.hero .container{min-height:100vh;min-height:100svh}
  .hero .container{padding:104px 16px 64px}
  .hero-sub{font-size:14px}
  .hero .cta-row{width:100%}
  .hero .cta-row .btn{flex:1;justify-content:center;min-width:0;font-size:14px;padding:12px 16px}
  .hero-pill{font-size:11px;letter-spacing:.12em}
  .offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .examples-grid,.package-grid,.gallery-grid,.portfolio-grid{grid-template-columns:1fr}
  .service-content{
    padding:30px;
  }
  .service-toggle{
    display:inline-flex;
  }
  .service-card:hover .service-reveal-copy{
    max-height:0;
    opacity:0;
    transform:translateY(8px);
    margin-top:0;
  }
  .service-reveal-copy{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(8px);
    margin-top:0;
  }
  .service-card.is-open .service-reveal-copy,
  .service-card.is-open:hover .service-reveal-copy{
    max-height:14em;
    opacity:1;
    transform:translateY(0);
    margin-top:10px;
  }
  .example-copy{
    padding:30px;
  }
  .package-popular,
  .package-custom{transform:none}
  .package-popular .package-body{min-height:auto}
  .packages .package-body{
    padding:56px 30px 30px;
  }
  .packages .package h3{
    font-size:24px;
  }
  .packages .package-amount{
    font-size:40px;
  }
  .packages .package-list li{
    font-size:13px;
  }
  .packages .package-cta{
    font-size:14px;
    padding:10px 12px;
  }
  .packages-included-card{
    margin-top:24px;
    padding:30px;
  }
  .packages-included-card h3{
    font-size:26px;
  }
  .packages-included-card p{
    font-size:16px;
    margin-bottom:14px;
  }
  .included-mobile-cta{
    display:inline-flex;
    width:100%;
    justify-content:center;
    margin:0 0 14px;
  }
  .packages-included-list{
    gap:8px;
  }
  .packages-included-list li{
    width:100%;
    justify-content:flex-start;
    border-radius:12px;
    padding:10px 12px;
    font-size:14px;
  }
  .example-media.video-card video,
  .compare-media,
  .compare-before,
  .compare-after{
    height:210px;
  }
  .portfolio-grid{grid-template-columns:1fr;gap:14px}
  .portfolio-tabs{
    justify-content:flex-start;
    overflow:auto;
    flex-wrap:nowrap;
    gap:18px;
    padding-bottom:10px;
    margin-top:8px;
  }
  .portfolio-btn{
    font-size:20px;
    white-space:nowrap;
    padding:4px 0 8px;
    min-width:0;
  }
  .portfolio-home .portfolio-tabs{
    justify-content:center;
    overflow:visible;
    flex-wrap:wrap;
    gap:20px;
  }
  .portfolio-home .portfolio-btn{
    text-align:center;
  }
  .portfolio-home .portfolio-mobile-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:2px 0 10px;
  }
  .portfolio-mobile-arrow{
    width:36px;
    height:36px;
    border-radius:999px;
    border:1px solid #d8dde5;
    background:#fff;
    color:#2e333a;
    font-size:18px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .portfolio-mobile-arrow:hover{
    border-color:var(--accent);
    color:var(--accent);
  }
  .portfolio-mobile-count{
    font-size:13px;
    font-weight:600;
    color:#4f5560;
    letter-spacing:.02em;
    min-width:56px;
    text-align:center;
  }
  .portfolio-media-row{
    margin:12px 0 18px;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .portfolio-view{
    align-self:flex-end;
    font-size:clamp(12px, 1.45vw, 14px);
    padding:5px 10px;
  }
  .portfolio-media-tabs{
    gap:11px;
    overflow:auto;
    flex-wrap:nowrap;
    width:100%;
    padding-bottom:4px;
  }
  .portfolio-media-btn{
    font-size:12px;
    padding:5px 9px;
    white-space:nowrap;
  }
  #portfolio:not(.portfolio-home) .portfolio-tabs{
    justify-content:center;
    overflow:visible;
    flex-wrap:wrap;
    gap:20px;
  }
  #portfolio:not(.portfolio-home) .portfolio-media-row{
    align-items:center;
    gap:12px;
  }
  #portfolio:not(.portfolio-home) .portfolio-media-tabs{
    justify-content:center;
    width:100%;
    overflow:visible;
    flex-wrap:wrap;
    gap:10px;
    padding-bottom:0;
  }
  #portfolio:not(.portfolio-home) .portfolio-view{
    align-self:center;
    margin:0 auto;
    min-width:140px;
  }
  .portfolio-caption{
    font-size:14px;
    text-align:center;
  }
  .portfolio-lightbox{
    grid-template-columns:1fr;
    gap:12px;
    padding:16px;
  }
  .portfolio-lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
  }
  .portfolio-lightbox-nav.prev{left:10px}
  .portfolio-lightbox-nav.next{right:10px}
  .portfolio-lightbox-stage-wrap{width:100%}
  .portfolio-lightbox-stage{border-radius:12px}
  .portfolio-lightbox-caption{font-size:14px}
  .portfolio-lightbox-close{
    top:12px;
    right:12px;
    width:44px;
    height:44px;
  }
  .gallery-item.big,.gallery-item.wide,.gallery-item.tall,.gallery-item.small{grid-column:span 1;grid-row:auto;min-height:210px}
  .package-body{padding:14px}
  .chip{max-width:100%;white-space:normal}
  .package h3{font-size:16px}
  .package-price{font-size:28px}
  .package-footer{flex-direction:column;align-items:flex-start;gap:8px}
  .video-copy h2{font-size:28px}
  .video-copy p{
    font-size:15px;
    padding-left:40px;
    padding-right:40px;
  }
  .final-cta-card{padding:8px 4px}
  .final-cta-title{font-size:34px}
  .final-cta-btn{
    margin-top:24px;
    min-width:200px;
    font-size:16px;
    padding:12px 24px;
  }
  .video-cta{flex-direction:column}
  .video-cta .btn{width:100%;justify-content:center}
  .video-media{justify-content:center}
  #video .video-media .broker-video{
    width:min(300px, 100%);
    border-width:7px;
  }
  .phone-shell{
    width:min(290px, 100%);
    border-radius:34px;
    padding:8px;
  }
  .phone-shell video{border-radius:28px}
  .creative-side-video .phone-shell{width:min(232px, 100%);}
  .creative-head .section-title{font-size:clamp(32px, 9.2vw, 44px)}
  .creative-head .section-sub{font-size:16px;line-height:1.55}
  .phone-notch{height:18px}
  .broker-media{border-radius:16px}
  .testimonial-track{gap:14px}
  .testimonial-slide{flex:0 0 100%}
  .testimonial-slide{padding:30px}
  .testimonial-copy{font-size:18px}
  .brand-marquee{gap:22px}
  .brand-track{gap:22px}
  .brand-logo{width:118px;height:44px}
  .process-kicker{font-size:10px}
  .t-card h3{font-size:22px}
  .t-card p{font-size:17px}
  .lang-btn{padding:6px 9px;font-size:11px}
  .form-grid{grid-template-columns:1fr}
  .contact-title{font-size:34px;max-width:520px}
  .contact-title{
    padding-left:30px;
    padding-right:30px;
  }
  .contact-lead{font-size:16px;line-height:1.6;max-width:560px;margin:16px auto 40px}
  .contact-lead{
    padding-left:35px;
    padding-right:35px;
  }
  .footer{padding:40px 0 16px}
  .footer-logo{height:64px}
  .footer-desc{font-size:16px;line-height:1.6}
  .footer-divider{margin:16px 0 16px}
  .footer-social{justify-content:center;gap:8px}
  .social-link{width:36px;height:36px;border-radius:9px}
  .footer-contact-line{gap:8px}
  .footer .contact-text{overflow-wrap:anywhere;word-break:break-word;text-align:center}
  .footer-bottom{margin-top:12px}
  .auth-card{padding:20px 16px}
  .auth-title{font-size:34px}
  .auth-input{font-size:18px;height:50px}
  .auth-input-md{font-size:15px;height:48px}
  .auth-btn{font-size:16px;height:48px}
  .auth-otp-grid{grid-template-columns:1fr}
  .auth-media{min-height:250px}
  .auth-pricing{
    width:min(220px, calc(100% - 24px));
    height:52px;
    font-size:15px;
  }
  .auth-card-signin{
    padding:22px 16px 18px;
    border-radius:18px;
  }
  .auth-card-signup{
    padding:22px 16px;
    border-radius:18px;
  }
  .auth-card-signin .auth-title{
    font-size:36px;
  }
  .auth-card-signup .auth-title{
    font-size:36px;
  }
  .auth-card-signin .auth-subtitle{
    font-size:15px;
  }
  .auth-card-signup .auth-subtitle{
    font-size:15px;
  }
  .signin-shell{
    margin-top:4px;
  }
  .auth-input-signin{
    height:52px;
    font-size:16px;
  }
  .auth-card-signin .auth-btn{
    height:50px;
    font-size:16px;
  }
}
@media (max-width: 420px){
  .logo{
    height:26px;
    max-width:158px;
  }
  .nav{padding:10px 0}
  .header .container.nav{
    padding-top:10px;
    padding-bottom:10px;
  }
  .header .container.nav{
    padding-left:10px;
    padding-right:10px;
  }
  .lang-btn{
    padding:5px 8px;
    font-size:10px;
    min-width:31px;
  }
  .nav-toggle{
    width:30px;
    height:30px;
    padding:6px;
  }
  .hero .cta-row{gap:8px}
  .hero .cta-row .btn{font-size:13px;padding:11px 12px}
  .packages .package-ribbon{
    font-size:11px;
    padding:8px 12px 8px 10px;
  }
  .packages .package-ribbon::after{
    right:-8px;
    width:14px;
    transform:skewX(-20deg);
  }
  .packages .package-amount{
    font-size:36px;
  }
  .final-cta-title{font-size:30px}
  .final-cta-btn{min-width:180px;font-size:15px;letter-spacing:.1em}
  .footer-contact-line{
    flex-direction:column;
    gap:8px;
  }
  .footer-contact-dot{display:none}
}

/* Final device matrix pass: spacing + typography only */
@media (max-width: 1440px){
  :root{
    --space-section-y:88px;
    --space-title-gap:16px;
    --space-sub-gap:30px;
    --space-grid-gap:22px;
  }
  .container{max-width:1220px}
  .section-title{font-size:56px;line-height:1.14}
  .section-sub{font-size:20px;line-height:1.6}
  .hero h1{font-size:clamp(42px, 4.2vw, 58px)}
}

@media (max-width: 1280px){
  :root{
    --space-section-y:80px;
    --space-title-gap:14px;
    --space-sub-gap:26px;
    --space-grid-gap:20px;
  }
  .container{max-width:1120px}
  .section-title{font-size:50px;line-height:1.14}
  .section-sub{font-size:19px;line-height:1.58}
  .hero h1{font-size:clamp(40px, 4.1vw, 54px)}
  .portfolio-page-heading,
  .services-page-heading,
  .plan-page-heading{font-size:38px}
}

@media (max-width: 1024px){
  :root{
    --space-section-y:72px;
    --space-title-gap:14px;
    --space-sub-gap:22px;
    --space-grid-gap:18px;
  }
  .container{max-width:980px;padding:0 20px}
  .section-title{font-size:44px;line-height:1.15}
  .section-sub{font-size:18px;line-height:1.56}
  .hero .container{padding:112px 20px 68px}
  .hero h1{font-size:clamp(36px, 4.6vw, 48px)}
  .portfolio-page-heading,
  .services-page-heading,
  .plan-page-heading{font-size:34px}
}

@media (max-width: 768px){
  :root{
    --space-section-y:64px;
    --space-title-gap:12px;
    --space-sub-gap:18px;
    --space-grid-gap:16px;
  }
  .container{padding:0 18px}
  .section-title{font-size:38px;line-height:1.16}
  .section-sub{font-size:17px;line-height:1.54}
  .hero .container{padding:104px 18px 60px}
  .hero h1{font-size:clamp(34px, 7.2vw, 44px)}
  .final-cta-title{font-size:42px;line-height:1.1}
  .final-cta-btn{font-size:18px}
}

@media (max-width: 480px){
  :root{
    --space-section-y:56px;
    --space-title-gap:10px;
    --space-sub-gap:14px;
    --space-grid-gap:14px;
  }
  .container{padding:0 14px}
  .section-title{font-size:32px;line-height:1.16}
  .section-sub{font-size:15px;line-height:1.52}
  .hero .container{padding:98px 14px 56px}
  .hero h1{font-size:clamp(30px, 8.8vw, 38px)}
  .portfolio-page-heading,
  .services-page-heading,
  .plan-page-heading{font-size:30px !important}
  .package-amount{font-size:36px !important}
}

@media (max-width: 390px){
  :root{
    --space-section-y:52px;
    --space-title-gap:10px;
    --space-sub-gap:12px;
    --space-grid-gap:12px;
  }
  .container{padding:0 12px}
  .section-title{font-size:30px;line-height:1.16}
  .section-sub{font-size:14px;line-height:1.5}
  .hero .container{padding:94px 12px 52px}
  .hero h1{font-size:clamp(28px, 9.4vw, 34px)}
  .final-cta-title{font-size:28px}
  .final-cta-btn{font-size:14px;min-width:170px}
}

@media (hover:none), (pointer:coarse){
  .t-card:hover,
  .offer:hover,
  .package:hover,
  .packages .package:hover,
  .packages .package-custom:hover,
  .why-item:hover,
  .service-card:hover,
  .portfolio-item:hover,
  .example-card:hover,
  .brand-logo:hover{
    transform:none !important;
  }
  .why-item:hover .why-item-icon,
  .service-card:hover .service-media img,
  .package:hover .package-hero img{
    transform:none !important;
  }
}

/* CRM panel UI */
.panel-page{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg, #f7f9fc 0%, #eef3fb 100%);
  color:#10223e;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}
.panel-shell{
  max-width:1200px;
  margin:0 auto;
  padding:28px 20px 40px;
}
.panel-topbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.panel-title{
  margin:0;
  font-size:32px;
  line-height:1.2;
}
.panel-sub{
  margin:4px 0 0;
  color:#597093;
}
.panel-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.panel-notify{
  position:relative;
}
.panel-notify-btn{
  position:relative;
  width:42px;
  height:42px;
  border:1px solid #cfdaea;
  border-radius:12px;
  background:#fff;
  color:#10223e;
  cursor:pointer;
}
.panel-notify-btn svg{
  width:20px;
  height:20px;
}
.panel-notify-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#c81e2f;
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.panel-notify-menu{
  position:absolute;
  right:0;
  top:48px;
  width:min(390px, calc(100vw - 48px));
  background:#fff;
  border:1px solid #d7e1f0;
  border-radius:12px;
  box-shadow:0 16px 38px rgba(15,23,42,.18);
  z-index:60;
}
.panel-notify-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #e6edf7;
}
.panel-notify-list{
  max-height:360px;
  overflow:auto;
  padding:8px;
  display:grid;
  gap:8px;
}
.panel-notify-filters{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px 0;
}
.panel-notify-filter{
  border:1px solid #d9e3f1;
  background:#fff;
  color:#19345a;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.panel-notify-filter.is-active{
  background:#16304f;
  border-color:#16304f;
  color:#fff;
}
.panel-notify-item{
  border:1px solid #e3eaf5;
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  display:grid;
  gap:8px;
}
.panel-notify-item.is-unread{
  border-color:#c9d9f2;
  background:#f6fbff;
}
.panel-notify-item.is-hidden,
.panel-notify-list .panel-muted.is-hidden{
  display:none !important;
}
.panel-notify-title{
  margin:0;
  color:#10223e;
  font-weight:700;
  font-size:14px;
}
.panel-notify-body{
  margin:4px 0 0;
  color:#445b7f;
  font-size:13px;
}
.panel-notify-time{
  margin:6px 0 0;
  color:#6a7f9f;
  font-size:12px;
}
.panel-notify-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.panel-btn,
.panel-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:12px;
  border:1px solid #cad7e8;
  background:linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  color:#10223e;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  padding:9px 13px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(16,34,62,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.panel-btn:hover,
.panel-link:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(16,34,62,.14);
  border-color:#b7cae0;
}
.panel-btn-primary{
  border-color:#a8162a;
  background:linear-gradient(180deg, #cf2840 0%, #a8162a 100%);
  color:#fff;
}
.panel-btn-primary:hover{
  border-color:#7f0f20;
  background:linear-gradient(180deg, #a9162d 0%, #7f0f20 100%);
}
.panel-btn-danger{
  border-color:#b91c2f;
  background:linear-gradient(180deg, #d62a3d 0%, #b91c2f 100%);
  color:#fff;
}
.panel-btn-danger:hover{
  background:#aa1526;
  border-color:#9a1122;
}
.panel-btn-icon{
  width:40px;
  height:40px;
  padding:0;
  border-radius:10px;
  gap:0;
  flex:0 0 auto;
}
.panel-btn-icon .panel-icon,
.panel-btn-icon .panel-icon-trash{
  display:inline-flex;
  width:18px;
  height:18px;
}
.panel-btn-icon .panel-icon svg,
.panel-btn-icon .panel-icon-trash svg{
  width:100%;
  height:100%;
}
.panel-btn-danger .panel-icon-trash svg path{
  stroke-width:2.35;
}

/* Ensure high-visibility action icons in table rows */
.panel-btn-icon[aria-label="Quick send"] .panel-icon,
.panel-btn-icon[title="Quick send"] .panel-icon,
.panel-btn-icon[aria-label="Quick send"] .panel-icon svg,
.panel-btn-icon[title="Quick send"] .panel-icon svg{
  width:22px;
  height:22px;
}
.panel-btn-icon[aria-label="Quick send"] .panel-icon svg path,
.panel-btn-icon[title="Quick send"] .panel-icon svg path{
  stroke-width:2.45 !important;
}

.panel-btn-icon[aria-label^="Delete"] .panel-icon-trash,
.panel-btn-icon[title^="Delete"] .panel-icon-trash,
.panel-btn-icon[aria-label^="Delete"] .panel-icon-trash svg,
.panel-btn-icon[title^="Delete"] .panel-icon-trash svg{
  width:22px;
  height:22px;
  color:#fff !important;
}
.panel-btn-icon[aria-label^="Delete"] .panel-icon-trash svg path,
.panel-btn-icon[title^="Delete"] .panel-icon-trash svg path{
  stroke:#fff !important;
  stroke-width:2.6 !important;
}
.panel-grid{
  display:grid;
  gap:16px;
}
.panel-grid-kpi{
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
}
.panel-grid-kpi-compact{
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}
.panel-grid-ops{
  grid-template-columns:1fr;
}
.panel-card{
  background:#fff;
  border:1px solid #d7e1f0;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(16,34,62,.06);
  padding:16px;
}
.client-portal-shell{
  display:grid;
  gap:16px;
}
.client-portal-hero{
  background:linear-gradient(135deg,#f8fbff 0%,#eef4ff 55%,#ffffff 100%);
  border:1px solid #d7e1f0;
}
.client-portal-hero-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.client-portal-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#eef4ff;
  border:1px solid #d7e1f0;
  color:#2d4f78;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.client-portal-summary{
  max-width:680px;
  margin:8px 0 0;
  color:#536b8f;
}
.client-portal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.client-portal-kpi{
  padding:16px;
  border:1px solid #d7e1f0;
  border-radius:14px;
  background:#fff;
}
.client-portal-kpi-value{
  margin:0;
  font-size:32px;
  line-height:1;
  color:#10223e;
}
.client-portal-kpi-note{
  margin:8px 0 0;
  color:#5e7394;
  font-size:13px;
}
.client-portal-grid-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.client-portal-stack{
  display:grid;
  gap:12px;
}
.client-portal-list{
  display:grid;
  gap:10px;
}
.client-portal-list-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:14px 16px;
  border:1px solid #d7e1f0;
  border-radius:14px;
  background:#fbfdff;
}
.client-portal-list-main{
  min-width:0;
}
.client-portal-title{
  margin:0;
  font-size:17px;
  color:#10223e;
}
.client-portal-meta{
  margin:6px 0 0;
  color:#5e7394;
  font-size:13px;
}
.client-portal-side{
  display:grid;
  justify-items:end;
  gap:8px;
}
.client-portal-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.client-portal-detail{
  padding:12px;
  border:1px solid #d7e1f0;
  border-radius:12px;
  background:#fff;
}
.client-portal-detail-label{
  display:block;
  color:#6a7f9f;
  font-size:12px;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.client-portal-detail-value{
  margin:0;
  color:#10223e;
  font-size:15px;
  font-weight:600;
}
.client-portal-empty{
  padding:16px;
  border:1px dashed #c8d5e7;
  border-radius:14px;
  color:#5e7394;
  background:#fbfdff;
}
.client-portal-media-strip{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:4px;
}
.client-portal-media-item{
  min-width:160px;
  padding:12px;
  border:1px solid #d7e1f0;
  border-radius:14px;
  background:#fbfdff;
}
.client-portal-account-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.client-portal-section-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.client-portal-section-copy{
  max-width:640px;
}
.client-portal-card-accent{
  position:relative;
  overflow:hidden;
}
.client-portal-card-accent::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#f04d63 0%,#c81f39 100%);
}
.client-portal-money{
  font-family:var(--panel-font-display, 'Sora', sans-serif);
  font-weight:700;
  color:#112743;
}
.client-portal-subtle{
  color:#6a7f9f;
  font-size:13px;
}
.client-status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid #d4dfef;
  background:#f3f7fd;
  color:#21446a;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.client-status-chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  opacity:.85;
}
.client-status-chip.status-paid,
.client-status-chip.status-complete,
.client-status-chip.status-booked{
  background:#eefbf2;
  border-color:#cbe8d3;
  color:#23744a;
}
.client-status-chip.status-sent,
.client-status-chip.status-partial,
.client-status-chip.status-review,
.client-status-chip.status-reviewed,
.client-status-chip.status-contacted,
.client-status-chip.status-shooting,
.client-status-chip.status-editing{
  background:#eef4ff;
  border-color:#cfddf4;
  color:#275685;
}
.client-status-chip.status-overdue,
.client-status-chip.status-lost{
  background:#fff1f2;
  border-color:#f1c5cc;
  color:#a63143;
}
.client-status-chip.status-draft,
.client-status-chip.status-new,
.client-status-chip.status-accepted,
.client-status-chip.status-pending{
  background:#fff8ee;
  border-color:#efd8b3;
  color:#9b5f12;
}
.client-status-chip.status-unpaid{
  background:#fff6eb;
  border-color:#efd3b0;
  color:#9d631b;
}
.client-portal-empty strong{
  display:block;
  margin-bottom:6px;
  color:#12304d;
  font-size:15px;
}
.client-portal-empty::before{
  content:"";
  display:block;
  width:36px;
  height:36px;
  margin-bottom:10px;
  border-radius:12px;
  background:
    linear-gradient(135deg, rgba(240,77,99,.15) 0%, rgba(200,31,57,.06) 100%);
}
.client-portal-table td .panel-btn,
.client-portal-table td .panel-link{
  white-space:nowrap;
}
@media (max-width: 960px){
  .client-portal-grid-two,
  .client-portal-account-grid,
  .client-portal-detail-grid{
    grid-template-columns:1fr;
  }
  .client-portal-hero-head,
  .client-portal-list-row{
    flex-direction:column;
  }
  .client-portal-side{
    justify-items:start;
    width:100%;
  }
  .client-portal-actions .panel-btn{
    width:100%;
  }
}
@media (max-width: 640px){
  .client-portal-kpi-value{
    font-size:28px;
  }
  .client-portal-media-item{
    min-width:136px;
  }
}
.panel-kpi-label{
  display:block;
  color:#5e7394;
  font-size:13px;
  margin-bottom:8px;
}
.panel-kpi-value{
  margin:0;
  font-size:30px;
  line-height:1;
}
.panel-section-title{
  margin:0 0 12px;
  font-size:22px;
}
.panel-form-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}
.panel-input,
.panel-select,
.panel-textarea{
  border:1px solid #c8d5e7;
  border-radius:10px;
  background:#fff;
  color:#10223e;
  padding:10px 12px;
  font-size:14px;
}
.panel-input:focus,
.panel-select:focus,
.panel-textarea:focus{
  outline:none;
  border-color:#c11f37;
  box-shadow:0 0 0 3px rgba(193,31,55,0.15);
}
.panel-input:focus-visible,
.panel-select:focus-visible{
  outline:none;
}
.panel-input,
.panel-select{
  height:42px;
}
.panel-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:42px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%2310223e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 19px center;
  background-size:14px 14px;
}
select.panel-input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:42px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%2310223e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 19px center;
  background-size:14px 14px;
}
/* Modern custom select */
.panel-select-modern{
  position:relative;
  width:100%;
}
.panel-select-modern.is-open{
  z-index:50;
}
.panel-select-native{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.panel-select-trigger{
  width:100%;
  height:42px;
  border:1px solid #e2cdd2;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%,#fdf7f8 100%);
  color:#1e2230;
  padding:10px 14px;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-shadow:0 8px 20px rgba(193,31,55,0.08);
}
.panel-select-modern.is-disabled .panel-select-trigger{
  opacity:0.6;
  cursor:not-allowed;
  box-shadow:none;
}
.panel-select-trigger:focus{
  outline:none;
  border-color:#c11f37;
  box-shadow:0 0 0 3px rgba(193,31,55,0.15),0 10px 24px rgba(193,31,55,0.12);
}
.panel-select-trigger .panel-select-value{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.panel-select-trigger .panel-select-arrow{
  width:18px;
  height:18px;
  color:#c11f37;
  flex:0 0 auto;
}
.panel-select-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  background:linear-gradient(180deg,#ffffff 0%,#fff7f8 100%);
  border:1px solid #ead4d9;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(16,35,58,0.18);
  padding:8px;
  display:none;
  max-height:320px;
  overflow:auto;
  z-index:30;
}
.panel-select-menu.is-floating{
  position:fixed;
  left:0;
  right:auto;
  top:0;
  width:auto;
}
.panel-select-modern.is-open .panel-select-menu{
  display:block;
}
.panel-select-option{
  width:100%;
  border:none;
  background:transparent;
  color:#1e2230;
  padding:10px 12px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  cursor:pointer;
  font-size:14px;
}
.panel-select-option.is-selected{
  background:#c11f37;
  color:#ffffff;
}
.panel-select-option:hover{
  background:#f3dde2;
}
.panel-select-option.is-disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.currency-flag{
  width:24px;
  height:16px;
  border-radius:5px;
  background-size:cover;
  background-position:center;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,0.08);
}
.flag-usd{background-image:url("/assets/flags/usd.svg");}
.flag-eur{background-image:url("/assets/flags/eur.svg");}
.flag-gbp{background-image:url("/assets/flags/gbp.svg");}
.flag-inr{background-image:url("/assets/flags/inr.svg");}
.flag-bdt{background-image:url("/assets/flags/bdt.svg");}
.flag-aud{background-image:url("/assets/flags/aud.svg");}
.flag-cad{background-image:url("/assets/flags/cad.svg");}
.flag-sgd{background-image:url("/assets/flags/sgd.svg");}
select.panel-input option,
.panel-select option{
  background:#ffffff;
  color:#10223e;
}
.panel-textarea{
  min-height:90px;
  resize:vertical;
  width:100%;
}
.panel-inline-check,
.inline-checkbox-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#1e2230;
}
.panel-inline-check input[type="checkbox"],
.inline-checkbox-label input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border:1.8px solid #c11f37;
  border-radius:4px;
  background:#ffffff;
  display:inline-grid;
  place-content:center;
  box-shadow:none;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.panel-inline-check input[type="checkbox"]::after,
.inline-checkbox-label input[type="checkbox"]::after{
  content:"";
  width:8px;
  height:4px;
  border-left:2px solid #ffffff;
  border-bottom:2px solid #ffffff;
  transform:rotate(-45deg) scale(0);
  transition:transform .12s ease;
}
.panel-inline-check input[type="checkbox"]:checked,
.inline-checkbox-label input[type="checkbox"]:checked{
  background:#c11f37;
  border-color:#c11f37;
  box-shadow:0 4px 10px rgba(193,31,55,0.18);
}
.panel-inline-check input[type="checkbox"]:checked::after,
.inline-checkbox-label input[type="checkbox"]:checked::after{
  transform:rotate(-45deg) scale(1);
}
.panel-inline-check input[type="checkbox"]:focus-visible,
.inline-checkbox-label input[type="checkbox"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(193,31,55,0.2);
}
.panel-table-wrap{
  overflow:auto;
}
.panel-table{
  width:100%;
  border-collapse:collapse;
}
.panel-table th,
.panel-table td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid #e3eaf5;
  vertical-align:top;
}
.panel-table th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#5d7393;
}
.panel-table td{
  font-size:14px;
}
.panel-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  font-size:12px;
  padding:4px 9px;
  background:#edf4ff;
  color:#224f8f;
}
.panel-badge-danger{
  background:#ffe2e5;
  color:#9e1322;
}
.panel-alert-strip{
  display:flex;
  align-items:center;
  gap:8px;
}
.panel-role-badge{
  margin-left:6px;
}
.panel-muted{
  color:#657a99;
}
.panel-row-overdue td{
  background:#fff3f4;
}
.panel-pager{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.panel-pager-summary{
  margin:0;
  color:#5f7597;
  font-size:14px;
  font-weight:600;
}
.panel-pager-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.panel-pager-btn,
.panel-pager-page,
.panel-pager-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  min-height:40px;
  border-radius:12px;
  border:1px solid #cfdaea;
  background:#fff;
  color:#10223e;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  padding:0 12px;
}
.panel-pager-page{
  min-width:40px;
  padding:0 10px;
}
.panel-pager-page.is-active{
  border-color:#16304f;
  background:#16304f;
  color:#fff;
}
.panel-pager-btn.is-disabled{
  color:#8aa0bd;
  background:#f4f7fb;
  border-color:#dce5f2;
  cursor:not-allowed;
}
.panel-pager-ellipsis{
  border-style:dashed;
  color:#7085a4;
}
.panel-stack{
  display:grid;
  gap:16px;
}
.media-project-card{
  transition:box-shadow .2s ease, border-color .2s ease;
}
.media-project-header{
  margin-bottom:0;
}
.media-project-toggle{
  width:44px;
  height:44px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-color:#a8162a;
  background:linear-gradient(180deg, #cf2840 0%, #a8162a 100%);
  color:#fff;
}
.media-project-toggle:hover{
  border-color:#7f0f20;
  background:linear-gradient(180deg, #b21b33 0%, #7f0f20 100%);
  color:#fff;
}
.media-project-toggle-icon{
  width:36px !important;
  height:36px !important;
  display:block;
  color:#fff !important;
  transition:transform .2s ease;
}
.media-project-toggle .media-project-toggle-icon path{
  stroke:#fff !important;
}
.media-project-card.is-collapsed .media-project-toggle-icon{
  transform:rotate(-90deg) scale(1.8) !important;
}
.media-project-card:not(.is-collapsed) .media-project-toggle-icon{
  transform:scale(1.8) !important;
}
.media-project-details{
  margin-top:12px;
}
.media-stage-section + .media-stage-section{
  margin-top:14px;
}
.media-project-details[hidden]{
  display:none !important;
}
.media-delivery-files-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  margin-top:12px;
  gap:12px;
}
.media-file-list-card{
  margin:0;
  border:1px solid #d8e2ef;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.media-file-list{
  display:grid;
  gap:10px;
}
.media-file-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #e1e9f4;
  border-radius:10px;
  background:#fff;
}
.media-file-meta{
  min-width:0;
  display:grid;
  gap:4px;
}
.media-file-kind{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.04em;
  font-weight:700;
  text-transform:uppercase;
  color:#28415f;
  background:#eef4fb;
  border:1px solid #d0dced;
}
.media-file-name{
  color:#1e3450;
  font-weight:600;
  word-break:break-word;
}
.media-file-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.media-file-row.is-hidden-by-default{
  display:none;
}
.media-file-list-cta{
  margin-top:4px;
  justify-content:flex-end;
}
.media-file-list-cta-group{
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.media-project-summary{
  color:#657a99;
  margin:6px 0 0;
}
.client-media-workspace .media-project-card{
  border:1px solid #d8e2ef;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.client-media-workspace .media-project-header{
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.client-media-workspace .media-project-meta{
  min-width:0;
  flex:1 1 320px;
  display:grid;
  gap:4px;
}
.client-media-workspace .media-project-title{
  margin:0;
  color:#10223e;
}
.client-media-workspace .media-project-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:0;
  flex:1 1 320px;
}
.client-media-workspace .media-project-toggle{
  width:44px;
  height:44px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media (max-width: 640px){
  .media-file-row{
    flex-direction:column;
    align-items:stretch;
  }
  .media-file-actions,
  .media-file-list-cta,
  .media-file-list-cta-group{
    width:100%;
    justify-content:stretch;
  }
  .media-file-actions > *,
  .media-file-list-cta-group > *{
    width:100%;
  }
  .client-media-workspace .media-project-header > .media-project-controls{
    width:100%;
    align-items:stretch;
  }
  .client-media-workspace .media-project-controls > *{
    width:100%;
    flex:1 1 100%;
  }
}
.panel-list{
  margin:0;
  padding-left:16px;
}
.panel-list li{
  margin:0 0 6px;
}
.panel-hr{
  border:0;
  border-top:1px solid #e3eaf5;
  margin:14px 0;
}
.panel-chart-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.panel-chart-list{
  display:grid;
  gap:10px;
}
.panel-chart-row{
  display:grid;
  grid-template-columns:70px 1fr 42px;
  align-items:center;
  gap:8px;
}
.panel-chart-label{
  font-size:12px;
  color:#415777;
  text-transform:capitalize;
}
.panel-chart-track{
  height:10px;
  border-radius:999px;
  background:#e6edf8;
  overflow:hidden;
}
.panel-chart-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #0f294a, #1d4f89);
}
.panel-chart-fill-leads{
  background:linear-gradient(90deg, #be1e2d, #e64a59);
}
.panel-chart-fill-quotes{
  background:linear-gradient(90deg, #1e3a8a, #3b82f6);
}
.panel-chart-value{
  font-size:12px;
  text-align:right;
  color:#0f2748;
  font-weight:700;
}
.panel-chart-split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.panel-chart-subtitle{
  margin:0 0 8px;
  font-size:12px;
  color:#637b9d;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.panel-line-chart{
  display:grid;
  gap:8px;
}
.panel-line-chart svg{
  width:100%;
  height:auto;
  border:1px solid #e1e9f5;
  border-radius:10px;
  background:linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
}
.panel-line-chart-axis{
  stroke:#ccdaee;
  stroke-width:1;
}
.panel-line-chart-line{
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.panel-line-chart-line-leads{
  stroke:#be1e2d;
}
.panel-line-chart-line-quotes{
  stroke:#2563eb;
}
.panel-line-chart-legend{
  display:flex;
  gap:12px;
  align-items:center;
  color:#4d6587;
  font-size:12px;
}
.panel-line-chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.panel-line-chart-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  display:inline-block;
}
.panel-line-chart-dot-leads{
  background:#be1e2d;
}
.panel-line-chart-dot-quotes{
  background:#2563eb;
}
.panel-line-chart-labels{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
  color:#7288a7;
  font-size:11px;
}
.panel-line-chart-labels span{
  text-align:center;
}

/* Website chatbot */
.plan-float-cta{
  position:fixed;
  left:20px;
  bottom:24px;
  z-index:1190;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid #8f1420;
  background:linear-gradient(135deg, #be1e2d, #981321);
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 12px 24px rgba(112,10,23,.3);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.plan-float-cta:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, #d12234, #a21424);
  box-shadow:0 14px 26px rgba(112,10,23,.35);
}
.plan-float-cta:focus-visible{
  outline:3px solid rgba(190,30,45,.24);
  outline-offset:2px;
}
.pbx-lock{
  overflow:hidden;
}
.pbx-modal{
  position:fixed;
  inset:0;
  z-index:1300;
  padding:10px;
}
.pbx-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10, 10, 12, .62);
}
.pbx-card{
  position:relative;
  width:min(720px, calc(100vw - 28px));
  margin:0 auto;
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:16px;
  box-shadow:0 26px 48px rgba(15, 23, 42, .3);
  overflow:hidden;
  max-height:calc(100vh - 20px);
  display:flex;
  flex-direction:column;
}
.pbx-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid #ececec;
  background:#111;
}
.pbx-title{
  margin:0;
  color:#fff;
  font-size:22px;
  line-height:1.2;
}
.pbx-subtitle{
  margin:6px 0 0;
  color:#f5d9dc;
  font-size:13px;
}
.pbx-close{
  border:0;
  border-radius:10px;
  width:34px;
  height:34px;
  font-size:24px;
  line-height:1;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
}
.pbx-step-meta{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-bottom:1px solid #ececec;
  font-size:13px;
  color:#334155;
}
.pbx-divider{
  width:1px;
  height:14px;
  background:#d5d9e2;
}
.pbx-form{
  position:relative;
  padding:14px 18px 18px;
  overflow:auto;
  flex:1 1 auto;
}
.pbx-step{
  display:none;
}
.pbx-step.is-active{
  display:block;
}
.pbx-step h3{
  margin:0 0 10px;
  font-size:18px;
}
.pbx-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.pbx-stack{
  display:grid;
  gap:10px;
}
.pbx-option{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #d5dbe8;
  border-radius:10px;
  padding:10px 11px;
  font-size:14px;
  background:#fff;
}
.pbx-option input{
  width:16px;
  height:16px;
}
.pbx-field{
  display:grid;
  gap:6px;
}
.pbx-field span{
  font-size:13px;
  color:#475569;
}
.pbx-field input,
.pbx-field select,
.pbx-field textarea{
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:9px 11px;
  font-size:14px;
  font-family:inherit;
}
.pbx-addon-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.pbx-recap{
  margin-top:12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:10px 12px;
  background:#f8fafc;
}
.pbx-recap h4{
  margin:0 0 8px;
  font-size:14px;
}
.pbx-recap ul{
  margin:0;
  padding-left:16px;
  display:grid;
  gap:5px;
  font-size:13px;
}
.pbx-notes{
  margin-top:8px !important;
  color:#6b7280;
}
.pbx-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.pbx-btn{
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:9px 14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.pbx-actions .pbx-btn{
  min-width:130px;
}
.pbx-btn-ghost{
  background:#fff;
  color:#111827;
}
.pbx-btn-primary{
  background:#be1e2d;
  color:#fff;
  border-color:#be1e2d;
}
.pbx-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.pbx-status{
  min-height:18px;
  margin:10px 0 0;
  font-size:13px;
  color:#7f1d1d;
}
.pbx-processing{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10, 10, 12, .28);
  backdrop-filter:blur(2px);
  z-index:18;
  padding:18px;
  pointer-events:auto;
}
.pbx-processing.is-active{
  display:flex;
}
.pbx-processing-float{
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:min(92%, 460px);
  border:1px solid #f0c8cd;
  border-radius:999px;
  background:#fff3f5;
  color:#7f1d1d;
  padding:10px 16px;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  box-shadow:0 14px 28px rgba(13, 16, 23, .24);
}
.pbx-spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(190, 30, 45, .3);
  border-top-color:#be1e2d;
  border-radius:999px;
  animation:pbx-spin .8s linear infinite;
}
@keyframes pbx-spin{
  to{transform:rotate(360deg);}
}
.pbx-success{
  position:absolute;
  inset:0;
  background:rgba(8, 10, 14, .58);
  display:none;
  place-items:center;
  padding:16px;
}
.pbx-success.is-open{
  display:grid;
}
.pbx-success-card{
  width:min(420px, 100%);
  border-radius:14px;
  border:1px solid #e6d7da;
  background:#fff;
  padding:18px;
  box-shadow:0 16px 34px rgba(15, 23, 42, .25);
}
.pbx-success-card h3{
  margin:0 0 8px;
  font-size:24px;
}
.pbx-success-card p{
  margin:0 0 8px;
}
.pbx-success-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}
.site-chat{
  position:fixed;
  right:20px;
  bottom:18px;
  z-index:99999;
  width:auto;
  display:block;
  font-family:"Inter", "Segoe UI", Arial, sans-serif;
}
.site-chat-toggle{
  position:relative;
  margin-left:auto;
  width:60px;
  height:60px;
  border-radius:999px;
  border:1px solid #931b24;
  background:linear-gradient(135deg, #8d141f, #c21f2d);
  color:#fff;
  box-shadow:0 14px 28px rgba(132,16,28,.34);
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.site-chat-toggle::before,
.site-chat-toggle::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(194,31,45,.48);
  opacity:0;
  pointer-events:none;
}
.site-chat-toggle::before{
  animation:site-chat-pulse 2.4s ease-out infinite;
}
.site-chat-toggle::after{
  animation:site-chat-pulse 2.4s ease-out infinite .9s;
}
.site-chat-toggle[aria-expanded="true"]::before,
.site-chat-toggle[aria-expanded="true"]::after{
  animation:none;
  opacity:0;
}
.site-chat-toggle-icon{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
  filter:brightness(0) invert(1);
}
.site-chat-toggle-fallback{
  display:none;
  font-size:15px;
  font-weight:800;
  letter-spacing:.03em;
}
.site-chat-toggle.no-icon .site-chat-toggle-fallback{
  display:block;
}
@keyframes site-chat-pulse{
  0%{
    transform:scale(.88);
    opacity:.75;
  }
  70%{
    transform:scale(1.2);
    opacity:0;
  }
  100%{
    transform:scale(1.2);
    opacity:0;
  }
}
.site-chat-panel{
  position:absolute;
  right:0;
  bottom:78px;
  width:min(370px, calc(100vw - 32px));
  background:#fff;
  border:1px solid #d63b4c;
  border-radius:18px;
  box-shadow:0 20px 38px rgba(72,10,17,.26);
  display:none;
  overflow:hidden;
  transform-origin:100% 100%;
  max-height:calc(100vh - 120px);
}
.site-chat-panel.is-open{
  display:flex;
  flex-direction:column;
}
.site-chat-head{
  padding:13px 14px;
  background:#111;
  color:#fff;
  border-bottom:2px solid #c21f2d;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.site-chat-head-main{
  min-width:0;
}
.site-chat-title{
  margin:0;
  font-size:15px;
  letter-spacing:.02em;
  font-weight:700;
}
.site-chat-sub{
  margin:4px 0 0;
  font-size:11px;
  opacity:.86;
  color:#f2f2f2;
}
.site-chat-close{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:10px;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}
.site-chat-close:hover{
  background:rgba(255,255,255,.16);
}
.site-chat-log{
  max-height:42vh;
  overflow:auto;
  padding:12px;
  display:grid;
  gap:10px;
  background:linear-gradient(180deg, #fff8f9 0%, #ffeef0 100%);
}
.site-chat-msg{
  max-width:90%;
  padding:10px 11px;
  border-radius:10px;
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
}
.site-chat-msg.user{
  margin-left:auto;
  background:#b71c2a;
  color:#fff;
  border:1px solid #8f1420;
}
.site-chat-msg.bot{
  background:#fff;
  border:1px solid #e7b0b7;
  color:#2b0c10;
}
.site-chat-msg.system{
  max-width:100%;
  background:#ffe3e6;
  color:#7f1a24;
  border:1px solid #f3b4bc;
}
.site-chat-estimate{
  max-width:90%;
  border:1px solid #efbcc2;
  background:#fff;
  border-radius:10px;
  padding:9px 10px;
  box-shadow:0 8px 14px rgba(104, 20, 30, .08);
}
.site-chat-estimate-title{
  margin:0 0 4px;
  font-size:12px;
  font-weight:800;
  color:#7f1a24;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.site-chat-estimate-summary{
  margin:0 0 5px;
  font-size:11px;
  color:#5f1821;
}
.site-chat-estimate-total{
  margin:0 0 6px;
  font-size:13px;
  font-weight:700;
  color:#ab1422;
}
.site-chat-estimate-list{
  margin:0;
  padding-left:16px;
  display:grid;
  gap:3px;
  font-size:11px;
  color:#2b0c10;
}
.site-chat-estimate-actions{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
}
.site-chat-estimate-btn{
  border:1px solid #be1e2d;
  background:linear-gradient(135deg, #be1e2d, #9f1424);
  color:#fff;
  border-radius:8px;
  padding:7px 10px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  line-height:1.2;
}
.site-chat-estimate-btn:hover{
  background:linear-gradient(135deg, #d82737, #b21628);
}
.site-chat-estimate-link{
  border:0;
  background:transparent;
  color:#8f1420;
  text-decoration:underline;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:6px 0;
}
.site-chat-estimate-link:hover{
  color:#be1e2d;
}
.site-chat-msg.thinking{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff7f8;
  border:1px dashed #e2a0a8;
  color:#5f1821;
}
.site-chat-thinking-label{
  font-size:12px;
  letter-spacing:.01em;
}
.site-chat-thinking-dots{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.site-chat-thinking-dots span{
  width:6px;
  height:6px;
  border-radius:999px;
  background:#be1e2d;
  animation:site-chat-dot-pulse 1.2s infinite ease-in-out;
}
.site-chat-thinking-dots span:nth-child(2){animation-delay:.18s}
.site-chat-thinking-dots span:nth-child(3){animation-delay:.36s}
@keyframes site-chat-dot-pulse{
  0%, 80%, 100%{
    opacity:.32;
    transform:translateY(0) scale(.86);
  }
  40%{
    opacity:1;
    transform:translateY(-1px) scale(1);
  }
}
.site-chat-form{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid #efc3c8;
  background:#fff;
}
.site-chat-input{
  flex:1;
  min-width:0;
  border:1px solid #dc8f99;
  border-radius:10px;
  padding:10px 11px;
  font-size:13px;
  color:#2b0c10;
  background:#fff;
}
.site-chat-input:focus{
  outline:none;
  border-color:#be1e2d;
  box-shadow:0 0 0 3px rgba(190,30,45,.16);
}
.site-chat-send{
  border:0;
  border-radius:10px;
  background:#be1e2d;
  color:#fff;
  padding:10px 13px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.site-chat-send:hover{
  background:#a11824;
}
.site-chat-send:disabled{
  opacity:.6;
  cursor:not-allowed;
}
@media (max-width: 768px){
  .plan-float-cta{
    left:12px;
    bottom:12px;
    padding:10px 14px;
    font-size:13px;
  }
  .panel-title{font-size:26px}
  .panel-shell{padding:20px 14px 30px}
  .panel-grid-kpi-compact{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .site-chat{right:12px;bottom:12px}
  .site-chat-toggle{width:56px;height:56px;font-size:15px}
  .site-chat-toggle-icon{width:29px;height:29px}
  .site-chat-panel{
    right:0;
    bottom:68px;
    width:min(360px, calc(100vw - 24px));
    max-height:calc(100vh - 92px);
    border-radius:16px;
  }
  .site-chat-log{max-height:50vh}
  .pbx-card{
    max-height:calc(100vh - 32px);
  }
  .pbx-grid,
  .pbx-addon-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 480px){
  .plan-float-cta{
    left:10px;
    bottom:10px;
    max-width:calc(100vw - 84px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .site-chat{
    right:10px;
    bottom:10px;
  }
  .site-chat-panel{
    width:calc(100vw - 20px);
    right:0;
    bottom:66px;
    border-radius:12px;
    max-height:calc(100vh - 84px);
  }
  .site-chat-head{
    padding:12px;
  }
  .site-chat-form{
    padding:10px;
  }
}

/* Sidebar Panel Redesign */
.panel-page{
  background:#eef2f8;
}
.panel-app{
  --panel-sidebar-width:270px;
  --panel-shell-gutter:22px;
  --panel-topbar-fixed-top:0px;
  --panel-topbar-fixed-height:104px;
  min-height:100vh;
  display:block;
}
.panel-sidebar{
  background:linear-gradient(180deg, #111827 0%, #1f2937 100%);
  color:#e5e7eb;
  border-right:1px solid #2f3a4d;
  display:flex;
  flex-direction:column;
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  min-height:100vh;
  width:var(--panel-sidebar-width);
  overflow:hidden;
  z-index:120;
}
.panel-sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1190;
  border:0;
  padding:0;
  margin:0;
  background:rgba(8, 15, 28, .42);
}
.panel-brand{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 16px;
  background:linear-gradient(180deg, rgba(17,24,39,.98) 0%, rgba(24,35,52,.96) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #2b3648;
}
.panel-brand-meta{
  min-width:0;
}
.panel-brand-logo{
  width:44px;
  height:44px;
  border-radius:10px;
  background:linear-gradient(145deg, #d61f34 0%, #8f1320 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  color:#fff;
  font-weight:800;
  letter-spacing:0;
  font-size:24px;
  line-height:1;
  box-shadow:0 8px 18px rgba(8, 15, 32, .32), inset 0 1px 0 rgba(255,255,255,.18);
}
.panel-brand-logo-m{
  color:#ffffff;
  transform:translateY(0);
}
.panel-brand-logo-c{
  color:#fff6f7;
  transform:translateY(0);
}
.panel-brand-name{
  margin:0;
  color:#f3f4f6;
  font-weight:700;
}
.panel-brand-role{
  margin:2px 0 0;
  color:#9ca3af;
  font-size:12px;
}
.panel-collapse-toggle{
  margin-left:auto;
  width:30px;
  height:30px;
  border:1px solid #324258;
  border-radius:8px;
  background:#1a2433;
  color:#cfd9e6;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.panel-collapse-toggle svg{
  width:16px;
  height:16px;
}
.panel-nav{
  flex:1 1 auto;
  display:grid;
  align-content:start;
  gap:2px;
  padding:10px 8px;
  min-height:0;
  overflow-y:auto;
}
.panel-nav-group-title{
  margin:10px 10px 4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8ca0bf;
  line-height:1;
}
.panel-nav-group-title:first-child{
  margin-top:4px;
}
.panel-nav-link{
  color:#dbe2ea;
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  transition:background .2s ease,color .2s ease;
  display:flex;
  align-items:flex-start;
  gap:9px;
}
.panel-nav-icon{
  width:18px;
  height:18px;
  flex-shrink:0;
  display:inline-flex;
}
.panel-nav-icon svg{
  width:18px;
  height:18px;
}
.panel-nav-icon img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
}
.panel-nav-text{
  white-space:normal;
  line-height:1.25;
}
.panel-nav-link:hover{
  background:#253347;
  color:#fff;
}
.panel-nav-count{
  margin-left:auto;
  min-width:19px;
  height:19px;
  border-radius:999px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  line-height:1;
  background:#243a57;
  color:#d7e5fb;
  border:1px solid #345273;
}
.panel-nav-link.is-active{
  background:#c81e2f;
  color:#fff;
}
.panel-nav-link.is-active .panel-nav-count{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.panel-nav-link-group{
  display:grid;
  gap:3px;
  margin-top:2px;
}
.panel-nav-head{
  display:flex;
  align-items:center;
  gap:6px;
}
.panel-nav-head .panel-nav-link{
  flex:1;
  min-width:0;
}
.panel-subnav-toggle{
  width:28px;
  height:28px;
  border:1px solid #33445d;
  border-radius:9px;
  background:#172234;
  color:#b8cae5;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.panel-subnav-toggle svg{
  width:15px;
  height:15px;
  transition:transform .2s ease;
}
.panel-nav-link-group.is-active .panel-subnav-toggle{
  border-color:#ed9aa5;
  color:#ffd8dd;
}
.panel-subnav-toggle:hover{
  background:#243751;
  border-color:#4f6483;
  color:#fff;
}
.panel-nav-link-group.is-collapsed .panel-subnav-toggle svg{
  transform:rotate(-90deg);
}
.panel-subnav{
  display:grid;
  gap:3px;
  margin:0 0 4px 30px;
  padding:5px;
  border:1px solid #26374f;
  border-radius:11px;
  background:linear-gradient(180deg, rgba(19,31,48,.82) 0%, rgba(15,24,38,.82) 100%);
}
.panel-nav-link-group.is-collapsed .panel-subnav{
  display:none;
}
.panel-subnav-link{
  color:#9fb0c9;
  text-decoration:none;
  font-size:12px;
  padding:6px 8px;
  border-radius:9px;
  display:flex;
  align-items:flex-start;
  gap:7px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  border:1px solid transparent;
}
.panel-subnav-count{
  margin-left:auto;
  min-width:18px;
  height:18px;
  border-radius:999px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  line-height:1;
  background:#1f3148;
  color:#b9cbe6;
  border:1px solid #35506f;
}
.panel-subnav-icon{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#95a8c7;
}
.panel-subnav-icon svg{
  width:14px;
  height:14px;
}
.panel-subnav-link:hover{
  background:#233852;
  border-color:#2e4a6c;
  color:#fff;
}
.panel-subnav-link.is-active{
  background:linear-gradient(180deg, #253f60 0%, #203650 100%);
  border-color:#3a5b84;
  color:#fff;
}
.panel-subnav-link.is-active .panel-subnav-count,
.panel-subnav-link:hover .panel-subnav-count{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.3);
  color:#fff;
}
.panel-subnav-link.is-active .panel-subnav-icon,
.panel-subnav-link:hover .panel-subnav-icon{
  color:#fff;
}
.panel-subnav-link-project .panel-subnav-icon{
  width:16px;
  height:16px;
}
.panel-subnav-link-project .panel-subnav-icon svg{
  width:16px;
  height:16px;
}
.panel-sidebar-foot{
  margin-top:auto;
  padding:12px 10px 16px;
  border-top:1px solid #2b3648;
}
.panel-sidebar-logout-form{
  margin:0;
}
.panel-sidebar-logout{
  width:100%;
  min-height:44px;
  border-radius:12px;
  justify-content:center;
  gap:8px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 10px 20px rgba(111, 13, 29, .34);
}
.panel-sidebar-logout .panel-nav-icon{
  width:16px;
  height:16px;
}
.panel-sidebar-logout .panel-nav-icon svg{
  width:16px;
  height:16px;
}
.panel-app.sidebar-collapsed{
}
.panel-app.sidebar-collapsed .panel-brand-meta,
.panel-app.sidebar-collapsed .panel-nav-text,
.panel-app.sidebar-collapsed .panel-nav-group-title,
.panel-app.sidebar-collapsed .panel-sidebar-foot,
.panel-app.sidebar-collapsed .panel-subnav,
.panel-app.sidebar-collapsed .panel-subnav-toggle{
  display:none;
}
.panel-app.sidebar-collapsed .panel-brand{
  justify-content:center;
  align-items:center;
  gap:0;
  padding:14px 0;
}
.panel-app.sidebar-collapsed .panel-collapse-toggle{
  transform:rotate(180deg);
  margin:0 auto;
}
.panel-app.sidebar-collapsed .panel-brand-logo{
  display:none;
}
.panel-app.sidebar-collapsed .panel-nav-link{
  justify-content:center;
  padding:10px 8px;
}
.panel-main{
  min-width:0;
  margin-left:var(--panel-sidebar-width);
}
.panel-app.sidebar-collapsed .panel-sidebar{
  width:84px;
}
.panel-app.sidebar-collapsed .panel-main{
  margin-left:84px;
}
.panel-app.sidebar-collapsed{
  --panel-sidebar-width:84px;
}
.panel-shell{
  max-width:none;
  margin:0;
  --panel-topbar-sticky-top:12px;
  --panel-topbar-sticky-height:96px;
  padding:calc(var(--panel-topbar-fixed-height) + 28px) var(--panel-shell-gutter) 34px;
}
.panel-topbar{
  position:fixed;
  top:var(--panel-topbar-fixed-top);
  left:calc(var(--panel-sidebar-width) + var(--panel-shell-gutter));
  right:var(--panel-shell-gutter);
  z-index:60;
  background:rgba(255,255,255,.96);
  border:1px solid #d6deea;
  border-top:0;
  border-radius:0 0 16px 16px;
  padding:18px 16px 14px;
  box-shadow:0 12px 28px rgba(15,23,42,.09);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:padding .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
  margin-bottom:14px;
}
.panel-topbar.is-condensed{
  padding:14px 14px 10px;
  box-shadow:0 16px 34px rgba(15,23,42,.12);
  border-color:#c9d5e5;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.panel-topbar-left{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.panel-mobile-toggle{
  display:none;
  width:38px;
  height:38px;
  border:1px solid #ced7e5;
  border-radius:10px;
  background:#fff;
  padding:8px;
  cursor:pointer;
}
.panel-mobile-toggle span{
  display:block;
  height:2px;
  background:#111827;
  margin:4px 0;
}
.panel-title{
  font-size:28px;
}
.panel-sub{
  margin:2px 0 0;
  transition:opacity .18s ease, transform .18s ease, margin .18s ease;
}
.panel-topbar.is-condensed .panel-sub{
  opacity:.82;
  transform:translateY(-1px);
  margin-top:0;
}
.panel-card{
  border-radius:14px;
  min-width:0;
  overflow-wrap:anywhere;
}
.panel-grid{
  gap:14px;
}
.panel-grid-kpi{
  margin-bottom:14px;
}
.panel-kpi-value{
  font-size:26px;
}
.panel-form-row{
  align-items:center;
}
.panel-form-row > *{
  min-width:0;
}
.panel-form-row > .panel-input,
.panel-form-row > .panel-select,
.panel-form-row > label,
.panel-form-row > form{
  flex:1 1 220px;
}
.panel-form-row > .panel-textarea{
  flex:1 1 100%;
}
.panel-form-row > .panel-btn,
.panel-form-row > .panel-link,
.panel-form-row > button,
.panel-form-row > a{
  flex:0 0 auto;
}
.panel-sticky-filters{
  position:sticky;
  top:calc(var(--panel-topbar-sticky-top) + var(--panel-topbar-sticky-height) + 8px);
  z-index:20;
  background:#fff;
  border:1px solid #e2e8f2;
  border-radius:12px;
  padding:10px;
  margin-bottom:10px;
}
.panel-two-col{
  display:grid;
  grid-template-columns:minmax(0, 1.65fr) minmax(320px, .95fr);
  gap:14px;
}
.client-corporate-shell.panel-two-col{
  grid-template-columns:minmax(0, 1.95fr) minmax(190px, 0.55fr) !important;
}
.client-corporate-shell .panel-card-toggle{
  display:none !important;
}
.panel-main-col,
.panel-side-col{
  display:grid;
  gap:14px;
  min-width:0;
}
.panel-side-sticky{
  display:grid;
  gap:14px;
  position:sticky;
  top:calc(var(--panel-topbar-sticky-top) + var(--panel-topbar-sticky-height) + 8px);
}
.panel-page-client{
  background:
    radial-gradient(circle at top left, rgba(215,227,248,.48), transparent 28%),
    linear-gradient(180deg, #f4f8fd 0%, #eef3f9 100%);
}
.panel-page-client .panel-sidebar{
  background:
    linear-gradient(180deg, rgba(10,25,45,.98) 0%, rgba(15,34,58,.98) 55%, rgba(18,40,67,.98) 100%);
  border-right:1px solid rgba(199,213,234,.14);
  box-shadow:10px 0 28px rgba(8,19,34,.14);
}
.panel-page-client .panel-brand{
  border-bottom:1px solid rgba(197,214,237,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 100%);
}
.panel-page-client .panel-brand-name{
  color:#f7fbff;
}
.panel-page-client .panel-brand-role{
  color:#b7c8df;
}
.panel-page-client .panel-nav-group-title{
  color:#9ab0cd;
  letter-spacing:.11em;
}
.panel-page-client .panel-nav-link{
  border-color:rgba(176,198,225,.08);
  color:#edf4ff;
}
.panel-page-client .panel-nav-link:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  border-color:rgba(176,198,225,.16);
}
.panel-page-client .panel-nav-link.is-active{
  background:linear-gradient(135deg, #f34a61 0%, #c61e37 100%);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 12px 26px rgba(134,19,37,.34);
}
.panel-page-client .panel-nav-link.is-active .panel-nav-count{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.22);
}
.panel-page-client .panel-topbar{
  background:linear-gradient(135deg, rgba(255,255,255,.97) 0%, rgba(248,251,255,.95) 100%);
  border-color:#d9e3f2;
  border-radius:0 0 20px 20px;
  box-shadow:0 16px 34px rgba(30,50,76,.10);
}
.panel-page-client .panel-title{
  color:#0f2742;
}
.panel-page-client .panel-sub{
  color:#607796;
  max-width:720px;
}
.panel-page-client .panel-card{
  border-color:#dbe5f2;
  box-shadow:0 14px 34px rgba(26,45,72,.06);
}
.panel-page-client .client-portal-hero{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:
    radial-gradient(circle at top right, rgba(227,59,84,.10), transparent 28%),
    linear-gradient(135deg, #f8fbff 0%, #eef5ff 45%, #ffffff 100%);
}
.panel-page-client .client-portal-hero::after{
  content:"";
  position:absolute;
  inset:auto -40px -70px auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(194,214,242,.32) 0%, rgba(194,214,242,0) 68%);
  pointer-events:none;
}
.panel-page-client .client-portal-eyebrow{
  background:#ffffff;
  border-color:#d6e2f2;
  color:#24486f;
  box-shadow:0 8px 18px rgba(37,67,103,.07);
}
.panel-page-client .client-portal-kpi,
.panel-page-client .client-portal-detail,
.panel-page-client .client-portal-media-item,
.panel-page-client .client-portal-list-row{
  border-color:#dbe5f2;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.panel-page-client .client-portal-title,
.panel-page-client .client-portal-detail-value{
  color:#112743;
}
.panel-page-client .client-portal-meta,
.panel-page-client .client-portal-summary,
.panel-page-client .client-portal-kpi-note{
  color:#607796;
}
.panel-page-client .panel-btn:not(.panel-btn-primary):not(.panel-btn-danger){
  background:#fff;
  border-color:#d2deef;
  color:#1d4268;
  box-shadow:0 8px 18px rgba(30,54,85,.06);
}
.panel-page-client .panel-btn:not(.panel-btn-primary):not(.panel-btn-danger):hover{
  border-color:#b8cce6;
  background:#f8fbff;
}
.panel-page-client .panel-badge{
  background:#eef4ff;
  border-color:#cfdef1;
  color:#23476d;
}
.panel-page-client .panel-chat-item{
  border-color:#dbe5f2;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}
.panel-page-client .panel-chat-item.is-user{
  background:linear-gradient(180deg,#fff5f7 0%,#fff 100%);
  border-color:#f0c7cf;
}
.panel-page-client .panel-sidebar-logout{
  box-shadow:0 12px 22px rgba(134,19,37,.28);
}

@media (max-width: 1360px){
  .panel-shell{
    --panel-topbar-sticky-height:92px;
    --panel-shell-gutter:16px;
    --panel-topbar-fixed-height:100px;
    padding:calc(var(--panel-topbar-fixed-height) + 22px) var(--panel-shell-gutter) 28px;
  }
  .panel-two-col{
    grid-template-columns:1fr;
  }
  .client-corporate-shell.panel-two-col{
    grid-template-columns:1fr !important;
  }
  .panel-side-sticky{
    position:static;
  }
}

@media (max-width: 1200px){
  .panel-sticky-filters{
    position:static;
  }
  .panel-kanban-board{
    grid-template-columns:repeat(2, minmax(240px, 1fr));
  }
}
.panel-kv-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.panel-kv-item{
  border:1px solid #e3eaf5;
  border-radius:10px;
  padding:10px;
  background:#fafcff;
}
.panel-kv-label{
  display:block;
  color:#64748b;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.panel-kv-value{
  color:#0f2748;
  font-weight:600;
}
.panel-chat-list{
  display:grid;
  gap:10px;
}
.panel-chat-item{
  border-radius:10px;
  padding:10px 12px;
  border:1px solid #dbe4f2;
  background:#f8fbff;
}
.panel-chat-item.is-user{
  border-left:4px solid #0f294a;
}
.panel-chat-item.is-assistant{
  border-left:4px solid #c81e2f;
}
.panel-chat-role{
  margin:0 0 4px;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#5b6f8f;
  font-weight:700;
}
.panel-chat-text{
  margin:0;
  white-space:pre-wrap;
  line-height:1.48;
}
.panel-transcript-actions{
  margin-top:6px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.panel-btn-export{
  margin-left:auto;
}
.panel-modal-open{
  overflow:hidden;
}
.panel-modal{
  position:fixed;
  inset:0;
  z-index:1400;
}
.panel-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
}
.panel-modal-dialog{
  position:relative;
  width:min(920px, calc(100vw - 32px));
  max-height:86vh;
  margin:5vh auto 0;
  background:#fff;
  border:1px solid #d6dfec;
  border-radius:14px;
  box-shadow:0 22px 42px rgba(2,12,27,.28);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.panel-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid #e3eaf5;
  background:#f8fbff;
}
.panel-modal-title{
  margin:0;
  font-size:18px;
  color:#0f2748;
}
.panel-modal-close{
  width:34px;
  height:34px;
  border:1px solid #ccd8ea;
  border-radius:9px;
  background:#fff;
  color:#0f2748;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.panel-modal-body{
  padding:12px;
  overflow:auto;
}
.panel-chat-list-full{
  min-height:160px;
}
.panel-modal-foot{
  padding:12px 14px;
  border-top:1px solid #e3eaf5;
  display:flex;
  justify-content:flex-end;
  background:#fff;
}
.panel-table th{
  white-space:nowrap;
}
.panel-table td{
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}
.panel-table td .panel-badge,
.panel-table td .panel-btn,
.panel-table td .panel-link{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
}
.panel-table th:last-child,
.panel-table td:last-child{
  white-space:nowrap;
  min-width:88px;
}
.panel-kanban-board{
  display:grid;
  grid-template-columns:repeat(4, minmax(240px, 1fr));
  gap:12px;
}
.panel-kanban-col{
  border:1px solid #dbe5f2;
  border-radius:12px;
  background:#f8fbff;
  min-height:220px;
  display:flex;
  flex-direction:column;
}
.panel-kanban-col-head{
  padding:10px 12px;
  border-bottom:1px solid #dbe5f2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.panel-kanban-col-head h3{
  margin:0;
  font-size:16px;
  color:#0f2748;
}
.panel-kanban-list{
  padding:10px;
  display:grid;
  gap:10px;
  align-content:start;
}
.panel-kanban-card{
  border:1px solid #dbe5f2;
  border-radius:10px;
  background:#fff;
  padding:10px;
  box-shadow:0 4px 14px rgba(15, 23, 42, .06);
}
.panel-kanban-card.is-overdue{
  border-color:#efb3b9;
  background:#fff6f7;
}
.panel-kanban-title{
  margin:0 0 4px;
  font-size:15px;
  font-weight:700;
  color:#10223e;
}

.automation-page{
  --automation-ink:#0f2748;
  --automation-muted:#587091;
  --automation-line:#d8e4f2;
  --automation-soft:#eef5ff;
  --automation-soft-2:#f8fbff;
  --automation-accent:#9f1424;
  --automation-accent-2:#cd243a;
}
.automation-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(280px, .75fr);
  gap:18px;
  border:1px solid #ccdaeb;
  background:
    radial-gradient(120% 170% at 100% -5%, rgba(54, 116, 194, .17) 0%, rgba(54, 116, 194, 0) 55%),
    linear-gradient(145deg, #f8fbff 0%, #f2f7ff 100%);
}
.automation-eyebrow{
  margin:0 0 10px;
  color:#264f84;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.automation-title{
  margin:0;
  color:var(--automation-ink);
  font-size:28px;
  line-height:1.22;
  letter-spacing:-.02em;
}
.automation-sub{
  margin:12px 0 0;
  color:var(--automation-muted);
  max-width:60ch;
  line-height:1.55;
}
.automation-hero__stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  align-content:start;
}
.automation-stat{
  border:1px solid #cfdded;
  border-radius:12px;
  padding:12px;
  background:#fff;
  box-shadow:0 8px 16px rgba(16, 34, 62, .05);
}
.automation-stat__label{
  display:block;
  color:#5f7698;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:8px;
}
.automation-stat__value{
  color:var(--automation-ink);
  font-size:28px;
  line-height:1;
}
.automation-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(280px, .75fr);
  gap:14px;
  align-items:start;
}
.automation-main,
.automation-side{
  min-width:0;
}
.automation-main__actions{
  display:flex;
  justify-content:flex-end;
}
.automation-source-card{
  display:grid;
  gap:14px;
  border:1px solid var(--automation-line);
  background:linear-gradient(180deg, #ffffff 0%, var(--automation-soft-2) 100%);
}
.automation-source-card__head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.automation-source-card__title{
  margin:0;
  color:var(--automation-ink);
  font-size:20px;
  letter-spacing:-.01em;
}
.automation-source-card__desc{
  margin:7px 0 0;
  color:var(--automation-muted);
}
.automation-source-card__controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.automation-field-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.automation-label{
  display:block;
  margin-bottom:6px;
  color:#274b79;
  font-size:13px;
  font-weight:700;
}
.automation-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #c9d9ed;
  background:#fff;
}
.automation-toggle input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.automation-toggle__track{
  position:relative;
  width:36px;
  height:20px;
  border-radius:999px;
  background:#c0cedf;
  transition:background .18s ease;
}
.automation-toggle__track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .18s ease;
}
.automation-toggle__text{
  font-size:13px;
  color:#2f4f79;
  font-weight:600;
}
.automation-toggle input[type="checkbox"]:checked + .automation-toggle__track{
  background:linear-gradient(180deg, var(--automation-accent-2) 0%, var(--automation-accent) 100%);
}
.automation-toggle input[type="checkbox"]:checked + .automation-toggle__track::after{
  transform:translateX(16px);
}
.automation-ops-card{
  position:sticky;
  top:calc(var(--panel-topbar-sticky-top) + var(--panel-topbar-sticky-height) + 8px);
  display:grid;
  gap:12px;
  border:1px solid #ccdaeb;
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}
.automation-ops-card__title{
  margin:0;
  color:var(--automation-ink);
  font-size:21px;
  letter-spacing:-.01em;
}
.automation-ops-card__desc{
  margin:0;
  color:var(--automation-muted);
  line-height:1.55;
}
.automation-ops-card__actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.automation-ops-card__actions .panel-btn{
  width:100%;
}
.automation-feedback{
  margin:0;
  font-size:13px;
  border:1px solid #f0b7be;
  background:#fff4f5;
  color:#9b1325;
  border-radius:10px;
  padding:8px 10px;
}
.automation-output{
  border:1px solid #d2deee;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.automation-output__label{
  margin:0;
  padding:8px 10px;
  border-bottom:1px solid #e1eaf5;
  color:#45618a;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
  background:var(--automation-soft);
}
.automation-output pre{
  margin:0;
  max-height:280px;
  overflow:auto;
  background:#10273f;
  color:#dfebf8;
  padding:12px;
  font-size:12px;
  line-height:1.56;
}

@media (max-width: 1100px){
  .automation-hero,
  .automation-layout{
    grid-template-columns:1fr;
  }
  .automation-ops-card{
    position:static;
  }
}

@media (max-width: 640px){
  .automation-title{
    font-size:22px;
  }
  .automation-hero__stats{
    grid-template-columns:1fr;
  }
  .automation-field-grid,
  .automation-ops-card__actions{
    grid-template-columns:1fr;
  }
}

@media (max-width: 1100px){
  .panel-shell{
    --panel-topbar-sticky-top:10px;
    --panel-topbar-sticky-height:88px;
    --panel-shell-gutter:14px;
    --panel-topbar-fixed-height:96px;
    padding:18px 14px 30px;
  }
  .panel-app{
    display:block;
    overflow-x:clip;
  }
  body.panel-page.panel-mobile-nav-open{
    overflow:hidden;
  }
  .panel-sidebar{
    position:fixed;
    left:0;
    top:0;
    width:min(82vw, 320px);
    height:100dvh;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .24s ease;
    z-index:1200;
    overscroll-behavior:contain;
    box-shadow:0 18px 36px rgba(15, 23, 42, .34);
  }
  .panel-app.sidebar-open .panel-sidebar{
    transform:translateX(0);
  }
  .panel-app.sidebar-open .panel-sidebar-overlay{
    display:block;
  }
  .panel-main{
    margin-left:0;
  }
  .panel-topbar{
    position:sticky;
    top:10px;
    left:auto;
    right:auto;
    border-top:1px solid #d6deea;
    border-radius:16px;
    padding:14px 16px;
    z-index:90;
  }
  .panel-mobile-toggle{
    display:inline-block;
  }
  .panel-collapse-toggle{
    display:none;
  }
}

@media (max-width: 640px){
  .panel-shell{
    --panel-topbar-sticky-top:8px;
    --panel-topbar-sticky-height:118px;
    padding:14px 12px 24px;
  }
  .panel-topbar{
    padding:12px;
    gap:10px;
  }
  .panel-topbar-left{
    width:100%;
    align-items:flex-start;
  }
  .panel-actions{
    width:100%;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
  }
  .panel-actions > *{
    flex:0 0 auto;
  }
  .panel-role-badge{
    display:none;
  }
  .panel-notify{
    position:static;
  }
  .panel-notify-menu{
    position:fixed;
    left:12px;
    right:12px;
    top:calc(var(--panel-topbar-sticky-top) + var(--panel-topbar-sticky-height) + 10px);
    width:auto;
    max-width:none;
    max-height:min(68vh, 520px);
    border-radius:16px;
    z-index:140;
    box-shadow:0 18px 42px rgba(15,23,42,.2);
  }
  .panel-notify-list{
    max-height:calc(min(68vh, 520px) - 108px);
  }
  .panel-title{
    font-size:22px;
  }
  .panel-sub{
    font-size:13px;
  }
  .panel-card{
    padding:12px;
  }
  .panel-section-title{
    font-size:19px;
    margin-bottom:10px;
  }
  .panel-form-row{
    gap:8px;
    align-items:stretch;
  }
  .panel-form-row .panel-input,
  .panel-form-row .panel-select,
  .panel-form-row .panel-btn,
  .panel-form-row .panel-link,
  .panel-form-row > form,
  .panel-form-row > label{
    width:100%;
    flex:1 1 100%;
  }
  .panel-btn,
  .panel-link{
    min-height:42px;
  }
  .panel-pager-controls{
    gap:6px;
  }
  .panel-pager-btn,
  .panel-pager-page,
  .panel-pager-ellipsis{
    min-height:38px;
    min-width:38px;
    border-radius:10px;
    font-size:13px;
    padding:0 10px;
  }
  .panel-pager-summary{
    font-size:13px;
  }
  .panel-table-wrap{
    overflow:visible;
  }
  .panel-table{
    min-width:0;
    width:100%;
  }
  .panel-table thead{
    display:none;
  }
  .panel-table,
  .panel-table tbody,
  .panel-table tr,
  .panel-table td{
    display:block;
    width:100%;
  }
  .panel-table tbody{
    display:grid;
    gap:12px;
  }
  .panel-table tr{
    padding:12px;
    border:1px solid #dbe4f0;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 18px rgba(15,23,42,.06);
  }
  .panel-table td{
    padding:8px 0;
    border-bottom:1px solid #edf2f8;
  }
  .panel-table td:last-child{
    border-bottom:0;
    padding-bottom:0;
  }
  .panel-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:4px;
    color:#64748b;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .panel-table td[data-label="Action"],
  .panel-table td[data-label="Actions"]{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }
  .panel-table td[data-label="Action"]::before,
  .panel-table td[data-label="Actions"]::before{
    width:100%;
  }
  .panel-table td[data-label="Action"] > form,
  .panel-table td[data-label="Actions"] > form{
    width:100%;
  }
  .panel-table td[data-label="Action"] .panel-form-row,
  .panel-table td[data-label="Actions"] .panel-form-row{
    margin-bottom:0;
  }
  .panel-table td[data-label="Action"] .panel-btn,
  .panel-table td[data-label="Action"] .panel-link,
  .panel-table td[data-label="Actions"] .panel-btn,
  .panel-table td[data-label="Actions"] .panel-link{
    width:auto;
    min-width:0;
  }
  .panel-sticky-filters{
    position:static;
    padding:8px;
  }
  .panel-two-col{
    grid-template-columns:1fr;
  }
  .panel-side-sticky{
    position:static;
  }
  .panel-kv-grid{
    grid-template-columns:1fr;
  }
  .panel-grid-kpi,
  .panel-grid-kpi-compact{
    grid-template-columns:1fr;
  }
  .panel-modal-dialog{
    width:calc(100vw - 16px);
    max-height:92vh;
    margin:4vh auto 0;
  }
  .panel-modal-title{
    font-size:16px;
  }
  .panel-kanban-board{
    grid-template-columns:1fr;
  }
  .panel-chart-grid{
    grid-template-columns:1fr;
  }
  .panel-chart-split{
    grid-template-columns:1fr;
  }
  .panel-chart-row{
    grid-template-columns:64px 1fr 38px;
  }
  .panel-line-chart-labels{
    font-size:10px;
  }
  .panel-assistant{
    right:12px;
    left:12px;
    top:auto;
    bottom:84px;
    width:auto;
    max-width:none;
  }
  .panel-assistant-launch{
    right:12px;
    bottom:12px;
  }
}

.project-team-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  margin-top: 1rem;
}

.project-team-card,
.project-discussion-card {
  padding: 1rem;
  border: 1px solid #d8e1ec;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.project-assignee-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.project-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.72rem;
  border: 1px solid #d6dfeb;
  border-radius: 999px;
  background: #f4f8fd;
  color: #18314f;
  font-size: 0.82rem;
  font-weight: 600;
}

.project-assignee-role {
  color: #667b95;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.project-discussion-stream {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.project-comment-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #dce4ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(16, 35, 58, 0.05);
}

.project-comment-card.is-internal {
  border-color: rgba(194, 31, 45, 0.18);
  background: linear-gradient(180deg, #fff9fa 0%, #fff2f4 100%);
}

.project-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.project-comment-author {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.project-comment-avatar {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #193250;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.project-comment-card.is-internal .project-comment-avatar {
  background: linear-gradient(135deg, #b71d34 0%, #8f1625 100%);
}

.project-comment-name {
  margin: 0;
  color: #11263f;
  font-weight: 700;
  line-height: 1.25;
}

.project-comment-meta {
  margin: 0.15rem 0 0;
  color: #667b95;
  font-size: 0.78rem;
}

.project-comment-time {
  color: #667b95;
  font-size: 0.76rem;
  white-space: nowrap;
}

.project-comment-body {
  margin: 0;
  color: #17314f;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.project-discussion-form {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.project-discussion-form .panel-textarea {
  min-height: 110px;
}

@media (max-width: 980px) {
  .project-team-grid {
    grid-template-columns: 1fr;
  }
}

.auth-card-signup-pro{
  text-align:left;
  align-items:stretch;
  justify-content:flex-start;
}
.auth-signup-head{
  width:100%;
  max-width:760px;
  margin:0 auto 22px;
  text-align:left;
}
.auth-card-signup-pro .auth-kicker{
  justify-content:flex-start;
}
.auth-card-signup-pro .auth-title{
  margin-top:14px;
  margin-bottom:12px;
  text-align:left;
}
.auth-card-signup-pro .auth-subtitle{
  margin-bottom:0;
  max-width:620px;
  text-align:left;
}
.auth-register-form-pro{
  display:grid;
  gap:20px;
}
.auth-grid-two{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px 20px;
}
.auth-field{
  display:grid;
  gap:8px;
  min-width:0;
}
.auth-field-full{
  grid-column:1 / -1;
}
.auth-card-signup-pro .auth-label{
  text-align:left;
  font-size:13px;
  letter-spacing:.02em;
  color:#334155;
}
.auth-card-signup-pro .auth-input{
  text-align:left;
  height:58px;
  padding:0 18px;
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border:1px solid #d5deea;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(15,23,42,.04);
}
.auth-card-signup-pro .auth-input:focus{
  outline:none;
  border-color:#e53935;
  box-shadow:0 0 0 4px rgba(229,57,53,.12), inset 0 1px 0 rgba(255,255,255,.82);
}
.auth-register-submit{
  display:flex;
  justify-content:flex-start;
}
.auth-card-signup-pro .auth-btn{
  min-width:260px;
  height:58px;
  border-radius:16px;
  box-shadow:0 18px 30px rgba(194,31,45,.2);
}
.auth-register-foot{
  width:100%;
  max-width:760px;
  margin:22px auto 0;
  padding-top:18px;
  border-top:1px solid #eceff3;
  text-align:center;
}
@media (max-width: 900px){
  .auth-grid-two{
    grid-template-columns:1fr;
  }
  .auth-card-signup-pro .auth-btn{
    width:100%;
    min-width:0;
  }
  .auth-register-submit{
    justify-content:stretch;
  }
}
@media (max-width: 640px){
  .auth-card-signup-pro .auth-title{
    text-align:center;
  }
  .auth-signup-head,
.auth-card-signup-pro .auth-subtitle{
    text-align:center;
  }
  .auth-card-signup-pro .auth-kicker{
    justify-content:center;
  }
}
.auth-card-signin-demo{
    text-align:left;
}
.auth-demo-access{
    margin-top:24px;
    padding:22px;
    border-radius:24px;
    border:1px solid rgba(215,40,40,.14);
    background:linear-gradient(180deg, rgba(255,247,247,.98) 0%, rgba(255,255,255,.98) 100%);
    box-shadow:0 18px 42px rgba(15,23,42,.08);
}
.auth-demo-head{
    display:grid;
    gap:8px;
    margin-bottom:16px;
}
.auth-demo-kicker{
    margin:0;
    color:#d92d20;
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.auth-demo-title{
    margin:0;
    color:#111827;
    font-size:24px;
    line-height:1.1;
}
.auth-demo-copy{
    margin:0;
    color:#5b6475;
    font-size:14px;
    line-height:1.7;
}
.auth-demo-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}
.auth-demo-card{
    display:grid;
    gap:12px;
    padding:16px;
    border-radius:18px;
    border:1px solid rgba(17,24,39,.08);
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.auth-demo-role{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(217,45,32,.08);
    color:#b42318;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.auth-demo-line{
    display:grid;
    gap:4px;
}
.auth-demo-line span{
    color:#6b7280;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.auth-demo-line strong{
    color:#111827;
    font-size:14px;
    font-weight:800;
    word-break:break-word;
}
@media (max-width: 900px){
    .auth-demo-grid{
        grid-template-columns:1fr;
    }
}
.panel-lead-filter-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:14px;
}
.panel-lead-filter-fields{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
}
.panel-lead-filter-search,
.panel-lead-filter-status{
  width:100%;
  min-width:0;
}
.panel-lead-filter-action{
  flex:0 0 auto !important;
  white-space:nowrap;
}
.panel-lead-export-row{
  margin-top:8px;
}
.panel-lead-export-form{
  width:100%;
  flex-wrap:nowrap;
  align-items:center;
}
.panel-lead-export-date{
  flex:1 1 240px !important;
}
.panel-lead-export-btn{
  flex:0 0 auto !important;
  white-space:nowrap;
}
@media (max-width: 768px){
  .panel-lead-filter-row,
  .panel-lead-export-form{
    flex-wrap:wrap;
  }
  .panel-lead-filter-fields{
    flex:1 1 100%;
    width:100%;
    grid-template-columns:1fr;
  }
  .panel-lead-filter-action,
  .panel-lead-export-date,
  .panel-lead-export-btn{
    width:100%;
    flex:1 1 100% !important;
  }
}