:root{--bg:#0e1116;--bg-alt:#151a21;--surface:#1b222c;--border:#2a3340;--text:#e8ecf1;--text-muted:#9aa7b5;--accent:#e08a3c;--accent-hover:#f09b4d;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,0.35);--max-w:1140px;--header-bg:rgba(14,17,22,0.85)}html[data-theme="light"]{--bg:#f6f7f9;--bg-alt:#eceef2;--surface:#ffffff;--border:#d9dee6;--text:#1a222d;--text-muted:#5c6773;--accent:#c76f1a;--accent-hover:#a95c0c;--shadow:0 10px 30px rgba(20,30,45,0.12);--header-bg:rgba(246,247,249,0.85)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}ul{list-style:none}.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.25rem}.text-accent{color:var(--accent)}.muted{color:var(--text-muted)}.site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.nav{display:flex;align-items:center;justify-content:space-between;height:72px}.nav__logo{display:flex;align-items:center}.logo-img{height:36px;width:auto}.nav__menu{display:flex;align-items:center;gap:1.75rem;margin-left:auto}.theme-toggle{flex:none;width:40px;height:40px;margin-left:1.1rem;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);display:grid;place-items:center;cursor:pointer;transition:border-color 0.2s,color 0.2s}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}.theme-toggle .icon-sun{display:block}.theme-toggle .icon-moon{display:none}html[data-theme="light"] .theme-toggle .icon-sun{display:none}html[data-theme="light"] .theme-toggle .icon-moon{display:block}.nav__link{font-size:0.95rem;font-weight:500;color:var(--text-muted);transition:color 0.2s}.nav__link:hover,.nav__link--active{color:var(--text)}.nav__link--cta{background:var(--accent);color:#fff!important;padding:0.5rem 1.1rem;border-radius:999px;font-weight:600}.nav__link--cta:hover{background:var(--accent-hover)}.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto}.nav__toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:1px;transition:0.25s}.hero{padding:5rem 0 4rem;overflow:hidden}.hero__grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:3rem;align-items:center}.hero__eyebrow{font-size:0.85rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}.hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.15;font-weight:750;margin-bottom:1.25rem}.hero__sub{font-size:1.1rem;color:var(--text-muted);max-width:32rem;margin-bottom:2rem}.hero__actions{display:flex;flex-wrap:wrap;gap:0.85rem}.hero__visual{position:relative;height:320px}.hero__card{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:0.85rem 1.2rem;font-weight:600;font-size:0.95rem;box-shadow:var(--shadow)}.hero__card--1{top:20%;left:5%}.hero__card--2{top:48%;right:8%}.hero__card--3{bottom:12%;left:18%}.hero__orb{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent),transparent 70%);opacity:0.25;top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(20px)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.7rem 1.4rem;border-radius:999px;font-weight:600;font-size:0.95rem;border:none;cursor:pointer;transition:0.2s}.btn--primary{background:var(--accent);color:#fff}.btn--primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}.btn--ghost:hover{border-color:var(--text-muted)}.btn--lg{padding:0.9rem 1.8rem;font-size:1rem}.btn--block{width:100%}.stats{padding:2.5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-alt)}.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}.stats__item strong{display:block;font-size:2.2rem;font-weight:750;color:var(--accent)}.stats__item span{font-size:0.9rem;color:var(--text-muted)}.section{padding:5rem 0}.section--alt{background:var(--bg-alt)}.section__head{text-align:center;max-width:36rem;margin:0 auto 3rem}.section__head h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:0.6rem}.section__head p{color:var(--text-muted)}.cards{display:grid;gap:1.5rem}.cards--2{grid-template-columns:repeat(2,1fr)}.cards--3{grid-template-columns:repeat(3,1fr)}.cards--4{grid-template-columns:repeat(4,1fr)}.card,.feature,.step,.product-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem;transition:0.2s}.card:hover,.feature:hover{border-color:var(--accent);transform:translateY(-3px)}.card__icon{font-size:1.8rem;margin-bottom:0.9rem}.card h3,.feature h3,.step h3{font-size:1.15rem;margin-bottom:0.5rem}.card p,.feature p,.step p{color:var(--text-muted);font-size:0.95rem}.card__link{display:inline-block;margin-top:1rem;color:var(--accent);font-weight:600;font-size:0.9rem}.card--center{text-align:center}.avatar{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;margin:0 auto 1rem}.page-hero{padding:4rem 0 2.5rem;text-align:center}.page-hero h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:0.8rem}.page-hero p{color:var(--text-muted);max-width:36rem;margin:0 auto}.service-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-bottom:4rem}.service-row--reverse{direction:rtl}.service-row--reverse>*{direction:ltr}.checklist{margin-top:1.2rem}.checklist li{position:relative;padding-left:1.6rem;margin-bottom:0.5rem;color:var(--text-muted)}.checklist li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}.panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;font-size:2.5rem;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center}.panel--code{font-size:0.85rem;text-align:left;font-family:ui-monospace,monospace;line-height:1.5}.panel small{font-size:0.9rem;color:var(--text-muted);margin-top:0.4rem}.step{text-align:center}.step__num{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:50%;font-weight:700;margin-bottom:0.8rem}.cta{padding:5rem 0;text-align:center;background:linear-gradient(180deg,var(--bg-alt),var(--bg))}.cta__inner h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:0.7rem}.cta__inner p{color:var(--text-muted);margin-bottom:1.5rem}.site-footer{padding:4rem 0 1.5rem;border-top:1px solid var(--border);background:var(--bg-alt)}.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}.footer__tag{color:var(--text-muted);margin-top:0.8rem;font-size:0.95rem}.site-footer h4{font-size:0.9rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1rem;color:var(--text-muted)}.site-footer ul li{margin-bottom:0.45rem}.site-footer a{color:var(--text);font-size:0.95rem}.site-footer a:hover{color:var(--accent)}.footer__bottom{padding-top:1.5rem;border-top:1px solid var(--border);text-align:center;color:var(--text-muted);font-size:0.9rem}.contact-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:3rem}.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-field{margin-bottom:1.1rem}.form-field label{display:block;font-size:0.9rem;font-weight:500;margin-bottom:0.4rem}.form-field input,.form-field select,.form-field textarea{width:100%;padding:0.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:0.95rem;font-family:inherit}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--accent)}.form-status{margin-top:1rem;font-size:0.9rem}.contact-info__card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;margin-bottom:1rem}.contact-info__card h3{font-size:0.95rem;margin-bottom:0.4rem;color:var(--text-muted)}.contact-info__card a{color:var(--accent)}.maps-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}.map-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.map-card__head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--border)}.map-card__head h3{font-size:0.95rem}.map-card__head a{color:var(--accent);font-size:0.9rem}.map-card img,.map-card iframe{width:100%;height:240px;border:0;display:block}.catalog-cta{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:3rem 2rem}.catalog-cta__icon{font-size:2.5rem;margin-bottom:1rem}.catalog-cta__actions{justify-content:center;margin-top:1.5rem}.product-card{padding:0;overflow:hidden}.product-card img{width:100%;aspect-ratio:1;object-fit:cover}.product-card__body{padding:1.2rem}.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.split h2{margin-bottom:1rem}.split p{color:var(--text-muted);margin-bottom:1rem}.chat-widget{position:fixed;bottom:1.5rem;right:1.5rem;z-index:200}.chat-widget__toggle{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}.chat-widget__panel{position:absolute;bottom:70px;right:0;width:340px;max-height:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden}.chat-widget__panel[hidden]{display:none}.chat-widget__head{display:flex;align-items:center;gap:0.7rem;padding:0.9rem 1rem;border-bottom:1px solid var(--border);background:var(--bg-alt)}.chat-widget__avatar{display:flex;color:var(--accent)}.chat-widget__head-text{flex:1}.chat-widget__head-text strong{display:block;font-size:0.95rem}.chat-widget__head-text small{color:var(--text-muted);font-size:0.8rem}.chat-widget__close{background:none;border:none;color:var(--text-muted);font-size:1.4rem;cursor:pointer;line-height:1}.chat-widget__messages{flex:1;overflow-y:auto;padding:1rem;min-height:120px}.chat-widget__chips{display:flex;flex-wrap:wrap;gap:0.4rem;padding:0 1rem 0.6rem}.chat-widget__form{display:flex;border-top:1px solid var(--border);padding:0.6rem}.chat-widget__form input{flex:1;background:transparent;border:none;color:var(--text);padding:0.5rem;font-size:0.9rem;outline:none}.chat-widget__form button{background:var(--accent);border:none;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}@media (max-width:900px){.hero__grid,.service-row,.contact-grid,.maps-grid,.split,.footer__grid{grid-template-columns:1fr}.service-row--reverse{direction:ltr}.cards--4,.cards--3{grid-template-columns:repeat(2,1fr)}.stats__grid{grid-template-columns:repeat(2,1fr)}.hero__visual{display:none}}@media (max-width:640px){.nav__menu{position:fixed;inset:72px 0 auto 0;margin-left:0;background:var(--bg);flex-direction:column;padding:1.5rem;gap:1rem;border-bottom:1px solid var(--border);transform:translateY(-120%);opacity:0;pointer-events:none;transition:0.3s}.nav__menu.open{transform:translateY(0);opacity:1;pointer-events:auto}.nav__toggle{display:flex}.cards--2,.cards--3,.cards--4{grid-template-columns:1fr}.contact-form .form-row{grid-template-columns:1fr}.chat-widget__panel{width:min(360px,calc(100vw - 1.5rem))}}
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:0.75rem}.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:0 1.4rem}.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0;font-weight:600}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";flex:none;font-size:1.3rem;line-height:1;color:var(--accent);transition:transform 0.15s ease}.faq details[open] summary::after{transform:rotate(45deg)}.faq details p{padding:0 0 1.2rem;color:var(--text-muted);line-height:1.7}.faq details p a{color:var(--accent);font-weight:600}

/* Product modal */
.product-card{cursor:pointer;transition:transform .2s,box-shadow .2s}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.modal{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:1rem}
.modal.open{display:grid}
.modal__backdrop{position:absolute;inset:0;background:rgba(5,8,12,.7)}
.modal__card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;max-width:540px;width:100%;overflow:hidden;box-shadow:var(--shadow)}
.modal__img{width:100%;max-height:280px;object-fit:cover;display:block}
.modal__body{padding:1.25rem 1.4rem 1.5rem}
.modal__body h3{margin-bottom:.5rem;font-size:1.25rem}
.modal__desc{color:var(--text-muted);font-size:.95rem}
.modal__actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}
.modal__close{position:absolute;top:.6rem;right:.6rem;width:34px;height:34px;border-radius:50%;border:none;background:rgba(0,0,0,.45);color:#fff;font-size:1.25rem;cursor:pointer;line-height:1;z-index:1}

/* Catalog modal: category chip + related items */
.modal__card{max-height:90vh;overflow-y:auto}
.modal__cat{display:inline-block;margin-top:.4rem;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:.15rem .6rem}
.modal__more{margin-top:1.4rem;border-top:1px solid var(--border);padding-top:1rem}
.modal__more h4{font-size:.95rem;margin-bottom:.7rem;color:var(--text-muted)}
.modal__more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.more-item{background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:.45rem;cursor:pointer;color:var(--text);font-family:inherit;font-size:.8rem;display:flex;flex-direction:column;gap:.35rem;transition:.15s;text-align:left}
.more-item:hover{border-color:var(--accent);transform:translateY(-2px)}
.more-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
.more-item span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
@media (max-width:520px){.modal__more-grid{grid-template-columns:repeat(2,1fr)}}

/* Hamburger earlier: the language selector makes the full inline nav overflow up to ~840px */
@media (max-width:840px){.nav__menu{position:fixed;inset:72px 0 auto 0;margin-left:0;background:var(--bg);flex-direction:column;padding:1.5rem;gap:1rem;border-bottom:1px solid var(--border);transform:translateY(-120%);opacity:0;pointer-events:none;transition:0.3s}.nav__menu.open{transform:translateY(0);opacity:1;pointer-events:auto}.nav__toggle{display:flex}.lang-select{margin-left:.6rem}}

/* Chat voice notes: mic button + recording/review bar */
.chat-widget__mic{align-self:flex-end;flex:none;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-right:.35rem;transition:border-color .2s,color .2s}
.chat-widget__mic:hover{border-color:var(--accent);color:var(--accent)}
.chat-widget__mic:disabled{opacity:.4;cursor:not-allowed}
.chat-widget__voice{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.55rem .8rem;border-top:1px solid var(--border);background:var(--bg-alt);font-size:.82rem;color:var(--text-muted)}
.chat-widget__voice[hidden]{display:none}
.voice-dot{width:10px;height:10px;border-radius:50%;background:#e5484d;flex:none;animation:voice-pulse 1s ease-in-out infinite}
@keyframes voice-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.voice-time{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.voice-transcript{flex:1 1 100%;max-height:3.6rem;overflow-y:auto;color:var(--text);font-style:italic}
.voice-audio{flex:1 1 100%;max-width:100%;height:32px}
.voice-btn{padding:.3rem .85rem;font-size:.8rem}
.voice-busy{font-weight:600}
.voice-error{color:#ff8a8a;flex:1}

/* ===== Chat transcript bubbles + quick-reply chips ===== */
.chat-widget__messages{display:flex;flex-direction:column}
.chat-msg{width:fit-content;max-width:88%;padding:.55rem .8rem;border-radius:12px;font-size:.88rem;line-height:1.55;margin-bottom:.55rem;overflow-wrap:break-word}
.chat-msg--bot{background:var(--bg-alt);border:1px solid var(--border);border-bottom-left-radius:4px}
.chat-msg--bot a{color:var(--accent);font-weight:600}
.chat-msg--user{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg--typing{display:inline-flex;align-items:center;gap:5px;padding:.7rem .9rem}
.chat-msg--typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:chat-typing 1.1s infinite}
.chat-msg--typing span:nth-child(2){animation-delay:.18s}
.chat-msg--typing span:nth-child(3){animation-delay:.36s}
@keyframes chat-typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.chat-msg--typing span{animation:none}}
.chat-widget__chips button{background:transparent;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:.4rem .75rem;font-size:.78rem;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.chat-widget__chips button:hover{background:var(--accent);color:#fff}

/* ===== Notched phones: fixed elements respect safe areas (with viewport-fit=cover) ===== */
body{-webkit-tap-highlight-color:rgba(224,138,60,0.18)}
.container{padding-left:max(1.25rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px))}
.site-header{padding-top:env(safe-area-inset-top,0px)}
.chat-widget{bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));right:calc(1.5rem + env(safe-area-inset-right,0px))}
.chat-widget__panel{max-height:min(380px,calc(100vh - 7rem));max-height:min(380px,calc(100dvh - 7rem))}

/* ===== Phones and small tablets ===== */
@media (max-width:760px){
  /* 16px field text stops Safari's auto-zoom when focusing inputs */
  .form-field input,.form-field select,.form-field textarea{font-size:16px}
  .chat-widget__form input{font-size:16px}
}
@media (max-width:640px){
  .hero{padding:3.5rem 0 3rem}
  .section,.cta{padding:3.25rem 0}
  .page-hero{padding:3rem 0 2rem}
  .site-footer{padding:3rem 0 1.25rem}
  .footer__grid,.footer__bottom{overflow-wrap:anywhere}
  .service-row{gap:2rem;margin-bottom:2.75rem}
  .split{gap:2rem}
  .nav__menu{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}
  .nav__menu .nav__link{display:block;padding:.6rem 0;font-size:1.05rem}
  .nav__menu .nav__link--cta{display:inline-block;padding:.6rem 1.2rem;margin-top:.25rem}
  .modal{padding:.75rem;place-items:end center}
  .modal__card{max-width:100%;border-radius:18px;max-height:calc(100vh - 1.5rem);max-height:calc(100dvh - 1.5rem)}
  .modal__img{max-height:210px}
  .modal__close{width:40px;height:40px}
  .chat-widget__form .chat-widget__mic{width:40px;height:40px}
  .chat-widget__mic svg{width:20px;height:20px}
  .chat-widget__chips button{min-height:34px}
  .chat-widget__panel{position:fixed;left:auto;right:calc(.75rem + env(safe-area-inset-right,0px));bottom:calc(5.25rem + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 1.5rem));max-height:min(56vh,360px);max-height:min(56dvh,360px)}
}
@media (max-width:430px){
  .hero h1{font-size:1.85rem}
  .hero__sub{font-size:1rem}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
  .card,.feature,.step,.product-card__body{padding-left:1.25rem;padding-right:1.25rem}
  .catalog-cta{padding:2.25rem 1.25rem}
  .stats__item strong{font-size:1.9rem}
  .map-card img,.map-card iframe{height:210px}
}
@media (max-width:360px){
  .container{padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}
  .hero h1{font-size:1.65rem}
}
/* Phones in short landscape keep panels and menus inside the visible height */
@media (orientation:landscape) and (max-height:520px){
  .hero{padding:2.5rem 0 2.25rem}
  .section,.cta{padding:2.75rem 0}
  .modal__img{max-height:34vh}
  .nav__menu{max-height:calc(100vh - 4.5rem);max-height:calc(100dvh - 4.5rem);overflow-y:auto}
}

/* Robot assistant button: dangling float, spinning ring, hover glow */
.chat-widget__toggle{position:relative;animation:robot-bob 3.2s ease-in-out infinite;transition:transform .25s,box-shadow .25s,background .25s}
.chat-widget__toggle::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px dashed var(--accent);opacity:.4;animation:robot-spin 9s linear infinite;pointer-events:none;transition:opacity .25s}
.chat-widget__toggle:hover,.chat-widget__toggle:focus-visible{background:var(--accent-hover);transform:scale(1.08);box-shadow:0 12px 30px rgba(224,138,60,.38)}
.chat-widget__toggle:hover::before,.chat-widget__toggle:focus-visible::before{opacity:.9}
@keyframes robot-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes robot-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.chat-widget__toggle,.chat-widget__toggle::before{animation:none}}

/* ---- Nav brand wordmark ("BrownHub Studio") ---- */
.site-header .nav__logo{display:inline-flex!important;align-items:center!important;gap:10px!important;white-space:nowrap!important;visibility:visible!important}
.site-header .brand-name{display:inline-block!important;visibility:visible!important;color:var(--text)!important;font-size:1.35rem!important;font-weight:800!important;line-height:1!important;letter-spacing:.02em!important;white-space:nowrap!important}
@media (max-width:900px){.site-header .brand-name{font-size:1.2rem!important}}
@media (max-width:700px){.site-header .brand-name{font-size:1.05rem!important}}
@media (max-width:430px){.site-header .nav__logo{gap:6px!important}.site-header .brand-name{font-size:.82rem!important}}
@media (max-width:380px){.site-header .brand-name{font-size:.72rem!important}.site-header .lang-select{max-width:5.9rem!important;font-size:.68rem!important;padding:.25rem 1.25rem .25rem .4rem!important;margin-left:.35rem!important}.site-header .theme-toggle{width:34px!important;height:34px!important;margin-left:.35rem!important}}
@media (max-width:340px){.site-header .brand-name{font-size:.62rem!important;letter-spacing:0!important}.site-header .lang-select{max-width:5.2rem!important}.site-header .nav__logo{gap:4px!important}}

/* ---- Voicemail usability: bigger tap targets + guidance hints ---- */
.chat-widget__mic{width:40px;height:40px}
.chat-widget__mic svg{width:22px;height:22px}
@media (max-width:640px){.chat-widget__form .chat-widget__mic,.chat-widget__mic{width:46px;height:46px}.chat-widget__mic svg{width:24px;height:24px}}
.voice-btn{min-height:42px;padding:.5rem 1.1rem;font-size:.88rem;font-weight:700}
.voice-audio{height:40px}
.voice-hint{flex:1 1 100%;font-size:.78rem;font-style:italic;color:var(--text-muted)}
.voice-hint--top{font-style:normal;font-weight:600;color:var(--text)}
.chat-widget__voice{gap:.55rem .6rem;padding:.7rem .8rem}
.voice-meter{display:inline-flex;align-items:flex-end;gap:2px;height:18px;flex:none;margin-left:.15rem}
.voice-meter i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform-origin:bottom;transform:scaleY(.15);transition:transform .08s linear}
.voice-dot--paused{background:#d97706;animation:none}
a.voice-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media (prefers-reduced-motion:reduce){.voice-meter i{transition:none}}

/* ---- Contact form success sign ---- */
.form-success{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);padding:1.8rem 1.2rem;margin-top:1.2rem}
.form-success__icon{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1.5rem;font-weight:800}
.form-success strong{font-size:1.1rem}
.form-success p{color:var(--text-muted)}
.form-success__actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.form-status-busy{color:var(--text-muted)}

/* ---- Voice dictation button in the contact form message field ---- */
.form-field--voice{position:relative}
.msg-mic{position:absolute;right:.65rem;bottom:.65rem;width:36px;height:36px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:background .2s,transform .2s}
.msg-mic:hover{background:var(--accent-hover);transform:scale(1.07)}
.msg-mic.listening{background:#e5484d;animation:voice-pulse 1s ease-in-out infinite}

.footer-social{display:flex;gap:.6rem;margin-top:1rem}
.footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);display:grid;place-items:center;transition:color .2s,border-color .2s,transform .2s}
.footer-social a:hover,.footer-social a:focus-visible{color:#fff;background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

/* ---- Enlarged chat box so record / pause / listen / send all fit ---- */
.chat-widget__panel{width:min(400px,calc(100vw - 1.5rem));max-height:min(480px,calc(100vh - 7rem));max-height:min(480px,calc(100dvh - 7rem))}
@media (max-width:640px){.chat-widget__panel{width:min(420px,calc(100vw - 1.5rem));max-height:min(72vh,480px);max-height:min(72dvh,480px)}}
.chat-widget__messages{min-height:120px}
.chat-widget__panel:has(.chat-widget__voice:not([hidden])) .chat-widget__chips{display:none}
.voice-audio{height:44px}

/* ---- Project details recorder (contact form) ---- */
.msg-voice{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem .6rem;margin-top:.6rem;padding:.7rem .8rem;font-size:.82rem;color:var(--text-muted);background:var(--bg-alt);border:1px solid var(--border);border-radius:12px}
.msg-voice[hidden]{display:none}
.msg-voice .voice-audio{flex:1 1 100%;width:100%;min-width:0}
.msg-voice .voice-btn{flex:0 0 auto}
.msg-voice .voice-hint{flex:1 1 100%}
.form-field--voice .msg-mic[hidden]{display:none}
.msg-wrap{position:relative;display:block}

/* ---- Shared in-page audio player (replaces native controls, which die on headerless clips) ---- */
.bh-player{display:flex;align-items:center;gap:.5rem;flex:1 1 100%;flex-wrap:wrap;min-width:0}
.bh-player__el{display:none}
.bh-player__btn{min-width:6.2rem}
.bh-player__btn svg{flex:0 0 auto}
.bh-player__track{flex:1 1 70px;min-width:56px;height:6px;border-radius:99px;background:var(--border);overflow:hidden}
.bh-player__track i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:var(--accent)}
.bh-player__time{font-size:.76rem;font-variant-numeric:tabular-nums;color:var(--text-muted)}
.bh-player--blocked .bh-player__time{color:#e5484d}
@media (max-width:640px){.bh-player__btn{min-width:5.4rem}}

/* ============================================================
   Fluid layout — fill the viewport on phones and widescreens
   (the old fixed 1140px column left ~390px of dead margin per
   side on a 1920 screen, and the padding ladder wasted height
   on small phones)
   ============================================================ */
:root{
  --gutter: clamp(1.05rem, 3.4vw, 4.5rem);
  --pad-block: clamp(3.25rem, 6vw, 6.5rem);
}
.container{
  max-width: 1320px;
  padding-left: max(var(--gutter), env(safe-area-inset-left,0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right,0px));
}
.section,.cta{ padding: var(--pad-block) 0 }
.hero{ padding: calc(var(--pad-block) * .78) 0 calc(var(--pad-block) * .62) }
.page-hero{ padding: calc(var(--pad-block) * .66) 0 calc(var(--pad-block) * .4) }
.stats{ padding: clamp(1.75rem, 3.4vw, 3.5rem) 0 }
.site-footer{ padding: calc(var(--pad-block) * .78) 0 1.5rem }
.cards{ gap: clamp(1.1rem, 1.6vw, 1.9rem) }

/* Phones and tablets reclaim the hero artwork as a short band */
@media (min-width:380px){
  /* the float keyframes drift up to 26px, so clip the band and keep anchors clear of its edges */
  .hero__visual{ display:block; height: clamp(170px, 46vw, 320px); overflow:hidden }
  .hero__grid{ gap: clamp(1.5rem, 5vw, 3rem) }
  .hero__card{ font-size:.82rem; padding:.5rem .85rem }
  .hero__orb{ width:150px; height:150px }
  .hero__card--1{ top:24%; left:12% }
  .hero__card--2{ top:46%; right:14% }
  .hero__card--3{ bottom:16%; left:26% }
}
/* Tablet band: the 4-up and 3-up card rows fill the width instead of stacking */
@media (min-width:481px) and (max-width:900px){
  .cards--2,.cards--3,.cards--4{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .footer__grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}

@media (min-width:901px){
  .hero{ display:flex; align-items:center; min-height: clamp(520px, 70vh, 820px) }
  .hero__grid{ gap: clamp(3rem, 4.5vw, 6.5rem) }
  .hero__visual{ height: clamp(320px, 30vw, 620px) }
  .hero__card{ font-size: clamp(.95rem, 1.05vw, 1.2rem); padding: clamp(.85rem, .9vw, 1.2rem) clamp(1.2rem, 1.3vw, 1.8rem) }
  .hero__orb{ width: clamp(220px, 24vw, 460px); height: clamp(220px, 24vw, 460px) }
  .card,.feature,.step,.product-card{ padding: clamp(1.6rem, 1.9vw, 2.4rem) }
  .card__icon{ font-size: clamp(1.8rem, 2.1vw, 2.5rem) }
  .service-row,.contact-grid,.split,.maps-grid{ gap: clamp(3rem, 4vw, 5.5rem) }
  .service-row{ margin-bottom: clamp(4rem, 5.5vw, 7rem) }
  .footer__grid{ gap: clamp(2rem, 3vw, 4.5rem) }
  .map-card img,.map-card iframe{ height: clamp(240px, 26vw, 440px) }
  .stats__item strong{ font-size: clamp(2.2rem, 2.9vw, 3.4rem) }
  .product-card img{ aspect-ratio: 5/4 }
  #message{ min-height: clamp(140px, 17vh, 210px) }
}
/* Wide desktops: type and measures grow with the column */
@media (min-width:1200px){
  .hero__sub{ max-width: 38rem }
  .section__head{ max-width: 44rem }
  .page-hero p{ max-width: 44rem }
  .faq{ max-width: 60rem }
  .faq details{ padding: 0 1.8rem }
  .faq details p{ max-width: 78ch }
  /* long prose columns keep a readable measure instead of stretching edge to edge */
  .split p,.service-row__text p,.contact-info__card p,.card p,.feature p{ max-width: 62ch }
}
@media (min-width:1400px){
  .hero h1{ font-size: clamp(3.4rem, 3.4vw, 4.6rem) }
  .hero__eyebrow{ font-size: clamp(.85rem, .8vw, 1rem) }
  .section__head h2,.cta__inner h2{ font-size: clamp(2.3rem, 2.5vw, 3rem) }
  .page-hero h1{ font-size: clamp(2.8rem, 3.1vw, 3.9rem) }
  .section__head{ margin-bottom: clamp(3rem, 3.4vw, 4.5rem) }
  /* only the product grid has enough items to fill a fourth column */
  .cards--3:has(.product-card){ grid-template-columns: repeat(4, minmax(0,1fr)) }
}

/* ===== Design-first additions: portfolio gallery, category filter, section footers ===== */
#why,#portfolio{scroll-margin-top:5.5rem}
.section__more{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:clamp(1.8rem,3vw,2.9rem)}
.filter{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:clamp(1.5rem,2.6vw,2.4rem)}
.filter__btn{font-family:inherit;font-size:.85rem;font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.55rem 1.15rem;cursor:pointer;transition:.18s}
.filter__btn:hover{color:var(--text);border-color:var(--accent)}
.filter__btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.filter__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(200px,25vw,320px),1fr));gap:clamp(.9rem,1.6vw,1.5rem)}
.shot{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.2s}
.shot:hover{border-color:var(--accent);transform:translateY(-3px)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.shot figcaption{padding:.9rem 1.05rem 1.1rem}
.shot h3{font-size:.98rem;line-height:1.35;margin:0 0 .25rem}
.shot figcaption span{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.shot[hidden]{display:none}
.service-shot{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
@media (max-width:520px){
  .shots{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .shot figcaption{padding:.7rem .8rem .85rem}
}
@media (prefers-reduced-motion:reduce){
  .shot,.filter__btn{transition:none}
  .shot:hover{transform:none}
}

/* Portfolio lightbox */
.shot{position:relative;cursor:pointer}
.shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shot__zoom{position:absolute;top:.55rem;right:.55rem;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(5,8,12,.66);color:#fff;opacity:0;transform:scale(.86);transition:opacity .18s,transform .18s;pointer-events:none}
.shot:hover .shot__zoom,.shot:focus-visible .shot__zoom{opacity:1;transform:scale(1)}
@media (hover:none){.shot__zoom{opacity:.9;transform:none}}
.modal--shot .modal__card{max-width:880px}
.modal--shot .modal__img{max-height:40vh;object-fit:contain;background:rgba(0,0,0,.28)}
.modal--shot .modal__body{padding:1.2rem 1.3rem 1.45rem}
@media (min-width:720px){
  .modal--shot .modal__card{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:stretch;max-height:min(88vh,760px)}
  .modal--shot .modal__img{max-height:none;height:100%;width:100%}
  .modal--shot .modal__body{overflow-y:auto}
}
@media (prefers-reduced-motion:reduce){
  .shot__zoom{transition:none}
}

/* Contact form honeypot: reachable by bots, invisible to people and screen readers */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none;opacity:0}

/* ---- Client accounts: nav entry, sign-up/login panel, request history ---- */
.nav__link--acct{padding:0;border:none;background:none;font-family:inherit;cursor:pointer;white-space:nowrap}
.nav__link--acct:hover,.nav__link--acct:focus-visible{color:var(--text)}
@media (max-width:840px){.nav__menu .nav__link--acct{display:block;width:auto;padding:.6rem 0;line-height:1.6;text-align:left}}
.modal--acct .modal__card{max-width:480px}
/* Anchored drop-down: the card leaves the grid and hangs under its nav item. */
.modal--acct.is-drop{place-items:start}
.modal--acct.is-drop .modal__backdrop{background:rgba(5,8,12,.35)}
.modal--acct.is-drop .modal__card{position:absolute;max-width:none;overflow-y:auto;border-radius:14px}
.acct-filter{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;padding:.55rem .7rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px}
.acct-filter label{font-size:.8rem;font-weight:600;color:var(--text-muted);white-space:nowrap}
.acct-filter select{flex:1;min-width:0;padding:.45rem .55rem;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--text);font-family:inherit;font-size:16px;cursor:pointer}
.acct-filter select:focus{outline:none;border-color:var(--accent)}
@media (max-width:840px){.acct-filter select{min-height:44px}}
.acct-lede{margin:.2rem 0 1.1rem;font-size:.9rem;line-height:1.5;color:var(--text-muted);max-width:46ch;overflow-wrap:anywhere}
.acct-tabs{display:flex;gap:.3rem;margin-bottom:1.1rem;padding:.25rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:999px}
.acct-tab{flex:1;padding:.5rem .5rem;border:none;border-radius:999px;background:none;color:var(--text-muted);font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:.2s}
.acct-tab.is-active{background:var(--accent);color:#fff}
.acct-field{display:block;margin-bottom:.9rem;font-size:.85rem;font-weight:600;color:var(--text-muted)}
.acct-field input{display:block;width:100%;margin-top:.35rem;padding:.7rem .9rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:inherit;font-size:16px}
.acct-field input:focus{outline:none;border-color:var(--accent)}
.acct-note{min-height:1.3rem;margin:.75rem 0 0;font-size:.85rem;line-height:1.4;color:var(--accent);overflow-wrap:anywhere}
/* Steps of the password reset hide fields and the tab switch, and both set their
   own display, so hiding them needs an author rule rather than the [hidden] default. */
.acct-field[hidden],.acct-link[hidden],.acct-tabs[hidden]{display:none}
.acct-link{display:block;width:100%;margin:-.3rem 0 .85rem;padding:.25rem 0;border:none;background:none;color:var(--accent);font-family:inherit;font-size:.85rem;font-weight:600;text-align:right;cursor:pointer}
.acct-link:hover{text-decoration:underline}
.acct-link:disabled{opacity:.55;cursor:default}
@media (max-width:840px){.acct-link{min-height:44px}}
/* The number line and the unverified reminder set their own display too, so they
   need the same author-side [hidden] rule the reset steps already proved. */
.acct-tel[hidden],.acct-verify[hidden]{display:none}
.acct-tel{display:block;margin:.1rem 0 .85rem;font-size:.95rem;font-weight:700;letter-spacing:.04em;text-align:center;color:var(--text);overflow-wrap:anywhere}
.acct-code{letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums}
.acct-verify{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:12px;font-size:.82rem;line-height:1.35;color:var(--text-muted)}
.acct-verify span{flex:1 1 10rem;overflow-wrap:anywhere}
.acct-user{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.9rem;font-size:.85rem;color:var(--text-muted)}
.acct-user span{overflow-wrap:anywhere}
.acct-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.acct-item{padding:.9rem 1rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px}
.acct-item__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.acct-item__svc{font-size:.95rem;font-weight:700;color:var(--text)}
.acct-item__date{display:block;margin-top:.15rem;font-size:.78rem;color:var(--text-muted)}
.acct-item__msg{margin:.5rem 0 0;font-size:.9rem;line-height:1.5;color:var(--text);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.acct-item__meta{margin:.4rem 0 0;font-size:.8rem;color:var(--text-muted);overflow-wrap:anywhere}
.acct-item__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
.acct-item__actions .btn{width:auto}
.btn--sm{padding:.45rem .9rem;font-size:.82rem}
.acct-empty{margin:0;padding:.6rem 0;font-size:.88rem;line-height:1.5;color:var(--text-muted);text-align:center;overflow-wrap:anywhere}
.acct-pill{flex:none;padding:.16rem .55rem;border:1px solid var(--border);border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.acct-pill--quoted,.acct-pill--in_production{border-color:rgba(224,138,60,.55);color:var(--accent)}
.acct-pill--delivered{border-color:rgba(60,160,105,.6);color:#3fae72}
.acct-pill--closed{opacity:.7}
[data-theme="light"] .acct-pill--delivered{color:#1f7a4d;border-color:rgba(31,122,77,.45)}
@media (max-width:840px){.acct-item__actions .btn{flex:1 1 auto}.acct-item__actions .btn,.acct-tab,#acct-logout{min-height:44px}}

/* ---- Liquid glass nav bar -------------------------------------------------
   A single frosted layer samples whatever scrolls underneath it; the lit top
   hairline, the inner bottom edge and the highlight that follows the pointer are
   what read as the thickness of the glass. */
:root{--glass-blur:26px;--glass-hair:rgba(255,255,255,.34);--glass-hair-soft:rgba(255,255,255,.26);
  --glass-sheen:rgba(255,255,255,.08);--glass-edge:rgba(255,255,255,.12);--glass-glow:rgba(255,255,255,.045);
  --glass-veil:rgba(5,8,12,0);--glass-veil-on:rgba(5,8,12,.32);--glass-drop:0 12px 26px -20px rgba(0,0,0,.75);
  --glass-ctl-bg:rgba(255,255,255,.08);--glass-ctl-hair:rgba(255,255,255,.26)}
html[data-theme="light"]{--glass-hair:rgba(255,255,255,.95);--glass-hair-soft:rgba(255,255,255,.75);
  --glass-sheen:rgba(255,255,255,.5);--glass-edge:rgba(26,34,45,.14);--glass-glow:rgba(255,255,255,.2);
  --glass-veil:rgba(255,255,255,0);--glass-veil-on:rgba(255,255,255,.5);--glass-drop:0 12px 26px -20px rgba(26,34,45,.35);
  --glass-ctl-bg:rgba(26,34,45,.05);--glass-ctl-hair:rgba(26,34,45,.18)}
.site-header{position:sticky;top:0;z-index:100;isolation:isolate;background:none;border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;--gx:50%;--gy:-60%}
.site-header.is-glass-scrolled{--glass-blur:34px;--glass-veil:var(--glass-veil-on)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;border-top:1px solid var(--glass-hair);
  background-color:var(--header-bg);background-image:linear-gradient(180deg,var(--glass-sheen),rgba(255,255,255,0) 46%),linear-gradient(var(--glass-veil),var(--glass-veil));
  box-shadow:inset 0 -1px 0 var(--glass-edge),0 1px 0 var(--border),var(--glass-drop);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.75) brightness(1.05);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.75) brightness(1.05)}
.site-header::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(9rem 5rem at var(--gx) var(--gy),var(--glass-glow),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,rgba(255,255,255,0) 58%,var(--glass-sheen))}
.site-header.is-glass-hot::after{opacity:1}
.site-header .nav{position:relative;z-index:1}
.site-header .nav__link--cta{border:1px solid var(--glass-hair-soft);
  background:linear-gradient(180deg,var(--glass-sheen),rgba(255,255,255,0) 58%),var(--accent);
  box-shadow:inset 0 1px 0 var(--glass-hair),0 6px 16px -9px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5)}
.site-header .nav__link--cta:hover{box-shadow:inset 0 1px 0 var(--glass-hair),0 0 0 3px rgba(224,138,60,.18),0 8px 20px -10px rgba(0,0,0,.6)}
.site-header .lang-select{background-color:var(--glass-ctl-bg);border-color:var(--glass-ctl-hair);
  box-shadow:inset 0 1px 0 var(--glass-hair);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.site-header .theme-toggle{background-color:var(--glass-ctl-bg);border-color:var(--glass-ctl-hair);
  box-shadow:inset 0 1px 0 var(--glass-hair),0 6px 16px -10px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:840px){.site-header .nav__menu{background:var(--header-bg);border-bottom:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--glass-hair),0 20px 34px -24px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7)}}
/* Without compositing the bar falls back to the flat opaque header it had before. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,html[data-theme="light"]{--glass-fill:var(--surface);--glass-fill-alt:var(--bg-alt)}
  .site-header::before{background:var(--bg);box-shadow:0 1px 0 var(--border)}
  .site-header::after{display:none}
  .site-header .nav__menu{background:var(--bg)}
}
@media (prefers-reduced-motion:reduce){.site-header::after,.site-header .nav__link--cta,.site-header .lang-select,.site-header .theme-toggle{transition:none}}

/* ---- Liquid glass on every shape ----
   The bar's pane at card scale: a translucent fill that samples what sits behind
   it, a lit top edge, and on the large panes a highlight that trails the pointer.
   Fields and small controls take the fill without the compositing blur, so text
   read at close range stays crisp. */
:root{--glass-fill:rgba(27,34,44,.62);--glass-fill-alt:rgba(21,26,33,.62);--glass-fill-hair:rgba(255,255,255,.16);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.1);--glass-glow-card:rgba(255,255,255,.028);
  --glass-sheen-grad:linear-gradient(180deg,var(--glass-sheen),rgba(255,255,255,0) 58%)}
html[data-theme="light"]{--glass-fill:rgba(255,255,255,.66);--glass-fill-alt:rgba(255,255,255,.56);--glass-fill-hair:rgba(26,34,45,.13);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.9);--glass-glow-card:rgba(255,255,255,.16)}
:is(.card,.feature,.step,.product-card,.hero__card,.panel,.contact-info__card,.map-card,.catalog-cta,.modal__card,.chat-widget__panel,.shot,.form-success,.btn--ghost,.filter__btn),.faq details,.chat-widget__chips button{
  background-color:var(--glass-fill);background-image:var(--glass-sheen-grad);border-color:var(--glass-fill-hair);
  box-shadow:var(--glass-inset);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
:is(.more-item,.chat-msg--bot,.acct-item,.acct-filter,.acct-tabs,.msg-voice,.chat-widget__mic),.footer-social a,.acct-field input,.acct-filter select,.form-field input,.form-field select,.form-field textarea{
  background-color:var(--glass-fill);border-color:var(--glass-fill-hair);box-shadow:var(--glass-inset)}
:is(.more-item,.chat-msg--bot,.acct-item,.acct-filter,.acct-tabs,.msg-voice){background-color:var(--glass-fill-alt)}
:is(.hero__card,.chat-widget__panel,.modal__card){box-shadow:var(--glass-inset),var(--shadow)}
:is(.btn--primary,.avatar,.step__num,.chat-widget__toggle,.msg-mic,.form-success__icon,.chat-msg--user,.modal__close,.shot__zoom),.chat-widget__form button{
  background-image:var(--glass-sheen-grad);box-shadow:inset 0 1px 0 var(--glass-hair),0 6px 16px -9px rgba(0,0,0,.5)}
:is(.filter__btn.is-active,.acct-tab.is-active){background-image:var(--glass-sheen-grad);box-shadow:inset 0 1px 0 var(--glass-hair)}
/* These states repaint with the `background` shorthand, which would drop the sheen. */
:is(.btn--primary:hover,.chat-widget__toggle:hover,.chat-widget__toggle:focus-visible,.msg-mic:hover,.footer-social a:hover,.footer-social a:focus-visible,.form-success__icon,.acct-tab.is-active,.filter__btn.is-active,.chat-widget__chips button:hover){background-image:var(--glass-sheen-grad)}
.form-success,.chat-widget__chips button{border-color:var(--accent)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--accent)}
:is(.card,.feature,.step,.product-card,.panel,.contact-info__card,.map-card,.catalog-cta,.modal__card,.shot,.form-success),.faq details{position:relative;isolation:isolate;--gx:50%;--gy:-60%}
/* The hero cards are already absolutely placed; they only need the highlight vars. */
.hero__card{isolation:isolate;--gx:50%;--gy:-60%}
:is(.card,.feature,.step,.product-card,.hero__card,.panel,.contact-info__card,.map-card,.catalog-cta,.modal__card,.shot,.form-success)::after,.faq details::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;border-radius:inherit;
  transition:opacity .45s ease;background:radial-gradient(9rem 6rem at var(--gx) var(--gy),var(--glass-glow-card),rgba(255,255,255,0) 70%)}
:is(.card,.feature,.step,.product-card,.hero__card,.panel,.contact-info__card,.map-card,.catalog-cta,.modal__card,.shot,.form-success):hover::after,.faq details:hover::after{opacity:1}
.modal__close{z-index:2}
/* A dialog sits on a dark scrim, so in the light theme its frost needs more white
   to read as glass rather than as grey. */
html[data-theme="light"] :is(.modal__card,.chat-widget__panel){--glass-fill:rgba(255,255,255,.88)}
@media (prefers-reduced-motion:reduce){:is(.card,.feature,.step,.product-card,.hero__card,.panel,.contact-info__card,.map-card,.catalog-cta,.modal__card,.shot,.form-success)::after,.faq details::after{transition:none}}

/* ---- The page behind the glass ----
   Frost only reads as frost when something moves behind it, so the page carries a
   slow colour field, and the wide bands become lit shelves of the same pane rather
   than flat blocks of grey. No compositing blur here: these layers span the whole
   viewport, where a blur would cost far more than it is worth. */
:root{--amb-1:rgba(224,138,60,.17);--amb-2:rgba(64,116,196,.13);--amb-3:rgba(224,138,60,.10);
  --glass-band:rgba(255,255,255,.05);--glass-chip:rgba(255,255,255,.07)}
html[data-theme="light"]{--amb-1:rgba(224,138,60,.14);--amb-2:rgba(64,116,196,.10);--amb-3:rgba(224,138,60,.08);
  --glass-band:rgba(26,34,45,.038);--glass-chip:rgba(26,34,45,.05)}
body::before{content:"";position:fixed;inset:-18% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(38rem 26rem at 14% 6%,var(--amb-1),transparent 70%),
    radial-gradient(34rem 24rem at 88% 24%,var(--amb-2),transparent 72%),
    radial-gradient(42rem 30rem at 50% 98%,var(--amb-3),transparent 70%);
  animation:amb-drift 38s ease-in-out infinite alternate}
@keyframes amb-drift{to{transform:translate3d(2.5%,-2%,0) scale(1.07)}}
.section--alt,.site-footer,.cta{background-color:var(--glass-band);background-image:var(--glass-sheen-grad)}
.site-footer{border-top-color:var(--glass-fill-hair)}
:is(.chat-widget__head,.chat-widget__voice){background-color:var(--glass-chip);border-color:var(--glass-fill-hair)}
/* Status pills keep their own coloured edge; they only gain the glass fill. */
.acct-pill{background-color:var(--glass-chip)}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* ---- Paid packages, sponsored slots, affiliate tools, ad slots ---- */
/* Every rule below sets its own display, so each needs the author-side [hidden]
   counterpart the rest of the panel already learned about. */
.pay-email[hidden],.pay-note[hidden],.store-tools[hidden],.store-ads[hidden],.card--pay[hidden],.pay-secure[hidden]{display:none}
.pay-email{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;margin-bottom:1.5rem}
.pay-email label{display:block;font-size:.85rem;font-weight:600;color:var(--text-muted)}
.pay-email input{margin-top:.35rem;min-width:min(20rem,100%);padding:.65rem .9rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:1rem;font-family:inherit}
.pay-email input:focus{outline:none;border-color:var(--accent)}
.card--pay{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.card--pay h3{margin-bottom:0}
.pay-term{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.pay-price{margin-top:.15rem}
.pay-price strong{font-size:1.5rem;font-weight:750;color:var(--text)}
.pay-methods{font-size:.8rem;color:var(--text-muted)}
.card--pay>.pay-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.pay-actions .btn{margin:0}
.pay-secure{margin-top:1.1rem;font-size:.8rem;color:var(--text-muted)}
.pay-note{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1.6rem;padding:.9rem 1.1rem;background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius)}
.pay-note__msg{flex:1 1 16rem;font-size:.92rem}
.pay-ref-label{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.pay-ref{font-family:ui-monospace,SFMono-Regular,monospace;font-size:.88rem;font-weight:600;overflow-wrap:anywhere}
.store-tools__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.5rem}
@media (max-width:900px){.store-tools__grid{grid-template-columns:1fr}}
.tool{display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-weight:600;transition:.2s}
.tool:hover{border-color:var(--accent);transform:translateY(-2px)}
.tool small{font-weight:400;font-size:.85rem;color:var(--text-muted)}
.store-ads{display:block;margin:2.5rem auto 0;max-width:var(--max-w)}
@media (max-width:640px){.pay-email input{width:100%}.card--pay .btn{width:100%}.card--pay>.pay-actions{flex-direction:column}}

/* Privacy policy page: a readable measure, not a full-width column of text. */
.legal{max-width:46rem}
.legal h2{font-size:1.2rem;margin:1.9rem 0 .45rem}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--text-muted);line-height:1.75}
.legal a{color:var(--accent);font-weight:600}