/* Reset / Normalize */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 10px;
}

html{
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: oklch(1 0 0);
  color: oklch(0.145 0 0);
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text wrapping safety for mobile */
:where(p, h1, h2, h3, h4, h5, h6, li, a){
  overflow-wrap:anywhere;
  word-break:normal;
}

.font-serif{font-family:"Playfair Display",serif}
.container{
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 10rem;
}
.container{max-width:100%;}
.section{padding:5rem 0}
.section--muted{background-color:color-mix(in oklch, var(--card) 100%, black 0%);}
.section--products{background:#f2f2f2}
.grid-bg{background-image:linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px);background-size:50px 50px;animation:gridMove 8s linear infinite}
@keyframes gridMove{0%{background-position:0 0}100%{background-position:50px 50px}}
.gradient-text{background:linear-gradient(135deg, var(--primary), var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lead{font-size:1.375rem;color:var(--muted-foreground);max-width:56rem;margin:0.75rem auto 0}
.lead-sm{font-size:1.125rem;color:var(--muted-foreground);max-width:56rem;margin:0.5rem auto}
.muted{color:var(--muted-foreground)}
.center{text-align:center}
.left{text-align:left}
.maxw-2{max-width:42rem;margin-inline:auto}
.maxw-3{max-width:48rem;margin-inline:auto}
.mt-16{margin-top:1rem}
.mt-24{margin-top:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-16{margin-bottom:4rem}
.kicker{color:oklch(0.4 0 0);font-weight:600;margin-bottom:.25rem}

/* Nav */
.nav{position:-webkit-sticky;position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(6px);-webkit-backdrop-filter:saturate(180%) blur(6px);background:oklch(1 0 0 / 0.85);border-bottom:1px solid color-mix(in oklch, var(--border) 100%, transparent);padding:0 40px;padding-top:env(safe-area-inset-top)}
.nav__inner{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;padding:1rem 0;max-width:1200px;margin:0 auto;width:100%;gap:1rem}
.brand{font-weight:800;font-size:1.5rem;margin-right:1.25rem}
.nav__links{
  display: -webkit-flex;
  display: flex;
  gap: 2rem;
  margin: 0 auto;
}
.nav__links a{color:var(--muted-foreground);text-decoration:none}
.nav__links a:hover{color:var(--foreground)}
.nav__toggle{
  display: none;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 0;
}
.nav__toggle span{display:none}
.icon-menu{width:26px;height:26px;display:block;color:var(--foreground)}

/* Buttons */
.btn{
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: .5rem;
  border-radius: var(--radius);
  padding: .625rem 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid color-mix(in oklch, var(--border) 100%, transparent);
  -webkit-transition: background .2s, color .2s, border-color .2s;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
  max-width: 100%;
}
.btn .icon{display:inline-block}
.btn-lg{padding:1rem 1.5rem;font-size:1.0625rem}
.btn-primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);box-shadow:0 1px 0 rgba(0,0,0,.5) inset, 0 1px 2px rgba(0,0,0,.06)}
.btn-primary:hover{
  background: color-mix(in oklch, var(--primary) 94%, black 6%);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.btn-primary:active{
  -webkit-transform: translateY(0);
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.btn--shopify{border-radius:8px}
.btn--shopify:focus{outline:3px solid color-mix(in oklch, var(--ring) 60%, white 0%);outline-offset:2px}
.btn-outline{background:transparent;color:var(--foreground)}
.btn-outline:hover{background:oklch(0.97 0 0)}

/* Hero */
.hero-split{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:start;padding:0 10rem}
@media (max-width: 1024px){.hero-split{padding:0 4rem}}
@media (max-width: 720px){.hero-split{grid-template-columns:1fr;padding:0 1rem}}
.hero-left{text-align:left}
.hero-right{align-self:start}
.hero__title{font-family:"Playfair Display",serif;font-weight:900;letter-spacing:-0.02em;line-height:1.15;margin:0 0 1rem;font-size:clamp(2rem,4vw+1rem,4rem)}
.hero__actions{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  margin-top: 1rem;
}
.hero-form__title{margin:0 0 .5rem;font-weight:800}
.step-question{margin:.25rem 0 .5rem;font-weight:600}
.hero-steps-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem}

/* Process timeline */
.process-section{background:#0D0D1A;color:#f1f1f1}
.process-section .container{padding:0 4rem}
.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.process-left{text-align:left}
.process-right{position:relative;min-width:420px}
.process-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,0.25);transform:translateX(-50%)}
.process-item{position:relative;display:grid;grid-template-columns:1fr;gap:1rem;align-items:start;margin-bottom:3.5rem}
.process-bullet{position:absolute;left:50%;top:18px;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:999px;background:#ffffff;border:3px solid #FF5722;box-shadow:0 0 0 4px rgba(255,87,34,.25)}
.process-card{background:#1C1C28;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:24px;box-shadow:0 12px 24px rgba(0,0,0,.25);width:65%;margin-left:auto;position:relative}
.process-card::before{content:"";position:absolute;left:calc(-15%);top:24px;width:14%;height:2px;background:rgba(255,255,255,0.3);transform:translateX(-50%)}
.process-badge{display:inline-block;background:#FF5722;color:#0D0D1A;font-weight:900;padding:6px 10px;border-radius:6px;font-size:0.95rem;margin-bottom:.5rem}
.process-title{margin:.25rem 0 .25rem;font-weight:800;color:#fff}
.process-desc{margin:0;color:#B0B0B0;line-height:1.6}
@media (max-width: 900px){
  .process-grid{grid-template-columns:1fr}
  .process-right{min-width:initial}
  .process-line{left:50%}
  .process-card{width:100%;margin-left:0}
  .process-card::before{left:50%;width:28%;}
}

/* Cards */
.section__header{margin-bottom:3rem}
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 1rem;
}
.card{
  background: color-mix(in oklch, var(--card) 100%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 100%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.padded{padding:1.25rem}
.card--panel{padding:2rem;border:2px solid oklch(0.6 0 0)}
.card__icon{
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: oklch(0.92 0 0);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: .75rem;
}
.circle{border-radius:12px;background:color-mix(in oklch, var(--primary) 20%, white 80%)}
.card h3{margin:.5rem 0 0.25rem}
.card p{color:var(--muted-foreground);margin:0.25rem 0 0}

/* Split layout */
.split{
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px){
  .split{
    grid-template-columns: 1fr 1fr;
  }
}
.split-lg{
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .split-lg{
    grid-template-columns: 1fr 1fr;
    -webkit-align-items: start;
    align-items: start;
    gap: 4rem;
  }
}
.vlist{
  display: grid;
  gap: 1.25rem;
}
.vlist-sm{
  display: grid;
  gap: .75rem;
}
.callout{border-left:4px solid var(--primary);padding-left:1rem;position:relative}
.callout::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 44px;
  background: linear-gradient(90deg, oklch(0.72 0.27 25 / .40) 0%, transparent 100%);
  -webkit-filter: blur(8px);
  filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}
.callout.glow-on::after{opacity:1}
.callout--alt{border-left-color:var(--primary)}

.bar{height:4px;width:min(64px,18vw);background:var(--primary);margin:0 0 1rem}
.bar--light{background:#fff;opacity:.7}
.bar--center{margin:0 auto 1rem}
.tight{margin:.25rem 0}
.list{list-style:disc;padding-left:1.25rem}
.vlist-plain{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}

/* Saturated banded sections */
.bands{display:grid;gap:0}
.band{background:#f7f7f7;padding:2rem;border-top:1px solid #ececec;border-bottom:1px solid #ececec}
.band--alt{background:#efefef}
.band h3,.band h2{margin:0 0 .75rem}
.band p{margin:0}
@media (max-width: 600px){.band{padding:1.25rem}}

/* Stats in Philosophy */
.stats{margin-top:2rem}
.stats__header{text-align:center;margin-bottom:1rem}
.stats__kicker{text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#444;font-size:1.125rem}
.stats__total{font-weight:900;font-size:clamp(3.5rem,10vw,5rem);color:#c71f16;line-height:1.05}
.stats__grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
}
.stat-card{background:white;border:2px solid #bdbdbd;border-radius:14px;padding:1rem}
.stat-card__title{font-weight:700;color:#555;margin-bottom:.25rem;text-transform:uppercase;font-size:.875rem}
.stat-card__value{font-weight:900;font-size:2rem;color:#111}
@media (max-width:640px){
  .stats__grid{
    grid-template-columns: repeat(2,1fr);
    gap: .75rem;
  }
}

/* Paid section dark theme */
.section--dark{background:#0f1020;color:#f1f1f1}
.section--dark p{color:#c8c8c8}
.btn-pill{background:transparent;color:#fff;border:2px solid #fff;border-radius:999px;padding:.9rem 1.25rem;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.btn-pill:hover{background:#fff;color:#0f1020}
.cta-band .btn-pill{border-width:2px;color:#0f1020;border-color:#0f1020}
.cta-band .btn-pill:hover{background:#0f1020;color:#fff}
.list-check{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.list-check li{position:relative;padding-left:1.6rem}
.list-check li::before{content:"✖";position:absolute;left:0;top:0;color:#ff4db2;font-weight:800}

/* Reveal animation */
.reveal{
  opacity: 0;
  -webkit-transform: translateX(-24px);
  transform: translateX(-24px);
  -webkit-filter: blur(6px);
  filter: blur(6px);
  -webkit-transition: opacity .7s ease, -webkit-transform .7s ease, -webkit-filter .7s ease;
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  -webkit-filter: blur(0);
  filter: blur(0);
}

/* Checklist */
.checklist h4{margin:0 0 .75rem}
.checklist ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-grid;
  display: grid;
  gap: .5rem;
}
.check{color:var(--primary);font-weight:700;margin-right:.5rem}

/* Footer */
.footer{background:#b91c1c;color:white;border-top:1px solid color-mix(in oklch, var(--border) 100%, transparent);padding:3rem 0}
.footer *{color:white}
.footer a{color:white}
.footer h3{color:white}
.footer p{color:white}
.footer li{color:white}
.grid-4{
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .grid-4{
    grid-template-columns: repeat(2,1fr);
  }
}
@media (min-width: 960px){
  .grid-4{
    grid-template-columns: repeat(4,1fr);
  }
}
.footnote{border-top:1px solid rgba(255,255,255,0.2);margin-top:2rem;padding-top:1.25rem;text-align:center;color:rgba(255,255,255,0.8)}

/* Newsletter Subscription */
.newsletter{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.newsletter__content{
  -webkit-flex: 1;
  flex: 1;
}
.newsletter__title{
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: white;
}
.newsletter__text{
  color: rgba(255,255,255,0.8);
  margin: 0;
  font-size: 0.9375rem;
}
.newsletter__form{
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
.newsletter__input-group{
  display: -webkit-flex;
  display: flex;
  gap: 0.5rem;
  -webkit-align-items: center;
  align-items: center;
}
.newsletter__input{
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 0.9375rem;
  min-width: 200px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.newsletter__input::placeholder{
  color: rgba(255,255,255,0.6);
}
.newsletter__input:focus{
  outline: none;
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);
}
.newsletter__btn{
  background: white;
  color: #b91c1c;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.newsletter__btn:hover{
  background: rgba(255,255,255,0.9);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

@media (max-width: 768px){
  .newsletter{
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    text-align: center;
    gap: 1.5rem;
  }
  .newsletter__input-group{
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }
  .newsletter__input{
    min-width: auto;
    width: 100%;
  }
  .newsletter__btn{
    width: 100%;
  }
}

/* Company Logos Carousel */
.logos-carousel{position:relative;overflow:hidden;margin:2rem 0;padding:1rem 0}
.logos-track{display:flex;gap:2rem;will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0)}
.logos-row{display:flex;gap:2rem;animation:scrollLogos 20s linear infinite;-webkit-animation:scrollLogos 20s linear infinite}
.logos-row + .logos-row{margin-left:2rem}
@keyframes scrollLogos{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@-webkit-keyframes scrollLogos{0%{-webkit-transform:translateX(0)}100%{-webkit-transform:translateX(-100%)}}

.logo-item{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;
  padding:0.5rem 1rem;
  color:white;
  font-size:0.875rem;
  font-weight:600;
  white-space:nowrap;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  min-width:80px;
  text-align:center;
}

/* Footer contact split */
.footer-contact{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:start;padding:2rem 0;border-bottom:1px solid rgba(255,255,255,0.1)}
.footer-contact__content{text-align:left}
.footer-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.footer-form__full{grid-column:1 / -1}
@media (max-width: 900px){
  .footer-contact{grid-template-columns:1fr}
}

/* Utilities */
.center .left{margin:0 auto}

/* Mobile nav */
@media (max-width: 1200px){
  .nav__links{display:none}
  .nav__toggle{display:flex;position:relative;z-index:60;margin-left:auto}
}
@media (max-width: 768px){
  .nav__inner{gap:.75rem}
  .btn.btn-primary{margin-left:auto}
}

@media (max-width: 768px){
  .nav{padding-top:calc(20px + env(safe-area-inset-top))}
}

/* Advanced mobile menu */
.nav__mobile{
  position: fixed;
  top: 0;
  right: -100%;
  width: 320px;
  height: 100vh;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(0,0,0,0.1);
  padding: 5rem 2rem 2rem;
  -webkit-transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
  transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index: 55;
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}
.nav__mobile.active{right:0}
.nav__mobile-links{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.nav__mobile-links a{
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid transparent;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.nav__mobile-links a:hover{
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.nav__mobile-cta{margin-top:auto}
.nav__overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 50;
}
.nav__overlay.active{opacity:1;visibility:visible}

/* Responsive: team photo sizing */
@media (max-width: 600px){
  .portrait{max-width:240px}
}

/* Responsive: product cards */
@media (max-width: 900px){
  .product-card{min-width:220px}
  .product-media img{height:160px}
}
@media (max-width: 600px){
  .product-card{min-width:180px}
  .product-media img{height:140px}
  .prod-mask{background:
    linear-gradient(90deg, #f2f2f2 0%, rgba(242,242,242,0.95) 6%, rgba(242,242,242,0.0) 16%, rgba(242,242,242,0.0) 84%, rgba(242,242,242,0.95) 94%, #f2f2f2 100%);}
}

/* Responsive: callouts spacing */
@media (max-width: 720px){
  .split{gap:2rem}
  .card--panel{padding:1.25rem}
}

/* Small-phone optimizations */
@media (max-width: 480px){
  .container{padding:0 1rem}
  .section{padding:3rem 0}
  .hero__inner{padding:0 1rem}
  .hero__title{font-size:1.8rem;line-height:1.2}
  .lead{font-size:1.05rem;max-width:100%;margin:.5rem 0 1rem}
  .lead-sm{font-size:1rem;max-width:100%;margin:.25rem 0 .75rem}
  .btn-lg{padding:.7rem .9rem;font-size:.95rem}
  .btn{gap:.4rem;white-space:normal;-webkit-flex-wrap:wrap;flex-wrap:wrap;line-height:1.25;text-align:center}
  .bar{width:48px}
  .list{padding-left:1rem}
  .cards{grid-template-columns: 1fr}
  .split, .split-lg{grid-template-columns:1fr}
  .vlist-sm{gap:.6rem}
  .product-card{min-width:150px;padding:.75rem}
  .product-media img{height:120px}
  .prod-row{animation-duration:28s}
}

/* Forms */
.form{display:grid;gap:1rem}
.input, .textarea{width:100%;padding:.75rem 1rem;border:1px solid color-mix(in oklch, var(--border) 100%, transparent);border-radius:10px;background:white;color:var(--foreground);font:inherit}
.textarea{min-height:140px;resize:vertical}
.label{font-weight:600;font-size:.9375rem}

/* Contact title */
.contact-title{font-weight:900;font-size:clamp(2rem,6vw,3rem);color:#c71f16;margin:0 0 1rem}

/* Modal */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.active{display:block}
.modal__overlay{position:absolute;inset:0;background:rgba(15,16,32,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .25s ease}
.modal.active .modal__overlay{opacity:1}
.modal__dialog{position:absolute;left:50%;top:50%;transform:translate(-50%, -46%) scale(.98);background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.25);width:min(680px, calc(100% - 2rem));padding:1.5rem 1.5rem 1.75rem;opacity:0;transition:opacity .25s ease, transform .25s ease}
.modal.active .modal__dialog{opacity:1;transform:translate(-50%, -50%) scale(1)}
.modal__close{position:absolute;right:.75rem;top:.5rem;width:36px;height:36px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;font-size:24px;line-height:1;cursor:pointer}
.modal__close:hover{background:#f4f4f4}
.modal__title{margin:0 0 .75rem;font-weight:900;font-size:1.5rem}
.modal__text{margin:0;color:#444;font-size:1rem;line-height:1.6}

/* Portrait */
.portrait-wrap{position:relative;display:inline-block}
.portrait-wrap::before{content:"";position:absolute;inset:-12%;z-index:-1;filter:blur(70px);opacity:0.9;mix-blend:normal;background:
  radial-gradient(65% 65% at 50% 40%, oklch(0.72 0.27 25) 0%, transparent 72%),
  radial-gradient(85% 85% at 50% 70%, oklch(0.78 0.20 20 / .6) 0%, transparent 80%);
}
.portrait{width:100%;max-width:320px;height:auto;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.12)}

/* Photo Card like example */
.photo-card{background:white;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.12);padding:1rem;display:inline-block;text-align:left;width:100%;max-width:340px}
.photo-card__header{padding:.25rem 0 0.75rem 0;text-align:center}
.photo-card__title{font-weight:700;font-size:1.125rem}
.photo-card__sub{font-size:.8125rem;color:var(--muted-foreground)}
.photo-media{background:#f2f2f2;border-radius:20px;overflow:hidden}
.photo-media .portrait{display:block;width:100%;max-width:none;border-radius:20px}
.photo-card__footer{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
}
.photo-meta{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: .5rem;
}
.photo-meta__avatar{width:28px;height:28px;border-radius:999px;object-fit:cover}
.photo-meta__handle{font-weight:600;font-size:.9375rem}
.photo-meta__time{font-size:.8125rem;color:var(--muted-foreground)}
.btn-dark{
  background: oklch(0.2 0 0);
  color: white;
  border: 0;
  border-radius: 14px;
  padding: .5rem .875rem;
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
}
.btn-dark:hover{
  background: color-mix(in oklch, oklch(0.2 0 0) 92%, black 8%);
}




/* Products Carousel */
.prod-carousel{position:relative;overflow:hidden}
.prod-mask{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg, #f2f2f2 0%, rgba(242,242,242,0.92) 3%, rgba(242,242,242,0.0) 10%, rgba(242,242,242,0.0) 90%, rgba(242,242,242,0.92) 97%, #f2f2f2 100%),
  radial-gradient(48px 80% at 0% 50%, rgba(242,242,242,1) 0%, rgba(242,242,242,0.8) 35%, rgba(242,242,242,0.0) 100%),
  radial-gradient(48px 80% at 100% 50%, rgba(242,242,242,1) 0%, rgba(242,242,242,0.8) 35%, rgba(242,242,242,0.0) 100%);
filter:blur(2px)}
.prod-track{display:flex;gap:2rem;will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0)}
.prod-row{display:flex;gap:1.25rem;animation:scrollX 22s linear infinite;-webkit-animation:scrollX 22s linear infinite}
.prod-row + .prod-row{margin-left:1.25rem}
@keyframes scrollX{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@-webkit-keyframes scrollX{0%{-webkit-transform:translateX(0)}100%{-webkit-transform:translateX(-100%)}}

.product-card{background:white;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.12);padding:1rem;min-width:280px}
.product-media{background:#f2f2f2;border-radius:20px;overflow:hidden;position:relative}
.product-media::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(26px 26px at 0 0, #fff 0%, #fff 45%, transparent 70%),
  radial-gradient(26px 26px at 100% 0, #fff 0%, #fff 45%, transparent 70%),
  radial-gradient(26px 26px at 0 100%, #fff 0%, #fff 45%, transparent 70%),
  radial-gradient(26px 26px at 100% 100%, #fff 0%, #fff 45%, transparent 70%);
filter:blur(3px)}
.product-media img{display:block;width:100%;height:220px;-o-object-fit:cover;object-fit:cover}
.product-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.75rem}
.product-meta{font-weight:600}