:root{
--font-body:'General Sans',Arial,sans-serif;--font-display:'General Sans',Arial,sans-serif;
--text-xs:clamp(.75rem,.72rem + .15vw,.8125rem);--text-sm:clamp(.875rem,.84rem + .15vw,.9375rem);--text-base:clamp(1rem,.97rem + .15vw,1.0625rem);--text-lg:clamp(1.125rem,1rem + .5vw,1.375rem);--text-xl:clamp(1.75rem,1.3rem + 1.2vw,2.25rem);--text-2xl:clamp(2.5rem,1.55rem + 2.6vw,3.5rem);
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;
--color-bg:oklch(.99 .002 110);--color-surface:oklch(1 0 0);--color-surface-offset:oklch(.96 .007 110);--color-text:oklch(.27 .039 260);--color-text-muted:oklch(.48 .02 260);--color-border:oklch(.27 .039 260 / .14);--color-primary:oklch(.45 .102 143);--color-primary-hover:oklch(.38 .095 143);--color-primary-highlight:oklch(.945 .026 143);--color-navy:oklch(.27 .039 260);--color-white:oklch(.99 0 0);--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--content-wide:1280px;
}
[data-theme=dark]{--color-bg:oklch(.20 .02 260);--color-surface:oklch(.24 .021 260);--color-surface-offset:oklch(.27 .02 260);--color-text:oklch(.93 .008 110);--color-text-muted:oklch(.76 .014 260);--color-border:oklch(.9 .01 110 / .16);--color-primary:oklch(.76 .11 143);--color-primary-hover:oklch(.83 .10 143);--color-primary-highlight:oklch(.30 .034 143);--color-navy:oklch(.17 .026 260)}
.container{max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-10)}
.preview-line{font-size:var(--text-xs);background:var(--color-navy);color:var(--color-white);padding:var(--space-2) var(--space-6);text-align:center;letter-spacing:.08em}
.preview-line span{letter-spacing:0;opacity:.8;margin-left:var(--space-4)}
header{position:sticky;top:0;z-index:10;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.header-main{height:100px;display:flex;align-items:center;gap:var(--space-10)}
.brand{width:180px;flex-shrink:0;display:flex;min-height:44px;align-items:center}
.brand img{width:180px;height:auto;mix-blend-mode:multiply}
[data-theme=dark] .brand{background:white;border-radius:var(--radius-sm);padding:var(--space-2)}
nav{display:flex;gap:var(--space-8);margin-inline:auto}
nav a{font-size:var(--text-sm);padding-block:var(--space-3);font-weight:500;white-space:nowrap}
nav a:hover,.text-button:hover,footer a:hover{color:var(--color-primary)}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.icon-button:hover{background:var(--color-surface-offset)}
.lucide{width:19px;height:19px;flex-shrink:0;stroke-width:1.6}
.quote-toggle{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);font-weight:500;min-height:44px;padding-inline:var(--space-3);white-space:nowrap}
.quote-toggle span{background:var(--color-primary-highlight);color:var(--color-primary);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:var(--text-xs)}
.menu-button{display:none}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-16);padding-block:var(--space-12) var(--space-16);align-items:center}
.eyebrow{font-size:var(--text-xs);letter-spacing:.12em;font-weight:600;color:var(--color-primary);display:flex;align-items:center;gap:var(--space-3)}
.dot{width:6px;height:6px;display:inline-block;background:var(--color-primary);border-radius:50%}
h1{font-size:var(--text-2xl);letter-spacing:-.045em;font-weight:500;margin-block:var(--space-6)}
.hero-description{color:var(--color-text-muted);font-size:var(--text-base);max-width:43ch;line-height:1.8}
.hero-actions{display:flex;align-items:center;gap:var(--space-6);margin-top:var(--space-8)}
.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:500;border-radius:var(--radius-sm);white-space:nowrap}
.primary{background:var(--color-primary);color:var(--color-white)}
[data-theme=dark] .primary{color:var(--color-navy)}
.primary:hover{background:var(--color-primary-hover)}
.secondary{background:var(--color-surface);border:1px solid var(--color-border)}
.secondary:hover{background:var(--color-primary-highlight);border-color:var(--color-primary)}
.text-button{display:inline-flex;gap:var(--space-3);align-items:center;font-size:var(--text-sm);font-weight:500;min-height:44px}
.hero-note{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-12)}
.note-line{width:32px;height:1px;background:var(--color-primary)}
.hero-note p{font-size:var(--text-xs);color:var(--color-text-muted)}
.hero-note strong{font-weight:500;color:var(--color-text)}
.hero-photo{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--color-surface-offset)}
.hero-photo>img{width:100%;height:420px;object-fit:cover;object-position:center 46%}
.hero-photo figcaption{max-width:none;background:var(--color-navy);color:var(--color-white);padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-1)}
.hero-photo figcaption>span:first-child{font-size:var(--text-xs);letter-spacing:.1em;opacity:.65}
.hero-photo figcaption>span:last-child{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm)}
.offer{background:var(--color-primary-highlight);border-block:1px solid var(--color-border)}
.offer-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-4)}
.offer p,.offer a{font-size:var(--text-sm)}
.offer-label{font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;margin-right:var(--space-6);color:var(--color-primary)}
.offer a{display:flex;align-items:center;gap:var(--space-4);font-weight:500;min-height:44px}
.catalog{padding-block:var(--space-20) var(--space-16)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-8)}
h2{font-size:var(--text-xl);font-weight:500;letter-spacing:-.03em}
.section-heading h2{margin-top:var(--space-3)}
.catalog-toolbar{display:flex;justify-content:space-between;gap:var(--space-6);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-4)}
.filters{display:flex;gap:var(--space-1);flex-wrap:wrap}
.filter{min-height:44px;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap}
.filter:hover{background:var(--color-surface-offset);color:var(--color-text)}
.filter.active{background:var(--color-primary-highlight);color:var(--color-primary);font-weight:500}
.search{display:flex;align-items:center;gap:var(--space-2);width:240px;background:var(--color-surface-offset);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);flex-shrink:0}
.search input{background:none;border:none;width:100%;min-width:0;font-size:var(--text-sm);outline:none;min-height:28px}
.search:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}
.search input::placeholder{color:var(--color-text-muted)}
.result-count{font-size:var(--text-xs);color:var(--color-text-muted);margin-block:var(--space-4) var(--space-6)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.product-card{display:flex;flex-direction:column;min-width:0}
.product-image{position:relative;background:var(--color-surface-offset);border-radius:var(--radius-sm);overflow:hidden;width:100%;aspect-ratio:1.4;display:block}
.product-image>img{width:100%;height:100%;object-fit:cover;transition:transform 350ms}
.product-image:hover>img{transform:scale(1.035)}
.image-tag{position:absolute;top:16px;left:16px;z-index:1;font-size:var(--text-xs);background:var(--color-surface);color:var(--color-text);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}
.product-body{display:flex;flex-direction:column;flex:1;padding-top:var(--space-5)}
.product-category{font-size:var(--text-xs);color:var(--color-primary);letter-spacing:.08em;margin-bottom:var(--space-2)}
.product-card h3{font-size:var(--text-base);font-weight:500;line-height:1.4}
.product-card p.description{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2);margin-bottom:var(--space-5)}
.product-card .product-action{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-border);padding-top:var(--space-3);margin-top:auto}
.product-action>button:first-child{font-size:var(--text-sm);font-weight:500;min-height:44px;display:flex;align-items:center;gap:var(--space-3)}
.product-action>button:first-child:hover{color:var(--color-primary)}
.catalog-note{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-10)}
.empty{text-align:center;display:flex;align-items:center;flex-direction:column;padding-block:var(--space-12);gap:var(--space-4)}
.empty .lucide{width:32px;height:32px;color:var(--color-primary)}
.empty h3{font-size:var(--text-lg)}
.support{background:var(--color-navy);color:var(--color-white)}
.support-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-24);padding-block:var(--space-16)}
.support .eyebrow{color:oklch(.79 .11 143)}
.support h2{margin-block:var(--space-4) var(--space-6)}
.support p:not(.eyebrow){color:oklch(.83 .015 260);max-width:46ch}
.support .primary{margin-top:var(--space-8);background:oklch(.79 .11 143);color:var(--color-navy)}
.support .primary:hover{background:oklch(.86 .08 143)}
.support-side{border-left:1px solid oklch(1 0 0 / .18);padding-left:var(--space-12);display:flex;flex-direction:column;justify-content:center}
.support-side>.lucide{width:36px;height:36px;margin-bottom:var(--space-6);color:oklch(.79 .11 143)}
.support-side p{font-size:var(--text-lg)}
.support-side>a{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);min-height:44px;margin-top:var(--space-4)}
.support-side>a:hover{color:oklch(.79 .11 143)}
.support-side small{font-size:var(--text-xs);color:oklch(.72 .015 260);margin-top:var(--space-8);max-width:36ch}
.about{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-16);padding-block:var(--space-20)}
.about .eyebrow{align-self:start;padding-top:var(--space-2)}
.about p:not(.eyebrow){color:var(--color-text-muted);margin-block:var(--space-6) var(--space-4);max-width:56ch}
footer{background:var(--color-surface-offset);border-top:1px solid var(--color-border)}
.footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--space-12);padding-block:var(--space-12)}
.footer-brand{display:flex;gap:var(--space-2);align-items:center;min-height:44px}
.footer-brand svg{color:var(--color-primary)}
.footer-brand>span{font-size:var(--text-lg);font-weight:500}
.footer-brand sup{font-size:var(--text-xs)}
.footer-main>div:first-child>p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-3)}
.footer-label{font-size:var(--text-xs);letter-spacing:.08em;color:var(--color-text-muted);display:block;margin-bottom:var(--space-3)}
.footer-main>div:not(:first-child)>a{font-size:var(--text-sm);min-height:44px;display:flex;align-items:center;gap:var(--space-2)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-6);border-top:1px solid var(--color-border);padding-block:var(--space-5);font-size:var(--text-xs);color:var(--color-text-muted);align-items:center}
.footer-bottom a{display:flex;gap:var(--space-2);align-items:center;min-height:44px}
.skip{position:fixed;top:-100px;left:16px;background:var(--color-surface);padding:var(--space-4);z-index:100}
.skip:focus{top:16px}
dialog{margin:auto;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-10);width:min(700px,calc(100% - 32px));max-height:90dvh;overflow:auto}
dialog::backdrop{background:oklch(.15 .02 260 / .6);backdrop-filter:blur(3px)}
.dialog-close{position:absolute;top:12px;right:12px}
.detail-image{width:100%;height:240px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:var(--space-6)}
dialog h2{margin-block:var(--space-3) var(--space-4);padding-right:var(--space-6)}
.detail-copy{color:var(--color-text-muted);margin-bottom:var(--space-4)}
.detail-note,.quote-disclaimer{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6)}
.detail-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.quote-row{display:flex;align-items:center;gap:var(--space-4);border-bottom:1px solid var(--color-border);padding-block:var(--space-4)}
.quote-row img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-sm)}
.quote-row>span{font-size:var(--text-sm);flex:1}
.quote-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-8)}
.quote-empty{padding-block:var(--space-6);color:var(--color-text-muted);font-size:var(--text-base)}
@media(min-width:1440px){.hero{padding-block:var(--space-16)}.hero-photo>img{height:460px}}
@media(max-width:1100px){.header-main{gap:var(--space-6)}nav{gap:var(--space-4)}.brand{width:150px}.hero{gap:var(--space-8)}.hero-actions{gap:var(--space-4)}.catalog-toolbar{flex-direction:column}.search{width:100%}.support-inner{gap:var(--space-12)}}
@media(max-width:800px){.container{padding-inline:var(--space-6)}.preview-line span{display:none}.header-main{height:80px;gap:var(--space-3)}.brand{width:135px}.header-actions{margin-left:auto;gap:0}.quote-toggle{font-size:var(--text-xs);gap:var(--space-2);padding-inline:var(--space-2)}#search-focus{display:none}.menu-button{display:inline-flex}nav{display:none;position:absolute;top:80px;left:0;right:0;background:var(--color-surface);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border)}nav.open{display:flex;flex-direction:column;gap:var(--space-2)}nav a{padding-block:var(--space-3)}.hero{grid-template-columns:1fr;padding-block:var(--space-10);gap:var(--space-10)}.hero-copy{max-width:600px}.hero-photo>img{height:360px}.hero-note{margin-top:var(--space-8)}.offer-inner{align-items:flex-start;flex-direction:column;gap:var(--space-2)}.offer-label{display:block;margin-bottom:var(--space-2)}.offer-inner a{min-height:44px}.catalog{padding-block:var(--space-12)}.section-heading{align-items:flex-start;flex-direction:column;gap:var(--space-3)}.product-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-8) var(--space-5)}.support-inner{grid-template-columns:1fr;gap:var(--space-10);padding-block:var(--space-12)}.support-side{border-left:0;border-top:1px solid oklch(1 0 0 / .18);padding-top:var(--space-8);padding-left:0}.support-side>.lucide{display:none}.about{grid-template-columns:1fr;gap:var(--space-5);padding-block:var(--space-12)}.footer-main{grid-template-columns:1fr 1fr;gap:var(--space-8)}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;align-items:flex-start;gap:var(--space-2)}}
@media(max-width:480px){.container{padding-inline:var(--space-5)}.brand{width:115px}.header-main{gap:var(--space-1)}.header-actions .icon-button{width:40px}.quote-toggle{padding-inline:var(--space-1)}.hero-actions{align-items:flex-start;flex-direction:column;gap:var(--space-2)}h1{font-size:var(--text-2xl)}.desktop-break{display:none}.hero-photo>img{height:310px}.product-grid{grid-template-columns:1fr;gap:var(--space-10)}.product-image{aspect-ratio:1.4}.filters{gap:var(--space-1)}.filter{padding-inline:var(--space-3)}.catalog-toolbar{gap:var(--space-4)}.footer-main{grid-template-columns:1fr;gap:var(--space-8)}.footer-main>div:first-child{grid-column:auto}dialog{padding:var(--space-8) var(--space-5)}.detail-image{height:200px}.quote-footer{align-items:flex-start;flex-direction:column}.detail-actions{flex-direction:column}.detail-actions .button{width:100%}}
