/* ============================================================
   ECO OPTICS — Shared stylesheet
   Used by index.html and all inner pages.
============================================================ */

/* === DESIGN TOKENS === */
:root{
  --brand-900:#1a1f4d;
  --brand-700:#2a3071;
  --brand-600:#3d47a8;
  --brand-500:#5560c9;
  --brand-50:#f4f5fb;
  --accent:#c9a961;
  --accent-dark:#a88a45;
  --ink:#0f1419;
  --muted:#6b7280;
  --surface:#ffffff;
  --bg:#fafaf7;
  --success:#16a34a;
  --border:#e5e7eb;
  --border-strong:#d1d5db;

  --font-display:"Fraunces","Times New Roman",serif;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --s-xs:4px; --s-sm:8px; --s-md:16px; --s-lg:24px;
  --s-xl:32px; --s-2xl:48px; --s-3xl:64px; --s-4xl:96px; --s-5xl:128px;

  --r-card:12px; --r-btn:8px; --r-input:6px; --r-pill:999px;

  --shadow-sm:0 1px 3px rgba(15,20,25,0.06);
  --shadow-md:0 1px 3px rgba(15,20,25,0.06), 0 8px 24px rgba(15,20,25,0.04);
  --shadow-lg:0 4px 6px rgba(15,20,25,0.05), 0 20px 40px rgba(15,20,25,0.08);

  --container:1240px;
}

/* === RESET / BASE === */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);
  font-size:clamp(1rem,1.1vw,1.125rem);line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--brand-900);letter-spacing:-0.015em;margin:0;}
h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.05;}
h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.15;letter-spacing:-0.02em;}
h3{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.25;}
p{margin:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--s-lg);}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand-900);color:#fff;padding:10px 14px;border-radius:6px;z-index:9999;}
.skip:focus{left:16px;top:16px;}

/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:var(--r-btn);
  font-weight:600;font-size:15px;letter-spacing:0.005em;
  text-decoration:none;border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .2s ease, background .18s ease, color .18s ease;
  cursor:pointer;
}
.btn .arrow{transition:transform .18s ease;}
.btn:hover .arrow{transform:translateX(4px);}
.btn-primary{background:var(--brand-600);color:#fff;}
.btn-primary:hover{background:var(--brand-900);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-secondary{background:transparent;color:var(--brand-600);border-color:var(--brand-600);}
.btn-secondary:hover{background:var(--brand-50);}
.btn-link{display:inline-flex;align-items:center;gap:6px;color:var(--brand-600);text-decoration:none;font-weight:600;font-size:15px;background:transparent;border:0;}
.btn-link:hover .arrow{transform:translateX(4px);}
.btn-lg{padding:18px 32px;font-size:16px;}

/* === BADGES === */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:var(--brand-50);color:var(--brand-900);
  font-size:14px;font-weight:500;line-height:1;
  border:1px solid rgba(61,71,168,0.08);
}
.badge-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.badge-dot.green{background:var(--success);box-shadow:0 0 0 3px rgba(22,163,74,0.15);}
.badge-dot.gold{background:var(--accent);box-shadow:0 0 0 3px rgba(201,169,97,0.18);}
.eyebrow{
  font-family:var(--font-ui);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.18em;color:var(--accent-dark);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent);}

/* === NAV === */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease, border-color .25s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--border);
  box-shadow:var(--shadow-sm);
}
.nav-inner{
  display:flex;align-items:center;gap:var(--s-xl);
  padding:18px var(--s-lg);max-width:var(--container);margin:0 auto;
}
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--brand-900);}
.logo img{height:44px;width:auto;display:block;}
.nav.scrolled .logo img{height:38px;transition:height .2s ease;}
footer .logo img{height:44px;}
@media(max-width:640px){.logo img{height:36px;}}

.nav-list{
  list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;
  font-size:15px;font-weight:500;
}
.nav-list a{
  position:relative;display:inline-block;
  padding:10px 14px;color:var(--brand-900);text-decoration:none;
  transition:color .15s;
}
.nav-list a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;
  height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.nav-list a:hover::after,.nav-list a.active::after{transform:scaleX(1);}
.has-dropdown{position:relative;}
.has-dropdown > a{padding-right:26px;}
.has-dropdown > a::before{
  content:"";position:absolute;right:10px;top:50%;
  width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-65%) rotate(45deg);transform-origin:center;
  transition:transform .2s ease;
  pointer-events:none;
}
.has-dropdown:hover > a::before,
.has-dropdown:focus-within > a::before{transform:translateY(-25%) rotate(225deg);}
.dropdown{
  position:absolute;top:100%;left:0;min-width:260px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);
  padding:8px;margin-top:8px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s, transform .18s, visibility .18s;
  list-style:none;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
.dropdown li{display:block;}
.dropdown a{display:block;padding:11px 14px;border-radius:6px;font-size:14px;text-decoration:none;color:var(--ink);}
.dropdown a::after{display:none;}
.dropdown a:hover{background:var(--brand-50);color:var(--brand-900);}

.nav-actions{margin-left:auto;display:flex;align-items:center;gap:16px;}
.nav-phone{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--brand-900);text-decoration:none;font-weight:600;font-size:14px;
  font-variant-numeric:tabular-nums;
}
.nav-phone:hover{color:var(--brand-600);}
.lang{
  display:inline-flex;border:1px solid var(--border);border-radius:var(--r-pill);
  padding:2px;font-size:12px;font-weight:600;letter-spacing:0.05em;
}
.lang button,.lang .lang-btn{
  background:transparent;border:0;padding:5px 10px;border-radius:var(--r-pill);
  color:var(--muted);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:0.05em;
  cursor:pointer;line-height:1;display:inline-flex;align-items:center;
  transition:background .15s,color .15s;
}
.lang .lang-btn:hover{color:var(--brand-900);}
.lang button.on,.lang .lang-btn.on{background:var(--accent);color:#fff;pointer-events:none;cursor:default;}
.mobile-lang{display:none;}
@media(max-width:1024px){
  /* Override the .lang display:none from mobile nav hide rule */
  .mobile-menu .mobile-lang{
    display:inline-flex;align-self:flex-start;margin:14px 0 4px;
    border:1px solid var(--border);
  }
}

.nav-burger{display:none;}
@media(max-width:1024px){
  .nav-list,.nav-phone,.lang,.nav-cta{display:none;}
  .nav-burger{
    display:grid;place-items:center;
    width:42px;height:42px;border-radius:var(--r-btn);
    background:transparent;border:1px solid var(--border-strong);
    color:var(--brand-900);
    margin-left:auto;
  }
}

/* === MOBILE MENU === */
.mobile-menu{
  position:fixed;inset:0;z-index:200;background:#fff;
  padding:96px var(--s-lg) var(--s-lg);
  display:none;flex-direction:column;gap:8px;overflow-y:auto;
}
.mobile-menu.open{display:flex;}
.mobile-menu .close-btn{
  position:absolute;top:18px;right:18px;
  width:42px;height:42px;border-radius:var(--r-btn);
  background:transparent;border:1px solid var(--border-strong);
  display:grid;place-items:center;
}
.mobile-menu a{
  padding:14px 4px;border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--brand-900);
  font-size:18px;font-weight:500;font-family:var(--font-display);
}
.mobile-menu .group-label{
  font-size:11px;text-transform:uppercase;letter-spacing:0.16em;
  color:var(--muted);margin-top:18px;padding:0 4px;font-weight:600;font-family:var(--font-ui);
}
.mobile-menu .mobile-actions{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:10px;}
.mobile-menu .mobile-actions .btn{
  justify-content:center;width:100%;
  font-size:16px;padding:16px 22px;
  border-radius:var(--r-btn);
}
.mobile-menu .mobile-actions .btn-primary{
  background:var(--brand-900);color:#fff;border-color:var(--brand-900);
}
.mobile-menu .mobile-actions .btn-secondary{
  background:transparent;color:var(--brand-900);border:1.5px solid var(--brand-900);
}

/* === SECTION CHROME === */
section{padding:var(--s-4xl) 0;}
@media(max-width:900px){section{padding:var(--s-3xl) 0;}}
.section-head{max-width:780px;margin-bottom:var(--s-2xl);}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{margin-bottom:14px;}
.section-head p{color:var(--muted);font-size:clamp(1.05rem,1.2vw,1.18rem);max-width:620px;}
.section-tinted{background:var(--brand-50);}
.section-cream{background:#fff;}
.section-dark{background:var(--brand-900);color:rgba(255,255,255,0.85);}
.section-dark h2,.section-dark h3{color:#fff;}

/* === HERO (homepage, large) === */
.hero{position:relative;padding:140px 0 var(--s-3xl);background:linear-gradient(180deg,#fafaf7 0%,#f4f5fb 100%);overflow:hidden;}
.hero::before{content:"";position:absolute;top:0;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(201,169,97,0.10) 0%,transparent 70%);pointer-events:none;}
.hero-grid{display:grid;grid-template-columns:1.22fr 1fr;gap:var(--s-3xl);align-items:center;}
.hero-copy h1{margin:var(--s-md) 0 var(--s-lg);color:var(--brand-900);}
.hero-copy h1 .accent-line{display:block;font-style:italic;font-weight:500;color:var(--brand-700);}
.hero-sub{font-size:clamp(1.05rem,1.2vw,1.2rem);color:var(--ink);max-width:520px;margin-bottom:var(--s-xl);line-height:1.55;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:var(--s-xl);}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px;padding-top:var(--s-md);border-top:1px solid var(--border);}
.hero-image{position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-lg);background:#1a1f4d;}
.hero-image img{width:100%;height:100%;object-fit:cover;}
.spec-card{position:absolute;right:-20px;bottom:-20px;background:#fff;border-radius:var(--r-card);padding:18px 22px;box-shadow:var(--shadow-lg);max-width:240px;border:1px solid var(--border);}
.spec-card .row{display:flex;align-items:center;gap:10px;}
.spec-card .row + .row{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.spec-card svg{flex-shrink:0;color:var(--accent-dark);}
.spec-card .k{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);}
.spec-card .v{font-family:var(--font-display);font-size:15px;color:var(--brand-900);font-weight:600;line-height:1.2;}
@media(max-width:900px){
  .hero{padding:120px 0 var(--s-2xl);}
  .hero-grid{grid-template-columns:1fr;gap:var(--s-2xl);}
  .hero-image{aspect-ratio:4/3;}
  .spec-card{right:16px;bottom:-30px;}
}

/* === INNER HERO (subpages) === */
.hero-inner{position:relative;padding:140px 0 var(--s-3xl);background:linear-gradient(180deg,#fafaf7 0%,#f4f5fb 100%);overflow:hidden;}
.hero-inner::before{content:"";position:absolute;top:-200px;right:-200px;width:520px;height:520px;background:radial-gradient(circle,rgba(201,169,97,0.10) 0%,transparent 70%);pointer-events:none;}
.hero-inner .container{position:relative;}
.hero-inner h1{margin:14px 0 18px;max-width:880px;}
.hero-inner .hero-sub{max-width:680px;margin-bottom:0;font-size:clamp(1.05rem,1.2vw,1.22rem);color:var(--ink);}
@media(max-width:900px){.hero-inner{padding:120px 0 var(--s-2xl);}}

/* === BREADCRUMB === */
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:13px;color:var(--muted);
  margin-bottom:0;
}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--brand-600);}
.breadcrumb .sep{color:var(--border-strong);}
.breadcrumb [aria-current="page"]{color:var(--brand-900);font-weight:500;}

/* === CARDS (general) === */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
  text-decoration:none;color:inherit;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent;}
.card-media{aspect-ratio:4/3;background:var(--brand-900);overflow:hidden;position:relative;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-media img{transform:scale(1.04);}
.card-media .placeholder{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 14px),linear-gradient(135deg,var(--brand-700) 0%,var(--brand-900) 100%);}
.card-media .placeholder.warm{background:repeating-linear-gradient(115deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 14px),linear-gradient(135deg,#5560c9 0%,#2a3071 100%);}
.card-media .placeholder.gold{background:repeating-linear-gradient(115deg,rgba(255,255,255,0.07) 0 2px,transparent 2px 14px),linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);}
.card-media .placeholder.cream{background:repeating-linear-gradient(115deg,rgba(0,0,0,0.03) 0 2px,transparent 2px 14px),linear-gradient(135deg,#e8e1d3 0%,#c8bfae 100%);}
.card-media .caption{position:absolute;left:14px;bottom:12px;font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(255,255,255,0.85);letter-spacing:0.06em;padding:5px 8px;background:rgba(0,0,0,0.28);border-radius:4px;backdrop-filter:blur(6px);}
.card-body{padding:var(--s-lg);display:flex;flex-direction:column;gap:10px;flex:1;}
.card-body h3{margin:0;}
.card-body p{color:var(--muted);font-size:15px;line-height:1.55;}
.card-body .btn-link{margin-top:auto;padding-top:8px;}

/* === PONUDA 3-col === */
.ponuda-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg);}
@media(max-width:900px){.ponuda-grid{grid-template-columns:1fr;}}

/* === ZASTO 4-col with icons === */
.zasto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-xl);}
.zasto-item{display:flex;flex-direction:column;gap:14px;}
.zasto-icon{width:48px;height:48px;border-radius:12px;background:var(--brand-50);color:var(--brand-600);display:grid;place-items:center;}
.zasto-item h3{font-size:1.125rem;line-height:1.3;}
.zasto-item p{color:var(--muted);font-size:15px;line-height:1.55;}
@media(max-width:900px){.zasto-grid{grid-template-columns:1fr 1fr;gap:var(--s-lg);}}
@media(max-width:540px){.zasto-grid{grid-template-columns:1fr;}}

/* === USLUGE 2x2 numbered === */
.usluge-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg);margin-bottom:var(--s-xl);}
.usluge-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s-xl);display:flex;gap:var(--s-lg);transition:transform .2s, box-shadow .2s, border-color .2s;}
.usluge-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent;}
.usluge-card .num{font-family:var(--font-display);font-size:28px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1;min-width:32px;}
.usluge-card h3{margin-bottom:8px;font-size:1.125rem;}
.usluge-card p{color:var(--muted);font-size:15px;line-height:1.55;}
.usluge-cta-row{display:flex;justify-content:center;}
@media(max-width:768px){.usluge-grid{grid-template-columns:1fr;}}

/* === BRENDOVI ===
   Cards are pure white so the brand JPGs' built-in white background
   blends in seamlessly. Hover zooms the logo inside the card.
*/
.brand-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s-md);
  margin-bottom:var(--s-xl);
}
@media(min-width:640px){
  .brand-grid{grid-template-columns:repeat(3, 1fr);gap:var(--s-lg);}
}
@media(min-width:1024px){
  .brand-grid{grid-template-columns:repeat(6, 1fr);}
}

.brand-cell{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:12px;
  aspect-ratio:5 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s-md) var(--s-lg);
  overflow:hidden;           /* clip the zoomed image */
  text-decoration:none;
  cursor:pointer;
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}
.brand-cell img{
  max-width:88%;
  max-height:88%;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-cell:hover,
.brand-cell:focus-visible{
  border-color:var(--brand-600);
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.brand-cell:hover img,
.brand-cell:focus-visible img{
  transform:scale(1.15);
}
.brand-cell:focus-visible{
  outline:2px solid var(--brand-600);
  outline-offset:2px;
}
.brand-cell:active img{
  transform:scale(1.05);
}
@media (prefers-reduced-motion: reduce){
  .brand-cell,
  .brand-cell img{transition:none;}
  .brand-cell:hover,
  .brand-cell:focus-visible,
  .brand-cell:hover img,
  .brand-cell:focus-visible img{transform:none;}
}

.brand-cta-row{display:flex;justify-content:center;}

/* === ABOUT (split layout) === */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3xl);align-items:center;}
.about-images{position:relative;height:520px;}
.about-images img{position:absolute;border-radius:var(--r-card);object-fit:cover;box-shadow:var(--shadow-lg);}
.about-images img.top{top:0;left:0;width:62%;height:65%;}
.about-images img.bot{bottom:0;right:0;width:62%;height:65%;border:6px solid var(--bg);}
.about-copy p{color:var(--ink);margin-bottom:var(--s-md);line-height:1.7;}
.about-copy p:first-of-type{font-size:1.15rem;color:var(--brand-900);font-weight:500;}
.about-badges{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s-lg) 0 var(--s-lg);}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:var(--s-2xl);}.about-images{height:420px;}}

/* === KONTAKT (homepage section + contact page) === */
.kontakt-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-2xl);align-items:stretch;}
.map-wrap{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border);min-height:480px;box-shadow:var(--shadow-md);}
.map-wrap iframe{width:100%;height:100%;min-height:480px;border:0;display:block;}
.kontakt-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:540px){.kontakt-info{grid-template-columns:1fr;}}
.kontakt-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s-lg);display:flex;flex-direction:column;gap:8px;}
.kontakt-card.full{grid-column:1 / -1;}
.kontakt-card .icon{width:36px;height:36px;border-radius:8px;background:var(--brand-50);color:var(--brand-600);display:grid;place-items:center;margin-bottom:4px;}
.kontakt-card .k{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);font-weight:600;}
.kontakt-card .v{font-family:var(--font-display);font-size:18px;color:var(--brand-900);font-weight:600;line-height:1.3;}
.kontakt-card a{color:inherit;text-decoration:none;}
.kontakt-card a:hover{color:var(--brand-600);}
.kontakt-card .hours{font-size:14px;color:var(--ink);line-height:1.7;font-family:var(--font-ui);font-weight:500;}
.kontakt-card .hours span{color:var(--muted);font-weight:400;}
.kontakt-cta{grid-column:1 / -1;}
@media(max-width:900px){.kontakt-grid{grid-template-columns:1fr;}.map-wrap{min-height:340px;}.map-wrap iframe{min-height:340px;}}

/* === FORM (contact page) === */
.contact-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:var(--s-2xl);align-items:start;}
.contact-form{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s-2xl);box-shadow:var(--shadow-sm);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-row{margin-bottom:0;display:flex;flex-direction:column;gap:6px;}
.form-row.full{grid-column:1 / -1;}
.form-row label{font-size:13px;font-weight:600;color:var(--brand-900);}
.form-row label .req{color:#dc2626;}
.form-row input, .form-row select, .form-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border-strong);
  border-radius:var(--r-input);font:inherit;background:#fff;color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none;border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(61,71,168,0.12);
}
.form-row textarea{min-height:140px;resize:vertical;font-family:inherit;}
.form-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);line-height:1.5;margin:var(--s-md) 0;}
.form-checkbox input{margin-top:3px;}
.form-submit{display:flex;justify-content:flex-end;}
.honeypot{position:absolute;left:-9999px;width:0;height:0;}
.form-success{display:flex;gap:14px;align-items:flex-start;padding:var(--s-lg);border:1px solid #b6dabd;background:#eaf6ec;color:#1e5b30;border-radius:var(--r-card);margin-top:var(--s-sm);}
.form-success[hidden]{display:none;}
.form-success-icon{flex:0 0 auto;color:#2a7a3e;line-height:0;}
.form-success strong{display:block;font-family:var(--font-display);font-size:1.05rem;margin-bottom:4px;color:#173;}
.form-success p{font-size:14px;line-height:1.55;color:#1e5b30;margin:0;}
.form-success a{color:#1e5b30;text-decoration:underline;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}.contact-form{padding:var(--s-lg);}.form-grid{grid-template-columns:1fr;}}

/* === TIMELINE (process steps) === */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-lg);position:relative;}
.timeline::before{content:"";position:absolute;left:0;right:0;top:24px;height:1px;background:linear-gradient(90deg,transparent 0,var(--accent) 10%,var(--accent) 90%,transparent 100%);opacity:0.35;}
.step{position:relative;background:transparent;}
.step .step-num{width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--brand-900);font-family:var(--font-display);font-size:18px;font-weight:600;display:grid;place-items:center;margin-bottom:var(--s-md);position:relative;z-index:1;}
.step h3{font-size:1.05rem;line-height:1.3;margin-bottom:8px;}
.step p{color:var(--muted);font-size:14px;line-height:1.55;}
@media(max-width:900px){.timeline{grid-template-columns:1fr 1fr;}.timeline::before{display:none;}}
@media(max-width:540px){.timeline{grid-template-columns:1fr;}}

/* === INFO BOX (full-width tinted callout) === */
.info-box{
  background:var(--brand-50);border:1px solid rgba(61,71,168,0.10);
  border-radius:var(--r-card);padding:var(--s-2xl);
  display:grid;grid-template-columns:1fr auto;gap:var(--s-xl);align-items:center;
}
.info-box .info-copy{max-width:680px;}
.info-box h3{margin-bottom:8px;}
.info-box p{color:var(--ink);}
.info-box .info-actions{display:flex;gap:12px;flex-wrap:wrap;}
@media(max-width:768px){.info-box{grid-template-columns:1fr;padding:var(--s-xl);}}

/* === HOYA FEATURE BLOCK === */
.hoya-block{text-align:center;background:var(--brand-900);color:rgba(255,255,255,0.85);padding:var(--s-3xl) var(--s-xl);border-radius:var(--r-card);position:relative;overflow:hidden;}
.hoya-block::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,169,97,0.18) 0%,transparent 60%);}
.hoya-block > *{position:relative;}
.hoya-wordmark{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:700;letter-spacing:-0.04em;color:#fff;line-height:1;margin-bottom:14px;}
.hoya-wordmark sup{font-family:var(--font-ui);font-size:0.22em;font-weight:600;vertical-align:super;letter-spacing:0.1em;color:var(--accent);}
.hoya-block h3{color:#fff;margin-bottom:14px;}
.hoya-block .sub{color:rgba(255,255,255,0.75);max-width:620px;margin:0 auto var(--s-xl);}
.hoya-reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg);text-align:left;max-width:880px;margin:0 auto;}
.hoya-reasons .reason{padding:var(--s-lg);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:10px;}
.hoya-reasons .reason h4{font-family:var(--font-display);font-size:1.05rem;color:#fff;margin-bottom:6px;}
.hoya-reasons .reason p{font-size:14px;color:rgba(255,255,255,0.75);line-height:1.55;}
@media(max-width:768px){.hoya-reasons{grid-template-columns:1fr;}}

/* === BENEFIT 4-col with icons (sunčane, anti-refleksni) === */
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-xl);}
.benefit{display:flex;flex-direction:column;gap:12px;}
.benefit-icon{width:52px;height:52px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;}
.benefit h3{font-size:1.05rem;line-height:1.3;}
.benefit p{color:var(--muted);font-size:14px;line-height:1.55;}
@media(max-width:900px){.benefit-grid{grid-template-columns:1fr 1fr;gap:var(--s-lg);}}
@media(max-width:540px){.benefit-grid{grid-template-columns:1fr;}}

/* === OPTION 4-cards (for kontaktne, sunčane, naočalne) === */
.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-lg);}
.option-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s-xl);transition:transform .2s, box-shadow .2s, border-color .2s;}
.option-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent;}
.option-card .tag{display:inline-block;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px;}
.option-card h3{margin-bottom:10px;}
.option-card p{color:var(--muted);font-size:15px;line-height:1.6;}
.option-card .meta{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px;}
.option-card .meta strong{color:var(--brand-900);font-weight:600;}
@media(max-width:768px){.option-grid{grid-template-columns:1fr;}}

/* === LAB SPLIT (usluge lab section) === */
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3xl);align-items:center;}
.lab-image{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--brand-900);position:relative;}
.lab-image img{width:100%;height:100%;object-fit:cover;}
.lab-image .placeholder{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 14px),linear-gradient(135deg,var(--brand-700) 0%,var(--brand-900) 100%);}
.lab-image .caption{position:absolute;left:14px;bottom:12px;font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(255,255,255,0.85);letter-spacing:0.06em;padding:5px 8px;background:rgba(0,0,0,0.28);border-radius:4px;}
.lab-copy h2{margin-bottom:var(--s-md);}
.lab-copy p{color:var(--ink);margin-bottom:var(--s-md);line-height:1.7;}
.lab-copy ul{list-style:none;padding:0;margin:var(--s-md) 0 0;display:flex;flex-direction:column;gap:10px;}
.lab-copy ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink);}
.lab-copy ul li::before{content:"";flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--brand-50);color:var(--brand-600);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10l3 3 7-7' stroke='%233d47a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;margin-top:3px;}
@media(max-width:900px){.lab-grid{grid-template-columns:1fr;gap:var(--s-2xl);}}

/* === FULL-WIDTH CTA BLOCK === */
.cta-block{background:var(--brand-50);text-align:center;padding:var(--s-3xl) var(--s-xl);border-radius:var(--r-card);}
.cta-block h2{margin-bottom:14px;}
.cta-block p{color:var(--ink);max-width:560px;margin:0 auto var(--s-xl);}
.cta-block .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* === PRODUCT LARGE CARDS (proizvodi.html) === */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg);}
.prod-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s, box-shadow .2s, border-color .2s;}
.prod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent;}
.prod-card .media{aspect-ratio:5/3;position:relative;overflow:hidden;background:var(--brand-900);}
.prod-card .media>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.4,0,.2,1);}
.prod-card:hover .media>img{transform:scale(1.04);}
.prod-card .media .placeholder{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 14px),linear-gradient(135deg,var(--brand-700) 0%,var(--brand-900) 100%);}
.prod-card .media .placeholder.gold{background:repeating-linear-gradient(115deg,rgba(255,255,255,0.07) 0 2px,transparent 2px 14px),linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);}
.prod-card .media .placeholder.warm{background:repeating-linear-gradient(115deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 14px),linear-gradient(135deg,#5560c9 0%,#2a3071 100%);}
.prod-card .media .placeholder.cream{background:repeating-linear-gradient(115deg,rgba(0,0,0,0.03) 0 2px,transparent 2px 14px),linear-gradient(135deg,#e8e1d3 0%,#c8bfae 100%);}
.prod-card .media .caption{position:absolute;left:14px;bottom:12px;font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(255,255,255,0.85);letter-spacing:0.06em;padding:5px 8px;background:rgba(0,0,0,0.28);border-radius:4px;}
.prod-card .body{padding:var(--s-lg);flex:1;display:flex;flex-direction:column;gap:10px;}
.prod-card .body p{color:var(--muted);font-size:14px;line-height:1.55;}
.prod-card .body .btn-link{margin-top:auto;padding-top:8px;}
@media(max-width:900px){.prod-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.prod-grid{grid-template-columns:1fr;}}

/* === COMPARE (anti-refleksni side-by-side) === */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg);}
.compare-card{aspect-ratio:5/3;border-radius:var(--r-card);overflow:hidden;position:relative;background:var(--brand-900);}
.compare-card .lens{position:absolute;inset:18% 14%;border-radius:50%;}
.compare-card.without .lens{background:radial-gradient(circle at 30% 30%,#9aa3b2 0%,#4a5263 60%);box-shadow:inset 0 0 30px rgba(255,255,255,0.5);}
.compare-card.with .lens{background:linear-gradient(135deg,#1a1f4d 0%,#2a3071 100%);box-shadow:inset 0 0 20px rgba(201,169,97,0.18);}
.compare-card .label{position:absolute;top:14px;left:14px;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,0.35);padding:5px 10px;border-radius:4px;backdrop-filter:blur(4px);}
.compare-card.with .label{background:var(--accent);}
@media(max-width:600px){.compare-grid{grid-template-columns:1fr;}}

/* === GALLERY === */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-xl);}
.chip{padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--border);background:#fff;color:var(--brand-900);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s, border-color .15s, color .15s;}
.chip:hover{border-color:var(--brand-500);}
.chip.on{background:var(--brand-900);color:#fff;border-color:var(--brand-900);}

.masonry{column-count:3;column-gap:14px;}
.masonry .tile{break-inside:avoid;margin-bottom:14px;border-radius:var(--r-card);overflow:hidden;background:var(--brand-900);position:relative;cursor:zoom-in;transition:transform .2s, box-shadow .2s;}
.masonry .tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.masonry .tile img{width:100%;height:auto;display:block;transition:transform .4s;}
.masonry .tile:hover img{transform:scale(1.03);}
.masonry .tile .placeholder{aspect-ratio:var(--ar,4/3);background:repeating-linear-gradient(115deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 14px),linear-gradient(135deg,var(--brand-700) 0%,var(--brand-900) 100%);}
.masonry .tile .placeholder.gold{background:repeating-linear-gradient(115deg,rgba(255,255,255,0.07) 0 2px,transparent 2px 14px),linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);}
.masonry .tile .placeholder.cream{background:repeating-linear-gradient(115deg,rgba(0,0,0,0.03) 0 2px,transparent 2px 14px),linear-gradient(135deg,#e8e1d3 0%,#c8bfae 100%);}
.masonry .tile .placeholder.warm{background:repeating-linear-gradient(115deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 14px),linear-gradient(135deg,#5560c9 0%,#2a3071 100%);}
.masonry .tile .caption{position:absolute;left:14px;bottom:12px;font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(255,255,255,0.85);letter-spacing:0.06em;padding:5px 8px;background:rgba(0,0,0,0.28);border-radius:4px;backdrop-filter:blur(6px);}
@media(max-width:900px){.masonry{column-count:2;}}
@media(max-width:540px){.masonry{column-count:1;}}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(15,20,25,0.9);z-index:300;display:none;align-items:center;justify-content:center;padding:var(--s-lg);}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.lightbox .lb-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;display:grid;place-items:center;cursor:pointer;}

/* === FOOTER === */
footer{background:var(--brand-900);color:rgba(255,255,255,0.78);padding:var(--s-3xl) 0 var(--s-lg);}
footer h4{font-family:var(--font-ui);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.16em;color:rgba(255,255,255,0.5);margin-bottom:16px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s-2xl);margin-bottom:var(--s-2xl);}
.footer-brand .logo-text{color:#fff;}
.footer-brand p{margin-top:14px;font-size:14px;line-height:1.6;max-width:280px;}
.footer-brand .badges{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;}
.footer-brand .badges .badge{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.12);}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
footer ul a{color:rgba(255,255,255,0.78);text-decoration:none;font-size:14px;}
footer ul a:hover{color:#fff;}
.footer-contact .row{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;}
.footer-contact .row .k{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:rgba(255,255,255,0.5);}
.footer-contact .row .v{color:#fff;font-size:14px;font-weight:500;}
.footer-contact a{color:inherit;text-decoration:none;}
.footer-contact a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.10);padding-top:var(--s-lg);display:flex;justify-content:space-between;align-items:center;gap:var(--s-md);font-size:13px;color:rgba(255,255,255,0.55);flex-wrap:wrap;}
.footer-bottom a{color:inherit;text-decoration:none;margin:0 6px;}
.footer-bottom a:hover{color:#fff;}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-xl);}}
@media(max-width:540px){.footer-grid{grid-template-columns:1fr;}}

/* === ANIMATIONS === */
.fade-up{opacity:0;transform:translateY(20px);transition:opacity .55s ease, transform .55s ease;}
.fade-up.in{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion: reduce){.fade-up{opacity:1;transform:none;transition:none;}*{transition:none !important;animation:none !important;}}


/* ============================================================
   DOCS LAYOUT (content-heavy pages: lenses, lenses-type)
   Side nav (sticky) + content stream
============================================================ */
.docs-layout{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:var(--s-3xl);
  align-items:start;
}
@media(max-width:1024px){
  .docs-layout{ grid-template-columns: 1fr; gap:var(--s-lg); }
}

.docnav{
  position:sticky; top:96px;
  align-self:start;
  padding:var(--s-md) 0;
  border-left:1px solid var(--border);
  font-size:14px;
}
.docnav-title{
  font-family:var(--font-ui); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.16em;
  color:var(--muted);
  padding:0 var(--s-md);
  margin-bottom:10px;
}
.docnav-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
}
.docnav-list a{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px var(--s-md) 9px calc(var(--s-md) - 2px);
  margin-left:-1px;
  border-left:2px solid transparent;
  color:var(--muted); text-decoration:none;
  font-weight:500; line-height:1.3;
  transition:color .15s, border-color .15s, background .15s;
}
.docnav-list a:hover{ color:var(--brand-900); }
.docnav-list a.active{
  color:var(--brand-900); border-left-color:var(--accent);
  font-weight:600;
}
.docnav-list a .count{
  font-family:ui-monospace,monospace; font-size:11px;
  color:var(--muted); font-weight:500;
  background:var(--brand-50); padding:1px 6px; border-radius:999px;
}
.docnav-list a.active .count{ background:var(--accent); color:#fff; }

/* Mobile docnav — horizontal scroll chips */
@media(max-width:1024px){
  .docnav{
    position:sticky; top:72px; z-index:30;
    background:rgba(255,255,255,0.96);
    backdrop-filter:saturate(150%) blur(10px);
    -webkit-backdrop-filter:saturate(150%) blur(10px);
    margin:0 calc(var(--s-lg) * -1);
    padding:10px var(--s-lg);
    border-left:0; border-bottom:1px solid var(--border);
  }
  .docnav-title{ display:none; }
  .docnav-list{
    flex-direction:row; flex-wrap:wrap; gap:6px;
    padding-bottom:0;
  }
  .docnav-list a{
    flex:0 1 auto;
    padding:6px 11px; border-radius:var(--r-pill);
    border:1px solid var(--border); border-left:1px solid var(--border);
    background:#fff;
    margin:0;
    font-size:12.5px; line-height:1.2;
    white-space:nowrap;
  }
  .docnav-list a.active{
    border-color:var(--brand-900); background:var(--brand-900); color:#fff;
  }
  .docnav-list a.active .count{ background:var(--accent); color:#fff; }
  .docnav-list a .count{ display:none; }
  /* When mobile docnav is sticky, scroll-margin needs to account for both header nav + docnav */
  .content-stream > section[id]{ scroll-margin-top:130px; }
}

/* Content stream */
.content-stream{ min-width:0; }
.content-stream > section{ padding:0; }
.content-stream > section[id]{ scroll-margin-top:96px; }
.content-stream > section + section{ margin-top:var(--s-3xl); }
@media(max-width:1024px){ .content-stream > section + section{ margin-top:var(--s-2xl); } }

.cs-header{ margin-bottom:var(--s-xl); max-width:780px; }
.cs-header .eyebrow{ margin-bottom:10px; }
.cs-header h2{ margin-bottom:10px; }
.cs-header .lede{ color:var(--ink); font-size:1.075rem; line-height:1.65; }
.cs-header .lede + .lede{ margin-top:12px; }

.cs-lead-image{
  margin:var(--s-md) 0 var(--s-xl);
  border-radius:var(--r-card); overflow:hidden;
  background:var(--brand-900);
  cursor:zoom-in;
}
.cs-lead-image img{ width:100%; height:auto; display:block; transition:transform .4s; }
.cs-lead-image:hover img{ transform:scale(1.02); }

/* Sub-tech callouts (e.g., "iD FreeForm Design Technology") */
.tech-callout{
  background:var(--brand-50);
  border:1px solid rgba(61,71,168,0.10);
  border-radius:var(--r-card);
  padding:var(--s-xl);
  margin:var(--s-lg) 0;
}
.tech-callout h3{
  font-family:var(--font-display); font-size:1.25rem;
  margin-bottom:10px;
}
.tech-callout p{ color:var(--ink); line-height:1.65; }
.tech-callout p + p{ margin-top:10px; }
.tech-callout ul{ margin:10px 0 0 var(--s-md); padding:0; color:var(--ink); }
.tech-callout ul li{ line-height:1.55; margin-bottom:6px; }

.warning-box{
  background:#fff8eb;
  border:1px solid #f5d785;
  border-left:4px solid var(--accent);
  border-radius:var(--r-card);
  padding:var(--s-lg) var(--s-xl);
  margin:var(--s-lg) 0;
  color:#5a4500;
  font-size:15px; line-height:1.6;
}
.warning-box strong{ color:#3d2e00; }

/* Lens cards — compact + feature variants */
.lens-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s-lg);
}
@media(max-width:768px){ .lens-grid{ grid-template-columns:1fr; } }
.lens-grid--3{ grid-template-columns:repeat(3, 1fr); }
@media(max-width:900px){ .lens-grid--3{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:600px){ .lens-grid--3{ grid-template-columns:1fr; } }

/* Custom body grid for lens-feature (used on naocalne-lece) */
.lens-feature__body--2col{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-xl);
}
@media(max-width:768px){
  .lens-feature__body--2col{ grid-template-columns:1fr; gap:var(--s-lg); }
}

.lens-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.lens-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:transparent; }
.lens-card .media{
  aspect-ratio:5/3; background:var(--brand-50);
  position:relative; overflow:hidden; cursor:zoom-in;
}
.lens-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.lens-card .media:hover img{ transform:scale(1.04); }
.lens-card .body{ padding:var(--s-lg); display:flex; flex-direction:column; gap:10px; flex:1; }
.lens-card .body h3{ margin:0; font-size:1.125rem; line-height:1.3; }
.lens-card .body .tagline{ font-weight:600; color:var(--brand-900); font-size:15px; }
.lens-card .body p{ color:var(--ink); font-size:14.5px; line-height:1.6; }
.lens-card .body p + p{ margin-top:6px; }
.lens-card .body ul{ margin:6px 0 0; padding-left:20px; color:var(--ink); font-size:14px; line-height:1.65; }
.lens-card .body ul li{ margin-bottom:4px; }
.lens-card .body strong{ color:var(--brand-900); }

/* Feature blocks — for long-content models (Sync III, MySelf, EnRoute) */
.lens-feature{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
}
.lens-feature .feature-hero{
  display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch;
  gap:0;
}
.lens-feature .feature-hero .media{
  aspect-ratio:auto; min-height:320px;
  background:var(--brand-900); cursor:zoom-in;
}
.lens-feature .feature-hero .media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.lens-feature .feature-hero .intro{
  padding:var(--s-xl) var(--s-2xl);
  display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.lens-feature .feature-hero .intro .badge-tag{
  display:inline-block; align-self:flex-start;
  font-family:var(--font-ui); font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent-dark);
}
.lens-feature .feature-hero .intro h3{
  font-family:var(--font-display); font-size:clamp(1.5rem, 2.2vw, 2rem);
  line-height:1.15; letter-spacing:-0.015em;
  margin:0;
}
.lens-feature .feature-hero .intro .tagline{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1.15rem; color:var(--brand-700);
}
.lens-feature .feature-hero .intro p{ color:var(--ink); line-height:1.6; }
.lens-feature .body{
  padding:var(--s-xl) var(--s-2xl);
  border-top:1px solid var(--border);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-xl) var(--s-2xl);
}
.lens-feature .body h4{
  font-family:var(--font-display); font-weight:600;
  font-size:1.05rem; color:var(--brand-900); letter-spacing:-0.01em;
  margin-bottom:8px;
}
.lens-feature .body p{ color:var(--ink); font-size:14.5px; line-height:1.65; margin-bottom:10px; }
.lens-feature .body ul{ margin:0; padding-left:20px; color:var(--ink); font-size:14.5px; line-height:1.65; }
.lens-feature .body ul li{ margin-bottom:5px; }
.lens-feature .body strong{ color:var(--brand-900); }
.lens-feature .body .full-row{ grid-column:1 / -1; }
.lens-feature .body .image-row{
  grid-column:1 / -1; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-md);
}
.lens-feature .body .image-row img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; object-position:center;
  border-radius:8px; cursor:zoom-in;
}
@media(max-width:900px){
  .lens-feature .feature-hero{ grid-template-columns:1fr; }
  .lens-feature .feature-hero .media{ min-height:0; aspect-ratio:5/3; }
  .lens-feature .feature-hero .intro{ padding:var(--s-lg); }
  .lens-feature .body{ padding:var(--s-lg); grid-template-columns:1fr; }
  .lens-feature .body .image-row{ grid-template-columns:1fr 1fr; }
}
@media(max-width:540px){
  .lens-feature .body .image-row{ grid-template-columns:1fr; }
}

/* Spec table — for material specs */
.spec-table{
  width:100%; border-collapse:collapse;
  font-size:14px;
  margin:8px 0;
  font-family:var(--font-ui);
}
.spec-table tr{ border-bottom:1px solid var(--border); }
.spec-table tr:last-child{ border-bottom:0; }
.spec-table th, .spec-table td{
  text-align:left; padding:9px 0;
  vertical-align:top;
}
.spec-table th{
  font-weight:500; color:var(--muted);
  width:55%;
}
.spec-table td{
  font-weight:600; color:var(--brand-900);
  font-variant-numeric:tabular-nums;
}

/* Material card — combines image + spec table + features bullets */
.material-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s-lg);
}
@media(max-width:768px){ .material-grid{ grid-template-columns:1fr; } }
.material-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
}
.material-card .head{
  display:grid; grid-template-columns:140px 1fr; gap:var(--s-md);
  padding:var(--s-md);
  border-bottom:1px solid var(--border);
  background:var(--brand-50);
}
@media(max-width:480px){
  .material-card .head{ grid-template-columns:100px 1fr; gap:12px; }
}
.material-card .head .thumb{
  aspect-ratio:1; border-radius:8px;
  background:#fff; overflow:hidden; cursor:zoom-in;
}
.material-card .head .thumb img{ width:100%; height:100%; object-fit:cover; }
.material-card .head .title{ display:flex; flex-direction:column; justify-content:center; gap:4px; }
.material-card .head .title .index{
  font-family:var(--font-mono, ui-monospace), monospace;
  font-size:11px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent-dark);
}
.material-card .head .title h3{ font-size:1.4rem; line-height:1.1; }
.material-card .head .title .sub{ color:var(--ink); font-size:13.5px; line-height:1.4; margin-top:4px; }
.material-card .body{ padding:var(--s-lg); display:flex; flex-direction:column; gap:14px; }
.material-card .body .features{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.material-card .body .features li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; line-height:1.5; color:var(--ink);
}
.material-card .body .features li::before{
  content:""; flex-shrink:0; width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10l3 3 7-7' stroke='%23c9a961' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  margin-top:3px;
}

/* Scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0;
  width:0%; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--brand-600));
  z-index:150;
  transition:width .1s linear;
}

/* Back to top */
.back-to-top{
  position:fixed; bottom:24px; right:24px;
  width:46px; height:46px; border-radius:50%;
  background:var(--brand-900); color:#fff;
  border:0; display:grid; place-items:center;
  cursor:pointer; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background .15s;
  z-index:90;
}
.back-to-top:hover{ background:var(--brand-700); }
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* Inline text emphasis (preserve original meaning) */
.content-stream p strong, .content-stream li strong{ color:var(--brand-900); font-weight:600; }
.content-stream p em{ font-style:italic; }

/* Bullet list inside content-stream */
.content-stream ul.bullet{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
  font-size:15px; line-height:1.6; color:var(--ink);
}
.content-stream ul.bullet li{
  padding-left:20px; position:relative;
}
.content-stream ul.bullet li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
}

/* Visual gallery row of related shots */
.related-images{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--s-md);
  margin:var(--s-md) 0;
}
.related-images figure{
  margin:0; border-radius:8px; overflow:hidden;
  aspect-ratio:4/3; background:var(--brand-50);
  cursor:zoom-in;
}
.related-images figure img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.related-images figure:hover img{ transform:scale(1.03); }