:root{
  --ink-navy:#2C3457;
  --soft-blue:#6C8EF8;
  --inquiry-gold:#E6B74C;
  --paper:#F9FAFB;
  --graphite:#3E4A66;
  --glow-blue:#A5B4FC;
  /* Derived tokens */
  --bg: var(--paper);
  --text: var(--graphite);
  --panel: #ffffff;
  --border:#e6e8ef;
  --muted:#6a7288;
}

[data-theme="dark"]{\n  --bg:#0d1428;\n  --text:#E7ECFF;\n  --panel:#0f1a34;\n  --border:#23304d;\n  --muted:#a7b0c9;\n}\n

[data-theme="dark"]{
  --bg:#121a34;        /* slightly lighter background */
  --text:#EAF0FF;      /* high-contrast text */
  --panel:#16244a;     /* lighter panels */
  --border:#2c3d63;    /* softened borders */
  --muted:#b8c2db;     /* readable secondary text */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
@font-face{font-family:'Lovelo';src:local('Lovelo'), url('/assets/fonts/Lovelo-Black.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

body{
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  display:flex;flex-direction:column;min-height:100vh
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in oklab, var(--panel) 80%, transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:120px;height:auto;padding:8px 0}

.brand{display:flex;gap:.6rem;align-items:center;text-decoration:none}
.brand-logo{height:114px;width:auto;display:block}

.menu-toggle{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;padding:10px 14px;display:none;align-items:center;gap:.5rem;font-weight:700;cursor:pointer}
.menu-toggle:hover{border-color:color-mix(in oklab, var(--soft-blue) 60%, var(--border))}
.menu-icon{position:relative;display:inline-block;width:18px;height:12px}
.menu-icon::before,.menu-icon::after,.menu-icon span{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
.menu-icon::before{top:0}
.menu-icon::after{bottom:0}
.menu-icon span{top:5px}

/* Desktop nav */
.nav{display:flex;align-items:center}
.nav a{color:var(--text);text-decoration:none;margin:0 .6rem;font-weight:700}
.nav a:hover{color:var(--soft-blue)}

/* Side drawer */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(1px);z-index:39}
.side-drawer{position:fixed;top:0;left:0;height:100%;width:290px;max-width:88vw;background:var(--panel);border-right:1px solid var(--border);box-shadow:4px 0 18px rgba(0,0,0,.25);transform:translateX(-100%);transition:transform .22s ease;z-index:40;display:flex;flex-direction:column}
.side-drawer.open{transform:translateX(0)}
.side-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px;border-bottom:1px solid var(--border)}
.side-title{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.menu-close{appearance:none;background:none;border:none;color:var(--text);font-size:24px;line-height:1;cursor:pointer}
.side-nav{display:flex;flex-direction:column;padding:8px 12px 16px 12px}
.side-nav a{padding:10px 10px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:700}
.side-nav a:hover{background:color-mix(in oklab, var(--panel) 80%, var(--border))}

body.no-scroll{overflow:hidden}

.actions{display:flex;align-items:center;gap:.6rem}
.btn-primary,.btn-secondary{padding:.5rem .9rem;border-radius:10px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--soft-blue);color:white}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{border:1px solid var(--text);color:var(--text);background:transparent}
.cart{color:var(--text);text-decoration:none}
.badge{display:inline-block;min-width:20px;padding:2px 6px;border-radius:999px;background:var(--ink-navy);color:white;text-align:center;margin-left:.35rem;font-size:.8rem}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg, #ffffff 0%, #f3f5fb 60%, #fff 100%);border-bottom:1px solid var(--border)}
[data-theme="dark"] .hero{background:linear-gradient(180deg, #15224a 0%, #111d3f 60%, #0f1a36 100%)}
.hero-top{display:flex;justify-content:center;align-items:center;padding:48px 0 8px}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;padding:32px 0 72px}
.hero-banner{max-width:clamp(520px, 72vw, 1280px);width:100%;--banner-crop:clamp(8px, 2.2vw, 28px);overflow:hidden}
.hero-banner-img{display:block;width:100%;height:auto;margin-top:calc(-1 * var(--banner-crop));margin-bottom:calc(-1 * var(--banner-crop))}
[data-theme="dark"] .hero-banner{background:rgba(255,255,255,0.03);border:1px solid color-mix(in oklab, var(--soft-blue) 25%, transparent);border-radius:16px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.hero h1{margin:0;font-size:clamp(32px, 4vw, 48px);line-height:1.06;color:var(--text)}
.hero p{font-size:1.05rem;color:var(--muted)}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.hero-logo{max-width:clamp(320px, 46vw, 960px);width:100%;height:auto;margin:0 auto 12px auto;display:block}

/* Animated logo pulse */
/* brand animations removed */

/* Hex glow backdrop */
.lab-bg{position:absolute;left:0;right:0;bottom:0;top:clamp(60px, 10vw, 160px);pointer-events:none}
.hex{position:absolute;width:160px;height:92px;background:conic-gradient(from 0deg at 50% 50%, color-mix(in lab, var(--soft-blue) 50%, transparent), transparent 60%);opacity:.16;transform:rotate(90deg) scale(var(--s,1));filter:drop-shadow(0 0 18px var(--glow-blue));animation:float 9s ease-in-out infinite}
/* Spread positions to avoid clustering and vary speed */
.hex:nth-child(2){left:8%; top:35%; animation-delay:1.0s; animation-duration:8.2s}
.hex:nth-child(3){right:10%; top:48%; animation-delay:2.2s; animation-duration:9.8s}
.hex:nth-child(4){left:14%; bottom:10%; animation-delay:3.1s; animation-duration:9.0s}
.hex:nth-child(5){left:46%; top:30%; --s:.9; animation-delay:1.5s; animation-duration:8.8s}
.hex:nth-child(6){right:18%; bottom:18%; --s:1.1; animation-delay:2.0s; animation-duration:8.6s}
.hex:nth-child(7){left:58%; top:52%; --s:.9; animation-delay:.8s; animation-duration:9.4s}
.hex:nth-child(8){left:82%; top:70%; --s:1.05; animation-delay:2.6s; animation-duration:8.4s}
.hex:nth-child(9){left:28%; bottom:26%; --s:.85; animation-delay:1.3s; animation-duration:9.2s}
@keyframes float{0%,100%{transform:translateY(0) rotate(90deg) scale(var(--s,1))}50%{transform:translateY(-22px) rotate(90deg) scale(var(--s,1))}}

/* Reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
.fade-left{transform:translateX(-18px)}
.fade-right{transform:translateX(18px)}
.fade-left.in,.fade-right.in{transform:none}

/* Subtle parallax container */
.parallax{will-change:transform;transition:transform .2s ease-out}

/* Improve readability of hero heading in dark mode */
[data-theme="dark"] .hero-title{ color:#ffffff; text-shadow:0 2px 8px rgba(0,0,0,.45) !important; }

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px}
.card h3{margin:.25rem 0;color:var(--text)}
.card p{margin:.25rem 0;color:var(--muted)}
/* Light mode: soft science blue cards */
[data-theme="light"] .card{background:color-mix(in oklab, var(--soft-blue) 12%, #fff);border-color:color-mix(in oklab, var(--soft-blue) 28%, var(--border))}

/* Sections */
.section{padding:56px 0}
.section h2{margin:0 0 8px 0;color:var(--text)}
.muted{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:var(--panel)}
.footer-inner{display:grid;grid-template-columns:1fr;gap:1.2rem;padding:28px 0}
.footer-news{max-width:840px;margin:0 auto;text-align:center}
.footer-news h3{margin:0 0 6px 0;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.footer-news p{margin:0 0 10px 0;color:var(--muted)}
.newsletter{display:flex;gap:8px;justify-content:center}
.newsletter input[type=email]{max-width:520px;width:100%;padding:.8rem 1rem;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text)}
.newsletter button{padding:.8rem 1rem;border-radius:10px;font-weight:700;background:var(--soft-blue);color:#fff;border:none}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1100px;margin:0 auto;width:100%}
.footer-col h4{margin:0 0 10px 0;font-weight:700;color:var(--text)}
.footer-links a{display:block;margin:8px 0;color:var(--text);text-decoration:none}
.footer-links a:hover{color:var(--soft-blue)}
.footer-copy{color:var(--muted);font-size:.9rem;text-align:center}
.logo-mini{display:inline-flex;gap:.25rem;align-items:center;margin-bottom:.25rem}

/* Utilities */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lead{font-size:1.1rem;color:#56607a}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:12px;text-decoration:none;font-weight:700;transition:transform .08s ease, box-shadow .18s ease, filter .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
.btn:active{transform:none;filter:brightness(.98)}
.btn-gold{background:var(--inquiry-gold);color:#1b1b1b}
.btn-gold:hover{filter:brightness(1.05);box-shadow:0 6px 14px color-mix(in oklab, var(--inquiry-gold) 40%, transparent)}
/* More recognisable outline buttons */
.btn-outline{
  border:2px solid color-mix(in oklab, var(--soft-blue) 35%, #cdd2e0);
  color:var(--text);
  background:color-mix(in oklab, var(--panel) 92%, var(--soft-blue) 8%);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.btn-outline:hover{
  border-color:var(--soft-blue);
  background:color-mix(in oklab, var(--panel) 80%, var(--soft-blue) 20%);
}
.btn-secondary:hover{background:color-mix(in oklab, var(--panel) 88%, var(--soft-blue) 12%);border-color:var(--soft-blue)}

/* Add-to-cart click animation */
.add-to-cart.adding{position:relative;transform:scale(0.98);box-shadow:0 0 0 8px color-mix(in oklab, var(--inquiry-gold) 40%, transparent);transition:transform .12s}
.add-to-cart.added{background:var(--soft-blue);color:#fff}
.add-to-cart.added::after{content:'✓ Added';margin-left:.5rem;font-weight:800}

/* Forms */
form label{display:block;margin:.5rem 0 .25rem .1rem;font-weight:600;color:var(--ink-navy)}
input[type=email],input[type=password],input[type=text]{width:100%;padding:.65rem .75rem;border:1px solid #ccd2e2;border-radius:10px}
.form-actions{margin-top:12px;display:flex;gap:.6rem;align-items:center}

/* Shop grid */
.product{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;display:flex;flex-direction:column}
.product .title{font-weight:700;color:var(--text)}
/* Light mode: soft blue product tiles */
[data-theme="light"] .product{background:color-mix(in oklab, var(--soft-blue) 10%, #fff);border-color:color-mix(in oklab, var(--soft-blue) 24%, var(--border))}
.product .title{font-weight:700;color:var(--text)}
.product .meta{color:#6b7390;font-size:.9rem}
.price{font-weight:800;color:var(--text)}
.product .actions{margin-top:auto}

/* Responsive */
@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr}
  /* Show mobile menu button, hide desktop nav */
  .menu-toggle{display:inline-flex}
  .nav{display:none}
  .footer-inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-col{text-align:center}
  .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.2rem;justify-items:center}
  .footer-links a{margin:6px 0}
}

/* Overrides after dark mode removal */
.add-to-cart.added::after{content:'? Added';margin-left:.5rem;font-weight:800}
.reduced-motion *{animation:none!important;transition:none!important}
html{scroll-behavior:smooth}
.site-header{flex:0 0 auto}
main{flex:1 0 auto}
.site-footer{flex:0 0 auto}