/* SmartCafe Landing UI v4 — 2026-09-09
   Modern responsive marketing surface. Loaded after landing.css as a safe override. */
:root{
  --v4-ink:#17211c;--v4-muted:#66736c;--v4-line:#dde4df;--v4-soft:#f4f7f5;
  --v4-card:#fff;--v4-brand:#197346;--v4-brand-dark:#115b37;--v4-brand-soft:#e9f5ee;
  --v4-radius:20px;--v4-shadow:0 16px 42px rgba(23,33,28,.08);
}
html{scroll-padding-top:86px}
body{color:var(--v4-ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.container{width:min(1180px,calc(100% - 40px))}

/* Header */
#siteHeader{background:rgba(255,255,255,.94);border-bottom:1px solid rgba(221,228,223,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:box-shadow .2s ease,background .2s ease}
#siteHeader.is-scrolled{box-shadow:0 8px 30px rgba(23,33,28,.06)}
.header-inner{width:min(1180px,calc(100% - 40px));min-height:72px;gap:20px}
.logo{font-size:1.42rem;letter-spacing:-.035em;gap:10px}
.logo-icon{width:38px;height:38px;border-radius:12px;background:var(--v4-brand-soft);box-shadow:none;color:var(--v4-brand)}
#mainNav{gap:8px;padding:4px;border-radius:14px}
#mainNav a{padding:9px 11px;border-radius:10px;color:#46534c;font-size:.91rem;font-weight:700;transition:.18s ease}
#mainNav a:hover{background:var(--v4-soft);color:var(--v4-brand-dark)}
.header-actions{gap:8px}
.header-actions .btn-outline,.header-register-btn{min-height:42px;padding:0 16px;border-radius:12px}
.mobile-menu-toggle{width:42px;height:42px;border:1px solid var(--v4-line);border-radius:12px;background:#fff;color:var(--v4-ink)}
.mobile-nav{border-top:1px solid var(--v4-line);background:#fff;box-shadow:0 20px 30px rgba(23,33,28,.08)}
.mobile-nav a{min-height:48px;border-radius:10px}

/* Controls */
.btn-primary,.btn-outline,.btn-ghost{min-height:46px;padding:0 18px;border-radius:12px;font-size:.94rem;box-shadow:none}
.btn-primary{background:var(--v4-brand);box-shadow:0 9px 20px rgba(25,115,70,.18)}
.btn-primary:hover{background:var(--v4-brand-dark);transform:translateY(-1px);box-shadow:0 12px 24px rgba(25,115,70,.21)}
.btn-outline{border-color:#c9d8cf;color:var(--v4-brand-dark)}
.btn-outline:hover{background:var(--v4-brand-soft)}
.btn-ghost{border-color:var(--v4-line);color:#46534c}
.btn-lg{min-height:52px;padding-inline:22px}

/* Hero — quieter, more product-led */
.landing-hero{padding:78px 0 64px;background:linear-gradient(180deg,#fbfdfb 0%,#fff 100%)}
.landing-hero::before{display:none}
.landing-hero-inner{grid-template-columns:minmax(0,1fr) minmax(440px,.92fr);gap:64px}
.hero-eyebrow,.eyebrow{padding:7px 11px;border:1px solid #d3e7da;background:#f4faf6;color:var(--v4-brand-dark);font-size:.76rem;letter-spacing:.02em}
.hero-eyebrow{margin-bottom:20px}
.landing-hero-text h1{max-width:720px;margin-bottom:20px;font-size:clamp(2.55rem,5vw,4.75rem);line-height:1.02;letter-spacing:-.055em}
.landing-hero-text h1 em{color:var(--v4-brand)}
.landing-hero-text>p{max-width:650px;color:var(--v4-muted);font-size:1.03rem;line-height:1.72}
.hero-feature-tags{gap:8px;margin:24px 0}
.hero-tag{padding:8px 11px;border:1px solid var(--v4-line);border-radius:10px;background:#fff;color:#425149;box-shadow:none;font-size:.82rem}
.hero-tag i{color:var(--v4-brand)}
.hero-cta{gap:10px;margin-top:4px}
.hero-stats{margin-top:30px;padding-top:22px;border-top:1px solid var(--v4-line);gap:20px}
.hero-stats .stat{min-width:0}
.hero-stats .stat strong{font-size:1.15rem;color:var(--v4-ink)}
.hero-stats .stat span{color:var(--v4-muted);font-size:.78rem}
.stat-div{background:var(--v4-line)}
.hero-admin-box{margin-top:20px;padding:17px 18px;border:1px solid var(--v4-line);border-radius:16px;background:#fff;box-shadow:none}
.hero-admin-list{gap:9px}
.hero-admin-item{color:#536159;font-size:.83rem}
.hero-admin-item i{color:var(--v4-brand)}

/* Product mockup */
.landing-hero-visual{min-width:0}
.hero-visual-shell{padding:0}
.hero-visual-glow{opacity:.2;filter:blur(65px)}
.hero-visual-badge{border:1px solid var(--v4-line);border-radius:13px;box-shadow:0 14px 34px rgba(23,33,28,.1)}
.hero-browser-window{overflow:hidden;border:1px solid #d9e0dc;border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(23,33,28,.13)}
.hero-browser-bar{background:#f7f9f8;border-bottom:1px solid var(--v4-line)}
.hero-browser-address{background:#fff;border:1px solid #e2e7e4;color:#738078}
.hero-app-preview{background:#f6f8f7}
.hero-app-sidebar{background:#17211c}
.hero-app-main{background:#f7f9f8}
.hero-app-stat,.hero-revenue-card,.hero-orders-card{border:1px solid #e1e7e3;box-shadow:none}

/* Trust bar */
.trust-bar{border-block:1px solid var(--v4-line);background:#fff}
.trust-bar .container{gap:22px}
.trust-item{color:#5b6860}
.trust-item i{color:var(--v4-brand)}

/* Sections */
.section-block,.section-features,.section-faq{padding:88px 0}
.section-soft{background:var(--v4-soft)}
.section-head{max-width:760px;margin-bottom:38px}
.section-head h2{margin-top:6px;color:var(--v4-ink);font-size:clamp(1.85rem,3vw,2.65rem);letter-spacing:-.045em;line-height:1.12}
.section-head p{color:var(--v4-muted);line-height:1.7}

/* Before/after */
.compare-grid{gap:18px;align-items:stretch}
.compare-card{border:1px solid var(--v4-line);border-radius:var(--v4-radius);background:#fff;box-shadow:none}
.compare-before,.compare-after{overflow:hidden}
.compare-badge{border-radius:9px;font-size:.76rem}
.compare-list li{border-color:#edf0ee;color:#4e5c54}
.compare-vs{width:44px;height:44px;border:1px solid var(--v4-line);box-shadow:0 8px 22px rgba(23,33,28,.07);font-size:.75rem}

/* Highlight / feature cards */
.highlight-grid,.landing-features-grid{gap:16px}
.highlight-card,.landing-feature-card{border:1px solid var(--v4-line);border-radius:18px;background:#fff;box-shadow:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.highlight-card:hover,.landing-feature-card:hover{transform:translateY(-2px);border-color:#c7d8ce;box-shadow:0 14px 34px rgba(23,33,28,.07)}
.highlight-card{padding:22px}
.highlight-card .feature-mini-icon,.feature-mini-icon{border-radius:12px;background:var(--v4-brand-soft);color:var(--v4-brand)}
.highlight-card h3,.landing-feature-card h3{letter-spacing:-.02em;color:var(--v4-ink)}
.highlight-card p,.feature-card-content p{color:var(--v4-muted);line-height:1.65}
.highlight-points{gap:6px}
.highlight-point{font-size:.82rem;color:#58675f}
.feature-screenshot-wrap{background:#eef2ef;border-bottom:1px solid var(--v4-line)}
.feature-screenshot{transition:transform .3s ease}
.landing-feature-card:hover .feature-screenshot{transform:scale(1.012)}
.feature-card-content{padding:20px}
.feature-preview-button,.feature-demo-link{border-radius:10px}
.landing-feature-more-btn{border-radius:12px}

/* Workflow */
.workflow-grid{gap:14px}
.workflow-card{border:1px solid var(--v4-line);border-radius:18px;background:#fff;box-shadow:none}
.workflow-no{background:var(--v4-brand-soft);color:var(--v4-brand-dark);border-radius:10px}
.workflow-card p{color:var(--v4-muted)}

/* Pricing */
.pricing-grid{gap:16px;align-items:stretch}
.pricing-card{border:1px solid var(--v4-line)!important;border-radius:20px!important;background:#fff;box-shadow:none!important}
.pricing-card.featured{border-color:#9bc7ad!important;box-shadow:0 16px 40px rgba(25,115,70,.09)!important}
.pricing-badge{border-radius:999px;background:var(--v4-brand);font-size:.72rem}
.pricing-desc,.pricing-features{color:var(--v4-muted)}
.pricing-price{color:var(--v4-ink);letter-spacing:-.04em}

/* Testimonials / FAQ */
.landing-testi-grid{gap:16px}
.testi-card{border:1px solid var(--v4-line)!important;border-radius:18px!important;box-shadow:none!important}
.faq-list{max-width:860px}
.faq-item{margin-bottom:10px;border:1px solid var(--v4-line);border-radius:14px;background:#fff;box-shadow:none;overflow:hidden}
.faq-q{min-height:60px;padding:16px 18px;color:var(--v4-ink);font-size:.96rem}
.faq-a{padding:0 18px 18px;color:var(--v4-muted);line-height:1.65}

/* CTA / footer */
.landing-cta{padding:78px 0;background:#17211c;color:#fff}
.landing-cta::before{opacity:.08}
.landing-cta h2{letter-spacing:-.04em}
.landing-cta p{color:#c9d2cc}
.landing-footer{background:#101713;color:#d4ddd7;border-top:0}
.landing-footer a{color:#c9d4cd}
.landing-footer a:hover{color:#fff}
.footer-inner{gap:36px}
.footer-brand p,.footer-contact{color:#95a39a}
.footer-bottom{border-color:#26312a;color:#86958c}

/* Lightbox */
.feature-lightbox-backdrop{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.feature-lightbox-dialog{border-radius:18px;border:1px solid var(--v4-line);box-shadow:0 28px 90px rgba(0,0,0,.24)}

/* Registration page reuses landing styles */
.daftar-page{background:var(--v4-soft)!important;padding:56px 20px!important}
.daftar-card{border:1px solid var(--v4-line)!important;border-radius:20px!important;box-shadow:0 18px 48px rgba(23,33,28,.08)!important}
.daftar-card input,.daftar-card select,.daftar-card textarea{min-height:46px;border:1px solid #ccd6d0!important;border-radius:11px!important;box-shadow:none!important;font:inherit}
.daftar-card input:focus,.daftar-card select:focus,.daftar-card textarea:focus{border-color:#79ad8e!important;outline:3px solid rgba(25,115,70,.1)!important}

@media (max-width:1100px){
  #mainNav{gap:2px}#mainNav a{padding-inline:8px;font-size:.84rem}
  .landing-hero-inner{grid-template-columns:1fr .9fr;gap:36px}.hero-visual-badge{display:none}
}
@media (max-width:900px){
  html{scroll-padding-top:72px}.container,.header-inner{width:min(100% - 32px,760px)}
  #mainNav,.header-actions .btn-outline,.header-register-btn{display:none}
  .mobile-menu-toggle{display:grid;place-items:center}
  .landing-hero{padding:54px 0 48px}.landing-hero-inner{grid-template-columns:1fr;gap:38px}
  .landing-hero-text{text-align:left}.landing-hero-text h1{max-width:760px}.landing-hero-visual{max-width:720px;width:100%;margin-inline:auto}
  .hero-stats{justify-content:flex-start}.hero-admin-box{max-width:720px}
  .section-block,.section-features,.section-faq{padding:70px 0}
}
@media (max-width:640px){
  .container,.header-inner{width:calc(100% - 28px)}.header-inner{min-height:64px}.logo{font-size:1.22rem}.logo-icon{width:34px;height:34px}
  .landing-hero{padding:38px 0 38px}.hero-eyebrow{margin-bottom:14px}.landing-hero-text h1{font-size:clamp(2.15rem,12vw,3.2rem);line-height:1.02;margin-bottom:16px}
  .landing-hero-text>p{font-size:.95rem;line-height:1.65}.hero-feature-tags{margin:19px 0}.hero-tag{font-size:.76rem;padding:7px 9px}
  .hero-cta{display:grid;grid-template-columns:1fr}.hero-cta .btn-primary,.hero-cta .btn-ghost{width:100%}
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:left}.stat-div{display:none}.hero-stats .stat strong{font-size:1rem}.hero-stats .stat span{font-size:.68rem}
  .hero-admin-box{padding:14px}.hero-admin-list{grid-template-columns:1fr!important}.landing-hero-visual{margin-top:2px}.hero-browser-window{border-radius:14px}.hero-app-sidebar{display:none!important}.hero-app-main{padding:10px!important}
  .section-block,.section-features,.section-faq{padding:56px 0}.section-head{margin-bottom:28px}.section-head h2{font-size:1.75rem}
  .compare-grid,.highlight-grid,.landing-features-grid,.workflow-grid,.pricing-grid,.landing-testi-grid{grid-template-columns:1fr!important}.compare-vs{margin:-3px auto;transform:none!important}
  .highlight-card,.workflow-card,.feature-card-content{padding:17px}.landing-feature-card,.pricing-card,.testi-card{border-radius:15px!important}
  .landing-cta{padding:58px 0}.landing-cta .container{padding:0!important}.landing-cta .hero-cta{width:100%}
  .footer-inner{grid-template-columns:1fr!important;gap:26px}.footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .daftar-page{padding:28px 14px!important}.daftar-card{padding:20px!important;border-radius:16px!important}.form-row{grid-template-columns:1fr!important}
}
@media (max-width:380px){
  .container,.header-inner{width:calc(100% - 22px)}.hero-stats{grid-template-columns:1fr 1fr}.hero-stats .stat:last-child{grid-column:1/-1}.footer-links{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}