/* ============================================================
   DOORLOOM — DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand — forest green */
  --primary:#012C18;
  --primary-dark:#001B0F;
  --primary-light:#3FA87A;
  --primary-05:rgba(1,44,24,.05);
  --primary-08:rgba(1,44,24,.08);
  --primary-10:rgba(1,44,24,.10);

  /* Accent — amber (scarce) */
  --accent:#f59e0b;
  --accent-dark:#d97706;

  /* Surfaces — warm */
  --surface:#fff9f3;
  --surface-alt:#fbf1e6;
  --border:#ece3d6;
  --border-strong:#e2d6c4;

  /* Text */
  --foreground:#0f172a;
  --muted:#64748b;
  --muted-light:#94a3b8;
  --white:#ffffff;

  /* Conversion CTAs (fixed, solid) */
  --call:#2563EB;
  --call-dark:#1d4ed8;
  --wa:#22B573;
  --wa-dark:#1a9d61;

  /* Semantic (pipeline / status) */
  --info:#2563eb; --info-bg:#eff6ff;
  --warn:#d97706; --warn-bg:#fffbeb;
  --quote:#7c3aed; --quote-bg:#f5f3ff;
  --ok:#16a34a; --ok-bg:#f0fdf4;
  --bad:#dc2626; --bad-bg:#fef2f2;

  /* Layout */
  --container:1200px;
  --radius-sm:.625rem;
  --radius:1rem;       /* rounded-2xl default card */
  --radius-lg:1.5rem;  /* rounded-3xl panels */
  --shadow-sm:0 1px 2px rgba(2,6,23,.05);
  --shadow-md:0 8px 24px rgba(2,6,23,.06);
  --shadow-lg:0 24px 60px rgba(2,6,23,.08);
  --shadow-cta:0 12px 30px rgba(1,44,24,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--foreground);
  background:var(--white);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  width:100%;
}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.08;font-weight:800}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:.625rem}
::selection{background:var(--primary);color:#fff}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:112px 0}
.section--tight{padding:80px 0}
@media(max-width:768px){.section{padding:72px 0}.section--tight{padding:56px 0}}
.bg-cream{background:var(--surface)}
.bg-sand{background:var(--surface-alt)}
.bg-forest{background:var(--primary);color:#fff}

.eyebrow{
  display:inline-flex;align-items:flex-start;gap:9px;text-align:left;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.35;
  color:var(--primary);
}
.bg-forest .eyebrow{color:var(--accent)}
.eyebrow-ico{height:12px;width:auto;flex:none;margin-top:2px}
.loombars{display:inline-flex;align-items:flex-end;gap:2.5px;height:14px}
.loombars i{width:3px;border-radius:2px;background:var(--accent);display:block}
.loombars i:nth-child(1){height:6px}
.loombars i:nth-child(2){height:10px}
.loombars i:nth-child(3){height:14px}
.loombars i:nth-child(4){height:8px}

.h-display{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:900;letter-spacing:-.035em;line-height:1.02}
.h2{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800}
.h3{font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:700}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--muted);line-height:1.55;font-weight:400}
.bg-forest .lead{color:rgba(255,255,255,.72)}
.section-head{max-width:640px}
.section-head.center{margin:0 auto;text-align:center}
.section-head .h2{margin:8px 0 0}
.section-head .lead{margin-top:18px}

/* Mobile type scale — dial back the clamp floors so headings read calmer on phones */
@media(max-width:640px){
  .h-display{font-size:1.6rem;letter-spacing:-.03em}
  .h2{font-size:1.35rem}
  .h3{font-size:1.02rem}
  .lead{font-size:.94rem}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:1rem;border-radius:.9rem;
  padding:14px 26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
  white-space:nowrap;
}
.btn svg{transition:transform .25s var(--ease)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-cta)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 18px 40px rgba(1,44,24,.28)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-ghost{background:var(--white);color:var(--foreground);border:1px solid var(--border-strong);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--surface);transform:translateY(-2px)}
.btn-call{background:var(--call);color:#fff;box-shadow:0 12px 30px rgba(37,99,235,.22)}
.btn-call:hover{background:var(--call-dark);transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 12px 30px rgba(34,181,115,.22)}
.btn-wa:hover{background:var(--wa-dark);transform:translateY(-2px)}
.btn-lg{padding:17px 32px;font-size:1.08rem}
.btn-block{width:100%}
.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--primary)}
.textlink svg{transition:transform .25s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}
.bg-forest .textlink{color:#fff}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(2,6,23,.05);border-bottom-color:var(--border)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:var(--container);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{display:flex;align-items:flex-end;gap:3px;height:24px}
.brand-mark i{width:4px;border-radius:2px;background:var(--accent);display:block}
.brand-mark i:nth-child(1){height:10px}
.brand-mark i:nth-child(2){height:16px}
.brand-mark i:nth-child(3){height:24px}
.brand-mark i:nth-child(4){height:13px}
.brand-word{font-weight:800;font-size:1.32rem;letter-spacing:-.04em;color:var(--primary)}
.brand-logo{height:34px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:9px 14px;border-radius:.7rem;font-size:.94rem;font-weight:500;color:var(--muted);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--foreground);background:var(--surface)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:44px;height:44px;border-radius:.7rem;align-items:center;justify-content:center;color:var(--foreground)}
.nav-burger:hover{background:var(--surface)}
@media(max-width:920px){
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .nav-burger{display:flex}
}
.mobile-menu{position:fixed;inset:72px 0 auto;z-index:55;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 24px 28px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s var(--ease)}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{display:block;padding:14px 12px;border-radius:.7rem;font-weight:600;font-size:1.05rem;color:var(--foreground)}
.mobile-menu a:hover{background:var(--surface)}
.mobile-menu .btn{margin-top:14px}

/* ============================================================
   STORE BADGES
   ============================================================ */
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:var(--primary);color:#fff;border-radius:.8rem;padding:9px 16px;transition:transform .25s var(--ease),background .2s}
.store-badge:hover{transform:translateY(-2px);background:var(--primary-dark)}
.store-badge svg{flex:none}
.store-badge > span{display:inline-flex;flex-direction:column;justify-content:center}
.store-badge .st-top{font-size:.62rem;opacity:.75;letter-spacing:.04em;line-height:1}
.store-badge .st-main{font-size:1rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}

/* ============================================================
   PHONE MOCKUP (video-ready)
   ============================================================ */
.phone{
  position:relative;width:300px;max-width:100%;margin:0 auto;
  border-radius:34px;background:#0b1512;padding:5px;
  box-shadow:0 40px 90px rgba(2,6,23,.22),0 0 0 1px rgba(255,255,255,.05);
}
.phone-screen{position:relative;border-radius:30px;overflow:hidden;background:var(--white);aspect-ratio:9/19.3;display:flex;flex-direction:column}
/* static cover image shown over the animated mockup */
.mockup-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:30px;z-index:5}
.phone .statusbar{padding-top:12px}
.phone-lg{width:330px}
/* status bar */
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 6px;font-size:.72rem;font-weight:700;color:var(--foreground);flex:none}
.statusbar .sb-r{display:flex;gap:5px;align-items:center}
/* app header */
.appbar{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 12px;flex:none}
.appbar .title{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.appbar .sub{font-size:.7rem;color:var(--muted)}
.avatar-sm{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}
.appbody{flex:1;overflow:hidden;padding:2px 16px 16px;background:var(--surface)}
/* real screenshot fills phone screen: full width, top-aligned, bottom cropped */
.screen-shot{flex:1;overflow:hidden}
.screen-shot img{display:block;width:100%;height:auto}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(4,12,8,.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.open{opacity:1;pointer-events:auto}
.lb-stage{display:flex;flex-direction:column;align-items:center;gap:16px;transform:scale(.96);transition:transform .3s var(--ease)}
.lightbox.open .lb-stage{transform:none}
.lb-phone{width:min(340px,86vw,calc((100vh - 170px) / 2.144 + 24px))}
.lb-title{color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.lb-phone .appbody .mshot{position:static;inset:auto;height:auto;padding:0;flex:1}
/* in lightbox, let full screenshot scroll (full width, top-aligned, not cropped) */
.lb-phone .screen-shot{min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.lb-phone .screen-shot::-webkit-scrollbar{width:0;background:transparent}
.lb-phone .screen-shot{scrollbar-width:none}
.lightbox .lb-close{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:var(--shadow-sm)}
/* video demo modal */
.vmodal{position:fixed;inset:0;z-index:95;background:rgba(4,12,8,.86);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.vmodal.open{opacity:1;pointer-events:auto}
.vm-stage{transform:scale(.96);transition:transform .3s var(--ease)}
.vmodal.open .vm-stage{transform:none}
/* video plays large inside a phone frame */
.vm-phone{display:inline-block;width:auto;max-width:100%;padding:8px;border-radius:46px;box-shadow:var(--shadow-lg)}
.vm-phone .phone-screen{height:88vh;max-height:88vh;width:auto;max-width:92vw;aspect-ratio:9/20;border-radius:38px;overflow:hidden}
.vm-phone video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.vm-close{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:var(--shadow-sm)}
/* tap-to-view overlay on gallery mockups */
.gcard .phone{position:relative}
.gtap{position:absolute;inset:0;z-index:8;border-radius:34px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:700;font-size:.9rem;background:rgba(4,12,8,.42);opacity:0;transition:opacity .25s;pointer-events:none}
.gcard:hover .gtap,.gcard:focus-visible .gtap{opacity:1}
.js-video{cursor:pointer}
.js-video:hover .gtap,.js-video:focus-within .gtap{opacity:1}
@media(hover:none){.gtap{opacity:1;background:linear-gradient(to top,rgba(4,12,8,.62),rgba(4,12,8,0) 42%);align-items:flex-end;padding-bottom:16px;font-size:.82rem}}
/* always-on "View demo" overlay for the animated product mockups */
.js-video .gtap-demo{opacity:1;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0;background:rgba(4,12,8,.4)}
.js-video .gtap-demo .pb{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.34);transition:transform .25s var(--ease)}
.js-video .gtap-demo .pb svg{width:23px;height:23px;margin-left:3px}
.js-video .gtap-demo .demo-label{font-weight:700;font-size:.92rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.js-video:hover .gtap-demo,.js-video:focus-within .gtap-demo{background:rgba(4,12,8,.5)}
.js-video:hover .gtap-demo .pb,.js-video:focus-within .gtap-demo .pb{transform:scale(1.08)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--primary);color:#fff;padding:64px 0 34px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer .brand-word{color:#fff}
.footer-about{color:rgba(255,255,255,.6);font-size:.92rem;margin-top:18px;max-width:300px;line-height:1.6}
.footer-about a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:2px}
.footer-about a:hover{color:#fff}
.footer-contact{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.footer-contact a{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;color:rgba(255,255,255,.72)}
.footer-contact a:hover{color:#fff}
.footer-contact svg{color:var(--accent);flex:none}
.footer-col h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;margin-bottom:16px}
.footer-col a{display:block;padding:6px 0;color:rgba(255,255,255,.72);font-size:.92rem}
.footer-col a:hover{color:#fff}
.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:.82rem;color:rgba(255,255,255,.5)}
.footer-bottom .made{display:inline-flex;align-items:center;gap:7px}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(63,168,122,.4)}70%{box-shadow:0 0 0 8px rgba(63,168,122,0)}}
.float{animation:floaty 5s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .wa-sheet,.day-modal,.voucher,.wa-msg{opacity:1!important;transform:none!important}
}