:root{
  --background:#050505;
  --background-soft:#0b0b0d;
  --surface:#111114;
  --surface-elevated:#17171b;
  --surface-glass:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --text-primary:#f5f5f7;
  --text-secondary:#a1a1aa;
  --text-muted:#71717a;
  --accent:#34d399;
  --accent-soft:rgba(52,211,153,.14);
  --accent-violet:#8b5cf6;
  --accent-blue:#38bdf8;
  --shadow:0 24px 80px rgba(0,0,0,.45);
  --radius-sm:.5rem;
  --radius-md:.75rem;
  --radius-lg:1rem;
  --radius-xl:1.5rem;
  --radius-2xl:2rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,system-ui,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(52,211,153,.10), transparent 22%),
    radial-gradient(circle at top right, rgba(139,92,246,.12), transparent 20%),
    linear-gradient(180deg, #040405 0%, var(--background) 35%, #08080a 100%);
  color:var(--text-primary);
}
body.modal-open{overflow:hidden}
body.light-mode{
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.08), transparent 22%),
    radial-gradient(circle at top right, rgba(139,92,246,.08), transparent 20%),
    linear-gradient(180deg, #f8fbff 0%, var(--background) 36%, #eef4fb 100%);
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
img{display:block;max-width:100%}

.shell{
  width:min(1240px, calc(100% - 40px));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(16px);
  background:rgba(5,5,5,.72);
  border-bottom:1px solid var(--border);
}
body.light-mode .site-header{
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(15,23,42,.10);
}
.nav-shell{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(52,211,153,.25), rgba(139,92,246,.28));
  border:1px solid var(--border);
  font-weight:800;
  letter-spacing:.08em;
}
.brand-logo-wrap{
  overflow:hidden;
  padding:0;
}
.brand-logo-image{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.brand-copy strong{
  display:block;
  font-size:1rem;
}
.brand-copy small{
  display:block;
  color:var(--text-muted);
}
body:not(.light-mode) .brand-copy strong{
  color:rgba(245,245,247,.96);
}
body:not(.light-mode) .brand-copy small{
  color:rgba(245,245,247,.72);
}

.main-nav,
.nav-actions,
.hero-actions,
.section-heading,
.cake-card-actions,
.slide-actions,
.footer-shell,
.library-actions{
  display:flex;
}

.main-nav{
  gap:28px;
}
.main-nav a{
  color:var(--text-secondary);
  font-size:.95rem;
}
body:not(.light-mode) .main-nav a{
  color:rgba(245,245,247,.86);
}
.main-nav a:hover,
.ghost-link:hover,
.text-link:hover,
.text-button:hover{
  color:var(--text-primary);
}

.nav-actions{
  align-items:center;
  gap:12px;
}
.ghost-link{
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text-secondary);
  background:var(--surface-glass);
}
body:not(.light-mode) .ghost-link{
  color:rgba(245,245,247,.92);
}
.mode-toggle{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface-glass);
  color:var(--text-primary);
  cursor:pointer;
  font-size:1rem;
}
body.light-mode .brand-copy strong,
body.light-mode .main-nav a,
body.light-mode .ghost-link,
body.light-mode .mode-toggle{
  color:#0f172a;
}
body.light-mode .brand-copy small{
  color:#475569;
}
body.light-mode .ghost-link,
body.light-mode .mode-toggle{
  background:rgba(255,255,255,.75);
  border-color:rgba(15,23,42,.12);
}
body.light-mode .main-nav a:hover,
body.light-mode .ghost-link:hover{
  color:#020617;
}

.btn{
  min-height:46px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover,
.cake-card-media:hover,
.library-media:hover,
.modal-close:hover{
  transform:translateY(-2px);
}
.btn-primary{
  background:var(--accent);
  color:#052e26;
}
.btn-secondary{
  background:var(--surface-elevated);
  color:var(--text-primary);
  border-color:var(--border);
}
.btn-dark{
  background:#1f2937;
  color:#f9fafb;
}

.hero-section{
  position:relative;
  padding:72px 0 56px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:34px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid rgba(52,211,153,.2);
  color:var(--accent);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-copy h1,
.section-heading h2,
.preview-content h2,
.cake-card-body h3,
.library-body h3,
.slideshow-content h3,
.about-copy h2,
.info-card h3,
.step-card h3{
  margin:0;
  font-family:Geist,Inter,Segoe UI,sans-serif;
}
.hero-copy h1{
  margin-top:20px;
  font-size:clamp(2.8rem,6vw,5.2rem);
  line-height:1.02;
  letter-spacing:-.04em;
  max-width:11ch;
}
.hero-copy p,
.section-heading p,
.preview-content p,
.cake-card-body p,
.library-body p,
.about-copy p,
.info-card p,
.step-card p,
.slide-description{
  color:var(--text-secondary);
  line-height:1.75;
}
body:not(.light-mode) .hero-copy p,
body:not(.light-mode) .section-heading p,
body:not(.light-mode) .preview-content p,
body:not(.light-mode) .cake-card-body p,
body:not(.light-mode) .library-body p,
body:not(.light-mode) .about-copy p,
body:not(.light-mode) .info-card p,
body:not(.light-mode) .step-card p,
body:not(.light-mode) .slideshow-content p,
body:not(.light-mode) .footer-shell p,
body:not(.light-mode) .footer-note{
  color:rgba(245,245,247,.76);
}
.hero-copy p{
  max-width:650px;
  margin:18px 0 28px;
  font-size:1.04rem;
}
.hero-actions{
  gap:12px;
  flex-wrap:wrap;
}

.hero-stats{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.stat-card,
.info-card,
.step-card,
.quote-card,
.cake-card,
.library-card,
.preview-card,
.code-card,
.filter-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.stat-card{
  padding:18px;
  border-radius:var(--radius-xl);
}
.stat-card strong{
  display:block;
  margin-bottom:6px;
  font-size:1.35rem;
}
.stat-card span{
  color:var(--text-secondary);
  font-size:.94rem;
}
body:not(.light-mode) .stat-card span,
body:not(.light-mode) .code-card-head,
body:not(.light-mode) .code-card-body p,
body:not(.light-mode) .field span,
body:not(.light-mode) .slide-counter,
body:not(.light-mode) .quote-card small{
  color:rgba(245,245,247,.72);
}

.hero-visual{
  position:relative;
  display:grid;
  gap:18px;
}
.code-card{
  padding:18px;
  border-radius:var(--radius-xl);
}
.code-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color:var(--text-secondary);
  font-size:.88rem;
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
}
.dot-emerald{background:var(--accent)}
.dot-violet{background:var(--accent-violet)}
.dot-blue{background:var(--accent-blue)}
.code-card-body p{
  margin:0 0 10px;
  color:var(--text-secondary);
  font-family:"Geist Mono","Consolas",monospace;
  font-size:.92rem;
}
.code-card-body span{
  color:var(--text-primary);
}

.preview-card{
  overflow:hidden;
  border-radius:var(--radius-2xl);
}
.preview-card img{
  width:100%;
  height:340px;
  object-fit:cover;
}
.preview-content{
  padding:22px;
}
.preview-content span,
.cake-card-top span,
.library-top span{
  color:var(--accent);
  font-weight:700;
}
.preview-content h2{
  margin:10px 0 12px;
  font-size:1.8rem;
}
.preview-footer{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.preview-footer strong{
  font-size:1.35rem;
}
.text-link,
.text-button-accent{
  color:var(--accent);
  font-weight:700;
}

.section{
  padding:36px 0 64px;
}
.section-heading{
  align-items:flex-end;
  justify-content:space-between;
  gap:26px;
  margin-bottom:28px;
}
.section-heading h2{
  margin-top:14px;
  font-size:clamp(2rem,4vw,3.3rem);
  letter-spacing:-.03em;
  max-width:15ch;
}
.section-heading p{
  max-width:500px;
  margin:0;
}

.reason-grid,
.step-grid,
.featured-grid,
.library-grid{
  display:grid;
  gap:20px;
}
.reason-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.step-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.featured-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.library-grid{
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
}

.info-card,
.step-card{
  padding:24px;
  border-radius:var(--radius-xl);
}
.info-card h3,
.step-card h3{
  font-size:1.2rem;
  margin-bottom:10px;
}
.step-number{
  display:inline-block;
  margin-bottom:14px;
  color:var(--accent);
  font-weight:800;
  letter-spacing:.08em;
}

.cake-card,
.library-card{
  overflow:hidden;
  border-radius:var(--radius-2xl);
}
.cake-card-media,
.library-media{
  width:100%;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  position:relative;
}
.cake-card-media img,
.library-media img{
  width:100%;
  height:260px;
  object-fit:cover;
}
.media-chip{
  position:absolute;
  left:16px;
  bottom:16px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(5,5,5,.78);
  border:1px solid var(--border);
  font-size:.85rem;
  font-weight:700;
}
.cake-card-body,
.library-body{
  padding:20px;
}
.cake-card-top,
.library-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.cake-card-body h3,
.library-body h3{
  margin:12px 0 10px;
  font-size:1.35rem;
}
.cake-card-actions,
.library-actions{
  margin-top:18px;
  gap:12px;
  flex-wrap:wrap;
}
.text-button{
  padding:0;
  border:0;
  background:none;
  color:var(--text-secondary);
  cursor:pointer;
  font-weight:700;
}
body:not(.light-mode) .text-button{
  color:rgba(245,245,247,.82);
}

.filter-panel{
  padding:20px;
  border-radius:var(--radius-2xl);
  display:grid;
  grid-template-columns:1.2fr .8fr auto;
  gap:14px;
  margin-bottom:26px;
}
.field{
  display:grid;
  gap:10px;
}
.field span{
  color:var(--text-secondary);
  font-size:.9rem;
}
.field input::placeholder{
  color:var(--text-muted);
}
body:not(.light-mode) .field input::placeholder{
  color:rgba(245,245,247,.46);
}
.field input,
.field select{
  min-height:52px;
  padding:0 16px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text-primary);
  outline:none;
}
body:not(.light-mode) .field select{
  color-scheme:dark;
  background:rgba(255,255,255,.04);
}
body.light-mode .field select{
  color-scheme:light;
  background:rgba(255,255,255,.92);
}
.field select option{
  background:#ffffff;
  color:#0f172a;
}
body:not(.light-mode) .field select option{
  background:#17171b;
  color:#f5f5f7;
}
.field input:focus,
.field select:focus{
  border-color:rgba(52,211,153,.5);
  box-shadow:0 0 0 4px rgba(52,211,153,.12);
}
.filter-actions{
  display:flex;
  align-items:flex-end;
}
.field-full{
  grid-column:1 / -1;
}
.contact-form{
  align-items:end;
}
.field textarea{
  min-height:140px;
  padding:14px 16px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text-primary);
  outline:none;
  resize:vertical;
}
.field textarea::placeholder{
  color:var(--text-muted);
}
body:not(.light-mode) .field textarea::placeholder{
  color:rgba(245,245,247,.46);
}
.field textarea:focus{
  border-color:rgba(52,211,153,.5);
  box-shadow:0 0 0 4px rgba(52,211,153,.12);
}
.order-map-card{
  padding:18px;
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.order-map-frame-wrap{
  min-height:260px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(5,5,5,.18);
}
.order-map-frame{
  width:100%;
  height:100%;
  min-height:260px;
  border:0;
}

.about-section{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:24px;
  align-items:start;
}
.about-copy p{
  max-width:720px;
}
.quote-card{
  padding:24px;
  border-radius:var(--radius-2xl);
}
.quote-card p{
  margin:16px 0 12px;
  font-size:1.2rem;
  line-height:1.6;
}
.quote-card small{
  color:var(--text-muted);
}

.slideshow-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:70;
}
.slideshow-modal.is-open{display:block}
.slideshow-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(12px);
}
.slideshow-dialog{
  --media-column:58%;
  position:relative;
  z-index:1;
  width:min(1180px, calc(100% - 32px));
  margin:2vh auto;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
  border-radius:34px;
  overflow:visible;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  max-height:96vh;
}
.slideshow-media{
  position:relative;
  padding:24px;
  background:linear-gradient(180deg, rgba(52,211,153,.08), rgba(255,255,255,.02));
  display:flex;
  flex-direction:column;
}
.slideshow-media img{
  width:100%;
  min-height:0;
  height:min(62vh, 560px);
  object-fit:cover;
  border-radius:28px;
  flex:0 0 auto;
}
.slide-thumbnails{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:4px;
}
.slide-thumb{
  width:72px;
  height:72px;
  padding:0;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  overflow:hidden;
  cursor:pointer;
  opacity:.72;
}
.slide-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.slide-thumb.is-active{
  border-color:var(--accent);
  opacity:1;
  box-shadow:0 0 0 2px rgba(52,211,153,.18);
}
.slideshow-content{
  padding:40px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:auto;
}
.slide-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  color:var(--accent);
  font-weight:700;
}
.slideshow-content h3{
  margin:16px 0 14px;
  font-size:clamp(2.2rem, 3vw, 3rem);
}
.slideshow-content p{
  margin:0 0 22px;
  color:var(--text-secondary);
  line-height:1.85;
  font-size:1.02rem;
}
.slide-actions{
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
}
.slide-counter{
  padding:11px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-size:.92rem;
}
.modal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(5,5,5,.72);
  color:var(--text-primary);
  cursor:pointer;
  font-size:1.6rem;
}
.site-footer{
  padding:36px 0 46px;
  border-top:1px solid var(--border);
}
.footer-shell{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(2, minmax(180px,.6fr));
  justify-content:space-between;
  gap:28px;
  align-items:flex-start;
}
.footer-brand-block{
  max-width:460px;
}
.footer-brand-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.footer-brand-head .brand-mark{
  width:48px;
  height:48px;
}
.footer-shell h3{
  margin:0 0 10px;
}
.footer-shell p,
.footer-note{
  color:var(--text-secondary);
}
.footer-brand-head p{
  margin:4px 0 0;
}
.footer-links{
  display:grid;
  gap:8px;
}
.footer-links strong{
  color:var(--text-primary);
  margin-bottom:4px;
}
.footer-links span{
  color:var(--text-secondary);
  line-height:1.7;
}
.footer-links a{
  color:var(--text-secondary);
}
.footer-links a:hover{
  color:var(--accent);
}
.footer-note{
  display:flex;
  flex-direction:column;
  gap:18px;
  flex-wrap:wrap;
}

@media (max-width:1080px){
  .hero-grid,
  .about-section,
  .slideshow-dialog{
    grid-template-columns:1fr;
  }
  .slideshow-dialog{
    --media-column:100%;
    min-height:auto;
    max-height:94vh;
    overflow:auto;
  }
  .reason-grid,
  .step-grid,
  .featured-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .shell{
    width:min(100% - 24px, 1240px);
  }
  .main-nav{
    display:none;
  }
  .nav-shell{
    min-height:auto;
    padding:14px 0;
    flex-wrap:wrap;
  }
  .nav-actions{
    width:100%;
    justify-content:space-between;
  }
  .hero-copy h1{
    max-width:none;
    font-size:clamp(2.4rem,12vw,4rem);
  }
  .hero-stats,
  .reason-grid,
  .step-grid,
  .featured-grid,
  .filter-panel,
  .footer-shell{
    grid-template-columns:1fr;
  }
  .section-heading,
  .footer-shell,
  .slide-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  .filter-panel{
    display:grid;
  }
  .filter-actions{
    align-items:stretch;
  }
  .filter-actions .btn,
  .hero-actions .btn,
  .cake-card-actions .btn,
  .slide-actions .btn{
    width:100%;
  }
  .slideshow-media img{
    min-height:320px;
    height:auto;
  }
}