/* ============================================================
   HABIT TRACKER — style.css  |  FadlinDev
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --green-500:#2E8B68;--green-600:#1D6B50;--green-400:#4FA982;--green-300:#7EC4A4;
  --color-bg:#F7F8F4;--color-bg-alt:#EEEEE9;--color-surface:#FFFFFF;
  --color-surface-2:#F2F3EE;--color-text:#10221B;--color-muted:#64756D;
  --color-faint:#9DAD9F;--color-accent:#2E8B68;--color-accent-h:#1D6B50;
  --color-border:rgba(16,34,27,.10);--color-border-s:rgba(16,34,27,.06);
  --color-nav-bg:rgba(247,248,244,.90);--color-overlay:rgba(16,34,27,.04);
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'SF Mono','Fira Code',monospace;
  --container:1200px;
  --t-fast:150ms cubic-bezier(.16,1,.3,1);
  --t-base:220ms cubic-bezier(.16,1,.3,1);
  --t-slow:400ms cubic-bezier(.16,1,.3,1);
  --t-reveal:600ms cubic-bezier(.16,1,.3,1);
  --shadow-xs:0 1px 2px rgba(16,34,27,.06);
  --shadow-sm:0 2px 8px rgba(16,34,27,.08);
  --shadow-md:0 4px 24px rgba(16,34,27,.10);
  --shadow-lg:0 12px 48px rgba(16,34,27,.12);
  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-pill:9999px;
}
[data-theme="dark"]{
  --color-bg:#07120E;--color-bg-alt:#0B1A14;--color-surface:#0F2219;
  --color-surface-2:#132B20;--color-text:#E8F2EE;--color-muted:#7EA896;
  --color-faint:#4A7063;--color-accent:#4FA982;--color-accent-h:#7EC4A4;
  --color-border:rgba(120,200,160,.12);--color-border-s:rgba(120,200,160,.07);
  --color-nav-bg:rgba(7,18,14,.92);--color-overlay:rgba(120,200,160,.05);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);--shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 4px 24px rgba(0,0,0,.4);--shadow-lg:0 12px 48px rgba(0,0,0,.5);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);
  line-height:1.6;transition:background var(--t-slow),color var(--t-slow);overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
ul,ol{list-style:none}

/* ── Utilities ─────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-xs)}

/* ── Reveal ────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal),transform var(--t-reveal)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:80ms}.reveal-d2{transition-delay:160ms}
.reveal-d3{transition-delay:240ms}.reveal-d4{transition-delay:320ms}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--color-nav-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border-s);
  transition:box-shadow var(--t-base),border-color var(--t-base)}
.nav.scrolled{border-bottom-color:var(--color-border);box-shadow:var(--shadow-sm)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:56px;gap:24px}
.nav__logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  letter-spacing:-.02em;color:var(--color-text);flex-shrink:0}
.nav__logo-icon{width:28px;height:28px;background:var(--color-accent);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0}
.nav__logo-icon svg{width:14px;height:14px}
.nav__links{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.nav__link{font-size:14px;font-weight:500;color:var(--color-muted);padding:6px 12px;
  border-radius:var(--radius-sm);transition:color var(--t-fast),background var(--t-fast)}
.nav__link:hover{color:var(--color-text);background:var(--color-overlay)}
.nav__actions{display:flex;align-items:center;gap:8px}
.theme-toggle{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;
  align-items:center;justify-content:center;color:var(--color-muted);
  transition:color var(--t-fast),background var(--t-fast);position:relative}
.theme-toggle:hover{color:var(--color-text);background:var(--color-overlay)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;
  top:calc(100% + 8px);right:0;background:var(--color-text);color:var(--color-bg);
  font-size:11px;font-weight:500;padding:4px 8px;border-radius:var(--radius-xs);white-space:nowrap}
.btn-nav-dl{display:flex;align-items:center;gap:6px;background:var(--color-accent);
  color:white;font-size:13px;font-weight:600;padding:8px 14px;
  border-radius:var(--radius-sm);transition:background var(--t-fast)}
.btn-nav-dl:hover{background:var(--color-accent-h)}
.btn-nav-dl:hover .btn-arrow{transform:translateX(3px)}
.btn-arrow{display:flex;transition:transform var(--t-base)}
.btn-arrow svg{width:14px;height:14px}
.nav__hamburger{display:none;width:36px;height:36px;border-radius:var(--radius-sm);
  align-items:center;justify-content:center;color:var(--color-text);
  transition:background var(--t-fast)}
.nav__hamburger:hover{background:var(--color-overlay)}
.nav__hamburger svg{width:18px;height:18px}
.nav__mobile{display:none;flex-direction:column;gap:2px;
  padding:12px 24px 16px;border-top:1px solid var(--color-border-s)}
.nav__mobile.open{display:flex}
.nav__mobile .nav__link{font-size:15px;padding:10px 12px}
.nav__mobile .btn-nav-dl{margin-top:8px;justify-content:center;font-size:14px;padding:12px}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:calc(56px + 80px);padding-bottom:96px;overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:center}
.hero__content{max-width:540px}
.hero__label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--color-accent);margin-bottom:20px}
.hero__label-dot{width:5px;height:5px;border-radius:50%;background:var(--color-accent);opacity:.5}
.hero__heading{font-size:clamp(40px,6.5vw,74px);font-weight:800;line-height:1.0;
  letter-spacing:-.04em;color:var(--color-text);margin-bottom:24px}
.hero__sub{font-size:clamp(15px,1.8vw,17px);color:var(--color-muted);line-height:1.7;
  margin-bottom:40px;max-width:400px}
.hero__cta-group{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero__cta-main{display:inline-flex;align-items:center;gap:10px;background:var(--color-accent);
  color:white;font-size:15px;font-weight:700;padding:14px 24px;border-radius:var(--radius-md);
  box-shadow:0 4px 20px rgba(46,139,104,.28);
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.hero__cta-main:hover{background:var(--color-accent-h);transform:translateY(-1px);
  box-shadow:0 8px 32px rgba(46,139,104,.40)}
.hero__cta-main:hover .btn-arrow{transform:translateX(3px)}
.hero__cta-main:active{transform:translateY(0);box-shadow:none}
.hero__cta-main .btn-arrow svg{width:16px;height:16px}
.hero__meta{font-size:12px;color:var(--color-faint);font-weight:500;letter-spacing:.02em}
.hero__phone-wrap{display:flex;justify-content:center;align-items:center;position:relative}

/* ── Phone Mockup ──────────────────────────────────────────── */
.phone-mockup{width:240px;background:var(--color-surface);border-radius:36px;padding:10px;
  box-shadow:0 0 0 1px var(--color-border),0 24px 64px rgba(16,34,27,.16),0 8px 20px rgba(16,34,27,.08);
  transition:transform .3s ease;will-change:transform}
.phone-mockup:hover{transform:translateY(-4px)}
.phone-notch{width:76px;height:20px;background:var(--color-bg-alt);
  border-radius:0 0 14px 14px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;gap:5px}
.phone-notch-cam{width:7px;height:7px;border-radius:50%;background:var(--color-border)}
.phone-notch-spk{width:32px;height:3px;border-radius:2px;background:var(--color-border)}
.phone-screen{background:var(--color-bg);border-radius:26px;padding:14px 14px 18px;
  min-height:460px;overflow:hidden}
[data-theme="dark"] .phone-screen{background:#091A11}
.phone-status{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;font-size:9px;font-weight:700;color:var(--color-muted)}
.phone-greeting-text{font-size:13px;font-weight:800;color:var(--color-text);letter-spacing:-.02em}
.phone-greeting-date{font-size:9px;color:var(--color-faint);margin-top:1px;margin-bottom:12px}
.phone-streak-card{background:var(--color-accent);border-radius:var(--radius-md);
  padding:10px 12px;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.phone-streak-num{font-size:32px;font-weight:800;color:white;line-height:1;letter-spacing:-.04em}
.phone-streak-lbl{font-size:8px;font-weight:700;color:rgba(255,255,255,.65);
  text-transform:uppercase;letter-spacing:.08em}
.phone-streak-sub{font-size:9px;color:rgba(255,255,255,.5);margin-top:1px}
.phone-streak-fire{font-size:20px;margin-left:auto}
.phone-sec-label{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-muted);margin-bottom:6px}
.phone-habits{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.phone-habit{display:flex;align-items:center;gap:8px;padding:7px 9px;
  background:var(--color-surface);border:1px solid var(--color-border-s);
  border-radius:var(--radius-sm);cursor:pointer;user-select:none;
  transition:background var(--t-fast),transform var(--t-fast)}
[data-theme="dark"] .phone-habit{background:rgba(255,255,255,.04)}
.phone-habit:hover{background:var(--color-overlay)}
.phone-habit:active{transform:scale(.98)}
.phone-cb{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background var(--t-fast),border-color var(--t-fast)}
.phone-habit.checked .phone-cb{background:var(--color-accent);border-color:var(--color-accent)}
.phone-cb svg{width:9px;height:9px;color:white;display:none}
.phone-habit.checked .phone-cb svg{display:block}
.phone-habit-name{font-size:10px;font-weight:600;color:var(--color-text);flex:1;transition:color var(--t-fast)}
.phone-habit.checked .phone-habit-name{color:var(--color-faint);text-decoration:line-through;
  text-decoration-color:var(--color-border)}
.phone-habit-ico{font-size:11px}
.phone-prog-hdr{display:flex;justify-content:space-between;margin-bottom:5px}
.phone-prog-lbl{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted)}
.phone-prog-pct{font-size:8px;font-weight:700;color:var(--color-accent)}
.phone-prog-bar{height:4px;background:var(--color-border);border-radius:2px;overflow:hidden}
.phone-prog-fill{height:100%;background:var(--color-accent);border-radius:2px;
  transition:width .5s cubic-bezier(.16,1,.3,1)}

/* ============================================================
   FACTS
   ============================================================ */
.facts{padding:64px 0;border-top:1px solid var(--color-border-s)}
.facts__inner{display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--color-border-s);
  border:1px solid var(--color-border-s);border-radius:20px;overflow:hidden}
.facts__item{background:var(--color-surface);padding:32px 24px;display:flex;flex-direction:column;gap:6px}
.facts__val{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.04em;
  color:var(--color-text);line-height:1}
.facts__val--acc{color:var(--color-accent)}
.facts__lbl{font-size:12px;color:var(--color-muted);font-weight:500;line-height:1.4}

/* ============================================================
   FEATURES
   ============================================================ */
.features{padding:128px 0}
.features__hdr{margin-bottom:80px}
.section-eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--color-accent);margin-bottom:16px}
.section-heading{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.03em;
  line-height:1.1;color:var(--color-text)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding:64px 0;border-top:1px solid var(--color-border-s)}
.feature-row:last-child{border-bottom:1px solid var(--color-border-s)}
.feature-row--flip .feature-visual{order:-1}
.feat-num{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--color-faint);margin-bottom:12px}
.feat-title{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-.03em;
  line-height:1.15;color:var(--color-text);margin-bottom:16px}
.feat-desc{font-size:15px;color:var(--color-muted);line-height:1.7}
.feature-visual{display:flex;align-items:center;justify-content:center}

/* Feature visuals */
.size-display{text-align:center;padding:32px}
.size-num{font-size:72px;font-weight:800;letter-spacing:-.05em;color:var(--color-text);line-height:1}
.size-unit{font-size:28px;font-weight:600;color:var(--color-muted)}
.size-sub{font-size:13px;color:var(--color-faint);margin-top:8px}
.storage-compare{width:100%;max-width:300px;border:1px solid var(--color-border-s);
  border-radius:20px;padding:20px;background:var(--color-surface)}
.storage-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.storage-label{font-size:11px;color:var(--color-muted);width:80px;flex-shrink:0}
.storage-track{flex:1;height:5px;background:var(--color-border);border-radius:3px;overflow:hidden}
.storage-fill{height:100%;border-radius:3px;background:var(--color-faint)}
.storage-fill--habit{background:var(--color-accent);width:3%}
.storage-fill--app1{width:64%;opacity:.5}
.storage-fill--app2{width:82%;opacity:.35}
.storage-size{font-size:10px;color:var(--color-faint);width:38px;text-align:right;flex-shrink:0}
.privacy-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:300px}
.privacy-item{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border:1px solid var(--color-border-s);border-radius:var(--radius-sm);background:var(--color-surface)}
.picon{width:30px;height:30px;border-radius:var(--radius-xs);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.picon--yes{background:rgba(46,139,104,.10);color:var(--color-accent)}
.picon--no{background:var(--color-border-s);color:var(--color-faint)}
.picon svg{width:14px;height:14px}
.pitem-text{font-size:12px;font-weight:600;color:var(--color-text)}
.pitem-sub{font-size:11px;color:var(--color-faint)}
.reminder-preview{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:16px 20px;display:flex;align-items:flex-start;
  gap:12px;max-width:280px;box-shadow:var(--shadow-sm)}
.reminder-ibg{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.reminder-ibg svg{width:16px;height:16px;color:white}
.reminder-title{font-size:13px;font-weight:700;color:var(--color-text)}
.reminder-sub{font-size:11px;color:var(--color-muted);margin-top:2px}
.reminder-time{font-size:10px;color:var(--color-faint);margin-top:6px}
.widget-demo{background:var(--color-accent);border-radius:20px;padding:20px;
  color:white;max-width:220px;box-shadow:0 8px 32px rgba(46,139,104,.28)}
.widget-ttl{font-size:10px;font-weight:600;opacity:.7;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:12px}
.widget-rows{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.widget-row{display:flex;align-items:center;gap:8px}
.wd{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);flex-shrink:0}
.wd--done{background:white;border-color:white}
.widget-name{font-size:11px;font-weight:500;opacity:.88}
.widget-pb{height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.widget-pf{height:100%;border-radius:2px;background:rgba(255,255,255,.8);width:60%}
.streak-display{display:flex;flex-direction:column;gap:20px}
.streak-num{font-size:60px;font-weight:800;letter-spacing:-.05em;color:var(--color-text);line-height:1}
.streak-num span{font-size:16px;font-weight:600;color:var(--color-muted);letter-spacing:.02em;vertical-align:baseline;margin-left:4px}
.streak-week{display:flex;gap:8px}
.streak-day{display:flex;flex-direction:column;align-items:center;gap:4px}
.sday-lbl{font-size:8px;font-weight:700;color:var(--color-faint);text-transform:uppercase;letter-spacing:.05em}
.sdot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--color-faint)}
.sdot--ok{background:var(--color-accent);border-color:var(--color-accent);color:white;font-weight:700}
.sdot--miss{background:var(--color-border-s)}
.backup-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:300px}
.backup-item{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border:1px solid var(--color-border-s);border-radius:var(--radius-sm);background:var(--color-surface)}
.backup-ico{width:30px;height:30px;border-radius:var(--radius-xs);background:var(--color-overlay);
  display:flex;align-items:center;justify-content:center;color:var(--color-muted);flex-shrink:0}
.backup-ico svg{width:14px;height:14px}
.backup-name{font-size:11px;font-weight:600;color:var(--color-text);font-family:var(--font-mono)}
.backup-size{font-size:10px;color:var(--color-faint);margin-left:auto}

/* ============================================================
   SHOWCASE
   ============================================================ */
.showcase{padding:128px 0;background:var(--color-surface-2);
  border-top:1px solid var(--color-border-s);border-bottom:1px solid var(--color-border-s);overflow:hidden}
.showcase__inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.showcase__phone-area{display:flex;justify-content:center;position:relative}
.showcase-phone{width:210px;background:var(--color-surface);border-radius:32px;padding:10px;
  box-shadow:0 0 0 1px var(--color-border),0 32px 80px rgba(16,34,27,.18)}
.showcase-phone .phone-screen{min-height:380px;border-radius:22px;padding:12px}
.sc-detail{position:absolute;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:10px 14px;box-shadow:var(--shadow-md);white-space:nowrap}
.sc-detail--top{top:12%;right:-48px;display:flex;align-items:center;gap:8px}
.sc-detail--bot{bottom:18%;left:-44px;display:flex;align-items:center;gap:8px}
.sc-ico{font-size:16px}
.sc-txt{font-size:12px;font-weight:700;color:var(--color-text)}
.sc-sub{font-size:10px;color:var(--color-muted)}
.showcase__copy{max-width:380px}
.showcase__heading{font-size:clamp(30px,4.5vw,50px);font-weight:800;letter-spacing:-.04em;
  line-height:1.0;color:var(--color-text);margin-bottom:24px}
.showcase__desc{font-size:16px;color:var(--color-muted);line-height:1.7;margin-bottom:32px}
.showcase__tags{display:flex;flex-wrap:wrap;gap:6px}
.sc-tag{font-size:12px;font-weight:600;color:var(--color-muted);
  border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:4px 12px}

/* ============================================================
   INSTALLATION
   ============================================================ */
.install{padding:128px 0}
.install__hdr{text-align:center;margin-bottom:80px;max-width:480px;margin-inline:auto}
.install__hdr .section-heading{margin-top:12px;margin-bottom:16px}
.install__hdr p{font-size:16px;color:var(--color-muted);line-height:1.65}
.install__steps{display:flex;flex-direction:column;max-width:640px;margin-inline:auto}
.install-step{display:grid;grid-template-columns:60px 1fr;gap:24px;padding:32px 0;position:relative}
.install-step:not(:last-child)::after{content:'';position:absolute;
  left:29px;top:calc(32px + 60px);bottom:-32px;width:1px;background:var(--color-border-s)}
.install-step__num{width:60px;height:60px;border-radius:50%;border:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;
  color:var(--color-accent);background:var(--color-surface);flex-shrink:0;box-shadow:var(--shadow-xs)}
.install-step__body{padding-top:16px}
.install-step__title{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--color-text);margin-bottom:8px}
.install-step__desc{font-size:15px;color:var(--color-muted);line-height:1.65}
.install-note{display:flex;align-items:flex-start;gap:12px;background:var(--color-overlay);
  border:1px solid var(--color-border-s);border-left:3px solid var(--color-accent);
  border-radius:var(--radius-sm);padding:12px 16px;margin-top:16px}
.install-note svg{color:var(--color-accent);flex-shrink:0;margin-top:1px;width:14px;height:14px}
.install-note-text{font-size:13px;color:var(--color-muted);line-height:1.6}
.install-note-text strong{color:var(--color-text);font-weight:700}
.android-notif{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:12px 16px;margin-top:16px;max-width:280px;
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:12px}
.android-notif-ico{width:34px;height:34px;background:var(--color-bg-alt);border-radius:var(--radius-xs);
  font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.android-notif-t{font-size:12px;font-weight:700;color:var(--color-text)}
.android-notif-s{font-size:11px;color:var(--color-muted)}
.install__cta{text-align:center;margin-top:64px}
.btn-dl-lg{display:inline-flex;align-items:center;gap:12px;background:var(--color-accent);
  color:white;font-size:16px;font-weight:700;padding:16px 32px;border-radius:var(--radius-md);
  box-shadow:0 4px 20px rgba(46,139,104,.3);
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.btn-dl-lg:hover{background:var(--color-accent-h);transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(46,139,104,.4)}
.btn-dl-lg:hover .btn-arrow{transform:translateX(4px)}
.btn-dl-lg:active{transform:translateY(0)}
.btn-dl-lg svg{width:18px;height:18px}
.btn-dl-meta{display:block;font-size:12px;color:var(--color-faint);margin-top:8px}

/* ============================================================
   SPECS
   ============================================================ */
.specs{padding:128px 0;background:var(--color-surface-2);
  border-top:1px solid var(--color-border-s);border-bottom:1px solid var(--color-border-s)}
.specs__inner{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
.specs__table{display:flex;flex-direction:column}
.specs__row{display:grid;grid-template-columns:150px 1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--color-border-s);align-items:center}
.specs__row:first-child{border-top:1px solid var(--color-border-s)}
.specs__key{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-faint)}
.specs__val{font-size:14px;font-weight:600;color:var(--color-text);font-family:var(--font-mono)}
.specs__val--acc{color:var(--color-accent)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:128px 0}
.faq__hdr{text-align:center;margin-bottom:64px}
.faq__hdr .section-heading{margin-top:12px}
.faq__list{max-width:660px;margin-inline:auto;display:flex;flex-direction:column}
.faq__item{border-bottom:1px solid var(--color-border-s)}
.faq__item:first-child{border-top:1px solid var(--color-border-s)}
.faq__btn{width:100%;text-align:left;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:20px 0;
  font-size:15px;font-weight:700;color:var(--color-text);transition:color var(--t-fast)}
.faq__btn:hover{color:var(--color-accent)}
.faq__chevron{width:18px;height:18px;color:var(--color-faint);flex-shrink:0;
  transition:transform var(--t-base),color var(--t-fast)}
.faq__item.open .faq__chevron{transform:rotate(180deg);color:var(--color-accent)}
.faq__answer{overflow:hidden;max-height:0;
  transition:max-height var(--t-slow) cubic-bezier(.16,1,.3,1)}
.faq__item.open .faq__answer{max-height:500px}
.faq__answer p{padding-bottom:20px;font-size:14px;color:var(--color-muted);line-height:1.75}
.faq__answer p strong{color:var(--color-text);font-weight:700}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:64px 0 40px;border-top:1px solid var(--color-border-s)}
.footer__inner{display:grid;grid-template-columns:1fr auto;gap:48px;
  align-items:start;margin-bottom:40px}
.footer__brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  letter-spacing:-.02em;color:var(--color-text);margin-bottom:12px}
.footer__brand .nav__logo-icon{width:26px;height:26px}
.footer__tagline{font-size:13px;color:var(--color-muted);margin-bottom:16px;
  max-width:240px;line-height:1.6}
.footer__credit{font-size:12px;color:var(--color-faint)}
.footer__credit a{color:var(--color-accent);font-weight:600}
.footer__nav{display:flex;flex-direction:column;gap:8px}
.footer__nav a{font-size:13px;color:var(--color-muted);font-weight:500;transition:color var(--t-fast)}
.footer__nav a:hover{color:var(--color-text)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;border-top:1px solid var(--color-border-s)}
.footer__copy{font-size:12px;color:var(--color-faint)}
.back-top{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-surface);
  border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;
  color:var(--color-muted);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(4px);
  transition:opacity var(--t-base),transform var(--t-base),color var(--t-fast),background var(--t-fast)}
.back-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-top:hover{color:var(--color-text);background:var(--color-overlay)}
.back-top svg{width:16px;height:16px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .hero__inner{grid-template-columns:1fr 280px;gap:48px}
  .sc-detail--top{right:-24px}.sc-detail--bot{left:-20px}
}
@media(max-width:768px){
  .nav__links,.nav__actions .btn-nav-dl{display:none}
  .nav__hamburger{display:flex}
  .hero{padding-top:calc(56px + 48px);padding-bottom:64px}
  .hero__inner{grid-template-columns:1fr;gap:40px}
  .hero__content{max-width:100%;text-align:center}
  .hero__sub{max-width:100%}
  .hero__cta-group{align-items:center}
  .hero__cta-main{width:100%;max-width:280px;justify-content:center}
  .hero__phone-wrap{order:-1}
  .facts__inner{grid-template-columns:repeat(2,1fr)}
  .feature-row{grid-template-columns:1fr;gap:32px}
  .feature-row--flip .feature-visual{order:0}
  .showcase__inner{grid-template-columns:1fr;text-align:center;gap:48px}
  .showcase__copy{max-width:100%}
  .sc-detail--top{right:10px;top:4%}.sc-detail--bot{left:10px;bottom:4%}
  .specs__inner{grid-template-columns:1fr;gap:40px}
  .footer__inner{grid-template-columns:1fr;gap:32px}
}
@media(max-width:480px){
  .container{padding-inline:16px}
  .facts__inner{border-radius:12px}
  .facts__item{padding:20px 16px}
  .install-step{grid-template-columns:46px 1fr}
  .install-step__num{width:46px;height:46px;font-size:14px}
  .install-step:not(:last-child)::after{left:22px}
  .specs__row{grid-template-columns:1fr;gap:3px}
  .sc-detail--top,.sc-detail--bot{display:none}
  .footer__bottom{flex-direction:column;gap:16px;text-align:center}
}

/* ── Contact Section ─────────────────────────────────────────── */
.contact-section {
  padding: 96px 0;
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(46,139,104,.07) 0%, transparent 70%);
  pointer-events: none;
}
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.contact__info {
  padding-top: 8px;
}
.contact__desc {
  color: var(--color-muted);
  font-size: .975rem;
  line-height: 1.75;
  margin: 1rem 0 2rem;
  max-width: 380px;
}
.contact__meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact__meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: var(--color-muted);
}
.contact__meta-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}
.contact__meta-item strong { color: var(--color-text); }

/* Form card */
.contact__form-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
}
.contact__form { display: flex; flex-direction: column; gap: 20px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form__group { display: flex; flex-direction: column; gap: 6px; }

.contact-form__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.contact-form__label span { color: var(--color-accent); }

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .925rem;
  line-height: 1.5;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
  box-sizing: border-box;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: var(--color-faint); }
.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(46,139,104,.12);
  background: var(--color-surface);
}
.contact-form__input.error,
.contact-form__textarea.error {
  border-color: #e05c5c;
  box-shadow: 0 0 0 3px rgba(224,92,92,.10);
}
.contact-form__textarea { resize: vertical; min-height: 120px; }
.contact-form__char-count {
  font-size: .75rem;
  color: var(--color-faint);
  text-align: right;
  margin-top: 3px;
}

/* Feedback box */
.contact-form__feedback {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact-form__feedback.success {
  background: rgba(46,139,104,.10);
  border: 1px solid rgba(46,139,104,.25);
  color: var(--green-600);
}
.contact-form__feedback.error {
  background: rgba(224,92,92,.09);
  border: 1px solid rgba(224,92,92,.25);
  color: #c0392b;
}
[data-theme="dark"] .contact-form__feedback.success { color: var(--green-300); }
[data-theme="dark"] .contact-form__feedback.error { color: #ff8080; }

/* Submit button */
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: .925rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
  align-self: flex-start;
}
.contact-form__submit:hover:not(:disabled) { background: var(--color-accent-h); transform: translateY(-1px); }
.contact-form__submit:active:not(:disabled) { transform: translateY(0); }
.contact-form__submit:disabled { opacity: .6; cursor: not-allowed; }

/* Dark mode adjustments */
[data-theme="dark"] .contact__form-wrap {
  background: var(--color-surface-2);
}
[data-theme="dark"] .contact-form__input,
[data-theme="dark"] .contact-form__textarea {
  background: var(--color-bg);
  border-color: rgba(255,255,255,.08);
  color: var(--color-text);
}
[data-theme="dark"] .contact-form__input:focus,
[data-theme="dark"] .contact-form__textarea:focus {
  background: var(--color-surface);
}
[data-theme="dark"] .contact__meta-icon {
  background: var(--color-surface-2);
}

/* Responsive */
@media (max-width: 768px) {
  .contact__inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact__form-wrap { padding: 24px; }
  .contact__desc { max-width: none; }
}