:root{
  --bg:#121414; --surface:#121414; --surface-dim:#0e1010;
  --surface-low:#1a1c1c; --surface-container:#1e2020;
  --surface-high:#282a2b; --surface-highest:#333535;
  --on:#e8e8ea; --on-var:#cfc7d6;
  --outline:#a49caa; --outline-var:#4a4451;
  --primary:#d7baff; --primary-c:#bd93f9; --on-primary:#2a0a52;
  --primary-dim:#b794f6;
  --tertiary:#00dbe7; --tertiary-dim:#00b9c3; --on-tertiary:#00252a;
  --success:#7ee0a8; --error:#ffb4ab; --gold:#e6c884;
  --ff: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --maxw:1240px; --gutter:24px; --radius:16px; --radius-sm:10px; --radius-lg:24px;
  --pad-mob:20px; --pad-desk:56px;
  --glass:rgba(32,34,36,.55); --glass-brd:rgba(215,186,255,.10);
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important}}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--on); font-family:var(--ff);
  font-size:17px; line-height:1.72; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
}
/* finom, maszkolt hatter-textura (25.23d) - alacsony kontraszt */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% -5%, rgba(189,147,249,.14), transparent 60%),
    radial-gradient(55% 45% at 8% 108%, rgba(0,219,231,.08), transparent 60%),
    var(--bg);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(215,186,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 30%, #000, transparent 85%);
  mask-image:radial-gradient(80% 60% at 50% 30%, #000, transparent 85%);
}
img{max-width:100%; height:auto; display:block}
a{color:var(--primary); text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,label:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--tertiary); outline-offset:2px; border-radius:4px;
}
h1,h2,h3,h4,h5{font-weight:800; line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; color:var(--on)}
h1{font-size:clamp(2.15rem,6vw,4.2rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem); letter-spacing:-.015em}
h3{font-size:clamp(1.2rem,2.2vw,1.55rem)}
h4{font-size:1.12rem} h5{font-size:1rem; letter-spacing:0}
p{margin:0 0 1.1em}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-mob); width:100%}
@media(min-width:900px){.container{padding:0 var(--pad-desk)}}
.eyebrow{display:inline-flex; align-items:center; gap:.5em; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-primary);
  background:var(--primary); padding:.42em .95em; border-radius:999px}
.eyebrow.cyan{background:var(--tertiary); color:var(--on-tertiary)}
.eyebrow.ghost{background:rgba(215,186,255,.12); color:var(--primary); border:1px solid var(--glass-brd)}
.accent{color:var(--primary)}
.muted{color:var(--on-var)}
.ico{width:19px; height:19px; flex:0 0 auto; vertical-align:middle; fill:currentColor}
.ico-lg{width:26px; height:26px}
.center{text-align:center}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* skip link (27.9) */
.skip{position:absolute; left:8px; top:-60px; z-index:200; background:var(--primary);
  color:var(--on-primary); padding:.7em 1.1em; border-radius:10px; font-weight:700;
  transition:top .2s}
.skip:focus{top:8px}

/* ---------- HEADER / NAV (CSS-only mobil menu, 15.6c) ---------- */
.site-header{position:fixed; left:0; right:0; top:0; z-index:100;
  background:rgba(14,16,16,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--outline-var)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:14px var(--pad-mob);
  display:flex; align-items:center; justify-content:space-between; gap:16px}
@media(min-width:900px){.nav-inner{padding:16px var(--pad-desk)}}
.brand{display:flex; align-items:center; gap:.55em; font-weight:800; font-size:1.5rem;
  letter-spacing:-.03em; color:var(--on)}
.brand .logo{width:30px; height:30px; fill:var(--primary)}
.nav-toggle{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.nav-menu{display:flex; align-items:center; gap:8px}
.nav-links{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav-links a{display:inline-block; padding:.55em .85em; border-radius:999px; font-weight:600;
  font-size:.98rem; color:var(--on-var)}
.nav-links a:hover{color:var(--on); background:rgba(215,186,255,.08)}
.nav-links a[aria-current="page"]{color:var(--primary); background:rgba(215,186,255,.12)}
.nav-cta{display:inline-flex; align-items:center; gap:.5em; padding:.6em 1.25em; border-radius:999px;
  background:var(--primary); color:var(--on-primary); font-weight:700; font-size:.95rem;
  border:1px solid transparent}
.nav-cta:hover{background:var(--primary-dim)}
.hamburger{display:none}
@media(max-width:899px){
  .hamburger{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
    border-radius:12px; border:1px solid var(--outline-var); background:var(--surface-high); cursor:pointer}
  .hamburger .ico{width:24px; height:24px; fill:var(--on)}
  .hamburger .x{display:none}
  .nav-menu{position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:6px;
    background:rgba(14,16,16,.98); border-bottom:1px solid var(--outline-var); padding:16px var(--pad-mob) 24px;
    max-height:0; overflow:hidden; visibility:hidden; transition:max-height .28s ease}
  .nav-links{flex-direction:column; align-items:stretch; gap:2px; width:100%}
  .nav-links a{padding:.8em 1em; font-size:1.05rem}
  .nav-cta{justify-content:center; margin-top:6px; padding:.85em 1.25em}
  .nav-toggle:checked ~ .nav-menu{max-height:80vh; visibility:visible}
  .nav-toggle:checked ~ .hamburger .bars{display:none}
  .nav-toggle:checked ~ .hamburger .x{display:block}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.85em 1.6em; border-radius:999px; font-weight:700; font-size:1rem; cursor:pointer;
  border:1px solid transparent; text-align:center; line-height:1.2}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-dim); box-shadow:0 0 26px -6px rgba(215,186,255,.5)}
.btn-ghost{background:transparent; color:var(--on); border-color:var(--outline)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary)}
.btn-cyan{background:var(--tertiary); color:var(--on-tertiary)}
.btn-cyan:hover{background:var(--tertiary-dim)}
.btn-lg{padding:1em 2em; font-size:1.08rem}
.btn-block{display:flex; width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}

/* ---------- GLASS CARD ---------- */
.glass{background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-brd); border-radius:var(--radius); box-shadow:var(--shadow)}
.card{background:var(--surface-container); border:1px solid var(--outline-var);
  border-radius:var(--radius); padding:26px}
section{scroll-margin-top:88px}
main{flex:1 0 auto}

/* ---------- HERO ---------- */
.hero{padding:130px 0 60px}
@media(min-width:900px){.hero{padding:160px 0 80px}}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px}}
.hero h1{margin-bottom:.35em}
.hero .lead{font-size:1.18rem; color:var(--on-var); max-width:38ch}
.hero-media{position:relative; min-width:0}
.hero-media img{border-radius:var(--radius-lg); border:1px solid var(--glass-brd); width:100%}
.stars{display:inline-flex; align-items:center; gap:.4em; color:var(--gold); font-weight:700}
.stars .ico{fill:var(--gold); width:18px; height:18px}
.social-proof{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:26px; color:var(--on-var); font-size:.95rem}

/* ---------- STAT TILES (26.13) ---------- */
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--surface-high); border:1px solid var(--outline-var); border-radius:var(--radius);
  padding:22px; min-width:0}
.stat .n{font-size:2rem; font-weight:800; color:var(--primary); letter-spacing:-.02em}
.stat .l{font-size:.9rem; color:var(--on-var)}
.stat .ico{fill:var(--tertiary); margin-bottom:8px}

/* ---------- SECTION HEADS ---------- */
.sec{padding:64px 0}
@media(min-width:900px){.sec{padding:88px 0}}
.sec-head{max-width:62ch; margin-bottom:38px}
.sec-head h2{position:relative; padding-left:16px}
.sec-head h2::before{content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:5px;
  border-radius:3px; background:var(--primary)}
.sec-head p{color:var(--on-var); font-size:1.08rem}

/* ---------- PRODUCT / CARD GRID ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:26px}
.grid-3{display:grid; grid-template-columns:minmax(0,1fr); gap:26px}
@media(min-width:680px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{display:flex; flex-direction:column; gap:14px; min-width:0; background:var(--glass);
  border:1px solid var(--glass-brd); border-radius:var(--radius); padding:14px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:transform .3s,border-color .3s,box-shadow .3s}
.pcard:hover{transform:translateY(-4px); border-color:rgba(215,186,255,.4); box-shadow:0 0 30px -10px rgba(215,186,255,.28)}
.pcard .thumb{position:relative; aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-high)}
.pcard .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.pcard:hover .thumb img{transform:scale(1.05)}
.pcard .badge{position:absolute; top:12px; left:12px; font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.4em .8em; border-radius:999px;
  background:rgba(18,20,20,.7); color:var(--primary); border:1px solid var(--glass-brd);
  backdrop-filter:blur(6px)}
.pcard h3{font-size:1.15rem; margin:0}
.pcard h3 a{color:var(--on)} .pcard h3 a:hover{color:var(--primary)}
.pcard .meta{font-size:.86rem; color:var(--on-var); margin:0}
.pcard .foot{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:14px; border-top:1px solid var(--outline-var)}
.pcard .price{font-weight:800; font-size:1.12rem; color:var(--primary)}
.pcard .price small{display:block; font-size:.66rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-var)}
.pcard .add{padding:.55em 1em; font-size:.82rem; border-radius:999px; background:var(--on);
  color:var(--surface); font-weight:700; border:1px solid transparent; cursor:pointer}
.pcard .add:hover{background:var(--primary); color:var(--on-primary)}

/* ---------- FILTER PANEL (progressziv, JS nelkul is minden latszik) ---------- */
.filter-wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:26px}
@media(min-width:980px){.filter-wrap{grid-template-columns:minmax(0,270px) minmax(0,1fr)}}
.filters{align-self:start; background:var(--surface-container); border:1px solid var(--outline-var);
  border-radius:var(--radius); padding:22px}
@media(min-width:980px){.filters{position:sticky; top:88px}}
.filters h2{font-size:1.15rem}
.fgroup{margin-bottom:18px}
.fgroup > .flabel{font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-var); margin-bottom:10px; display:block}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:.4em; padding:.42em .85em; border-radius:999px;
  font-size:.85rem; font-weight:600; cursor:pointer; border:1px solid var(--outline-var);
  background:var(--surface-high); color:var(--on-var)}
.chip:hover{border-color:var(--primary); color:var(--on)}
.chip[aria-pressed="true"],.chip.active{background:var(--primary); color:var(--on-primary); border-color:var(--primary)}
.result-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px}
.result-bar .count{font-weight:700; color:var(--on)}
.select{appearance:none; background:var(--surface-high); color:var(--on); border:1px solid var(--outline-var);
  border-radius:10px; padding:.6em 2.4em .6em 1em; font-size:.92rem; font-family:inherit; cursor:pointer}
.hidden{display:none!important}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto; max-width:100%; border:1px solid var(--outline-var); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; font-size:.96rem}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--outline-var)}
th{background:var(--surface-high); font-weight:700; color:var(--on); white-space:nowrap}
td{color:var(--on-var)} tr:last-child td{border-bottom:0}
td strong,th strong{color:var(--on)}

/* ---------- CALLOUT / TLDR (26.13 tomor hatter) ---------- */
.callout{background:var(--surface-high); border-left:5px solid var(--primary); border-radius:var(--radius-sm);
  padding:20px 22px; margin:0 0 26px}
.callout.cyan{border-left-color:var(--tertiary)}
.callout h2,.callout h3{margin-top:0}
.tldr{background:var(--surface-container); border:1px solid var(--glass-brd); border-radius:var(--radius);
  padding:24px 26px; margin-bottom:30px}
.tldr h2{font-size:1.15rem; display:flex; align-items:center; gap:.5em}
.tldr ul{margin:.4em 0 0; padding-left:1.25em} .tldr li{margin-bottom:.4em; color:var(--on-var)}

/* ---------- TIMELINE (folyamat, 26.13) ---------- */
.timeline{list-style:none; margin:0; padding:0; position:relative}
.timeline::before{content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:var(--outline-var)}
.timeline li{position:relative; padding:0 0 26px 58px; min-width:0}
.timeline .num{position:absolute; left:0; top:0; width:40px; height:40px; border-radius:999px;
  background:var(--primary); color:var(--on-primary); font-weight:800; display:flex; align-items:center; justify-content:center}
.timeline h3{margin:.2em 0 .3em; font-size:1.15rem}
.timeline p{margin:0; color:var(--on-var)}

/* ---------- PRICE CARDS (26.13 marketinges) ---------- */
.price-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:22px}
@media(min-width:820px){.price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.price-card{position:relative; background:var(--surface-container); border:1px solid var(--outline-var);
  border-radius:var(--radius); padding:28px 24px; display:flex; flex-direction:column; min-width:0}
.price-card.feat{border-color:var(--primary); box-shadow:0 0 40px -18px rgba(215,186,255,.5)}
.price-card .ribbon{position:absolute; top:-12px; left:24px; background:var(--primary); color:var(--on-primary);
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.4em .9em; border-radius:999px}
.price-card h3{font-size:1.3rem}
.price-card .amount{font-size:2.1rem; font-weight:800; color:var(--primary); margin:.1em 0}
.price-card .amount small{font-size:.9rem; color:var(--on-var); font-weight:600}
.price-card ul{list-style:none; margin:16px 0 22px; padding:0}
.price-card li{position:relative; padding:.35em 0 .35em 1.9em; color:var(--on-var); font-size:.95rem}
.price-card li .ico{position:absolute; left:0; top:.5em; fill:var(--tertiary); width:17px; height:17px}
.price-card .btn{margin-top:auto}

/* ---------- FAQ (CSS-only details) ---------- */
.faq{display:flex; flex-direction:column; gap:12px}
.faq details{background:var(--surface-container); border:1px solid var(--outline-var); border-radius:var(--radius-sm)}
.faq summary{cursor:pointer; padding:18px 22px; font-weight:700; color:var(--on); list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{fill:var(--primary); transition:transform .25s}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq .a{padding:0 22px 20px; color:var(--on-var)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- SIDEBAR (konverzio elso, 26.11) ---------- */
.layout{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:start}
@media(min-width:1000px){.layout{grid-template-columns:minmax(0,1fr) minmax(0,340px)}}
.sidebar{align-self:start; min-width:0; display:flex; flex-direction:column; gap:20px}
@media(min-width:1000px){.sidebar{position:sticky; top:88px}}
.conv-card{background:var(--surface-container); border:1px solid var(--primary); border-radius:var(--radius);
  padding:24px; box-shadow:0 0 40px -20px rgba(215,186,255,.55)}
.conv-card .tag{font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--primary)}
.conv-card .big{font-size:1.9rem; font-weight:800; color:var(--on); margin:.15em 0}
.conv-card .trust{list-style:none; margin:16px 0; padding:0}
.conv-card .trust li{position:relative; padding:.3em 0 .3em 1.8em; font-size:.92rem; color:var(--on-var)}
.conv-card .trust .ico{position:absolute; left:0; top:.45em; fill:var(--tertiary); width:16px; height:16px}
.conv-card .phone{display:inline-flex; align-items:center; gap:.5em; margin-top:12px; font-weight:700; color:var(--on)}
.facts{background:var(--surface-high); border:1px solid var(--outline-var); border-radius:var(--radius); padding:22px}
.facts h3{font-size:1.05rem}
.facts dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px}
.facts dt{color:var(--on-var); font-size:.9rem} .facts dd{margin:0; font-weight:600; text-align:right}

/* ---------- TOC (torzs ele, 26.10) ---------- */
.toc{background:var(--surface-container); border:1px solid var(--outline-var); border-radius:var(--radius);
  padding:20px 24px; margin-bottom:30px}
.toc h2{font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--on-var); margin-bottom:.6em}
.toc ol{margin:0; padding-left:1.3em; columns:2; column-gap:26px}
@media(max-width:620px){.toc ol{columns:1}}
.toc li{margin-bottom:.35em} .toc a{color:var(--primary); text-decoration:underline; text-underline-offset:2px}

/* ---------- BREADCRUMB ---------- */
.crumbs{font-size:.86rem; color:var(--on-var); padding:96px 0 0}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.5em; margin:0; padding:0}
.crumbs a{color:var(--on-var); text-decoration:underline; text-underline-offset:2px}
.crumbs a:hover{color:var(--primary)}
.crumbs .sep{color:var(--outline)}

/* ---------- PROSE (blog/torzs) ---------- */
.prose{font-size:1.06rem; max-width:72ch}
.prose h2{margin-top:1.7em} .prose h3{margin-top:1.4em} .prose h4{margin-top:1.2em}
.prose ul,.prose ol{margin:0 0 1.1em; padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose a{text-decoration:underline; text-underline-offset:2px}
.prose figure{margin:1.8em 0}
.prose figure img{border-radius:var(--radius); border:1px solid var(--glass-brd); width:100%}
.prose figcaption{font-size:.86rem; color:var(--on-var); margin-top:.6em; text-align:center}
.prose blockquote{margin:1.5em 0; padding:.4em 0 .4em 1.2em; border-left:4px solid var(--primary);
  color:var(--on); font-size:1.12rem}
.lead{font-size:1.2rem; color:var(--on-var)}
.keyfacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:14px; margin:1.5em 0}
.keyfacts .kf{background:var(--surface-high); border:1px solid var(--outline-var); border-radius:var(--radius-sm); padding:16px; min-width:0}
.keyfacts .kf .ico{fill:var(--tertiary); margin-bottom:6px}
.keyfacts .kf b{display:block; color:var(--on)}

/* ---------- ARTICLE META / AUTHOR ---------- */
.art-head{padding:20px 0 10px}
.art-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; color:var(--on-var); font-size:.92rem; margin:.6em 0 1.4em}
.art-meta .who{display:inline-flex; align-items:center; gap:.5em}
.avatar{width:44px; height:44px; border-radius:999px; background:var(--primary); color:var(--on-primary);
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; flex:0 0 auto}
.avatar.lg{width:88px; height:88px; font-size:1.9rem}
.author-box{margin:44px 0; padding:26px; background:var(--surface-container); border:1px solid var(--outline-var);
  border-radius:var(--radius); display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start}
@media(max-width:560px){.author-box{grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center}}
.author-box h3{margin:0 0 .3em}
.socials{display:flex; gap:10px; margin-top:12px}
.socials a{width:40px; height:40px; border-radius:10px; background:var(--surface-high); border:1px solid var(--outline-var);
  display:inline-flex; align-items:center; justify-content:center}
.socials a:hover{border-color:var(--primary)} .socials .ico{fill:var(--on)}
.chips-static{display:flex; flex-wrap:wrap; gap:8px}
.chips-static span{padding:.4em .85em; border-radius:999px; background:var(--surface-high);
  border:1px solid var(--outline-var); font-size:.85rem; color:var(--on-var)}

/* ---------- FORM (27.9, 25.11) ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:34px}
@media(min-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
form.contact{display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:600; font-size:.92rem}
.field input,.field textarea{width:100%; background:var(--surface-high); color:var(--on);
  border:1px solid var(--outline-var); border-bottom:2px solid var(--outline); border-radius:10px;
  padding:.75em .9em; font-family:inherit; font-size:1rem}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:var(--primary)}
.field textarea{min-height:130px; resize:vertical}
.consent{display:flex; align-items:flex-start; gap:.7em; font-size:.9rem; color:var(--on-var)}
.consent input{width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--primary)}
.consent a{text-decoration:underline}

/* ---------- MAP ---------- */
.map-wrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--outline-var); line-height:0}
.map-wrap iframe{width:100%; height:340px; border:0; display:block; max-width:100%}

/* ---------- CART ---------- */
.cart-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:30px}
@media(min-width:900px){.cart-grid{grid-template-columns:minmax(0,1fr) minmax(0,360px)}}
.cart-item{display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--outline-var); min-width:0}
.cart-item img{width:88px; height:88px; border-radius:10px; object-fit:cover}
.cart-item .t{font-weight:700; min-width:0}
.cart-empty{padding:40px; text-align:center; color:var(--on-var)}

/* ---------- BLOG LIST ---------- */
.bcard{display:flex; flex-direction:column; min-width:0; background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:var(--radius); overflow:hidden; transition:transform .3s,border-color .3s}
.bcard:hover{transform:translateY(-4px); border-color:rgba(215,186,255,.4)}
.bcard .thumb{aspect-ratio:16/10; overflow:hidden; background:var(--surface-high)}
.bcard .thumb img{width:100%; height:100%; object-fit:cover}
.bcard .body{padding:20px; display:flex; flex-direction:column; gap:8px}
.bcard .cat{font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tertiary)}
.bcard h3{font-size:1.15rem; margin:0} .bcard h3 a{color:var(--on)} .bcard h3 a:hover{color:var(--primary)}
.bcard .ex{color:var(--on-var); font-size:.94rem; margin:0}
.bcard .m{margin-top:auto; padding-top:10px; font-size:.82rem; color:var(--on-var); display:flex; gap:12px; flex-wrap:wrap}

/* ---------- FOOTER (25.23a, 26.12) ---------- */
.site-footer{background:var(--surface-dim); border-top:1px solid var(--outline-var); margin-top:40px}
.footer-cta{background:var(--surface-container); border:1px solid var(--glass-brd); border-radius:var(--radius-lg);
  padding:40px 32px; text-align:center; transform:translateY(-40px); margin-bottom:-20px}
.footer-cta h2{margin-bottom:.3em}
.footer-cta p{color:var(--on-var); max-width:56ch; margin:0 auto 1.4em}
.footer-cta .btn-row.cta-center{justify-content:center}
.footer-main{display:grid; grid-template-columns:minmax(0,1fr); gap:32px; padding:20px 0 40px}
@media(min-width:760px){.footer-main{grid-template-columns:1.4fr 1fr 1fr}}
.footer-main h3,.footer-main .footer-h{font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--on-var); margin:0 0 .5em}
.footer-main ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5em}
.footer-main a{color:var(--on-var)} .footer-main a:hover{color:var(--primary)}
.footer-brand .brand{margin-bottom:12px}
.contact-chip{display:inline-flex; align-items:center; gap:.5em; padding:.5em .9em; border-radius:999px;
  background:var(--surface-high); border:1px solid var(--outline-var); color:var(--on); font-size:.9rem; margin:4px 6px 4px 0}
.contact-chip .ico{fill:var(--primary)}
.footer-bottom{border-top:1px solid var(--outline-var); padding:20px 0; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:14px; font-size:.85rem; color:var(--on-var)}
.footer-legal{display:flex; flex-wrap:wrap; gap:16px}
.footer-legal a{color:var(--on-var); text-decoration:underline; text-underline-offset:2px}
.to-top{display:inline-flex; align-items:center; gap:.4em; color:var(--on-var)}
.to-top:hover{color:var(--primary)}

/* ---------- 404 ---------- */
.err{text-align:center; padding:140px 0 80px}
.err .big{font-size:clamp(4rem,18vw,9rem); font-weight:800; color:var(--primary); line-height:1}
.err .btn-row{justify-content:center}
.err .lead{max-width:52ch; margin-left:auto; margin-right:auto}

/* ---------- UTIL ---------- */
.divider{height:1px; background:var(--outline-var); border:0; margin:40px 0}
.notice{background:var(--surface-high); border:1px solid var(--outline-var); border-left:5px solid var(--tertiary);
  border-radius:var(--radius-sm); padding:18px 20px; color:var(--on-var)}
.pill-row{display:flex; flex-wrap:wrap; gap:10px}
.tag-cyan{color:var(--tertiary); font-weight:700}
.fineprint{font-size:.82rem; color:var(--on-var); margin-top:10px}
.mt{margin-top:36px}
.big-sm{font-size:1.3rem!important}
.prose-wide{max-width:78ch}
.flex{display:flex} .flex-col{flex-direction:column}
.reveal{opacity:1}
.js .reveal{opacity:0; transform:translateY(18px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .6s,transform .6s}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1!important; transform:none!important}}