/* ========================================================
   TOKENS
======================================================== */
:root{
  --bg: #F6F6F4;
  --black: #111111;
  --gold: #111111;
  --gold-soft: rgba(17,17,17,0.05);
  --gray-light: #E7E7E4;
  --white: #FFFFFF;
  --text-gray: #666666;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 12px;

  --shadow-soft: 0 20px 60px -20px rgba(17,17,17,0.12);
  --shadow-card: 0 10px 30px -12px rgba(17,17,17,0.10);
  --shadow-lift: 0 24px 48px -16px rgba(17,17,17,0.18);
  --shadow-gold: 0 16px 36px -12px rgba(17,17,17,0.28);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max-width: 1200px;
}

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

html{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  background: var(--bg);
  color: var(--black);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page-scale{
  width: 100%;
}

/* Desktop: fit the entire page within one viewport, no scrolling.
   .page-scale is measured and (if needed) scaled down via script.js
   so header, hero, features, CTA and footer are all visible at once.
   Tablet and mobile are untouched and scroll normally. */
@media (min-width: 1200px){
  html.desktop-fit, html.desktop-fit body{
    height: 100%;
    overflow: hidden;
  }
  html.desktop-fit .page-scale{
    transform-origin: top left;
  }
}

img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; cursor:pointer; border:none; background:none; }
input{ font: inherit; }
ul{ list-style:none; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.icon{ width:1em; height:1em; display:block; fill:none; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ========================================================
   FADE-UP SCROLL REVEAL
======================================================== */
.fade-up{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.fade-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================
   HEADER
======================================================== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 80px;
  z-index: 100;
  display:flex;
  align-items:center;
  background: rgba(248,245,240,0.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.scrolled{
  background: rgba(248,245,240,0.88);
  box-shadow: 0 1px 0 rgba(17,17,17,0.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.logo-mark{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--black);
}
.icon-fp-sm{ width:38px; height:38px; color: var(--black); }
.header-right{
  display:flex;
  align-items:center;
  gap:18px;
}
.follow-label{
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--text-gray);
}
.social-nav{ display:flex; gap:10px; }
.social-link{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(17,17,17,0.12);
  color: var(--black);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease);
}
.icon-social{ width:16px; height:16px; }
.social-link:hover{
  transform: translateY(-3px) scale(1.06);
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

/* ========================================================
   HERO
======================================================== */
.hero{
  padding: 96px 0 32px;
  position: relative;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero-fp{
  width:72px; height:72px;
  color: var(--gold);
  margin-bottom: 14px;
}
.hero-heading{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.3rem, 3.6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  display:flex;
  flex-direction:column;
}
.divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin: 20px 0 16px;
}
.divider-line{
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(17,17,17,0.28));
}
.divider-line:last-child{
  background: linear-gradient(to left, transparent, rgba(17,17,17,0.28));
}
.divider-leaf{
  width:22px; height:22px;
  color: var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.icon-leaf-sm{ width:16px; height:16px; }
.eyebrow{
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--gold);
  margin-bottom: 16px;
}
.hero-sub{
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-gray);
  font-weight: 300;
  max-width: 320px;
}

/* --- Hero visual / can / pedestal --- */
.hero-visual{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 380px;
}
.visual-glow{
  position:absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17,17,17,0.05) 0%, rgba(17,17,17,0) 70%);
  filter: blur(10px);
  z-index: 0;
}
.botanical-shadow{
  position:absolute;
  top: -12%;
  right: -10%;
  width: 400px;
  height: 400px;
  color: var(--black);
  opacity: 0.07;
  filter: blur(16px);
  z-index: 0;
  pointer-events:none;
}
.botanical-shadow svg{ position:absolute; width:160px; height:160px; }
.bs-1{ top:8%;  left:32%; transform:rotate(-12deg) scale(1.15); }
.bs-2{ top:-2%; left:52%; transform:rotate(22deg)  scale(0.95); }
.bs-3{ top:26%; left:8%;  transform:rotate(-48deg) scale(0.85); }
.bs-4{ top:42%; left:54%; transform:rotate(58deg)  scale(1.05); }
.bs-5{ top:2%;  left:14%; transform:rotate(-72deg) scale(0.7); }

.pedestal{
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.pedestal-top{
  width: 230px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 32% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #efece6 0%, #e2ddd3 45%, #f3f0ea 70%, #d8d2c6 100%);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.6),
    inset 0 -6px 14px rgba(120,110,90,0.18);
  position: relative;
  margin-top: -18px;
}
.pedestal-top::before{
  content:"";
  position:absolute; inset: 5px 16px;
  border-radius: 50%;
  background: repeating-linear-gradient(100deg, rgba(120,110,95,0.06) 0px, rgba(120,110,95,0.06) 1px, transparent 1px, transparent 9px);
  opacity:0.6;
}
.pedestal-shadow{
  width: 196px;
  height: 30px;
  margin-top: 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(17,17,17,0.22) 0%, rgba(17,17,17,0) 72%);
  filter: blur(2px);
}
.pedestal-leaf-sprig{
  position:absolute;
  bottom: 26px;
  left: -28px;
  width: 56px;
  height: 56px;
  color: var(--black);
  z-index: 4;
  pointer-events:none;
}
.pedestal-leaf-sprig svg{ position:absolute; width:30px; height:30px; }
.sprig-1{ bottom:2px;  left:14px; transform:rotate(-18deg); }
.sprig-2{ bottom:10px; left:26px; transform:rotate(18deg) scale(0.82); }
.sprig-3{ bottom:-6px; left:0px;  transform:rotate(-58deg) scale(0.66); }

.can{
  position: relative;
  width: 148px;
  z-index: 3;
  margin-bottom: 4px;
}
.can.floating{
  animation: float 5s ease-in-out infinite;
}
@keyframes float{
  0%, 100%{ transform: translateY(0px); }
  50%{ transform: translateY(-14px); }
}
.can-lid{
  width: 100%;
  height: 20px;
  border-radius: 50% / 10px;
  background: linear-gradient(180deg, #fdfdfc 0%, #e7e3db 100%);
  box-shadow: inset 0 -3px 6px rgba(17,17,17,0.08), 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
  z-index: 2;
}
.can-body{
  width: 100%;
  height: 258px;
  margin-top: -10px;
  border-radius: 14px 14px 20px 20px / 14px 14px 26px 26px;
  background:
    linear-gradient(100deg,
      #e9e5dd 0%,
      #fbfaf7 14%,
      #ffffff 26%,
      #efece5 40%,
      #d9d4c9 52%,
      #f6f3ee 66%,
      #ffffff 80%,
      #e3ded4 100%);
  box-shadow:
    var(--shadow-soft),
    inset 6px 0 12px rgba(255,255,255,0.5),
    inset -8px 0 16px rgba(17,17,17,0.06);
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top: 34px;
}
.can-body::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 46px;
  background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,0.10) 100%);
  pointer-events:none;
}
.can-sheen{
  position:absolute;
  top:0; left: 18%;
  width: 16%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.1));
  filter: blur(2px);
  opacity:0.8;
}
.can-highlight{
  position:absolute;
  top: -10%;
  left: 62%;
  width: 10%;
  height: 130%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0) 90%);
  filter: blur(3px);
  transform: rotate(4deg);
  opacity: 0.7;
}
.can-condensation{
  position:absolute; inset:0;
  pointer-events:none;
}
.can-condensation span{
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(180,190,195,0.35));
  box-shadow: 0 1px 2px rgba(17,17,17,0.08);
}
.can-condensation span:nth-child(1){ top:18%; left:22%; width:3px; height:5px; }
.can-condensation span:nth-child(2){ top:34%; left:70%; width:4px; height:6px; }
.can-condensation span:nth-child(3){ top:52%; left:30%; width:3px; height:4px; }
.can-condensation span:nth-child(4){ top:64%; left:78%; width:3px; height:5px; }
.can-condensation span:nth-child(5){ top:75%; left:48%; width:4px; height:6px; }
.can-condensation span:nth-child(6){ top:44%; left:14%; width:3px; height:4px; }
.can-condensation span:nth-child(7){ top:22%; left:52%; width:2.5px; height:4px; }
.can-condensation span:nth-child(8){ top:58%; left:60%; width:3px; height:5px; }

.icon-fp-can{
  width: 42px; height:42px;
  color: var(--gold);
  margin-bottom: 10px;
  position: relative; z-index:2;
}
.can-text{
  position: relative; z-index:2;
  font-family: var(--font-head);
  text-align:center;
  color: var(--black);
  letter-spacing: 0.12em;
}
.can-text-top{
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 26px;
}
.can-text-mid{
  font-size: 7.5px;
  font-weight: 500;
  color: #555;
  margin-bottom: auto;
}
.can-text-bottom{
  font-size: 8px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 22px;
}

/* ========================================================
   FEATURES
======================================================== */
.features{
  padding: 0 0 14px;
}
.features-panel{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
}
.feature-card{
  padding: 24px 22px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  position: relative;
  border-radius: var(--radius-lg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.feature-card + .feature-card{
  border-left: 1px solid var(--gray-light);
}
.feature-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  z-index: 2;
}
.icon-feature{
  width: 34px; height:34px;
  color: var(--gold);
  margin-bottom: 22px;
}
.feature-card h3{
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.feature-card p{
  font-size: 14px;
  color: var(--text-gray);
  font-weight: 300;
  line-height: 1.6;
}

/* ========================================================
   COMING SOON
======================================================== */
.coming-soon{
  padding: 0 0 36px;
}
.cs-card{
  background: var(--black);
  border-radius: var(--radius-lg);
  padding: 38px 44px;
  position: relative;
  overflow: hidden;
  display:flex;
  align-items:center;
}
.cs-watermark{
  position:absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 620px; height: 620px;
  color: rgba(255,255,255,0.055);
  filter: blur(1.5px);
  -webkit-mask-image: radial-gradient(circle at 62% 50%, #000 55%, transparent 78%);
  mask-image: radial-gradient(circle at 62% 50%, #000 55%, transparent 78%);
  pointer-events:none;
}
.cs-content{
  position:relative;
  z-index:2;
  max-width: 560px;
}
.cs-heading{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: 16px;
}
.gold-text{ color: var(--white); }
.cs-copy{
  color: rgba(255,255,255,0.62);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 26px;
  max-width: 440px;
}
.notify-form{
  display:flex;
  max-width: 460px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.notify-form:focus-within{
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}
.notify-input{
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 14px;
}
.notify-input::placeholder{ color: rgba(255,255,255,0.42); }
.notify-input:focus{ outline: none; }
.notify-btn{
  padding: 16px 26px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), background 0.32s var(--ease);
}
.notify-btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-gold);
  background: #ececec;
}
.notify-message{
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  min-height: 18px;
}
.cs-contact{
  margin-top: 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}
.cs-contact a{
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cs-contact a:hover{
  color: var(--white);
  border-color: var(--white);
}

/* ========================================================
   FOOTER
======================================================== */
.site-footer{
  background: var(--white);
  padding: 26px 0 16px;
}
.footer-icons{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-bottom: 18px;
}
.footer-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 16px;
}
.icon-footer{
  width: 28px; height:28px;
  color: var(--gold);
  transition: transform 0.35s var(--ease);
}
.footer-item:hover .icon-footer{
  transform: scale(1.14);
}
.footer-item p{
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--black);
  line-height: 1.6;
}
.footer-contact{
  text-align:center;
  font-size: 13px;
  color: var(--text-gray);
  margin-bottom: 10px;
}
.footer-contact a{
  color: var(--black);
  font-weight: 500;
  border-bottom: 1px solid rgba(17,17,17,0.25);
  transition: border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.footer-contact a:hover{
  border-color: var(--black);
  opacity: 0.7;
}
.footer-copyright{
  text-align:center;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--text-gray);
  padding-top: 14px;
  border-top: 1px solid var(--gray-light);
}
.mobile-only{ display:none; }

/* ========================================================
   RESPONSIVE — TABLET
======================================================== */
@media (max-width: 1199px){
  .hero-inner{ grid-template-columns: 1fr; gap: 72px; }
  .hero-copy{ align-items:center; text-align:center; }
  .hero-sub{ max-width: none; }
  .divider{ margin-left:auto; margin-right:auto; }
  .features-panel{ grid-template-columns: repeat(2, 1fr); }
  .feature-card:nth-child(2){ border-left: 1px solid var(--gray-light); }
  .feature-card:nth-child(3){ border-left: none; border-top: 1px solid var(--gray-light); }
  .feature-card:nth-child(4){ border-top: 1px solid var(--gray-light); }
  .cs-card{ padding: 64px 44px; }
  .cs-watermark{ width: 340px; height: 340px; right: -100px; }
}

/* ========================================================
   RESPONSIVE — MOBILE
======================================================== */
@media (max-width: 767px){
  .container{ padding: 0 20px; }
  .site-header{ height: 72px; }
  .header-inner{ flex-wrap:wrap; }
  .follow-label{ display:none; }
  .hero{ padding: 128px 0 80px; }
  .hero-heading{ font-size: 2.1rem; }
  .hero-visual{ min-height: 420px; }
  .can{ width: 130px; }
  .can-body{ height: 230px; }

  .features-panel{ grid-template-columns: 1fr; }
  .feature-card{ border-left: none !important; border-top: 1px solid var(--gray-light); }
  .feature-card:first-child{ border-top:none; }

  .cs-card{ flex-direction:column; padding: 48px 26px; text-align:center; }
  .cs-content{ max-width:none; }
  .cs-copy{ margin-left:auto; margin-right:auto; }
  .notify-form{ flex-direction:column; }
  .notify-btn{ width:100%; }
  .cs-watermark{ display:none; }

  .footer-icons{ grid-template-columns: 1fr; gap: 36px; }
  .mobile-only{ display:inline; }
}