/* ============================================================
   RA PLUS MEDICAL — Design System
   Refurbished medical equipment · UK
   ============================================================ */

:root{
  /* Palette */
  --ink:        #071A22;   /* deep teal-navy */
  --ink-soft:   #0E2A34;
  --teal:       #0E7C6B;
  --teal-600:   #0B6558;
  --mint:       #34D6B8;
  --mint-glow:  #6EF2D6;
  --sky:        #7FD8E8;
  --paper:      #F4F8F8;
  --paper-2:    #E9F1F0;
  --white:      #FFFFFF;
  --line:       rgba(7,26,34,.10);
  --muted:      #52666E;

  /* Gradients */
  --grad-hero: radial-gradient(120% 120% at 15% 10%, #0E2A34 0%, #071A22 55%, #04121A 100%);
  --grad-mint: linear-gradient(120deg, var(--mint) 0%, var(--sky) 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));

  /* Type */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Rhythm */
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --pad: clamp(20px, 5vw, 64px);
  --shadow-soft: 0 18px 50px -20px rgba(7,26,34,.30);
  --shadow-lift: 0 30px 70px -25px rgba(7,26,34,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:0; }
.wrap{ width:min(1240px,100%); margin-inline:auto; padding-inline:var(--pad); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--mint); border-radius:2px; }
.eyebrow.light{ color:var(--mint-glow); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--bg); color:var(--fg);
  padding:.95rem 1.6rem; border-radius:100px; font-weight:600; font-size:.95rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
  will-change:transform;
}
.btn svg{ width:18px; height:18px; transition:transform .4s var(--ease); }
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.btn:hover svg{ transform:translateX(4px); }
.btn--mint{ --bg:var(--grad-mint); --fg:var(--ink); background-image:var(--grad-mint); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border:1.5px solid var(--line); }
.btn--ghost.on-dark{ --fg:#fff; border-color:rgba(255,255,255,.28); }
.btn--block{ width:100%; justify-content:center; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding:18px 0;
}
.nav.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--line);
  padding:10px 0;
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
.brand__mark{ width:38px; height:38px; flex:0 0 auto; }
.brand small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
/* Logo image */
.brand__logo{ height:36px; width:auto; display:block; transition:filter .4s var(--ease), height .4s var(--ease); }
.nav.scrolled .brand__logo{ height:28px; }
/* On dark surfaces (hero top, footer) render the logo in white */
.nav.on-dark:not(.scrolled) .brand__logo{ filter:brightness(0) invert(1); }
.footer .brand__logo{ filter:brightness(0) invert(1); height:40px; }
.nav__links{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.nav__links a{ font-weight:500; font-size:.95rem; position:relative; padding:.3rem 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--mint); transition:width .35s var(--ease); }
.nav__links a:hover::after,.nav__links a.active::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:.9rem; }
.cart-btn{ position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--paper); transition:background .3s, transform .3s; }
.cart-btn:hover{ background:var(--paper-2); transform:translateY(-2px); }
.cart-btn svg{ width:20px; height:20px; }
.cart-count{ position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; font-size:.68rem; font-weight:700; color:#fff; background:var(--teal); border-radius:100px; border:2px solid #fff; }
.nav__burger{ display:none; width:44px; height:44px; border-radius:12px; background:var(--paper); }
.nav__burger span{ display:block; width:20px; height:2px; margin:4px auto; background:var(--ink); border-radius:2px; transition:.3s; }

/* Nav on dark hero */
.nav.on-dark:not(.scrolled) .brand,
.nav.on-dark:not(.scrolled) .nav__links a{ color:#fff; }
.nav.on-dark:not(.scrolled) .brand small{ color:rgba(255,255,255,.6); }
.nav.on-dark:not(.scrolled) .cart-btn{ background:rgba(255,255,255,.12); }
.nav.on-dark:not(.scrolled) .cart-btn svg{ stroke:#fff; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--grad-hero); color:#fff; overflow:hidden; isolation:isolate;
}
.hero__glow{ position:absolute; inset:0; z-index:-1; }
.hero__glow span{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.hero__glow .g1{ width:520px; height:520px; background:var(--teal); top:-140px; right:-80px; animation:float 14s var(--ease) infinite; }
.hero__glow .g2{ width:420px; height:420px; background:var(--mint); bottom:-160px; left:-60px; opacity:.35; animation:float 18s var(--ease) infinite reverse; }
.hero__grid-lines{ position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(80% 80% at 60% 40%,#000,transparent); }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; padding-top:120px; padding-bottom:60px; }
.hero h1{ font-size:clamp(2.6rem,6vw,4.9rem); margin:.9rem 0 1.2rem; }
.hero h1 em{ font-style:normal; background:var(--grad-mint); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size:1.12rem; color:rgba(255,255,255,.78); max-width:44ch; }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.hero__stats{ display:flex; gap:2.4rem; margin-top:3.2rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.12); }
.hero__stats .num{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; background:var(--grad-mint); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__stats small{ display:block; color:rgba(255,255,255,.6); font-size:.8rem; letter-spacing:.04em; }

/* Hero visual */
.hero__visual{ position:relative; }
.hero__card{
  position:relative; border-radius:var(--r-lg);
  background:var(--grad-glass); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow-lift);
  aspect-ratio:4/4.5;
}
.hero__card .device{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; padding:22px; }
.hero__card .device svg{ width:78%; height:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.4)); animation:bob 6s var(--ease) infinite; }
/* transparent product cut-out sits directly on the dark card */
.hero__card .device img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 28px 42px rgba(0,0,0,.5)); animation:bob 6s var(--ease) infinite; }
.hero__badge{
  position:absolute; display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.92); color:var(--ink); padding:.7rem 1rem; border-radius:14px;
  font-size:.82rem; font-weight:600; box-shadow:var(--shadow-soft); backdrop-filter:blur(6px);
}
.hero__badge svg{ width:22px; height:22px; }
.hero__badge.b1{ top:auto; bottom:28px; left:-18px; z-index:4; animation:bob 5s var(--ease) infinite; }
.hero__badge.b2{ top:88px; bottom:auto; right:-18px; z-index:4; animation:bob 7s var(--ease) infinite .5s; }
.pill-row{ position:absolute; top:16px; left:16px; right:16px; z-index:3; display:flex; gap:.5rem; flex-wrap:wrap; }
.pill{ font-size:.72rem; font-weight:600; letter-spacing:.04em; padding:.4rem .8rem; border-radius:100px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(4px); }

/* ---------- Marquee ---------- */
.marquee{ background:var(--ink); color:rgba(255,255,255,.5); padding:20px 0; overflow:hidden; }
.marquee__track{ display:flex; gap:4rem; width:max-content; animation:scroll 28s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:.02em; white-space:nowrap; display:flex; align-items:center; gap:1rem; }
.marquee__track span::after{ content:"✦"; color:var(--mint); }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- Sections ---------- */
section{ position:relative; }
.section{ padding:clamp(64px,9vw,130px) 0; }
.section--paper{ background:var(--paper); }
.section__head{ max-width:640px; margin-bottom:3.4rem; }
.section__head.center{ margin-inline:auto; text-align:center; }
.section__head h2{ font-size:clamp(2rem,4.4vw,3.2rem); margin:.8rem 0 1rem; }
.section__head p{ color:var(--muted); font-size:1.05rem; }

/* ---------- Category cards ---------- */
.cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.cat{
  position:relative; border-radius:var(--r-lg); overflow:hidden; padding:26px;
  min-height:280px; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--white); border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.cat::after{ content:""; position:absolute; inset:auto -40% -60% auto; width:220px; height:220px; border-radius:50%; background:var(--grad-mint); opacity:0; transition:opacity .5s, transform .6s var(--ease); filter:blur(10px); }
.cat:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); border-color:transparent; }
.cat:hover::after{ opacity:.18; transform:scale(1.4); }
.cat__icon{ width:62px; height:62px; border-radius:16px; display:grid; place-items:center; background:var(--paper); transition:background .4s, transform .5s var(--ease); }
.cat:hover .cat__icon{ background:var(--grad-mint); transform:rotate(-6deg) scale(1.06); }
.cat__icon svg{ width:32px; height:32px; }
.cat h3{ font-size:1.3rem; margin-top:1.4rem; }
.cat p{ color:var(--muted); font-size:.9rem; margin:.4rem 0 0; }
.cat__go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.2rem; font-weight:600; font-size:.9rem; color:var(--teal); }
.cat__go svg{ width:16px; transition:transform .4s var(--ease); }
.cat:hover .cat__go svg{ transform:translateX(5px); }
.cat--wide{ grid-column:span 2; background:var(--grad-hero); color:#fff; }
.cat--wide p{ color:rgba(255,255,255,.7); }
.cat--wide .cat__icon{ background:rgba(255,255,255,.12); }
.cat--wide .cat__go{ color:var(--mint-glow); }

/* ---------- Products ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.product{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.product:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.product__link{ display:flex; flex-direction:column; flex:1; color:inherit; }
.product__media{ position:relative; aspect-ratio:4/3.2; background:linear-gradient(160deg,var(--paper),var(--paper-2)); display:grid; place-items:center; overflow:hidden; }
.product__media svg{ width:62%; height:auto; transition:transform .6s var(--ease); }
.product:hover .product__media svg{ transform:scale(1.06) rotate(-2deg); }
.product__media img{ width:100%; height:100%; object-fit:contain; padding:6%; transition:transform .6s var(--ease); }
.product__media.has-photo img{ object-fit:cover; padding:0; }
.product:hover .product__media img{ transform:scale(1.05); }
.product__tag{ position:absolute; top:14px; left:14px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .7rem; border-radius:100px; background:var(--ink); color:#fff; }
.product__tag.refurb{ background:var(--grad-mint); color:var(--ink); }
.product__grade{ position:absolute; top:14px; right:14px; font-size:.7rem; font-weight:700; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.9); color:var(--teal); box-shadow:var(--shadow-soft); }
.product__body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.product__cat{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.product h3{ font-size:1.12rem; }
.product__view{ margin-top:auto; padding-top:1.1rem; display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.9rem; color:var(--teal); }
.product__view svg{ width:16px; height:16px; transition:transform .4s var(--ease); }
.product:hover .product__view svg{ transform:translateX(5px); }
.product__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:1rem; }
.product__price{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; }
.product__price small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.72rem; color:var(--muted); }
.add-btn{ width:44px; height:44px; border-radius:50%; background:var(--ink); display:grid; place-items:center; transition:transform .3s, background .3s; }
.add-btn svg{ width:20px; height:20px; stroke:#fff; }
.add-btn:hover{ background:var(--teal); transform:scale(1.08) rotate(90deg); }

/* ---------- Filters (shop) ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.4rem; }
.filters button{ padding:.6rem 1.15rem; border-radius:100px; font-weight:600; font-size:.88rem; background:var(--paper); color:var(--muted); border:1px solid transparent; transition:.3s; }
.filters button:hover{ color:var(--ink); }
.filters button.active{ background:var(--ink); color:#fff; }

/* ---------- Process ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; position:relative; }
.process::before{ content:""; position:absolute; top:38px; left:8%; right:8%; height:2px; background:linear-gradient(90deg,transparent,var(--line),var(--line),transparent); }
.step{ text-align:center; position:relative; }
.step__num{ width:76px; height:76px; margin:0 auto 1.4rem; border-radius:50%; display:grid; place-items:center; background:var(--white); border:1px solid var(--line); font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--teal); box-shadow:var(--shadow-soft); position:relative; z-index:1; transition:transform .5s var(--ease), background .4s, color .4s; }
.step:hover .step__num{ background:var(--grad-mint); color:var(--ink); transform:translateY(-6px) scale(1.05); }
.step h3{ font-size:1.15rem; margin-bottom:.5rem; }
.step p{ color:var(--muted); font-size:.9rem; }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.split__visual{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1; background:var(--grad-hero); display:grid; place-items:center; box-shadow:var(--shadow-lift); }
.split__visual svg{ width:70%; animation:bob 7s var(--ease) infinite; }
.split__visual .ring{ position:absolute; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.check-list{ list-style:none; padding:0; margin:1.6rem 0 2rem; display:grid; gap:1rem; }
.check-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.check-list .ico{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; }
.check-list .ico svg{ width:16px; height:16px; stroke:var(--teal); }
.check-list b{ display:block; }
.check-list span{ color:var(--muted); font-size:.92rem; }

/* ---------- Stats band ---------- */
.stats-band{ background:var(--grad-hero); color:#fff; }
.stats-band .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem); background:var(--grad-mint); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat p{ color:rgba(255,255,255,.65); margin:.3rem 0 0; font-size:.92rem; }

/* ---------- Quote ---------- */
.quote{ text-align:center; max-width:900px; margin-inline:auto; }
.quote blockquote{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.25; letter-spacing:-.02em; margin:1.4rem 0 2rem; }
.quote blockquote em{ font-style:normal; color:var(--teal); }
.quote .who{ font-weight:600; }
.quote .who small{ display:block; color:var(--muted); font-weight:500; }

/* ---------- CTA ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--grad-hero); color:#fff; padding:clamp(40px,7vw,80px); text-align:center; isolation:isolate; }
.cta-band .glow{ position:absolute; width:400px; height:400px; border-radius:50%; background:var(--mint); filter:blur(90px); opacity:.35; top:-120px; left:50%; transform:translateX(-50%); z-index:-1; }
.cta-band h2{ font-size:clamp(2rem,4.6vw,3.2rem); }
.cta-band p{ color:rgba(255,255,255,.72); max-width:52ch; margin:1rem auto 2rem; }
.cta-band .actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:rgba(255,255,255,.66); padding-top:clamp(56px,8vw,90px); }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.4rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer .brand{ color:#fff; margin-bottom:1rem; }
.footer p{ font-size:.92rem; max-width:34ch; }
.footer h4{ color:#fff; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.2rem; font-family:var(--font-body); font-weight:700; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.footer ul a{ font-size:.92rem; transition:color .3s; }
.footer ul a:hover{ color:var(--mint-glow); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding:1.8rem 0; font-size:.84rem; }
.footer__social{ display:flex; gap:.6rem; }
.footer__social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:.3s; }
.footer__social a:hover{ background:var(--grad-mint); transform:translateY(-3px); }
.footer__social svg{ width:18px; height:18px; }

/* ---------- Cart drawer ---------- */
.overlay{ position:fixed; inset:0; background:rgba(7,26,34,.5); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:.4s; z-index:200; }
.overlay.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:#fff; z-index:201; transform:translateX(100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; box-shadow:var(--shadow-lift); }
.drawer.open{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:24px; border-bottom:1px solid var(--line); }
.drawer__head h3{ font-size:1.2rem; }
.drawer__close{ width:40px; height:40px; border-radius:50%; background:var(--paper); display:grid; place-items:center; }
.drawer__items{ flex:1; overflow-y:auto; padding:16px 24px; display:flex; flex-direction:column; gap:1rem; }
.drawer__empty{ text-align:center; color:var(--muted); margin-top:3rem; }
.cart-item{ display:flex; gap:1rem; align-items:center; }
.cart-item__img{ width:64px; height:64px; border-radius:12px; background:var(--paper); display:grid; place-items:center; flex:0 0 auto; }
.cart-item__img svg{ width:60%; }
.cart-item h4{ font-family:var(--font-body); font-size:.95rem; font-weight:600; }
.cart-item small{ color:var(--muted); }
.cart-item__rm{ margin-left:auto; color:var(--muted); font-size:1.2rem; }
.drawer__foot{ padding:24px; border-top:1px solid var(--line); }
.drawer__total{ display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin-bottom:1rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ background:var(--grad-hero); color:#fff; padding:150px 0 80px; position:relative; overflow:hidden; }
.page-hero .g{ position:absolute; width:400px; height:400px; border-radius:50%; background:var(--teal); filter:blur(90px); opacity:.4; top:-140px; right:-60px; }
.page-hero h1{ font-size:clamp(2.4rem,5vw,4rem); margin:.8rem 0; }
.page-hero p{ color:rgba(255,255,255,.72); max-width:52ch; }

/* ---------- Contact / forms ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; letter-spacing:.02em; }
.field input,.field textarea,.field select{ width:100%; padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:14px; font-family:inherit; font-size:.95rem; background:var(--paper); transition:.3s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px rgba(52,214,184,.15); }
.info-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; display:grid; gap:1.4rem; box-shadow:var(--shadow-soft); }
.info-row{ display:flex; gap:1rem; align-items:flex-start; }
.info-row .ico{ width:46px; height:46px; border-radius:14px; background:var(--paper); display:grid; place-items:center; flex:0 0 auto; }
.info-row .ico svg{ width:22px; stroke:var(--teal); }
.info-row b{ display:block; }
.info-row span{ color:var(--muted); font-size:.92rem; }

/* ---------- Product detail ---------- */
.pd-page{ padding-top:120px; }
.pd__crumbs{ font-size:.85rem; color:var(--muted); margin-bottom:1.8rem; }
.pd__crumbs a:hover{ color:var(--teal); }
.pd__crumbs span{ color:var(--ink); font-weight:600; }
.pd{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:start; }
.pd__main{ border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(160deg,var(--paper),var(--paper-2)); aspect-ratio:4/3.4; display:grid; place-items:center; box-shadow:var(--shadow-soft); }
.pd__main img{ width:100%; height:100%; object-fit:contain; padding:7%; }
.pd__main.has-photo img{ object-fit:cover; padding:0; }
.pd__thumbs{ display:flex; gap:.8rem; margin-top:.9rem; }
.pd__thumb{ width:84px; height:84px; border-radius:14px; overflow:hidden; background:var(--paper); border:2px solid transparent; transition:border-color .3s, transform .3s; }
.pd__thumb img{ width:100%; height:100%; object-fit:cover; }
.pd__thumb:hover{ transform:translateY(-2px); }
.pd__thumb.active{ border-color:var(--teal); }
.pd__info h1{ font-size:clamp(1.9rem,3.6vw,2.8rem); margin:.7rem 0 1rem; }
.pd__meta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.4rem; }
.pd__grade,.pd__cond,.pd__stock{ font-size:.8rem; font-weight:600; padding:.4rem .85rem; border-radius:100px; }
.pd__grade{ background:var(--grad-mint); color:var(--ink); }
.pd__cond{ background:var(--paper-2); color:var(--muted); }
.pd__stock{ background:rgba(14,124,107,.1); color:var(--teal); display:inline-flex; align-items:center; gap:.4rem; }
.pd__stock i{ width:8px; height:8px; border-radius:50%; background:var(--teal); }
.pd__blurb{ color:var(--muted); font-size:1.05rem; }
.pd__price{ font-family:var(--font-display); font-weight:700; font-size:2.4rem; margin:1.4rem 0; }
.pd__price small{ font-family:var(--font-body); font-weight:500; font-size:1rem; color:var(--muted); }
.pd__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.pd__features{ list-style:none; padding:1.6rem 0 0; margin:0; border-top:1px solid var(--line); display:grid; gap:.9rem; }
.pd__features li{ display:flex; align-items:center; gap:.8rem; font-size:.96rem; }
.pd__features .ico{ width:28px; height:28px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; flex:0 0 auto; }
.pd__features .ico svg{ width:15px; stroke:var(--teal); }
.pd__specs{ margin-top:clamp(48px,7vw,90px); max-width:720px; }
.pd__specs h2{ font-size:1.6rem; margin-bottom:1.2rem; }
.pd__specs table{ width:100%; border-collapse:collapse; }
.pd__specs tr{ border-bottom:1px solid var(--line); }
.pd__specs th{ text-align:left; padding:1rem 0; font-weight:600; width:38%; vertical-align:top; }
.pd__specs td{ padding:1rem 0; color:var(--muted); }
.pd__related{ margin-top:clamp(48px,7vw,90px); }
.pd__related .section__head{ margin-bottom:2rem; }

/* ---------- Category directory (shop) ---------- */
.cat-search{ position:relative; max-width:520px; margin-bottom:2.6rem; }
.cat-search input{ width:100%; padding:1rem 1.2rem 1rem 3.1rem; border:1px solid var(--line); border-radius:100px; font-family:inherit; font-size:1rem; background:var(--paper); transition:.3s; }
.cat-search input:focus{ outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px rgba(52,214,184,.15); }
.cat-search svg{ position:absolute; left:1.15rem; top:50%; transform:translateY(-50%); width:20px; height:20px; stroke:var(--muted); }
.cat-dir{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.catcard{ display:flex; align-items:center; gap:1.1rem; padding:20px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; position:relative; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.catcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:transparent; }
.catcard__icon{ width:58px; height:58px; border-radius:15px; background:var(--paper); color:var(--teal); display:grid; place-items:center; flex:0 0 auto; transition:background .4s, color .4s, transform .5s var(--ease); }
.catcard:hover .catcard__icon{ background:var(--grad-mint); color:var(--ink); transform:rotate(-6deg); }
.catcard__icon svg{ width:30px; height:30px; }
.catcard__body{ flex:1; min-width:0; }
.catcard__body h3{ font-size:1.08rem; }
.catcard__body p{ color:var(--muted); font-size:.84rem; margin:.2rem 0 .5rem; }
.catcard__meta{ display:flex; flex-wrap:wrap; gap:.7rem; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.catcard__stock{ color:var(--teal); }
.catcard__go{ width:20px; height:20px; color:var(--muted); flex:0 0 auto; transition:transform .4s var(--ease), color .4s; }
.catcard:hover .catcard__go{ transform:translateX(4px); color:var(--teal); }

/* ---------- Category page ---------- */
.cat-page{ padding-top:120px; }
.cathead{ display:flex; gap:1.6rem; align-items:flex-start; margin-top:1.4rem; }
.cathead__icon{ width:84px; height:84px; border-radius:22px; background:var(--grad-mint); color:var(--ink); display:grid; place-items:center; flex:0 0 auto; box-shadow:var(--shadow-soft); }
.cathead__icon svg{ width:44px; height:44px; }
.cathead h1{ font-size:clamp(2rem,4.4vw,3rem); }
.cathead p{ color:var(--muted); margin:.5rem 0 .9rem; font-size:1.05rem; }
.cathead__meta{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.82rem; font-weight:700; color:var(--teal); letter-spacing:.02em; }
.cat-section{ margin-top:clamp(42px,6vw,74px); }
.cat-section .section__head{ margin-bottom:1.6rem; }
.subgroup{ margin-bottom:2rem; }
.subgroup h4{ font-family:var(--font-display); font-size:1.1rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem; }
.subgroup h4::before{ content:""; width:22px; height:2px; background:var(--mint); border-radius:2px; }
.subgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.7rem; }
.subchip{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.85rem 1.1rem; border:1px solid var(--line); border-radius:12px; background:#fff; font-family:inherit; font-weight:600; font-size:.9rem; color:var(--ink); text-align:left; transition:.3s; }
.subchip:hover{ border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.subchip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.subchip.has-stock{ border-color:rgba(14,124,107,.35); }
.subchip .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); flex:0 0 auto; }
.cat-note{ color:var(--muted); font-size:1.02rem; max-width:52ch; }
.cat-empty{ text-align:center; padding:3rem 2rem; background:var(--paper); border-radius:var(--r-lg); }
.cat-empty p{ color:var(--muted); margin-bottom:1.2rem; }

/* ---------- Category hover background image ---------- */
.cat__bg, .catcard__bg{
  position:absolute; inset:0; z-index:0; border-radius:inherit;
  background-size:cover; background-position:center; opacity:0;
  transition:opacity .5s var(--ease); pointer-events:none;
}
.cat > *:not(.cat__bg){ position:relative; z-index:1; }
.catcard > *:not(.catcard__bg){ position:relative; z-index:1; }
.catcard{ overflow:hidden; }
/* when an image is present, reveal it on hover and flip text to white */
.cat.has-bg::after{ display:none; }
.cat.has-bg:hover .cat__bg,
.catcard.has-bg:hover .catcard__bg{ opacity:1; }
.cat.has-bg:hover h3, .cat.has-bg:hover p, .cat.has-bg:hover .cat__go,
.cat.has-bg:hover .cat__icon{ color:#fff; }
.cat.has-bg:hover .cat__go svg{ stroke:#fff; }
.cat.has-bg:hover .cat__icon{ background:rgba(255,255,255,.16); }
.catcard.has-bg:hover h3, .catcard.has-bg:hover p,
.catcard.has-bg:hover .catcard__meta span, .catcard.has-bg:hover .catcard__go{ color:#fff; }
.catcard.has-bg:hover .catcard__icon{ background:rgba(255,255,255,.16); color:#fff; }

/* ---------- Reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }

/* ---------- Keyframes ---------- */
@keyframes float{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(30px,-30px); } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes scroll{ to{ transform:translateX(-50%); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; gap:2rem; padding-top:130px; }
  .hero__visual{ max-width:440px; }
  .cats{ grid-template-columns:repeat(2,1fr); }
  .cat--wide{ grid-column:span 2; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); row-gap:2.4rem; }
  .process::before{ display:none; }
  .split{ grid-template-columns:1fr; }
  .pd{ grid-template-columns:1fr; gap:2rem; }
  .cat-dir{ grid-template-columns:repeat(2,1fr); }
  .stats-band .grid{ grid-template-columns:repeat(2,1fr); gap:2.4rem; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .nav__links, .nav__cta .btn{ display:none; }
  .nav__burger{ display:block; }
  .nav__links.mobile-open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:#fff; padding:1.4rem var(--pad); gap:1.2rem; box-shadow:var(--shadow-soft); }
  .cats,.prod-grid{ grid-template-columns:1fr; }
  .cat-dir{ grid-template-columns:1fr; }
  .cathead{ flex-direction:column; gap:1rem; }
  .cat--wide{ grid-column:span 1; }
  .hero__stats{ gap:1.4rem; flex-wrap:wrap; }
  .stats-band .grid{ grid-template-columns:1fr 1fr; }
  .hero__badge{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}