/*
 * My Habit Journals — Design System
 * Taste Skill: anti-slop, no emojis, no purple, no beige slop, oklch colors
 * Huashu: Dark Editorial + Swiss precision hybrid
 * Fonts: Manrope (display), Inter (body), JetBrains Mono (data)
 */

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.6;background:#EBF2F7;color:#2C3440;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;width:100%}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul{list-style:none}

/* ── Fonts ── */
:root{
  --font-display:'Manrope',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',monospace;
  --c-bg:#EBF2F7;
  --c-surface:#FFFFFF;
  --c-surface-2:#F5F7F9;
  --c-surface-3:#F0F3F7;
  --c-text:#2C3440;
  --c-text-2:#5F6E80;
  --c-text-3:#94A0B0;
  --c-accent:#5EB265;
  --c-accent-hover:#4D9A55;
  --c-accent-dim:#8FC7A8;
  --c-border:#E0E6EB;
  --c-border-light:#E8ECF0;
  --c-surface-dark:#2F3C4B;
  --radius:8px;
  --max-w:1280px;
  --nav-h:72px;
}

/* ── Typography ── */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-0.02em;text-wrap:pretty}
h1{font-size:clamp(2.25rem,5vw,3.75rem)}
h2{font-size:clamp(1.5rem,3.5vw,2.5rem);margin-bottom:0.75rem}
h3{font-size:clamp(1.125rem,2.5vw,1.5rem);margin-bottom:0.5rem}
p{text-wrap:pretty;color:var(--c-text-2);max-width:65ch}
.text-sm{font-size:0.875rem}
.text-xs{font-size:0.75rem;letter-spacing:0.05em}
.text-mono{font-family:var(--font-mono);letter-spacing:-0.01em}
.accent{color:var(--c-accent)}
.muted{color:var(--c-text-3)}

/* ── Container ── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}

/* ── Trust Bar ── */
.trust-bar{padding:1.5rem 0;background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.trust-bar .container{display:flex;gap:3rem;align-items:center;justify-content:center}
.trust-bar__item{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;color:var(--c-text-2)}
.trust-bar__item svg{width:24px;height:24px;color:var(--c-accent);flex-shrink:0}
.trust-bar__item strong{font-size:1.125rem;color:var(--c-text);font-weight:700;margin-right:.125rem}
@media(max-width:768px){
  .trust-bar .container{flex-direction:column;gap:1rem}
  .trust-bar__item{gap:.5rem}
}

/* ── Navigation ── */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--c-border)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav__logo{display:flex;align-items:center;gap:.625rem;font-family:var(--font-display);font-weight:700;font-size:1.125rem;letter-spacing:-0.01em}
.nav__logo svg{width:28px;height:28px;color:var(--c-accent)}
.nav__links{display:flex;align-items:center;gap:1.5rem}
.nav__link{font-size:0.9375rem;font-weight:500;color:var(--c-text);transition:color .2s;position:relative}
.nav__link:hover,.nav__link.active{color:var(--c-text)}
.nav__link.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1.5px;background:var(--c-accent);border-radius:2px}
.nav__mobile{display:none;flex-direction:column;gap:5px;padding:4px;background:none;border:none;cursor:pointer}
.nav__mobile span{display:block;width:22px;height:2px;background:var(--c-text);border-radius:2px;transition:.25s}
@media(max-width:768px){
  .nav__links{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--c-bg);border-bottom:1px solid var(--c-border);flex-direction:column;padding:1rem 1.5rem;gap:0}
  .nav__links.open{display:flex;background:var(--c-surface);border-bottom:1px solid var(--c-border)}
  .nav__link{display:block;padding:.875rem 0;font-size:1rem;width:100%}
  .nav__links .btn.btn--sm{margin-top:.5rem;width:100%;text-align:center}
  .nav__mobile{display:flex}
  .nav__mobile.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav__mobile.open span:nth-child(2){opacity:0}
  .nav__mobile.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.75rem;font-family:var(--font-body);font-size:0.9375rem;font-weight:600;border-radius:var(--radius);transition:all .2s;white-space:nowrap}
.btn-primary{background:var(--c-accent);color:#FFFFFF}
.btn-primary:hover{background:var(--c-accent-hover);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--c-border-light);color:var(--c-text)}
.btn-outline:hover{border-color:var(--c-text);background:rgba(0,0,0,.04)  /* light mode hover */}
.btn-ghost{color:var(--c-text-2)}
.btn-ghost:hover{color:var(--c-text)}
.btn--sm{padding:.5rem 1.25rem;font-size:0.8125rem}

/* ── Tag / Eyebrow ── */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:0.6875rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--c-accent);margin-bottom:1rem}
.eyebrow::before{content:'';display:block;width:1.5rem;height:1px;background:var(--c-accent)}

/* ── Sections ── */
.section{padding:5rem 0}
.section-header{text-align:center;margin-bottom:3.5rem}
.section-header p{max-width:48ch;margin:0 auto}

/* ── Hero (split-screen) ── */
.hero{min-height:100dvh;display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden}
.hero .container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;width:100%;display:block}
.hero__content{max-width:560px}
.hero h1{margin-bottom:1rem}
.hero p{font-size:1.125rem;margin-bottom:2rem;max-width:45ch}
.hero__ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.hero__visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero__visual-card{width:100%;max-width:520px;aspect-ratio:4/3;background:var(--c-surface-2);border-radius:12px;border:1px solid var(--c-border);overflow:hidden;position:relative;padding:2rem;display:flex;flex-direction:column;gap:1rem}
.hero__visual-card .product-strip{display:flex;gap:1rem;flex:1}
.hero__visual-card .product-strip > div{flex:1;background:var(--c-surface-3);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--c-border)}
.hero__visual-card .product-strip > div .mini-icon{width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
.hero__visual-card .product-strip > div .mini-label{font-family:var(--font-display);font-size:0.75rem;font-weight:700;line-height:1.3;color:var(--c-text)}
.hero__visual-card .product-strip > div .mini-tag{font-family:var(--font-mono);font-size:0.625rem;color:var(--c-text-3);margin-top:.5rem}
.hero__visual-card .price-badge{position:absolute;top:-8px;right:-8px;background:var(--c-accent);color:#FFFFFF;font-family:var(--font-mono);font-size:0.75rem;font-weight:700;padding:.375rem .75rem;border-radius:6px}
@media(max-width:900px){
  .hero .container{grid-template-columns:1fr;gap:1.5rem;text-align:center;min-height:auto;padding-top:1.5rem}
  .hero{min-height:auto;padding:var(--nav-h) 0 2rem}
  .hero__content{max-width:100%}
  .hero h1{font-size:clamp(1.75rem,6vw,2.5rem)}
  .hero p{font-size:1rem;margin-left:auto;margin-right:auto;margin-bottom:1.5rem}
  .hero__ctas{justify-content:center}
  .hero__ctas .btn{flex:1;max-width:200px}
  .hero__visual-card{max-width:100%;aspect-ratio:auto;padding:1.25rem}
  .hero__visual-card .product-strip{gap:.625rem}
  .hero__visual-card .product-strip > div{padding:1rem}
  .hero__visual-card .price-badge{font-size:0.625rem;padding:.25rem .625rem;top:-6px;right:-6px}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-grid > div{margin-bottom:0}
  .container{padding:0 1rem}
  .section{padding:3rem 0}
  .section-header{margin-bottom:2rem}
  .cta-section{padding:4rem 0}
  .hero__ctas .btn{flex:1;max-width:none;width:100%}
  .btn{width:100%;text-align:center}
  .hero__visual img,.hero-product-img img{width:100%;height:auto}
  .nav__link{font-size:0.9375rem;padding:.75rem 0}
  .trust-bar__item{font-size:.75rem}
  .trust-bar__item svg{width:16px;height:16px}
  .testimonial-card blockquote{font-size:.8125rem}
  .guarantee-badge{font-size:.6875rem;padding:.5rem}
  .faq-item__q{font-size:.8125rem;padding:.75rem 1rem}
  .faq-item__a{font-size:.75rem}
  .feature-card{padding:1.25rem}
  .product-card__body{padding:1rem}
  .pricing-card{padding:1.5rem}
}

/* ── Product Grid ── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.product-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;transition:all .25s;display:flex;flex-direction:column}
.product-card:hover{border-color:var(--c-accent-dim);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.product-card__img{aspect-ratio:16/10;background:var(--c-surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--c-border)}
.product-card__img svg{width:60%;height:60%;opacity:0.5}
.product-card__body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.product-card__category{font-family:var(--font-mono);font-size:0.625rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--c-accent);margin-bottom:.5rem}
.product-card h3{font-size:1.125rem;margin-bottom:.375rem}
.product-card p{font-size:0.875rem;color:var(--c-text-2);margin-bottom:1rem;flex:1}
.product-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--c-border)}
.product-card__price{font-family:var(--font-mono);font-size:1.125rem;font-weight:700}
.product-card__price .original{font-size:0.75rem;color:var(--c-text-3);text-decoration:line-through;margin-left:.5rem;font-weight:400}

/* ── Features ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.feature-card{padding:1.5rem;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);transition:all .25s}
.feature-card:hover{border-color:var(--c-accent-dim)}
.feature-card__icon{width:44px;height:44px;border-radius:var(--radius);background:rgba(201,168,76,.08);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--c-accent)}
.feature-card h3{font-size:1rem;margin-bottom:.375rem}
.feature-card p{font-size:0.875rem}

/* ── Pricing / Bundle ── */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;align-items:start}
.pricing-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;transition:all .25s;position:relative}
.pricing-card.featured{border-color:var(--c-accent);background:linear-gradient(135deg,var(--c-surface) 0%,rgba(94,178,101,.06) 100%)}
.pricing-card.featured::before{content:'Most Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--c-accent);color:#FFFFFF;font-family:var(--font-mono);font-size:0.625rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:.3rem 1rem;border-radius:20px}
.pricing-card:hover{transform:translateY(-2px);border-color:var(--c-accent-dim)}
.pricing-card h3{font-size:1.125rem;margin-bottom:.25rem}
.pricing-card .pricing-sub{font-size:0.875rem;color:var(--c-text-3);margin-bottom:1.5rem}
.pricing-card .price{font-family:var(--font-mono);font-size:2rem;font-weight:700;margin-bottom:1.5rem}
.pricing-card .price span{font-size:1rem;font-weight:400;color:var(--c-text-2)}
.pricing-card ul{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.625rem}
.pricing-card ul li{display:flex;align-items:flex-start;gap:.625rem;font-size:0.875rem;color:var(--c-text-2)}
.pricing-card ul li svg{width:16px;height:16px;color:var(--c-accent);flex-shrink:0;margin-top:2px}
.pricing-card .btn{margin-top:auto}

/* ── Testimonials ── */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.testimonial-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:1.5rem;transition:all .25s}
.testimonial-card:hover{border-color:var(--c-border-light)}
.testimonial-card .stars{display:flex;gap:2px;margin-bottom:.75rem;color:var(--c-accent)}
.testimonial-card blockquote{font-size:0.9375rem;color:var(--c-text);font-style:normal;margin-bottom:1rem;line-height:1.7}
.testimonial-card footer{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--c-border)}
.testimonial-card footer .avatar{width:36px;height:36px;border-radius:50%;background:var(--c-surface-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:0.875rem;color:var(--c-accent)}
.testimonial-card footer .name{font-size:0.8125rem;font-weight:600}
.testimonial-card footer .handle{font-size:0.75rem;color:var(--c-text-3)}

/* ── FAQ ── */
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}
.faq-item{border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden}
.faq-item__q{width:100%;text-align:left;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--font-body);font-size:0.9375rem;font-weight:500;color:var(--c-text);transition:background .2s;background:var(--c-surface);min-height:48px}
.faq-item__q:hover{background:var(--c-surface-2)}
.faq-item__q svg{width:16px;height:16px;color:var(--c-text-3);transition:transform .25s;flex-shrink:0}
.faq-item.open .faq-item__q svg{transform:rotate(45deg)}
.faq-item__a{padding:0 1.25rem 1rem;font-size:0.875rem;color:var(--c-text-2);line-height:1.7;display:none}
.faq-item.open .faq-item__a{display:block}

/* ── CTA Section ── */
.cta-section{text-align:center;padding:6rem 0;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 600px 300px at 50% 0%,rgba(94,178,101,.08) 0%,transparent 100%);pointer-events:none}
.cta-section h2{margin-bottom:.75rem}
.cta-section p{margin:0 auto 2rem;font-size:1.0625rem}

/* ── Footer ── */
.footer{border-top:1px solid var(--c-border);padding:3rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
.footer-brand .nav__logo{margin-bottom:.75rem}
.footer-brand p{font-size:0.875rem;max-width:32ch}
.footer h4{font-family:var(--font-display);font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--c-text-3);margin-bottom:1rem}
.footer a{display:block;font-size:0.875rem;color:var(--c-text-2);margin-bottom:.5rem;transition:color .2s}
.footer a:hover{color:var(--c-text)}
.footer-bottom{padding-top:1.5rem;border-top:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:center;font-size:0.8125rem;color:var(--c-text-3)}
.footer-bottom-links{display:flex;gap:1.5rem}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
}

/* ── Product Page ── */
.product-page{padding-top:calc(var(--nav-h) + 2rem);min-height:100vh}
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;margin-bottom:4rem}
.product-hero__visual{position:sticky;top:calc(var(--nav-h) + 2rem)}
.product-hero__visual .mockup{width:100%;aspect-ratio:4/3;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-hero__visual .mockup svg{width:70%;height:70%;opacity:0.4}
.product-hero__content .price{font-family:var(--font-mono);font-size:2rem;font-weight:700;margin-bottom:.25rem}
.product-hero__content .price .original{font-size:1rem;color:var(--c-text-3);text-decoration:line-through;margin-left:.75rem;font-weight:400}
.product-hero__content .price-note{font-size:0.8125rem;color:var(--c-text-3);margin-bottom:1.5rem}
.product-hero__content p{font-size:0.9375rem;margin-bottom:1.5rem}
.product-hero__content .btn{width:100%}
.product-features{margin-bottom:3rem}
.product-features h2{margin-bottom:1.5rem}
.product-features ul{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.product-features ul li{display:flex;align-items:flex-start;gap:.75rem;font-size:0.9375rem;color:var(--c-text-2);padding:.75rem;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface)}
.product-features ul li svg{width:18px;height:18px;color:var(--c-accent);flex-shrink:0;margin-top:1px}
@media(max-width:768px){
  .product-page{padding-top:calc(var(--nav-h) + 1rem)}
  .product-hero{grid-template-columns:1fr;gap:1.5rem;margin-bottom:2rem}
  .product-hero__visual{position:static}
  .product-hero__content .price{font-size:1.75rem}
  .product-features ul{grid-template-columns:1fr}
  .product-features h2{margin-bottom:1rem}
}
@media(max-width:480px){
  .product-hero__content .btn{width:100%}
  .back-link{margin-bottom:1rem}
}

/* ── Back link ── */
.back-link{display:inline-flex;align-items:center;gap:.5rem;font-size:0.875rem;color:var(--c-text-2);margin-bottom:2rem;transition:color .2s}
.back-link:hover{color:var(--c-text)}
.back-link svg{width:14px;height:14px}

/* ── Guarantee Badge ── */
.guarantee-badge{display:flex;align-items:center;gap:.75rem;padding:1rem;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);margin-top:1.5rem;font-size:0.8125rem;color:var(--c-text-3)}
.guarantee-badge svg{width:24px;height:24px;color:var(--c-accent);flex-shrink:0}

/* ── Animations ── */
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .fade-in{opacity:1;transform:translateY(0);transition:none}
  .fade-in.visible{opacity:1;transform:translateY(0)}
}

/* ── Utility ── */
.text-center{text-align:center}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}
.gap-1{gap:1rem}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-center{justify-content:center}