/* =========================================================
   PANORAMIKA — Architectural Hybrid Glass
   70% clean architectural / 20% glass / 10% motion.
   Visual-only layer over the stable v46 functionality.
   ========================================================= */
:root{
  --hg-bg:#F2F6F8;
  --hg-surface:#FFFFFF;
  --hg-surface-soft:#F7FAFB;
  --hg-text:#172B36;
  --hg-muted:#667B87;
  --hg-line:#D9E4EA;
  --hg-blue:#789CB3;
  --hg-blue-deep:#486C82;
  --hg-dark:#243640;
  --hg-glass:rgba(250,253,254,.73);
  --hg-glass-strong:rgba(255,255,255,.82);
  --hg-glass-line:rgba(255,255,255,.86);
  --hg-shadow:0 20px 58px rgba(32,58,73,.09);
  --hg-shadow-soft:0 12px 34px rgba(32,58,73,.065);
  --hg-x:50%;
  --hg-y:8%;
}

html{background:#edf3f6}
body{
  color:var(--hg-text);
  background:
    radial-gradient(ellipse at 9% 3%,rgba(155,196,220,.21),transparent 28%),
    radial-gradient(ellipse at 92% 18%,rgba(196,211,222,.20),transparent 25%),
    linear-gradient(180deg,#F9FBFC 0%,#EEF4F7 42%,#F8FAFB 100%)!important;
}

/* restrained ambient light only — the page remains architectural, not "all glass" */
body::before,body::after{
  content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(28px);opacity:.52
}
body::before{width:430px;height:430px;left:-220px;top:30%;background:radial-gradient(circle,rgba(113,177,211,.24),transparent 68%)}
body::after{width:520px;height:520px;right:-280px;top:62%;background:radial-gradient(circle,rgba(183,200,216,.20),transparent 70%)}

/* navigation = glass; content beneath stays sharp */
.topbar{background:linear-gradient(90deg,#253741,#314A57)!important;color:#D7E2E8!important}
.site-header{
  background:transparent!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding-top:9px
}
.site-header .header-inner{
  min-height:72px;padding:0 14px;border:1px solid var(--hg-glass-line);border-radius:22px;
  background:
    radial-gradient(180px 70px at var(--hg-x) var(--hg-y),rgba(255,255,255,.96),rgba(255,255,255,.18) 58%,transparent 76%),
    rgba(248,252,254,.72)!important;
  backdrop-filter:blur(26px) saturate(155%);-webkit-backdrop-filter:blur(26px) saturate(155%);
  box-shadow:0 12px 36px rgba(39,69,85,.09),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(112,151,174,.10)
}
.site-header.scrolled .header-inner{background:rgba(250,253,254,.86)!important;box-shadow:0 18px 48px rgba(39,69,85,.12),inset 0 1px 0 #fff}
.nav a{border-radius:999px!important;color:#4A6170!important}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.68)!important;color:#27495D!important;box-shadow:inset 0 1px 0 #fff,0 5px 15px rgba(44,74,91,.055)}
.nav a::after{display:none!important}
.mobile-nav-btn{border-color:rgba(255,255,255,.90)!important;background:rgba(255,255,255,.65)!important;border-radius:999px!important;backdrop-filter:blur(18px)}
.mobile-menu{margin-top:8px!important;border:1px solid rgba(255,255,255,.88)!important;border-radius:20px!important;background:rgba(250,253,254,.90)!important;backdrop-filter:blur(24px)!important;box-shadow:var(--hg-shadow)!important;overflow:hidden}

/* controls: glass only where interaction benefits from it */
.btn{border-radius:999px!important;letter-spacing:-.015em}
.btn-primary{background:linear-gradient(135deg,#314E60,#63879D)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important;box-shadow:0 12px 30px rgba(45,75,93,.19),inset 0 1px 0 rgba(255,255,255,.26)!important}
.btn-secondary,.btn-line{
  color:#31566B!important;border-color:rgba(255,255,255,.90)!important;
  background:rgba(255,255,255,.66)!important;backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%);
  box-shadow:0 7px 18px rgba(45,75,92,.055),inset 0 1px 0 rgba(255,255,255,.98)!important
}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)!important}
  .btn-primary:hover{box-shadow:0 17px 38px rgba(45,75,93,.23),inset 0 1px 0 rgba(255,255,255,.30)!important}
  .btn-secondary:hover,.btn-line:hover{background:rgba(255,255,255,.84)!important}
}

/* HERO: mostly clean/mineral, glass used only as surface treatment */
.hero{padding:28px 0 46px!important;background:transparent!important}
.hero-grid{gap:18px!important}
.hero-copy{
  min-height:600px!important;color:var(--hg-text)!important;
  border:1px solid rgba(255,255,255,.95)!important;
  background:
    radial-gradient(240px 180px at var(--hg-x) var(--hg-y),rgba(255,255,255,.95),transparent 70%),
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(239,246,250,.72))!important;
  backdrop-filter:blur(20px) saturate(135%)!important;-webkit-backdrop-filter:blur(20px) saturate(135%)!important;
  box-shadow:0 30px 76px rgba(35,62,77,.10),inset 0 1px 0 #fff!important
}
.hero-copy h1{color:#172D39!important}
.hero-blue{background:linear-gradient(90deg,#31586F,#779CB3 70%,#9CB8C9)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.hero-copy .lead{color:#526A78!important}
.hero-copy .label,.hero-kpi span{color:#526F80!important;border-color:#DDE7EC!important;background:rgba(255,255,255,.68)!important;backdrop-filter:none!important}
.hero-photo-card{min-height:600px!important;border:1px solid rgba(255,255,255,.96)!important;background:#DCE8EE!important;box-shadow:0 30px 76px rgba(35,62,77,.11)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hero-photo-card>img{min-height:600px!important;filter:none!important;-webkit-filter:none!important;transform:none!important;backdrop-filter:none!important}
.hero-photo-card:hover>img{filter:none!important;transform:none!important}
.hero-floating-badge{background:rgba(250,253,254,.80)!important;color:#496879!important;border:1px solid rgba(255,255,255,.92)!important;backdrop-filter:blur(14px)!important}
.hero-floating-card{background:rgba(29,48,59,.72)!important;border:1px solid rgba(255,255,255,.16)!important;backdrop-filter:blur(18px) saturate(140%)!important;box-shadow:0 14px 34px rgba(21,40,52,.16)!important}

/* floating information strips use low-intensity glass */
.arch-ticker{width:min(var(--container),calc(100% - 40px));margin:0 auto!important;border:1px solid rgba(255,255,255,.90)!important;border-radius:999px!important;background:rgba(255,255,255,.58)!important;backdrop-filter:blur(18px) saturate(140%)!important;box-shadow:var(--hg-shadow-soft)!important;overflow:hidden}
.price-bar,.price-trust{
  border-color:rgba(255,255,255,.90)!important;
  background:
    radial-gradient(190px 90px at var(--hg-x) var(--hg-y),rgba(255,255,255,.90),transparent 74%),
    rgba(247,251,253,.64)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;-webkit-backdrop-filter:blur(20px) saturate(145%)!important;
  box-shadow:var(--hg-shadow-soft)!important
}
.price-bar-intro,.price-bar-item,.price-trust-item{background:rgba(255,255,255,.64)!important;border-color:rgba(255,255,255,.92)!important;box-shadow:inset 0 1px 0 #fff!important}

/* product area: MATTE, not glass. Product imagery stays the visual priority. */
.typical-solutions-wrap{padding:22px!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.reference-card,.catalog-card,.variant-thumb,.thumb-card,.product-media-card{
  background:rgba(255,255,255,.94)!important;border:1px solid #DCE6EB!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 13px 34px rgba(35,61,75,.065)!important
}
.reference-card::before,.reference-card::after,.catalog-card::before,.catalog-card::after,.product-media-card::before,.product-media-card::after{display:none!important}
.product-top,.catalog-shot,.product-media-main,.window-photo-visual{background:#E5EDF1!important;border-color:#E1E9ED!important;box-shadow:none!important}
.product-photo,.catalog-shot img,.product-media-main img,.window-photo-fill,.hero-photo-card>img,.scenario-image-wrap img,.thumb-card img{
  filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;opacity:1!important
}
.reference-card:hover .product-photo,.catalog-card:hover .product-photo,.catalog-shot:hover img,.product-media-card:hover .product-media-main img,.hero-photo-card:hover>img,.scenario-image-wrap:hover img,.thumb-card:hover img{
  filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;opacity:1!important
}
@media(hover:hover) and (pointer:fine){
  .reference-card,.catalog-card{transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,border-color .26s ease!important}
  .reference-card:hover,.catalog-card:hover{transform:translateY(-4px)!important;border-color:#C8D9E2!important;box-shadow:0 24px 54px rgba(35,61,75,.105)!important}
}
.badge,.premium-note-strip span,.shot-note,.detail-caption,.catalog-quick-chips button{background:#F7FAFB!important;border-color:#DFE8ED!important;color:#557080!important;backdrop-filter:none!important;box-shadow:none!important}

/* CALCULATOR: this is the main Liquid Glass moment */
.calc-panel,.calc-result-card,.scenario-shell,.live-controls,.construction-shell,.catalog-tools,.page-hero .card,.consult-studio{
  --hg-x:50%;--hg-y:8%;
  border:1px solid rgba(255,255,255,.94)!important;
  background:
    radial-gradient(220px 130px at var(--hg-x) var(--hg-y),rgba(255,255,255,.98),rgba(255,255,255,.18) 55%,transparent 76%),
    linear-gradient(145deg,rgba(255,255,255,.73),rgba(234,244,249,.49))!important;
  backdrop-filter:blur(28px) saturate(155%)!important;-webkit-backdrop-filter:blur(28px) saturate(155%)!important;
  box-shadow:0 24px 64px rgba(36,64,80,.10),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(116,155,178,.08)!important
}
.calc-preview{
  background:radial-gradient(circle at 66% 11%,rgba(255,255,255,.94),transparent 28%),linear-gradient(145deg,#E4EEF3,#F5F9FB)!important;
  border:1px solid rgba(255,255,255,.96)!important;box-shadow:inset 0 1px 0 #fff,0 18px 48px rgba(42,72,89,.08)!important
}
input,select,textarea,.calc-choice label,.calc-check,.sash-card,.quick-calc-preset,.profile-choice,.profile-option,.live-mode-btn,.construction-row{
  border-color:rgba(255,255,255,.94)!important;background:rgba(255,255,255,.70)!important;color:#294A5C!important;
  backdrop-filter:blur(12px) saturate(135%)!important;-webkit-backdrop-filter:blur(12px) saturate(135%)!important;
  box-shadow:inset 0 1px 0 #fff,0 6px 17px rgba(43,73,90,.045)!important
}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:#9BB7C8!important;box-shadow:0 0 0 4px rgba(111,151,175,.12),inset 0 1px 0 #fff!important}
.calc-view-toggle{padding:4px!important;border:1px solid rgba(255,255,255,.94)!important;border-radius:999px!important;background:rgba(255,255,255,.62)!important;backdrop-filter:blur(14px)!important}
.calc-view-toggle button{border-radius:999px!important}
.calc-view-toggle button.active{background:#fff!important;color:#31586F!important;box-shadow:0 6px 16px rgba(39,69,85,.07)!important}
.quick-calc-preset:hover,.live-mode-btn:hover,.construction-row:hover{background:rgba(255,255,255,.90)!important}

/* Technical / opening demos: dark matte stage + glass controls */
.live-stage,.construction-stage,.product-schematic-stage{background:radial-gradient(circle at 72% 14%,rgba(132,177,202,.16),transparent 28%),linear-gradient(145deg,#263A45,#365363)!important;border-color:rgba(255,255,255,.10)!important;box-shadow:0 28px 70px rgba(31,55,69,.15)!important;backdrop-filter:none!important}
.live-mode-btn.active,.construction-row.active{background:rgba(235,246,251,.92)!important;color:#31586D!important;border-color:#B9D0DD!important}

/* Secondary content = calm matte surfaces */
.card,.surface,.why-main,.detail-card,.simple-step,.info-card,.faq-item,.product-tech-shell,.product-buy-card{
  border-color:#DCE6EB!important;background:rgba(255,255,255,.92)!important;box-shadow:0 12px 34px rgba(37,63,77,.055)!important
}
/* restore glass for explicitly interactive primary surfaces after generic .surface */
.calc-panel,.calc-result-card,.live-controls,.construction-shell{
  border-color:rgba(255,255,255,.94)!important;
  background:
    radial-gradient(220px 130px at var(--hg-x) var(--hg-y),rgba(255,255,255,.98),rgba(255,255,255,.18) 55%,transparent 76%),
    linear-gradient(145deg,rgba(255,255,255,.73),rgba(234,244,249,.49))!important;
  backdrop-filter:blur(28px) saturate(155%)!important;-webkit-backdrop-filter:blur(28px) saturate(155%)!important;
  box-shadow:0 24px 64px rgba(36,64,80,.10),inset 0 1px 0 #fff!important
}

/* smoked glass only where contrast creates a deliberate endpoint */
.why-side,.smart-cta,.pro-teaser-inner,.consult-aside,.story-cta{
  color:#fff!important;border-color:rgba(255,255,255,.13)!important;
  background:radial-gradient(210px 140px at var(--hg-x) var(--hg-y),rgba(151,198,221,.16),transparent 68%),linear-gradient(145deg,rgba(31,51,62,.94),rgba(49,76,91,.91))!important;
  backdrop-filter:blur(16px) saturate(135%)!important;-webkit-backdrop-filter:blur(16px) saturate(135%)!important;
  box-shadow:0 26px 64px rgba(31,54,67,.15),inset 0 1px 0 rgba(255,255,255,.14)!important
}
.why-side p,.smart-cta p,.pro-teaser-inner p,.consult-aside p,.story-cta p{color:rgba(231,241,246,.84)!important}

/* footer grounds the whole page */
.footer{background:radial-gradient(circle at 82% 0%,rgba(139,184,208,.12),transparent 30%),linear-gradient(180deg,#263943,#304A57)!important;border-top:1px solid rgba(255,255,255,.08)}

/* image crispness is non-negotiable */
img{image-rendering:auto}
.product-card img,.catalog-card img,.product-detail-page img{filter:none!important;-webkit-filter:none!important}

/* responsive polish */
@media(max-width:1050px){
  .hero-copy,.hero-photo-card,.hero-photo-card>img{min-height:540px!important}
}
@media(max-width:840px){
  .site-header{padding-top:6px}.site-header .header-inner{min-height:64px;border-radius:18px;padding-inline:10px}
  .hero{padding-top:20px!important}.hero-copy,.hero-photo-card{border-radius:24px!important}
  .hero-copy,.hero-photo-card,.hero-photo-card>img{min-height:auto!important}
  .arch-ticker{width:calc(100% - 28px)}
  .typical-solutions-wrap{padding:10px!important}
}
@media(max-width:640px){
  body::before,body::after{opacity:.30}
  section{padding-top:58px;padding-bottom:58px}
  .site-header .header-inner{border-radius:16px}
  .calc-panel,.calc-result-card,.live-controls,.construction-shell{backdrop-filter:blur(20px) saturate(140%)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important}
  .hero-copy{padding:28px 22px!important}
}
@media(prefers-reduced-motion:reduce){
  .reference-card,.catalog-card,.btn{transition:none!important}
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .site-header .header-inner,.price-bar,.price-trust,.calc-panel,.calc-result-card,.scenario-shell,.live-controls,.construction-shell,.catalog-tools,.page-hero .card,.consult-studio{background:rgba(249,252,253,.96)!important}
}