/* ============================================================
   Haute Pâtisserie — Black & Gold luxe theme
   ============================================================ */
:root {
  --black: #0c0c0d;
  --black-soft: #141416;
  --panel: #1a1a1d;
  --panel-2: #202024;
  --gold: #c9a24b;
  --gold-bright: #e6c877;
  --gold-deep: #a8813a;
  --cream: #f4efe4;
  --cream-dim: #c9c3b6;
  --line: rgba(201, 162, 75, 0.22);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --serif: "Cormorant Garamond", "Noto Serif SC", "Noto Serif JP", Georgia, serif;
  --display: "Playfair Display", "Noto Serif SC", "Noto Serif JP", Georgia, serif;
  --sans: "Jost", "Noto Sans SC", "Noto Sans JP", -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container { width: min(1180px, 90vw); margin: 0 auto; }

.gold { color: var(--gold); }
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}

h1, h2, h3 { font-weight: 500; line-height: 1.15; letter-spacing: 0.01em; }
h2.section-title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  color: var(--cream);
  margin: 0.6rem 0 1.4rem;
}
.lead { font-family: var(--serif); font-size: 1.25rem; color: var(--cream-dim); font-weight: 400; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(12, 12, 13, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, padding .4s ease;
}
.site-header.scrolled { background: rgba(12,12,13,0.94); border-bottom-color: var(--line); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 0; transition: padding .4s ease;
}
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand .mark {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  color: var(--cream); letter-spacing: 0.02em;
}
.brand .mark span { color: var(--gold); }
.brand .sub {
  font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold); margin-top: 0.35rem;
}
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim); position: relative; padding: 0.2rem 0; transition: color .3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px;
  background: var(--gold); transition: width .3s ease;
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a:hover::after { width: 100%; }

/* Language dropdown */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 0.55rem;
  background: transparent; border: 1px solid var(--line); color: var(--cream);
  padding: 0.5rem 0.9rem; border-radius: 2px; cursor: pointer;
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; transition: border-color .3s, color .3s;
}
.lang-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.lang-btn .chev { transition: transform .3s; font-size: 0.6rem; }
.lang.open .lang-btn .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  min-width: 170px; overflow: hidden; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu button {
  display: flex; width: 100%; align-items: center; gap: 0.7rem;
  background: transparent; border: none; color: var(--cream-dim);
  padding: 0.75rem 1rem; cursor: pointer; font-family: var(--sans);
  font-size: 0.85rem; text-align: left; transition: background .2s, color .2s;
}
.lang-menu button:hover, .lang-menu button.active { background: var(--panel-2); color: var(--gold-bright); }
.lang-menu button .native { margin-left: auto; color: var(--gold); font-size: 0.8rem; }

/* Flags */
.flag { display: block; width: 26px; height: 17px; border-radius: 2px; flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); overflow: hidden; }
.lang-btn .cur { display: inline-flex; align-items: center; }
.lang-btn .cur .flag { width: 24px; height: 16px; }

.nav-toggle { display: none; background: none; border: none; color: var(--cream); cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.95rem 2.1rem; border-radius: 2px; cursor: pointer;
  transition: all .35s ease; border: 1px solid var(--gold);
}
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #14110a; font-weight: 400; }
.btn-gold:hover { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(201,162,75,.28); }
.btn-ghost { background: transparent; color: var(--gold-bright); }
.btn-ghost:hover { background: rgba(201,162,75,.1); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding-top: 90px;
  background:
    linear-gradient(180deg, rgba(12,12,13,.78), rgba(12,12,13,.55) 45%, rgba(12,12,13,.95)),
    radial-gradient(120% 80% at 70% 20%, rgba(201,162,75,.14), transparent 55%),
    var(--black-soft);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("https://images.unsplash.com/photo-1509440159596-0249088772ff?auto=format&fit=crop&w=1920&q=80");
  background-size: cover; background-position: center;
  opacity: 0.16; filter: grayscale(.2);
}
.hero-inner { position: relative; z-index: 2; max-width: 780px; }
.hero h1 {
  font-family: var(--display); font-size: clamp(2.8rem, 7vw, 5.4rem);
  color: var(--cream); margin: 1rem 0 0.4rem; font-weight: 600;
}
.hero h1 em { font-style: italic; color: var(--gold-bright); }
.hero .tagline { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--gold); font-weight: 400; margin-bottom: 1.4rem; }
.hero p.intro { font-size: 1.1rem; color: var(--cream-dim); max-width: 560px; margin-bottom: 2.3rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--gold); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: .7; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

/* ---------- Sections ---------- */
section { padding: 6rem 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.divider-dot { display:flex; align-items:center; gap:.8rem; color:var(--gold); }
.divider-dot::before, .divider-dot::after { content:""; height:1px; flex:1; background:var(--line); }

/* Story */
.story { background: var(--black-soft); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.story-text p { color: var(--cream-dim); margin-bottom: 1.2rem; }
.story-media { position: relative; }
.story-media img { border-radius: 4px; box-shadow: var(--shadow); filter: grayscale(.15); }
.story-media .frame { position:absolute; inset: 16px -16px -16px 16px; border:1px solid var(--gold); border-radius:4px; z-index:-1; }

/* About me */
.about-me { background: var(--black); }
.me-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items:center; }
.me-photo {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background: linear-gradient(180deg, var(--panel), var(--black-soft));
  border:1px solid var(--line); border-radius:4px; padding: 3rem 2rem; position:relative;
}
.me-photo::before { content:""; position:absolute; inset:12px; border:1px solid rgba(201,162,75,.25); border-radius:3px; pointer-events:none; }
.me-photo .monogram {
  width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:2.6rem; color:#14110a; margin-bottom:1.4rem;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep));
  box-shadow: 0 12px 30px rgba(201,162,75,.3);
}
.me-photo .me-name { font-family:var(--serif); font-size:1.7rem; color:var(--cream); }
.me-photo .me-role { font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin:.4rem 0 1.4rem; max-width:240px; }
.me-photo .me-link {
  display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-bright); border:1px solid var(--gold); padding:.6rem 1.3rem; border-radius:2px; transition:all .3s;
}
.me-photo .me-link:hover { background:rgba(201,162,75,.12); }
.me-text p { color:var(--cream-dim); margin-bottom:1.2rem; }

/* Products */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.product-card {
  background: linear-gradient(180deg, var(--panel), var(--black-soft));
  border: 1px solid var(--line); border-radius: 4px; padding: 2.2rem 1.8rem;
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.product-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow); }
.product-card .icon { font-size: 1.8rem; margin-bottom: 1rem; }
.product-card h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-bright); margin-bottom: 0.6rem; }
.product-card p { font-size: 0.95rem; color: var(--cream-dim); }

/* Applications strip */
.apps { background: var(--black-soft); }
.apps-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.app-block { background: var(--panel); border:1px solid var(--line); border-radius:4px; padding: 2.4rem; }
.app-block h3 { font-family: var(--serif); font-size:1.7rem; color: var(--gold-bright); margin-bottom:.3rem; }
.app-block .origin { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.3rem; }
.app-block ul { list-style:none; }
.app-block li { padding: .5rem 0 .5rem 1.4rem; position:relative; color:var(--cream-dim); border-bottom:1px solid rgba(201,162,75,.08); }
.app-block li:last-child{border-bottom:none;}
.app-block li::before { content:"◆"; position:absolute; left:0; color:var(--gold); font-size:.6rem; top:.9rem; }

/* Guide cards */
.guide-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:1.3rem; margin-bottom:3rem; }
.guide-card { border:1px solid var(--line); border-radius:4px; padding:1.8rem; background:var(--panel); }
.guide-card .num { font-family:var(--display); font-size:1.1rem; color:var(--gold); opacity:.5; }
.guide-card h4 { font-family:var(--serif); font-size:1.35rem; color:var(--cream); margin:.3rem 0 .6rem; }
.guide-card p { font-size:.9rem; color:var(--cream-dim); }

.howto { background: var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:4px; padding:2.6rem; }
.howto h3 { font-family:var(--serif); font-size:1.8rem; color:var(--gold-bright); margin-bottom:1rem; }
.howto ol { padding-left:1.2rem; color:var(--cream-dim); }
.howto ol li { margin-bottom:.7rem; }
.howto ol li::marker { color: var(--gold); }

/* FAQ accordion */
.faq { background: var(--black-soft); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q {
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--cream); font-family:var(--serif); font-size:1.3rem; font-weight:500;
  padding:1.5rem 3rem 1.5rem 0; position:relative; letter-spacing:.01em;
}
.faq-q::after { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); color:var(--gold); font-size:1.6rem; font-weight:300; transition:transform .3s; }
.faq-item.open .faq-q::after { content:"–"; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .45s ease; }
.faq-a p { color:var(--cream-dim); padding-bottom:1.6rem; font-size:.98rem; }

/* Contact */
.contact { background:
  linear-gradient(180deg, rgba(12,12,13,.9), rgba(12,12,13,.95)),
  radial-gradient(90% 60% at 20% 0%, rgba(201,162,75,.1), transparent 60%),
  var(--black); }
.contact-grid { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:4rem; align-items:start; }
.contact-info p { color:var(--cream-dim); margin-bottom:1.4rem; }
.info-row { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); align-items:center; }
.info-row .ic { color:var(--gold); font-size:1.1rem; width:26px; text-align:center; }
.info-row .label { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.info-row .val { color:var(--cream); }

form.contact-form { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:2.6rem; }
.field { margin-bottom:1.4rem; }
.field label { display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.55rem; }
.field input, .field select, .field textarea {
  width:100%; background:var(--black-soft); border:1px solid var(--line); border-radius:3px;
  color:var(--cream); padding:.85rem 1rem; font-family:var(--sans); font-size:.95rem;
  transition:border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.12);
}
.field textarea { min-height:130px; resize:vertical; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.form-note { font-size:.8rem; color:var(--cream-dim); margin-top:1rem; }
.form-status { margin-top:1rem; font-size:.9rem; display:none; }
.form-status.show { display:block; }
.form-status.ok { color: var(--gold-bright); }
.form-status.err { color: #e08b7a; }

/* Footer */
.site-footer { background:#08080a; border-top:1px solid var(--line); padding:3.5rem 0 2rem; }
.footer-grid { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2rem; }
.footer-grid .brand .mark { font-size:1.3rem; }
.footer-links { display:flex; gap:1.8rem; flex-wrap:wrap; }
.footer-links a { font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-dim); transition:color .3s; }
.footer-links a:hover { color:var(--gold-bright); }
.footer-bottom { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(201,162,75,.1); text-align:center; font-size:.78rem; color:var(--cream-dim); letter-spacing:.05em; }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }

/* Page hero (contact page) */
.page-hero { padding: 160px 0 60px; text-align:center;
  background: radial-gradient(80% 60% at 50% 0%, rgba(201,162,75,.12), transparent 60%), var(--black-soft); }
.page-hero h1 { font-family:var(--display); font-size:clamp(2.4rem,6vw,4rem); color:var(--cream); font-weight:600; }
.page-hero p { color:var(--cream-dim); font-family:var(--serif); font-size:1.25rem; margin-top:.6rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-links { position:fixed; top:0; right:0; bottom:0; left:auto; height:100vh; width:min(78vw,320px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; overflow-y:auto;
    background:var(--panel); padding:6rem 2rem 2rem; gap:1.6rem; transform:translateX(100%); transition:transform .4s ease; box-shadow:var(--shadow); z-index:115; }
  .nav-links.open { transform:translateX(0); }
  .nav-links li { width:100%; }
  .nav-toggle { display:block; z-index:120; }
  .lang-menu { z-index:115; }
  .nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease; z-index:110; }
  .nav-overlay.open { opacity:1; visibility:visible; }
  .story-grid, .apps-grid, .contact-grid, .me-grid { grid-template-columns:1fr; gap:2.4rem; }
  .field-row { grid-template-columns:1fr; }
  section { padding:4rem 0; }
  .lang { order:-1; }
}