:root {
  --g: #22C55E;
  --g2: #16a34a;
  --g-glow: rgba(34,197,94,0.15);
  --wa: #25D366;
  --nav-h: 64px;
  --dark: #080B0D;
  --d2: #0E1214;
  --d3: #141A1E;
  --card: #111619;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text: #F0F4F7;
  --muted: #64748b;
  --muted2: #94A3B8;
  --orange: #F97316;
  --blue: #3B82F6;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--text);font-family:'Instrument Sans',sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");pointer-events:none;z-index:9999}

/* Legacy nav hooks (marketing uses Bootstrap navbar) */
#nav,.mobile-menu{display:none!important}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;line-height:0}
.nav-logo img{height:38px;width:auto;max-width:148px;object-fit:contain;display:block}
.footer-logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0;margin-bottom:12px}
.footer-logo img{height:34px;width:auto;max-width:130px;object-fit:contain;display:block}
.dash-logo{padding:0 20px 20px;border-bottom:1px solid var(--border);margin-bottom:12px;line-height:0}
.dash-logo img{height:26px;width:auto;max-width:100px;object-fit:contain;display:block}
.nav-links{display:flex;gap:24px;list-style:none;margin-left:auto}
.nav-links a{color:var(--muted2);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-right{display:flex;gap:8px;margin-left:20px;align-items:center;flex-shrink:0}
.btn-nav-request,.btn-nav-demo{padding:8px 14px;border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;white-space:nowrap}
.btn-nav-request{border-color:rgba(34,197,94,.35);color:var(--g)}
.btn-nav-request:hover{background:rgba(34,197,94,.1);border-color:var(--g)}
.btn-nav-demo:hover{border-color:rgba(255,255,255,.3)}
.btn-nav-buy{padding:8px 16px;background:var(--g);border-radius:8px;color:#000;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;white-space:nowrap}
.btn-nav-buy:hover{background:var(--g2);transform:translateY(-1px)}
.nav-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:8px}
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(8,11,13,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:20px;z-index:199;flex-direction:column;gap:12px}
.mobile-menu .btn-nav-request,.mobile-menu .btn-nav-demo{text-align:center;border:1px solid var(--border);border-radius:8px;padding:12px}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--muted2);text-decoration:none;font-size:15px;padding:10px 0;border-bottom:1px solid var(--border)}
.mobile-menu a:last-child{border:none}
.mobile-menu .btn-nav-buy{text-align:center;margin-top:8px}

/* SALES / CONVERSION */
.stats-strip{background:var(--d2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 48px}
.stats-strip-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-item .stat-n{font-family:'Cabinet Grotesk',sans-serif;font-size:clamp(28px,3vw,40px);font-weight:900;color:var(--g);line-height:1;letter-spacing:-.03em}
.stat-item .stat-l{font-size:13px;color:var(--muted2);margin-top:6px}
.sell-banner{background:linear-gradient(90deg,rgba(34,197,94,.12),rgba(34,197,94,.04));border-bottom:1px solid rgba(34,197,94,.2);padding:14px 48px;text-align:center}
.sell-banner p{font-size:14px;color:var(--muted2);margin:0}
.sell-banner strong{color:var(--g)}
.sell-banner a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.benefits-section{padding:80px 48px;max-width:1200px;margin:0 auto}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.benefit-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;transition:all .25s}
.benefit-card:hover{border-color:rgba(34,197,94,.35);transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.35)}
.benefit-icon{font-size:32px;margin-bottom:16px}
.benefit-card h3{font-family:'Cabinet Grotesk',sans-serif;font-size:18px;font-weight:800;margin-bottom:10px;letter-spacing:-.02em}
.benefit-card p{font-size:14px;color:var(--muted2);line-height:1.65}
.benefit-card .highlight{color:var(--g);font-weight:700}
.roi-section{background:var(--d2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:80px 48px}
.roi-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.roi-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px}
.roi-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:15px}
.roi-row:last-child{border:none;padding-top:20px;font-size:18px;font-weight:700}
.roi-row .bad{color:#f87171;text-decoration:line-through}
.roi-row .good{color:var(--g);font-family:'Cabinet Grotesk',sans-serif;font-size:24px;font-weight:900}
.testimonials-section{padding:80px 48px;max-width:1200px;margin:0 auto}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.testimonial-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;position:relative}
.testimonial-card::before{content:'"';position:absolute;top:16px;right:24px;font-size:48px;color:rgba(34,197,94,.15);font-family:serif;line-height:1}
.testimonial-text{font-size:15px;color:var(--muted2);line-height:1.7;margin-bottom:20px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-author img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.avatar-initial{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#080B0D;background:var(--g);flex-shrink:0}
.avatar-initial--alt{background:#6B9FFF;color:#fff}
.testimonial-author .name{font-weight:700;font-size:14px}
.testimonial-author .role{font-size:12px;color:var(--muted)}
.stars{color:#FCD34D;font-size:14px;letter-spacing:2px;margin-bottom:12px}
.trust-logos{padding:48px 48px 64px;text-align:center;border-bottom:1px solid var(--border)}
.trust-logos p{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:24px}
.trust-logos-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 48px;max-width:900px;margin:0 auto;opacity:.7}
.trust-logos-row img,.tech-logo .brand-icon{height:32px;width:32px;object-fit:contain;opacity:.9}
.trust-logos-row img{filter:brightness(0) invert(1);opacity:.75}
.tech-logo .brand-icon:not(.brand-color){filter:brightness(0) invert(1);opacity:.85}
.tech-logo .brand-icon.brand-color,.trust-logos-row img.brand-color{filter:none;opacity:1}
.trust-logos-row .brand-fallback{font-size:13px;font-weight:700;color:var(--muted2);letter-spacing:.02em}
.guarantee-strip{max-width:1100px;margin:0 auto 48px;padding:24px 32px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);border-radius:14px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.guarantee-strip .g-icon{font-size:36px;flex-shrink:0}
.guarantee-strip h3{font-family:'Cabinet Grotesk',sans-serif;font-size:18px;font-weight:800;margin-bottom:4px}
.guarantee-strip p{font-size:14px;color:var(--muted2);margin:0;flex:1;min-width:200px}
.pain-section{padding:80px 48px;max-width:900px;margin:0 auto;text-align:center}
.pain-list{list-style:none;margin-top:32px;text-align:left;max-width:560px;margin-left:auto;margin-right:auto}
.pain-list li{padding:14px 0 14px 36px;position:relative;font-size:16px;color:var(--muted2);border-bottom:1px solid var(--border)}
.pain-list li::before{content:'✕';position:absolute;left:0;color:#f87171;font-weight:700}
.pain-list li.solution{color:var(--text);font-weight:600}
.pain-list li.solution::before{content:'✓';color:var(--g)}

/* PAGE HERO (inner pages) */
.page-hero{padding:calc(var(--nav-h) + 56px) 48px 72px;position:relative;overflow:hidden;text-align:center}
.page-hero .hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.08) 0%,transparent 70%);top:40%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.page-hero-inner{max-width:720px;margin:0 auto;position:relative}
.page-hero h1{font-family:'Cabinet Grotesk',sans-serif;font-size:clamp(32px,4vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:16px}
.page-hero h1 em{font-style:normal;color:var(--g)}
.page-hero p{color:var(--muted2);font-size:17px;max-width:560px;margin:0 auto}

/* HERO (home) */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:calc(var(--nav-h) + 40px) 56px 80px;position:relative;overflow:hidden}
.hero-visual{position:relative;width:100%}
.hero-browser{background:var(--d2);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 32px 64px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
.hero-browser-bar{background:var(--d3);padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.hero-browser-dots{display:flex;gap:6px}
.hero-browser-dots span{width:10px;height:10px;border-radius:50%}
.hero-browser-dots span:nth-child(1){background:#FF5F57}
.hero-browser-dots span:nth-child(2){background:#FEBC2E}
.hero-browser-dots span:nth-child(3){background:#28C840}
.hero-browser-url{flex:1;font-size:11px;color:var(--muted);font-family:monospace;background:rgba(255,255,255,.04);padding:6px 12px;border-radius:6px}
.hero-browser img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.hero-note{font-size:13px;color:var(--muted);margin-top:20px;display:flex;flex-wrap:wrap;gap:12px 20px}
.hero-note span{display:flex;align-items:center;gap:6px}
.tech-logo img{width:28px;height:28px;object-fit:contain}
.hero-glow{position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.08) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-58%);pointer-events:none}
.hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black,transparent)}
.hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative}
.codecanyon-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.25);border-radius:100px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--orange);letter-spacing:.03em;margin-bottom:28px}
.hero h1{font-family:'Cabinet Grotesk',sans-serif;font-size:clamp(36px,4.5vw,58px);font-weight:900;line-height:1.04;letter-spacing:-.035em;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--g)}
.hero h1 .line2{display:block}
.hero-desc{font-size:17px;color:var(--muted2);line-height:1.7;margin-bottom:36px;max-width:480px}
.hero-price-block{display:flex;align-items:center;gap:20px;margin-bottom:32px}
.price-tag{background:var(--d3);border:1px solid var(--border2);border-radius:12px;padding:14px 22px;display:flex;flex-direction:column}
.price-label{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.price-val{font-family:'Cabinet Grotesk',sans-serif;font-size:36px;font-weight:900;letter-spacing:-.04em;color:var(--text);line-height:1}
.price-val sup{font-size:18px;vertical-align:super}
.price-note{font-size:11px;color:var(--muted);margin-top:2px}
.price-save{background:rgba(34,197,94,.12);color:var(--g);font-size:12px;font-weight:700;padding:4px 10px;border-radius:100px;border:1px solid rgba(34,197,94,.2)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--g);color:#000;font-weight:700;font-size:15px;padding:14px 26px;border-radius:10px;text-decoration:none;transition:all .2s;border:none;cursor:pointer;font-family:inherit}
.btn-primary:hover{background:var(--g2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(34,197,94,.28)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;color:var(--muted2);font-size:15px;font-weight:500;padding:14px 22px;border-radius:10px;text-decoration:none;border:1px solid var(--border);transition:all .2s;background:transparent;cursor:pointer;font-family:inherit}
.btn-ghost:hover{border-color:var(--border2);color:var(--text)}
.hero-trust{display:flex;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.trust-item svg{color:var(--g);flex-shrink:0}
.hero-right{position:relative}
.code-window{background:var(--d2);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 32px 72px rgba(0,0,0,.6)}
.code-header{background:var(--d3);padding:12px 18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.code-dots{display:flex;gap:5px}
.code-dots span{width:10px;height:10px;border-radius:50%}
.code-dots span:nth-child(1){background:#FF5F57}
.code-dots span:nth-child(2){background:#FEBC2E}
.code-dots span:nth-child(3){background:#28C840}
.code-tab{margin-left:12px;font-size:12px;color:var(--muted);font-family:monospace}
.code-body{padding:22px 24px;font-family:'Courier New',monospace;font-size:12.5px;line-height:1.8}
.c-comment{color:#4a6070}.c-key{color:#7dd3fc}.c-str{color:#86efac}.c-num{color:#fda4af}
.float-badge{position:absolute;background:var(--card);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:nowrap;animation:float 4s ease-in-out infinite}
.fb-1{top:-16px;right:20px;color:var(--g)}.fb-2{bottom:-14px;left:20px;color:#FCD34D;animation-delay:2s}
.fb-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}

/* SECTIONS */
.section-wrap{padding:80px 48px;max-width:1200px;margin:0 auto}
.section-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--g);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.section-eyebrow::before{content:'';width:24px;height:2px;background:var(--g);border-radius:2px}
.section-h{font-family:'Cabinet Grotesk',sans-serif;font-size:clamp(28px,3.5vw,44px);font-weight:900;line-height:1.08;letter-spacing:-.03em;margin-bottom:14px}
.section-h em{font-style:normal;color:var(--g)}
.section-sub{font-size:17px;color:var(--muted2);line-height:1.65;max-width:520px;margin-bottom:48px}

.what-section,.screens-section{padding:100px 56px;max-width:1200px;margin:0 auto}
.what-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.what-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:26px;transition:all .25s}
.what-card:hover{border-color:rgba(34,197,94,.3);transform:translateY(-3px)}
.what-icon{width:44px;height:44px;border-radius:10px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.15);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.what-icon img{width:24px;height:24px}
.what-name{font-family:'Cabinet Grotesk',sans-serif;font-size:16px;font-weight:800;margin-bottom:7px}
.what-desc{font-size:13.5px;color:var(--muted2);line-height:1.6}

.tech-section{background:var(--d2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:80px 56px}
.tech-inner{max-width:1200px;margin:0 auto}
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.tech-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;align-items:center;gap:14px;transition:border-color .2s}
.tech-card:hover{border-color:rgba(34,197,94,.25)}
.tech-logo{width:44px;height:44px;border-radius:10px;background:var(--d3);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:8px}
.tech-logo img{width:28px;height:28px;object-fit:contain}
.tech-name{font-weight:700;font-size:14px;margin-bottom:2px}
.tech-desc{font-size:12px;color:var(--muted)}

.screens-list{display:flex;flex-direction:column;gap:80px;margin-top:60px}
.screen-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.screen-row.reverse{direction:rtl}.screen-row.reverse>*{direction:ltr}
.screen-num{font-family:'Cabinet Grotesk',sans-serif;font-size:64px;font-weight:900;color:rgba(34,197,94,.08);line-height:1}
.screen-title{font-family:'Cabinet Grotesk',sans-serif;font-size:28px;font-weight:800;margin-bottom:12px}
.screen-desc{font-size:15px;color:var(--muted2);line-height:1.7;margin-bottom:24px}
.screen-bullets{list-style:none;display:flex;flex-direction:column;gap:8px}
.screen-bullets li{font-size:14px;color:var(--muted2);display:flex;gap:8px}
.screen-bullets li::before{content:'→';color:var(--g);font-weight:700}
.screen-visual{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.screen-bar{background:var(--d3);padding:10px 16px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.screen-bar-dot{width:8px;height:8px;border-radius:50%;background:var(--border2)}
.screen-bar-title{font-size:11px;color:var(--muted);margin-left:8px;font-family:monospace}
.screen-content{padding:20px}
.mini-inbox{display:flex;flex-direction:column;gap:8px}
.mini-msg-row{display:flex;gap:8px;align-items:flex-end}.mini-msg-row.right{flex-direction:row-reverse}
.mini-bubble{background:var(--d3);border:1px solid var(--border);border-radius:12px;padding:8px 12px;font-size:12px;max-width:75%}
.mini-bubble.out{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.2)}
.mini-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#000}
.mini-broadcast{display:flex;flex-direction:column;gap:10px}
.broadcast-row{display:flex;justify-content:space-between;align-items:center;background:var(--d3);border-radius:8px;padding:10px 14px;border:1px solid var(--border)}
.broadcast-name{font-size:12px;font-weight:600}.broadcast-meta{font-size:11px;color:var(--muted)}
.broadcast-stat{font-size:12px;color:var(--g);font-weight:600}
.mini-flow{display:flex;flex-direction:column;align-items:flex-start}
.flow-node{background:var(--d3);border:1px solid var(--border);border-radius:8px;padding:9px 14px;font-size:12px;width:100%;margin-bottom:0}
.flow-node.trigger{border-color:rgba(34,197,94,.3);color:var(--g)}
.flow-node.action{border-color:rgba(59,130,246,.3);color:#93C5FD}
.flow-arrow{width:1px;height:18px;background:var(--border2);margin-left:20px}

.preview-section{background:var(--d2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:100px 56px;text-align:center}
.preview-inner{max-width:900px;margin:0 auto}
.preview-window{margin-top:48px;background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.preview-header{background:var(--d3);padding:14px 20px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.preview-url{flex:1;background:rgba(255,255,255,.04);border-radius:6px;padding:6px 12px;font-size:11px;color:var(--muted);font-family:monospace;text-align:left}
.preview-body{min-height:380px;display:flex}
.dash-sidebar{width:220px;border-right:1px solid var(--border);background:var(--d2);padding:20px 0;flex-shrink:0}
.dash-nav-item{padding:9px 20px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted2)}
.dash-nav-item.active{background:rgba(34,197,94,.07);color:var(--g);border-left:2px solid var(--g)}
.dash-main{flex:1;padding:24px}
.dash-title{font-family:'Cabinet Grotesk',sans-serif;font-size:18px;font-weight:800;margin-bottom:16px}
.dash-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.dash-stat{background:var(--d3);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}
.dash-stat-n{font-family:'Cabinet Grotesk',sans-serif;font-size:22px;font-weight:900;color:var(--g)}
.dash-stat-l{font-size:10px;color:var(--muted)}
.dash-inbox{display:flex;flex-direction:column;gap:6px}
.dash-chat-item{background:var(--d3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:12px}
.dash-chat-item.highlight{border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.04)}
.d-av{width:28px;height:28px;border-radius:50%;font-size:11px;font-weight:700;color:#000;display:flex;align-items:center;justify-content:center}
.d-name{font-weight:600}.d-msg{font-size:11px;color:var(--muted)}
.d-badge{margin-left:auto;background:var(--g);color:#000;font-size:9px;font-weight:700;padding:2px 6px;border-radius:100px}

.compare-section{padding:100px 56px;max-width:1000px;margin:0 auto}
.compare-table{width:100%;border-collapse:collapse;margin-top:48px}
.compare-table th{padding:14px 20px;font-size:13px;font-weight:700;color:var(--muted);text-align:left;border-bottom:1px solid var(--border)}
.compare-table th.hl{color:var(--g)}
.compare-table td{padding:14px 20px;font-size:14px;border-bottom:1px solid var(--border);color:var(--muted2)}
.compare-table td.label{font-weight:600;color:var(--text)}
.compare-table td.hl{color:var(--g);font-weight:600}
.compare-table tr:hover td{background:rgba(255,255,255,.02)}
.check{color:var(--g);font-weight:700}.cross{color:#ef4444}

.pricing-section{padding:80px 56px 100px;max-width:1100px;margin:0 auto}
.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.p-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:32px 28px;position:relative;transition:all .25s}
.p-card:hover{transform:translateY(-4px)}
.p-card.featured{border-color:rgba(34,197,94,.4);background:linear-gradient(150deg,rgba(34,197,94,.06) 0%,var(--card) 45%)}
.p-best{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--g);color:#000;font-size:11px;font-weight:800;padding:4px 16px;border-radius:100px}
.p-name{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.p-price{font-family:'Cabinet Grotesk',sans-serif;font-size:52px;font-weight:900;line-height:1;margin-bottom:4px}
.p-price sup{font-size:20px}
.p-period{font-size:13px;color:var(--muted);margin-bottom:6px}
.p-license{font-size:12px;color:var(--muted2);background:var(--d3);border-radius:6px;padding:4px 10px;display:inline-block;margin-bottom:24px;border:1px solid var(--border)}
hr.p-div{border:none;border-top:1px solid var(--border);margin-bottom:20px}
.p-features{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:28px}
.p-features li{font-size:13.5px;color:var(--muted2);display:flex;gap:8px}
.p-features li::before{content:'✓';color:var(--g);font-weight:700}
.p-btn{display:block;text-align:center;padding:13px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;transition:all .2s}
.p-outline{border:1px solid var(--border);color:var(--text)}
.p-outline:hover{border-color:rgba(255,255,255,.3)}
.p-fill{background:var(--g);color:#000}
.p-fill:hover{background:var(--g2)}

.faq-section{padding:80px 56px;max-width:780px;margin:0 auto}
.faq-list{margin-top:40px;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{padding:20px 0;font-size:16px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between}
.faq-q:hover{color:var(--g)}
.faq-arrow{color:var(--muted);transition:transform .3s}
.faq-a{font-size:14px;color:var(--muted2);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.faq-item.open .faq-a{max-height:300px;padding-bottom:18px}
.faq-item.open .faq-arrow{transform:rotate(45deg);color:var(--g)}
.faq-item.open .faq-q{color:var(--g)}

.cta-section{padding:100px 48px;text-align:center;position:relative}
.cta-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.1) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.cta-inner{position:relative;max-width:640px;margin:0 auto}
.cta-section h2{font-family:'Cabinet Grotesk',sans-serif;font-size:clamp(32px,5vw,52px);font-weight:900;line-height:1.06;margin-bottom:18px}
.cta-section h2 em{font-style:normal;color:var(--g)}
.cta-section p{color:var(--muted2);font-size:17px;margin-bottom:32px}
.cta-guarantee{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:20px}

/* DOCS */
.docs-layout{display:grid;grid-template-columns:260px 1fr;gap:48px;max-width:1200px;margin:0 auto;padding:0 48px 80px;align-items:start}
.docs-sidebar{position:sticky;top:100px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}
.docs-sidebar h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.docs-nav{list-style:none}
.docs-nav li{margin-bottom:4px}
.docs-nav a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--muted2);text-decoration:none}
.docs-nav a:hover,.docs-nav a.active{background:rgba(34,197,94,.08);color:var(--g)}
.docs-content h2{font-family:'Cabinet Grotesk',sans-serif;font-size:24px;font-weight:800;margin:32px 0 12px;letter-spacing:-.02em}
.docs-content h2:first-child{margin-top:0}
.docs-content p,.docs-content li{color:var(--muted2);font-size:15px;line-height:1.75;margin-bottom:16px}
.docs-content ul{margin:0 0 20px 20px}
.docs-content code{background:var(--d3);padding:2px 8px;border-radius:4px;font-size:13px;color:var(--g)}
.code-block{background:var(--d2);border:1px solid var(--border);border-radius:12px;padding:20px;font-family:monospace;font-size:13px;color:var(--muted2);margin:16px 0 24px;overflow-x:auto;line-height:1.7}

/* ROADMAP */
.roadmap-list{max-width:800px;margin:0 auto;padding:0 48px 80px}
.roadmap-item{display:grid;grid-template-columns:120px 1fr;gap:32px;padding:32px 0;border-bottom:1px solid var(--border)}
.roadmap-status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;border-radius:100px;width:fit-content;height:fit-content}
.status-done{background:rgba(34,197,94,.15);color:var(--g)}
.status-progress{background:rgba(59,130,246,.15);color:#93C5FD}
.status-planned{background:rgba(249,115,22,.12);color:var(--orange)}
.roadmap-item h3{font-family:'Cabinet Grotesk',sans-serif;font-size:20px;font-weight:800;margin-bottom:8px}
.roadmap-item p{color:var(--muted2);font-size:14px}

/* CONTACT & CHECKOUT */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1000px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem) 80px}
.form-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--muted2)}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--d3);border:1px solid var(--border);border-radius:10px;padding:12px 16px;color:var(--text);font-family:inherit;font-size:15px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:rgba(34,197,94,.4)}
.form-group textarea{min-height:120px;resize:vertical}
.contact-info{display:flex;flex-direction:column;gap:24px}
.contact-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;display:flex;gap:16px;align-items:flex-start}
.contact-card img{width:40px;height:40px}

.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:32px;max-width:1000px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem) 80px}
.order-summary{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;position:sticky;top:100px}
.order-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--muted2)}
.order-line.total{font-size:18px;font-weight:700;color:var(--text);border:none;padding-top:16px}
.order-line.total span:last-child{color:var(--g);font-family:'Cabinet Grotesk',sans-serif;font-size:28px}
.payment-icons{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.payment-icons img{height:28px;opacity:.85}
.license-select{display:grid;gap:12px;margin-bottom:24px}
.license-option{border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s}
.license-option:hover,.license-option.selected{border-color:var(--g);background:rgba(34,197,94,.05)}
.license-option input{margin-right:10px}

/* POLICY */
.policy-content{max-width:720px;margin:0 auto;padding:0 48px 80px}
.policy-content h2{font-family:'Cabinet Grotesk',sans-serif;font-size:22px;font-weight:800;margin:32px 0 12px}
.policy-content p,.policy-content li{color:var(--muted2);font-size:15px;line-height:1.75;margin-bottom:14px}
.policy-content ul{margin:0 0 20px 24px}

/* BUYER DASHBOARD */
.buyer-main{max-width:960px}
.buyer-header{margin-bottom:32px}
.buyer-header h1{font-family:'Cabinet Grotesk',sans-serif;font-size:28px;font-weight:900;margin-bottom:6px}
.buyer-header p{color:var(--muted2);font-size:14px}
.panel{display:none}.panel.active{display:block}
.dl-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dl-card-info{flex:1;min-width:200px}
.dl-card h3{font-size:16px;font-weight:700;margin-bottom:4px}
.dl-card p{font-size:13px;color:var(--muted)}
.dl-meta{font-size:12px;color:var(--muted);margin-top:8px}
.btn-dl{padding:10px 20px;background:var(--g);color:#000;font-weight:700;font-size:13px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;font-family:inherit}
.btn-dl.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}
.license-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px}
.license-key{font-family:monospace;font-size:18px;background:var(--d3);padding:16px 20px;border-radius:10px;border:1px dashed var(--border2);letter-spacing:.05em;margin:16px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.badge-pill{display:inline-block;background:rgba(34,197,94,.12);color:var(--g);font-size:12px;font-weight:700;padding:4px 12px;border-radius:100px;margin-bottom:16px}
.ticket-list{display:flex;flex-direction:column;gap:12px}
.ticket-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;transition:border-color .2s,background .2s}
a.ticket-item:hover{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.04)}
.ticket-thread{max-height:min(60vh,480px);overflow-y:auto;padding:4px}
.ticket-status{font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px}
.ticket-open{background:rgba(59,130,246,.15);color:#93C5FD}
.ticket-resolved{background:rgba(34,197,94,.12);color:var(--g)}
.update-item{padding:20px 0;border-bottom:1px solid var(--border)}
.update-item h4{font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.update-tag{font-size:10px;background:var(--d3);padding:3px 8px;border-radius:4px;color:var(--g)}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px}
.stat-card .n{font-family:'Cabinet Grotesk',sans-serif;font-size:28px;font-weight:900;color:var(--g)}
.stat-card .l{font-size:12px;color:var(--muted);margin-top:4px}

/* FEATURE GRID (features page) */
.feature-hero-img{max-width:900px;margin:48px auto 0;border-radius:16px;border:1px solid var(--border);overflow:hidden}
.feature-hero-img img{width:100%;display:block}
.feature-categories{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.feature-cat{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px}
.feature-cat h3{font-family:'Cabinet Grotesk',sans-serif;font-size:20px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.feature-cat h3 img{width:32px;height:32px}
.feature-cat ul{list-style:none}
.feature-cat li{font-size:14px;color:var(--muted2);padding:8px 0;border-bottom:1px solid var(--border);display:flex;gap:8px}
.feature-cat li:last-child{border:none}
.feature-cat li::before{content:'✓';color:var(--g);font-weight:700}

/* FEATURE REQUEST (roadmap) */
.feature-request-section{padding:64px 48px 80px;border-top:1px solid var(--border)}
.feature-request-inner{max-width:640px;margin:0 auto}
.feature-request-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feature-request-form .form-group select{width:100%;padding:12px 14px;background:var(--d3);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:15px}
.feature-request-success{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.06)}

/* WHATSAPP FLOAT */
.wa-whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:9990;width:56px;height:56px;border-radius:50%;background:#25D366;box-shadow:0 4px 24px rgba(37,211,102,.45),0 8px 32px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease;text-decoration:none}
.wa-whatsapp-float:hover{transform:scale(1.06);box-shadow:0 6px 28px rgba(37,211,102,.55),0 12px 40px rgba(0,0,0,.4)}
.wa-whatsapp-float img{width:28px;height:28px;filter:brightness(0) invert(1);position:relative;z-index:1}
.wa-whatsapp-float__pulse{position:absolute;inset:0;border-radius:50%;background:#25D366;animation:wa-pulse 2s ease-out infinite;z-index:0}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.45);opacity:0}}

/* FOOTER */
footer{background:var(--d2);border-top:1px solid var(--border);padding:56px 48px 36px;margin-top:0}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer-desc{font-size:13px;color:var(--muted);line-height:1.6;max-width:260px}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.footer-col a{font-size:13.5px;color:rgba(255,255,255,.4);text-decoration:none}
.footer-col a:hover{color:var(--text)}
.footer-bottom{max-width:1200px;margin:36px auto 0;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}

/* Visible by default — JS adds motion only when supported */
.reveal{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s ease}
html.js .reveal:not(.visible){opacity:0;transform:translateY(24px)}
html.js .reveal.visible{opacity:1;transform:translateY(0)}

/* Hero entrance (always visible after paint) */
.hero-left > *, .hero-right{animation:fadeUp .6s ease both}
.hero h1{animation-delay:.08s}
.hero-desc{animation-delay:.16s}
.hero-price-block{animation-delay:.22s}
.hero-ctas{animation-delay:.28s}
.hero-trust{animation-delay:.34s}
.hero-right{animation-delay:.2s;animation-duration:.9s}
.what-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 0 0,rgba(34,197,94,.04),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.what-card{position:relative;overflow:hidden}
.what-card:hover::after{opacity:1}
.flow-node.condition{border-color:rgba(249,115,22,.3);color:#FED7AA}
.c-fn{color:#c4b5fd}
.code-window{box-shadow:0 32px 72px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04)}
.faq-item.open .faq-a{max-height:400px}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Newsletter */
.newsletter-section{padding:72px 48px;background:var(--d2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.newsletter-inner{max-width:1100px;margin:0 auto}
.newsletter-fields{display:flex;flex-wrap:wrap;gap:10px}
.newsletter-fields input{flex:1;min-width:140px;padding:12px 14px;border:1px solid var(--border2);border-radius:8px;background:var(--d3);color:var(--text);font-family:inherit;font-size:15px}
.newsletter-fields .btn-primary{flex-shrink:0}
.newsletter-msg{font-size:13px;margin-top:12px}
.newsletter-msg.ok{color:var(--g)}
.newsletter-msg.err{color:#f87171}
.footer-newsletter{max-width:1200px;margin:0 auto 28px;padding:0 48px}
.footer-newsletter-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.newsletter-form--compact{display:flex;flex-wrap:wrap;gap:8px;max-width:420px}
.newsletter-form--compact input{flex:1;min-width:160px;padding:10px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--d3);color:var(--text);font-family:inherit;font-size:14px}
.newsletter-form--compact .btn-primary{padding:10px 18px;font-size:14px}

.page-title{font-family:'Cabinet Grotesk',sans-serif;font-size:clamp(1.35rem,4vw,1.75rem);font-weight:900;letter-spacing:-.02em}

/* Responsive layout */
@media (max-width: 991.98px) {
  .hero-inner,.screen-row,.screen-row.reverse,.two-col,.checkout-grid,.docs-layout,.feature-categories,.roi-inner,.newsletter-inner{grid-template-columns:1fr}
  .hero{padding:calc(var(--nav-h) + 24px) 1.25rem 3.5rem}
  .hero-right{display:none}
  .what-section,.screens-section,.pricing-section,.faq-section,.cta-section,.compare-section,.section-wrap,.benefits-section,.testimonials-section,.pain-section{padding-left:1.25rem;padding-right:1.25rem}
  .what-section,.screens-section{padding-top:3.5rem;padding-bottom:3.5rem}
  .what-grid,.tech-grid,.pricing-cards,.stats-strip-inner,.benefits-grid,.testimonials-grid{grid-template-columns:1fr}
  .stats-strip,.benefits-section,.testimonials-section,.roi-section,.trust-logos,.sell-banner,.newsletter-section{padding-left:1.25rem;padding-right:1.25rem}
  .stats-strip-inner{grid-template-columns:repeat(2,1fr);gap:1rem}
  .page-hero,.preview-section{padding-left:1.25rem;padding-right:1.25rem}
  .page-hero{padding-top:calc(var(--nav-h) + 2rem)}
  .guarantee-strip{margin-left:1.25rem;margin-right:1.25rem;flex-direction:column;text-align:center}
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  .feature-request-grid{grid-template-columns:1fr}
  .feature-request-section{padding-left:1.25rem;padding-right:1.25rem}
  .policy-content,.roadmap-list{padding-left:1.25rem;padding-right:1.25rem}
  .docs-sidebar{position:static;width:100%}
  .docs-layout{grid-template-columns:1fr}
  .order-summary{position:static}
  .compare-table-wrap,.screen-mock-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .screen-mock{min-width:280px;max-width:100%}
  .p-card{margin:0}
  .newsletter-fields{flex-direction:column}
  .newsletter-fields .btn-primary,.newsletter-fields .btn{width:100%;justify-content:center}
  .hero-ctas{flex-direction:column;width:100%}
  .hero-ctas .btn-primary,.hero-ctas .btn-ghost{width:100%;justify-content:center}
  .cta-inner{padding:0 1rem}
  .pricing-cards{gap:1rem}
}

@media (max-width: 575.98px) {
  .stats-strip-inner,.stats-row,.tech-grid{grid-template-columns:1fr}
  .auth-wrap{padding:0 1rem}
  .sell-banner p{font-size:13px;padding:0 0.5rem}
  .wa-whatsapp-float{right:12px;bottom:12px;width:52px;height:52px}
  .footer-inner{grid-template-columns:1fr}
  .hero h1{font-size:clamp(1.75rem,8vw,2.25rem)}
  .section-h{font-size:clamp(1.5rem,6vw,2rem)}
}