:root { --ink:#102842; --muted:#587487; --paper:#f2fbfd; --white:#fff; --line:#d7edf3; --accent:#16bce1; --accent-deep:#009dca; --accent-pale:#e5f8fd; --shadow:0 16px 50px rgba(16,40,66,.10); --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.skip-link { position:absolute; z-index:99; left:1rem; top:-4rem; padding:.7rem 1rem; background:var(--ink); color:#fff; border-radius:0 0 8px 8px; } .skip-link:focus { top:0; }
.shell { width:min(1160px,calc(100% - 40px)); margin:auto; }
.site-header { position:sticky; z-index:20; top:0; background:rgba(246,249,248,.94); border-bottom:1px solid rgba(216,227,225,.9); backdrop-filter:blur(14px); }
.nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; }
.brand { display:inline-flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:-.03em; font-size:1.08rem; }
.brand img { width:38px; height:38px; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:.2rem; }
.nav-links a { padding:.55rem .75rem; color:var(--muted); border-radius:8px; font-size:.94rem; }
.nav-links a:hover,.nav-links a[aria-current="page"] { color:var(--ink); background:var(--accent-pale); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.7rem 1rem; border:1px solid transparent; border-radius:9px; background:var(--accent); color:#fff; font-weight:750; transition:.18s ease; }
.button:hover { background:var(--accent-deep); transform:translateY(-1px); }
.button-secondary { background:transparent; border-color:var(--ink); color:var(--ink); }
.button-secondary:hover { color:#fff; background:var(--ink); }
.button-small { min-height:36px; padding:.45rem .72rem; font-size:.88rem; }
.eyebrow { color:var(--accent-deep); font-weight:750; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; }
.hero { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,6vw,5.6rem); padding:clamp(3.8rem,8vw,7.4rem) 0 4rem; align-items:center; }
.hero h1 { max-width:650px; margin:.6rem 0 1.2rem; font-size:clamp(2.7rem,5.3vw,5.4rem); line-height:.98; letter-spacing:-.07em; }
.hero p { max-width:570px; color:var(--muted); font-size:1.08rem; }
.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.7rem; }
.hero-image { min-height:490px; overflow:hidden; background:#dcebea; border-radius:var(--radius); box-shadow:var(--shadow); }
.hero-image img { width:100%; height:100%; object-fit:cover; }
.stat-strip { background:var(--ink); color:#fff; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); padding:1.2rem 0; }
.stat { padding:.4rem 1.25rem; border-left:1px solid rgba(255,255,255,.2); } .stat:first-child { border:0; padding-left:0; }
.stat strong { display:block; font-size:1.45rem; letter-spacing:-.04em; }.stat span { color:#c3d2d5; font-size:.87rem; }
.section { padding:clamp(4rem,8vw,7rem) 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; margin-bottom:2rem; }.section-heading h2 { max-width:650px; margin:.35rem 0 0; font-size:clamp(2rem,4vw,3.3rem); line-height:1.05; letter-spacing:-.055em; }.section-heading p { max-width:470px; color:var(--muted); margin:0; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.product-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); background:var(--white); border-radius:14px; transition:.2s ease; }.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }.product-card-image { aspect-ratio:1/1; padding:1rem; background:#edf3f2; }.product-card-image img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }.product-card-body { padding:1rem; }.product-card-body h3 { margin:.28rem 0 .35rem; font-size:1rem; line-height:1.25; }.product-card-body p { margin:0; color:var(--muted); font-size:.88rem; }.product-meta { color:var(--accent-deep); font-size:.75rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,7vw,7rem); align-items:center; }.split-media { min-height:450px; overflow:hidden; border-radius:var(--radius); }.split-media img { height:100%; width:100%; object-fit:cover; }.split-copy h2 { margin:.45rem 0 1rem; font-size:clamp(2rem,4vw,3.2rem); line-height:1.04; letter-spacing:-.055em; }.split-copy p { color:var(--muted); }.check-list { padding:0; margin:1.5rem 0 0; list-style:none; }.check-list li { border-top:1px solid var(--line); padding:.9rem 0 .9rem 1.45rem; position:relative; }.check-list li::before { content:""; width:.55rem; height:.55rem; position:absolute; left:.1rem; top:1.35rem; border-radius:50%; background:var(--accent); }
.process { display:grid; grid-template-columns:1fr 1.25fr; gap:2.5rem; padding:2rem; background:var(--accent-pale); border-radius:var(--radius); }.process h2 { margin:.3rem 0 0; font-size:clamp(2rem,4vw,3.1rem); line-height:1.05; letter-spacing:-.055em; }.process-list { counter-reset:step; }.process-list div { counter-increment:step; display:grid; grid-template-columns:42px 1fr; gap:.85rem; padding:1rem 0; border-top:1px solid rgba(0,95,101,.2); }.process-list div::before { content:"0" counter(step); color:var(--accent-deep); font-weight:800; }.process-list h3 { margin:0; font-size:1rem; }.process-list p { grid-column:2; margin:-.6rem 0 0; color:var(--muted); font-size:.92rem; }
.page-hero { padding:4rem 0 2.2rem; }.page-hero h1 { max-width:700px; margin:.35rem 0 .7rem; font-size:clamp(2.5rem,5vw,4.7rem); line-height:1; letter-spacing:-.065em; }.page-hero p { max-width:600px; color:var(--muted); }
.filters { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; margin:1.5rem 0 2rem; }.filter { border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:.5rem .85rem; background:#fff; }.filter.active,.filter:hover { border-color:var(--accent); color:#fff; background:var(--accent); }
.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; padding-bottom:5rem; }.catalog-grid .product-card h3 { font-size:1.15rem; }
.catalog-back { display:inline-flex; align-items:center; gap:.4rem; margin:1.4rem 0 -1.3rem; color:var(--accent-deep); font-weight:750; }.catalog-back:hover { color:var(--ink); }.catalog-home { margin-bottom:0; }
.product-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:clamp(2rem,6vw,6rem); padding:3.2rem 0 5rem; }.gallery-main { aspect-ratio:1/1; display:grid; place-items:center; padding:2rem; overflow:hidden; background:#eaf1f0; border-radius:var(--radius); }.gallery-main img { max-height:100%; width:100%; object-fit:contain; mix-blend-mode:multiply; }.thumbs { display:flex; gap:.6rem; overflow:auto; padding-top:.7rem; }.thumb { width:74px; height:74px; flex:0 0 auto; padding:.25rem; border:2px solid transparent; background:#eaf1f0; border-radius:8px; }.thumb.active { border-color:var(--accent); }.thumb img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }.product-detail h1 { margin:.4rem 0 1rem; font-size:clamp(2rem,4.2vw,3.65rem); line-height:1.02; letter-spacing:-.06em; }.product-detail > p { color:var(--muted); }.specs { margin:1.8rem 0; border-top:1px solid var(--line); }.specs div { display:grid; grid-template-columns:42% 1fr; border-bottom:1px solid var(--line); padding:.65rem 0; font-size:.92rem; }.specs dt { color:var(--muted); }.specs dd { margin:0; font-weight:650; }
.contact-card { padding:1.2rem; background:var(--ink); color:#fff; border-radius:14px; }.contact-card p { color:#c5d3d6; }.contact-card .button { background:#fff; color:var(--ink); }.contact-card .button:hover { background:#d9f0ed; }
.site-footer { padding:3rem 0 2rem; background:#0b2029; color:#fff; }.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem; }.site-footer p,.site-footer a { color:#bbcbce; font-size:.92rem; }.site-footer h2 { margin:0; font-size:1.1rem; }.footer-links { display:grid; gap:.45rem; }.copyright { margin-top:2.5rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.15); color:#91a7ab; font-size:.8rem; }
.empty { grid-column:1/-1; padding:3rem; text-align:center; border:1px dashed var(--line); color:var(--muted); }
/* Admin */
.admin-body { background:#eef3f2; }.admin-wrap { width:min(1200px,calc(100% - 32px)); margin:auto; }.admin-top { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }.admin-top a { font-weight:750; }.admin-top nav { display:flex; gap:.7rem; align-items:center; }.admin-panel { padding:1.3rem; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(16,42,53,.05); }.auth-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }.auth-card { width:min(460px,100%); }.auth-card h1,.admin-title h1 { margin:.2rem 0 .65rem; letter-spacing:-.05em; }.auth-card p,.admin-title p { color:var(--muted); }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }.field { display:grid; gap:.4rem; }.field.full { grid-column:1/-1; }.field label { color:#36515a; font-size:.88rem; font-weight:700; }.field input,.field select,.field textarea { width:100%; border:1px solid #cbd9d7; background:#fff; color:var(--ink); border-radius:8px; padding:.68rem .75rem; outline:none; }.field textarea { min-height:110px; resize:vertical; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,124,130,.12); }.field-hint { margin:0; color:var(--muted); font-size:.8rem; }.admin-page { padding:1.8rem 0 4rem; }.admin-head { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; }.admin-head h1 { margin:0; letter-spacing:-.05em; }.admin-list { display:grid; gap:.75rem; }.admin-product { display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:1rem; padding:.75rem; border:1px solid var(--line); border-radius:10px; background:#fff; }.admin-product img { width:76px; height:76px; object-fit:contain; background:#eef3f2; border-radius:7px; }.admin-product h2 { margin:0 0 .15rem; font-size:1rem; }.admin-product p { margin:0; color:var(--muted); font-size:.85rem; }.status { display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.73rem; font-weight:750; }.status.live { color:#056c4a; background:#dbf5e7; }.status.draft { color:#76560b; background:#fff3cc; }.admin-actions { display:flex; gap:.5rem; }.button-danger { background:#fff; border-color:#d26262; color:#aa2929; }.button-danger:hover { background:#aa2929; color:#fff; }.upload-previews { display:flex; flex-wrap:wrap; gap:.6rem; }.upload-preview { position:relative; width:86px; height:86px; padding:.25rem; background:#eef3f2; border-radius:8px; }.upload-preview img { width:100%; height:100%; object-fit:contain; }.upload-preview button { position:absolute; top:-.35rem; right:-.35rem; width:23px; height:23px; padding:0; border:0; border-radius:50%; background:#102a35; color:#fff; }.message { display:none; margin:1rem 0; padding:.7rem .85rem; border-radius:8px; }.message.show { display:block; }.message.error { color:#8e2222; background:#ffe6e5; }.message.success { color:#075d40; background:#ddf8e9; }.message.info { color:#075d70; background:#e0f4f7; }.setup-note { padding:1rem; border-left:4px solid var(--accent); background:var(--accent-pale); color:#16434a; border-radius:4px; }.hidden { display:none !important; }
.admin-category { display:grid; grid-template-columns:minmax(0,1fr) 130px auto; align-items:end; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:10px; background:#fff; }.category-order { max-width:130px; }
@media (max-width:820px) { .hero,.split,.process,.product-layout { grid-template-columns:1fr; }.hero { padding-top:3.5rem; }.hero-image { min-height:360px; order:-1; }.stat-grid { grid-template-columns:repeat(2,1fr); gap:1rem 0; }.stat:nth-child(3) { border-left:0; padding-left:0; }.product-grid { grid-template-columns:repeat(2,1fr); }.catalog-grid { grid-template-columns:repeat(2,1fr); }.footer-grid { grid-template-columns:1fr 1fr; }.footer-grid > :first-child { grid-column:1/-1; }.split-media { min-height:340px; }.nav-links a:not(.nav-cta) { display:none; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.admin-category { grid-template-columns:1fr 120px; }.admin-category .admin-actions { grid-column:1/-1; } }
@media (max-width:520px) { .shell { width:min(100% - 28px,1160px); }.nav { min-height:62px; }.brand img { width:33px; height:33px; }.nav-links { gap:0; }.nav-links .button { padding:.55rem .7rem; font-size:.86rem; }.hero h1 { font-size:2.7rem; }.product-grid,.catalog-grid { grid-template-columns:1fr; }.section-heading,.admin-head { align-items:start; flex-direction:column; }.stat { padding:.25rem .65rem; }.stat:nth-child(2) { border-left:1px solid rgba(255,255,255,.2); }.process { padding:1.35rem; }.admin-product { grid-template-columns:58px 1fr; }.admin-product img { width:58px; height:58px; }.admin-actions { grid-column:1/-1; }.gallery-main { padding:1rem; }.footer-grid { grid-template-columns:1fr; }.footer-grid > :first-child { grid-column:auto; } }