/* Palette (light theme)
--bg: #F7FBFA (page background)
--card: #FFFFFF (cards & surfaces)
--text: #1C2A2E (primary text)
--muted: #5A6B70 (secondary text)
--accent: #2B4C59 (brand deep teal)
--accent-2: #7AC1A3 (soft mint accent)
--link: #1D6F8C (links & info)
--border: #E0E7E9 (borders & lines)
--shadow: rgba(16, 32, 38, 0.12) (elevation)
*/

:root{
  --bg:#F7FBFA;
  --card:#FFFFFF;
  --text:#1C2A2E;
  --muted:#5A6B70;
  --accent:#2B4C59;
  --accent-2:#7AC1A3;
  --link:#1D6F8C;
  --border:#E0E7E9;
  --shadow:rgba(16,32,38,0.12);
}

*{ box-sizing: border-box; }
html{ color-scheme: light; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

a{ color:var(--link); text-decoration: none; }
a:hover, a:focus{ text-decoration: underline; }

img{ max-width:100%; height:auto; display:block; }

.container{ width:min(1200px, 90%); margin-inline:auto; }

.site-header{
  position:sticky; top:0; z-index:10;
  background:var(--card);
  border-bottom:1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); font-weight:600; }
.logo, .logo-img{ width:32px; height:32px; }
.logo path:first-child{ fill: var(--accent); }
.logo path:last-child{ fill: var(--accent-2); }

.site-nav ul{ display:flex; gap:16px; list-style:none; padding:0; margin:0; }
.site-nav a{ padding:8px 10px; border-radius:10px; }
.site-nav a[aria-current="page"]{ background:var(--accent-2); color:#0f2520; }

.hero{ padding:32px 0 16px; background:linear-gradient(180deg, #fff, transparent); }
.hero-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:24px; align-items:center; }
.hero-copy h1{ font-size: clamp(28px, 4vw, 44px); line-height:1.15; margin:0 0 10px; }
.hero-copy p{ margin:0 0 16px; color:var(--muted); }
.hero-actions{ display:flex; gap:12px; }
.hero-visual img{ border-radius:16px; box-shadow: 0 6px 24px var(--shadow); border:1px solid var(--border); }

.btn{ display:inline-block; padding:10px 16px; border-radius:12px; border:1px solid var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .2s; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 20px var(--shadow); }
.btn:focus{ outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset:2px; }
.btn-primary{ background:var(--accent); color:#fff; border-color:transparent; }
.btn-outline{ background:transparent; color:var(--accent); }
.btn-small{ padding:8px 12px; font-size:.95rem; }

.section{ padding:32px 0; }
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:28px; }
.cards .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow: 0 4px 16px var(--shadow); padding:18px; }
.cards .product img{ aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid var(--border); }

.price{ font-weight:700; color:var(--accent); }
.price-lg{ font-size:1.6rem; color:var(--accent); font-weight:700; margin:6px 0 12px; }

.cards-text .card h3{ margin-top:0; }
.muted{ color:var(--muted); }

.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.table{ width:100%; border-collapse: collapse; min-width:560px; }
.table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; }
.table thead th{ background:#f3f7f6; }

.product-detail{ padding:24px 0; max-width:800px; }
.product-detail .specs{ padding-left:18px; }
.product-detail .actions{ display:flex; align-items:flex-start; gap:16px; margin-top:16px; }
.notice{ background:#f4faf7; border:1px solid #d4eee2; color:#0f3a2f; padding:10px 12px; border-radius:10px; max-width:380px; }

.cta{ padding:28px 0 40px; background: linear-gradient(180deg, transparent, #eef7f3); text-align:center; }
.cta h2{ font-size: clamp(22px, 3.2vw, 32px); margin:0 0 8px; }

.site-footer{ margin-top:24px; border-top:1px solid var(--border); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; flex-wrap:wrap; }
.site-footer nav{ display:flex; gap:12px; }

/* Forms */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
input[type="text"], input[type="email"], textarea{
  padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--text);
}
input:focus, textarea:focus{ outline:3px solid color-mix(in srgb, var(--accent-2) 55%, transparent); outline-offset:2px; }

/* Accessibility */
:focus-visible{ outline:3px solid color-mix(in srgb, var(--link) 55%, transparent); outline-offset:2px; }

/* Utility */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.icon-note{ font-size:.9rem; color:var(--muted); }

/* Responsive */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .site-nav ul{ gap:8px; }
  .hero{ padding-top:20px; }
  .grid-2{ grid-template-columns: 1fr; }
}