:root{--teal:#14b8a6;--teal-dark:#0d9488;--teal-soft:rgba(20,184,166,0.08);--teal-glow:rgba(20,184,166,0.25);--indigo:#6366f1;--indigo-soft:rgba(99,102,241,0.08);--indigo-glow:rgba(99,102,241,0.2);--bg:#030712;--bg2:#0a0d14;--bg3:#111520;--bg-card:#0f172a;--text:#f1f5f9;--text2:#94a3b8;--text3:#475569;--border:rgba(148,163,184,0.1);--border-hover:rgba(148,163,184,0.18);--radius:10px;--radius-lg:20px;--radius-xl:28px;--font-display:'Plus Jakarta Sans',sans-serif;--font-body:'Inter',sans-serif;--font-mono:'JetBrains Mono',monospace}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--teal);color:#000}
a{color:inherit}
canvas#hero-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.65}
.hero-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 20% 40%,rgba(20,184,166,0.08) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(99,102,241,0.05) 0%,transparent 50%),radial-gradient(ellipse at 50% 100%,rgba(20,184,166,0.03) 0%,transparent 40%);z-index:1;pointer-events:none}
.grid-bg{position:fixed;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 100%);z-index:0;pointer-events:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 40px;display:flex;align-items:center;justify-content:space-between;background:rgba(3,7,18,0.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}.nav.scrolled{border-bottom-color:var(--border);background:rgba(3,7,18,0.92)}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-0.3px;color:var(--text);text-decoration:none}
.nav-logo .logo-mark{width:30px;height:30px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#000;font-weight:800;box-shadow:0 0 20px rgba(20,184,166,0.2)}
.nav-logo span{color:var(--teal)}
.nav-links{display:flex;gap:24px;align-items:center}
@media(max-width:768px){.nav-links.show{display:flex;flex-direction:column;position:fixed;top:60px;left:0;right:0;background:rgba(3,7,18,0.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:20px;border-bottom:1px solid var(--border);gap:16px;z-index:99}}
.nav-links a{color:var(--text3);text-decoration:none;font-size:13px;font-weight:500;transition:color .2s;position:relative;letter-spacing:0.2px;padding:4px 0}
.nav-links a:hover,.nav-links a.active{color:var(--text2)}
.nav-links a.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--teal);border-radius:2px}
.nav-cta{background:var(--teal);color:#000;padding:8px 18px;border-radius:7px;font-weight:600;font-size:13px;text-decoration:none;transition:all .25s;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-cta:hover{background:#fff;box-shadow:0 0 30px var(--teal-glow);transform:translateY(-1px)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.nav-hamburger span{width:22px;height:2px;background:var(--text2);border-radius:2px;transition:all .3s}
section{position:relative;z-index:2}
.hero,.page-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 40px 70px}
.page-hero{min-height:50vh;padding:140px 40px 70px}
.hero-content,.page-hero-content{max-width:960px;margin:0 auto;text-align:center}
.hero-badge,.page-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(20,184,166,0.06);border:1px solid rgba(20,184,166,0.12);padding:5px 14px;border-radius:100px;font-size:11px;color:var(--teal);font-weight:600;margin-bottom:24px;letter-spacing:0.4px;text-transform:uppercase}
.ping-dot{position:relative;display:flex;height:7px;width:7px}
.ping-dot span{position:absolute;display:inline-flex;height:100%;width:100%;border-radius:50%;background:var(--teal)}.ping-dot span:first-child{animation:ping 2s ease-in-out infinite;opacity:.5}.ping-dot span:last-child{opacity:1}
@keyframes ping{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(2);opacity:0}}
.hero h1,.page-hero h1{font-family:var(--font-display);font-size:clamp(38px,6vw,84px);font-weight:800;line-height:1.05;letter-spacing:-2px;margin-bottom:18px}
.page-hero h1{font-size:clamp(32px,4vw,56px)}
.hero h1 .gradient,.page-hero h1 .gradient{background:linear-gradient(135deg,var(--teal) 0%,#06b6d4 30%,#6366f1 70%,#a78bfa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p,.page-hero p{font-size:clamp(16px,1.6vw,20px);color:var(--text2);max-width:640px;margin:0 auto 32px;font-weight:400;line-height:1.7}
.page-hero p{font-size:clamp(15px,1.4vw,18px)}
.hero-actions,.page-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-primary{background:var(--teal);color:#000;padding:13px 32px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;transition:all .25s;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover{background:#fff;box-shadow:0 0 40px var(--teal-glow);transform:translateY(-2px);color:#000}
.btn-secondary{background:rgba(255,255,255,0.03);color:var(--text);padding:13px 32px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--border);transition:all .25s;display:inline-flex;align-items:center;gap:8px}
.btn-secondary:hover{background:rgba(255,255,255,0.06);border-color:rgba(148,163,184,0.2)}
.hero-stats{display:flex;justify-content:center;gap:48px;margin-top:60px;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat .num{font-family:var(--font-display);font-size:36px;font-weight:800;color:var(--text);letter-spacing:-1px}
.hero-stat .num sup{font-size:15px;color:var(--teal);font-weight:600}
.hero-stat .label{font-size:12px;color:var(--text3);margin-top:3px;letter-spacing:0.3px}
.divider-section{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);max-width:80%;margin:0 auto}
.partners{padding:50px 40px}
.partners-inner{max-width:900px;margin:0 auto;text-align:center;overflow:hidden}
.partners-inner>p{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:24px;font-weight:600}
.partners-track{display:flex;gap:48px;animation:marquee 35s linear infinite;width:max-content}
.partners-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.partner-chip{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);white-space:nowrap;font-size:12px;color:var(--text3);font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:all .3s}
.partner-chip:hover{border-color:rgba(20,184,166,0.2);transform:translateY(-1px)}
.section-label{text-align:center;max-width:680px;margin:0 auto 60px}
.section-label h2{font-family:var(--font-display);font-size:clamp(28px,3.5vw,44px);font-weight:800;letter-spacing:-1px;margin-bottom:12px;line-height:1.1}
.section-label p{color:var(--text2);font-size:15px;line-height:1.7;max-width:580px;margin:0 auto}
.features{padding:100px 40px}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;max-width:1200px;margin:0 auto}
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:all .3s;position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:0;transition:opacity .4s}
.feature-card:hover{transform:translateY(-3px);border-color:rgba(20,184,166,0.15)}.feature-card:hover::before{opacity:1}
.feature-card .fc-icon{width:40px;height:40px;border-radius:9px;background:rgba(20,184,166,0.08);border:1px solid rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:18px}
.feature-card h3{font-size:15px;font-weight:700;margin-bottom:5px;color:var(--text)}
.feature-card p{font-size:13px;color:var(--text2);line-height:1.65}
.showcase{padding:100px 40px;position:relative}
.showcase::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:radial-gradient(ellipse at 50% 0%,rgba(20,184,166,0.04),transparent 60%);pointer-events:none}
.showcase-inner{max-width:1100px;margin:0 auto;position:relative}
.showcase .section-label{margin-bottom:50px}
.mockup{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.55);border:1px solid rgba(148,163,184,0.08);transition:transform .5s}
.mockup:hover{transform:scale(1.003)}
.mockup-bar{height:32px;background:var(--bg3);display:flex;align-items:center;padding:0 14px;gap:7px;border-bottom:1px solid var(--border)}
.mockup-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.mockup-screen{background:var(--bg);aspect-ratio:16/9;overflow:hidden}
.pc-mock{display:grid;grid-template-columns:220px 1fr;height:100%}
.pc-sidebar{background:var(--bg2);padding:14px 10px;display:flex;flex-direction:column;gap:1px;border-right:1px solid var(--border)}
.pc-sb-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:11px;color:var(--text3);transition:all .15s;cursor:default}
.pc-sb-item.active{background:rgba(20,184,166,0.08);color:var(--teal)}.pc-sb-item .sb-icon{font-size:14px;width:18px;text-align:center}
.pc-main{padding:16px;display:flex;flex-direction:column;gap:12px}
.pc-top-bar{display:flex;justify-content:space-between;align-items:center}
.pc-top-bar h4{font-size:13px;font-weight:600;color:var(--text)}
.pc-search{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:11px;color:var(--text3);width:180px;font-family:var(--font-body)}
.pc-table{width:100%;border-collapse:collapse}
.pc-table th{font-size:9px;text-transform:uppercase;color:var(--text3);text-align:left;padding:5px 6px;border-bottom:1px solid var(--border);font-weight:600;letter-spacing:0.8px}
.pc-table td{font-size:11px;padding:7px 6px;border-bottom:1px solid rgba(148,163,184,0.04);color:var(--text2)}
.pc-table td .badge{font-size:9px;padding:2px 8px;border-radius:100px;display:inline-block;font-weight:600}
.pc-table td .badge.active{background:rgba(20,184,166,0.1);color:var(--teal)}
.pc-table td .badge.vacation{background:rgba(234,179,8,0.1);color:#eab308}
.pc-table td .badge.trial{background:rgba(99,102,241,0.1);color:#818cf8}
.pc-avatar{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#000;margin-right:6px;vertical-align:middle;flex-shrink:0}
.modules{padding:100px 40px}
.modules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;max-width:960px;margin:0 auto}
.module-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center;transition:all .25s;cursor:default}
.module-card:hover{border-color:rgba(20,184,166,0.15);transform:translateY(-2px);background:rgba(15,23,42,0.6)}
.module-card .m-icon{font-size:20px;margin-bottom:6px;display:block}
.module-card h4{font-size:12px;font-weight:600;color:var(--text)}
.module-card p{font-size:10px;color:var(--text3);margin-top:2px}
.security{padding:100px 40px;position:relative}
.security::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:radial-gradient(ellipse at 50% 50%,rgba(99,102,241,0.03),transparent 60%);pointer-events:none}
.security .section-label{margin-bottom:50px}
.security-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;max-width:1000px;margin:0 auto}
.security-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:all .25s}
.security-item:hover{border-color:rgba(99,102,241,0.12);transform:translateY(-2px)}
.security-item .s-icon{font-size:20px;margin-bottom:12px;display:block}
.security-item h4{font-size:14px;font-weight:600;margin-bottom:4px}
.security-item p{font-size:12px;color:var(--text3);line-height:1.6;margin:0}
.pricing{padding:100px 40px}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:1050px;margin:0 auto}
.pricing-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px;position:relative;transition:all .3s}
.pricing-card.featured{border-color:rgba(20,184,166,0.25);background:linear-gradient(135deg,rgba(20,184,166,0.04),rgba(99,102,241,0.02));transform:scale(1.02)}
.pricing-card.featured .badge-top{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--teal),#06b6d4);color:#000;padding:3px 14px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:0.3px;white-space:nowrap}
.pricing-card h3{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px}
.pricing-card .price{font-family:var(--font-display);font-size:42px;font-weight:800;letter-spacing:-2px;color:var(--text)}
.pricing-card .price span{font-size:15px;color:var(--text2);font-weight:400}
.pricing-card .desc{color:var(--text2);font-size:12px;margin:8px 0 20px;line-height:1.5}
.pricing-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.pricing-card ul li{font-size:13px;display:flex;align-items:center;gap:8px;color:var(--text2)}
.pricing-card ul li::before{content:'\2713';color:var(--teal);font-weight:700;font-size:14px}
.pricing-card .btn-p{display:block;text-align:center;padding:11px;border-radius:8px;font-weight:600;font-size:13px;text-decoration:none;transition:all .25s}
.pricing-card .btn-p.primary{background:var(--teal);color:#000}.pricing-card .btn-p.primary:hover{background:#fff;box-shadow:0 0 30px var(--teal-glow)}
.pricing-card .btn-p.ghost{background:rgba(255,255,255,0.03);color:var(--text);border:1px solid var(--border)}.pricing-card .btn-p.ghost:hover{background:rgba(255,255,255,0.06);border-color:rgba(148,163,184,0.2)}
.cta{padding:100px 40px;text-align:center;position:relative}
.cta::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;max-width:600px;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent)}
.cta-inner{max-width:600px;margin:0 auto}
.cta-inner h2{font-family:var(--font-display);font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.cta-inner p{color:var(--text2);font-size:15px;margin-bottom:32px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.footer{padding:48px 40px;border-top:1px solid var(--border)}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:32px}
.footer-brand .logo-mark{width:28px;height:28px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#000;font-weight:800;margin-right:8px}
.footer-brand span{font-family:var(--font-display);font-size:16px;font-weight:700}
.footer-brand p{font-size:12px;color:var(--text3);margin-top:10px;line-height:1.6;max-width:260px}
.footer-col h5{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.footer-col a{display:block;font-size:12px;color:var(--text2);text-decoration:none;padding:3px 0;transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:11px;color:var(--text3)}
.fade-in{opacity:0;transform:translateY(24px);transition:all .6s cubic-bezier(0.16,1,0.3,1)}.fade-in.visible{opacity:1;transform:translateY(0)}
.float{animation:float 6s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* === TESTIMONIALS === */
.testimonials{padding:100px 40px;position:relative}
.testimonials-inner{max-width:860px;margin:0 auto}
.testimonials-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 0 40px;scrollbar-width:none;-ms-overflow-style:none}
.testimonials-track::-webkit-scrollbar{display:none}
.testimonial-card{flex:0 0 100%;scroll-snap-align:start;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;transition:all .3s}
.testimonial-card:hover{border-color:rgba(20,184,166,0.12);transform:translateY(-2px)}
.testimonial-card .stars{color:#eab308;font-size:16px;letter-spacing:2px;margin-bottom:14px}
.testimonial-card blockquote{font-size:14px;color:var(--text2);line-height:1.8;font-style:italic;margin-bottom:20px}
.testimonial-card .author{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:16px}
.testimonial-card .author .avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#000;flex-shrink:0}
.testimonial-card .author .info strong{font-size:13px;font-weight:600;display:block}
.testimonial-card .author .info span{font-size:11px;color:var(--text3)}
.testimonial-dots{display:flex;justify-content:center;gap:6px}
.testimonial-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--text3);cursor:pointer;transition:all .3s;padding:0}
.testimonial-dots button.active{background:var(--teal);width:24px;border-radius:4px}
/* === FAQ === */
.faq{padding:100px 40px;position:relative}
.faq::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:radial-gradient(ellipse at 50% 0%,rgba(20,184,166,0.03),transparent 60%);pointer-events:none}
.faq-inner{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border);padding:0;overflow:hidden}
.faq-question{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 0;background:none;border:none;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;text-align:left;transition:color .2s;gap:16px;font-family:var(--font-body)}
.faq-question:hover{color:var(--teal)}
.faq-question svg{flex-shrink:0;width:18px;height:18px;transition:transform .3s;color:var(--text3)}
.faq-item.open .faq-question svg{transform:rotate(180deg);color:var(--teal)}
.faq-answer{padding:0 0 18px;color:var(--text2);font-size:13px;line-height:1.7;display:none}
.faq-item.open .faq-answer{display:block}
.faq-answer a{color:var(--teal);text-decoration:underline}
/* === BLOG PREVIEW === */
.blog-preview{padding:100px 40px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:1100px;margin:0 auto}
.blog-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s}
.blog-card:hover{transform:translateY(-3px);border-color:rgba(20,184,166,0.12)}
.blog-card .b-img{height:170px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:32px;position:relative;overflow:hidden}
.blog-card .b-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,var(--bg-card))}
.blog-card .b-body{padding:20px}
.blog-card .b-tag{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--teal);background:rgba(20,184,166,0.08);padding:2px 10px;border-radius:100px;margin-bottom:8px}
.blog-card h3{font-size:15px;font-weight:700;margin-bottom:6px;line-height:1.35}
.blog-card p{font-size:12px;color:var(--text3);line-height:1.6;margin-bottom:14px}
.blog-card .b-meta{font-size:11px;color:var(--text3);display:flex;gap:12px;align-items:center}
/* === COMPARISON === */
.comparison{padding:100px 40px;position:relative}
.comparison::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:radial-gradient(ellipse at 50% 100%,rgba(99,102,241,0.03),transparent 60%);pointer-events:none}
.comparison-inner{max-width:960px;margin:0 auto}
.comparison-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)}
.comparison-table thead tr{background:var(--bg2)}
.comparison-table th{padding:14px 18px;font-size:12px;font-weight:700;text-align:left;text-transform:uppercase;letter-spacing:0.5px;color:var(--text2);border-bottom:1px solid var(--border)}
.comparison-table th:not(:first-child){text-align:center}
.comparison-table th .check{color:var(--teal);font-size:16px}
.comparison-table th .x{color:var(--text3);font-size:16px}
.comparison-table td{padding:13px 18px;font-size:12px;color:var(--text2);border-bottom:1px solid rgba(148,163,184,0.04)}
.comparison-table td:first-child{font-weight:600;color:var(--text)}
.comparison-table td:not(:first-child){text-align:center}
.comparison-table td .yes{color:var(--teal);font-size:16px;font-weight:700}
.comparison-table td .no{color:var(--text3);font-size:14px}
.comparison-table tbody tr:hover{background:rgba(20,184,166,0.02)}
.comparison-table tbody tr:last-child td{border-bottom:none}
/* === STATS COUNTER === */
.stats-section{padding:70px 40px;position:relative}
.stats-section::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:radial-gradient(ellipse at 50% 50%,rgba(20,184,166,0.03),transparent 60%);pointer-events:none}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:1000px;margin:0 auto}
.stat-item{text-align:center;padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .3s}
.stat-item:hover{transform:translateY(-2px);border-color:rgba(20,184,166,0.1)}
.stat-item .s-num{font-family:var(--font-display);font-size:clamp(32px,3vw,48px);font-weight:800;background:linear-gradient(135deg,var(--teal),#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-item .s-num .suffix{font-size:20px}
.stat-item p{font-size:12px;color:var(--text3);margin-top:4px;letter-spacing:0.3px}
/* === FEATURE TABS === */
.feature-tabs{padding:100px 40px}
.feature-tabs-nav{display:flex;justify-content:center;gap:4px;margin-bottom:48px;flex-wrap:wrap}
.feature-tabs-nav button{background:rgba(255,255,255,0.03);border:1px solid var(--border);padding:9px 20px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;transition:all .25s;font-family:var(--font-body);white-space:nowrap}
.feature-tabs-nav button:hover{color:var(--text2);border-color:rgba(148,163,184,0.2)}
.feature-tabs-nav button.active{background:rgba(20,184,166,0.08);border-color:rgba(20,184,166,0.2);color:var(--teal)}
.feature-tab-content{display:none;max-width:1100px;margin:0 auto;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.feature-tab-content.active{display:grid}
.feature-tab-content .ft-text h3{font-family:var(--font-display);font-size:clamp(22px,2.5vw,32px);font-weight:800;letter-spacing:-0.5px;margin-bottom:12px}
.feature-tab-content .ft-text p{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:16px}
.feature-tab-content .ft-text ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.feature-tab-content .ft-text ul li{font-size:13px;display:flex;align-items:center;gap:8px;color:var(--text2)}
.feature-tab-content .ft-text ul li::before{content:'\2713';color:var(--teal);font-weight:700}
.feature-tab-content .ft-visual{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;min-height:280px;display:flex;align-items:center;justify-content:center;font-size:64px}
/* === CHATBOT PREVIEW === */
.chatbot-toggle{position:fixed;bottom:24px;right:24px;z-index:99;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#06b6d4);border:none;color:#000;font-size:22px;cursor:pointer;box-shadow:0 4px 24px rgba(20,184,166,0.35);transition:all .3s;display:flex;align-items:center;justify-content:center}
.chatbot-toggle:hover{transform:scale(1.08);box-shadow:0 6px 32px rgba(20,184,166,0.5)}
.chatbot-toggle .pulse-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid var(--teal);animation:pulse-ring 2s ease-out infinite;opacity:0}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.chatbot-window{position:fixed;bottom:90px;right:24px;z-index:99;width:340px;max-height:480px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.6);display:none;flex-direction:column}
.chatbot-window.open{display:flex}
.chatbot-header{background:var(--bg2);padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.chatbot-header .cb-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#06b6d4);display:flex;align-items:center;justify-content:center;font-size:14px;color:#000;font-weight:700}
.chatbot-header strong{font-size:13px;font-weight:600}
.chatbot-header span{font-size:10px;color:var(--text3)}
.chatbot-messages{padding:14px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:280px}
.chatbot-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:12px;line-height:1.5}
.chatbot-msg.bot{align-self:flex-start;background:var(--bg3);color:var(--text2);border-bottom-left-radius:4px}
.chatbot-msg.user{align-self:flex-end;background:rgba(20,184,166,0.12);color:var(--teal);border-bottom-right-radius:4px}
.chatbot-input{display:flex;border-top:1px solid var(--border);padding:8px}
.chatbot-input input{flex:1;background:var(--bg3);border:1px solid transparent;border-radius:8px;padding:9px 12px;font-size:12px;color:var(--text);font-family:var(--font-body);outline:none}
.chatbot-input input:focus{border-color:rgba(20,184,166,0.2)}
.chatbot-input button{background:none;border:none;color:var(--teal);font-size:18px;padding:0 10px;cursor:pointer}
/* === INNER PAGES COMMON === */
.breadcrumb{display:flex;justify-content:center;gap:8px;font-size:12px;color:var(--text3);margin-bottom:14px}
.breadcrumb a{color:var(--text2);text-decoration:none;transition:color .2s}.breadcrumb a:hover{color:var(--text)}
.breadcrumb span{color:var(--text3)}
/* === TIMELINE === */
.timeline{max-width:700px;margin:0 auto;position:relative;padding:20px 0}
.timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--teal),var(--indigo),transparent);opacity:.3}
.timeline-item{padding:0 0 40px 52px;position:relative}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{content:'';position:absolute;left:14px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg-card);border:2px solid var(--teal);z-index:1}
.timeline-item .t-year{font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--teal);margin-bottom:4px}
.timeline-item h4{font-size:14px;font-weight:700;margin-bottom:3px}
.timeline-item p{font-size:12px;color:var(--text3);line-height:1.6}
/* === TEAM === */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:960px;margin:0 auto}
.team-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 20px;text-align:center;transition:all .3s}
.team-card:hover{transform:translateY(-3px);border-color:rgba(20,184,166,0.1)}
.team-card .t-avatar{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#000}
.team-card h4{font-size:14px;font-weight:700}
.team-card .role{font-size:11px;color:var(--teal);font-weight:600;margin:2px 0 8px}
.team-card p{font-size:11px;color:var(--text3);line-height:1.5}
.team-card .social{display:flex;justify-content:center;gap:8px;margin-top:10px}
.team-card .social a{color:var(--text3);text-decoration:none;font-size:14px;transition:color .2s}
.team-card .social a:hover{color:var(--teal)}
/* === VALUES === */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:1000px;margin:0 auto}
.value-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;text-align:center;transition:all .3s}
.value-card:hover{transform:translateY(-2px);border-color:rgba(20,184,166,0.1)}
.value-card .v-icon{font-size:32px;margin-bottom:10px;display:block}
.value-card h4{font-size:15px;font-weight:700;margin-bottom:4px}
.value-card p{font-size:12px;color:var(--text3);line-height:1.6}
/* === CONTACT FORM === */
.contact-section{padding:100px 40px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1000px;margin:0 auto}
.contact-form{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:36px}
.contact-form .form-group{margin-bottom:16px}
.contact-form label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--text);font-family:var(--font-body);outline:none;transition:border-color .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:rgba(20,184,166,0.2)}
.contact-form textarea{min-height:110px;resize:vertical}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form .btn-primary{width:100%;justify-content:center;font-size:14px;padding:13px}
.contact-info{display:flex;flex-direction:column;gap:20px;justify-content:center}
.contact-info-item{display:flex;gap:14px;align-items:flex-start}
.contact-info-item .ci-icon{width:40px;height:40px;border-radius:10px;background:rgba(20,184,166,0.08);border:1px solid rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.contact-info-item h4{font-size:13px;font-weight:600;margin-bottom:2px}
.contact-info-item p{font-size:12px;color:var(--text3);line-height:1.5}
/* === PRICING DETAIL === */
.pricing-detail{padding:100px 40px}
.pricing-detail .section-label{margin-bottom:32px}
.pricing-compare{max-width:960px;margin:0 auto}
.pricing-compare .pc-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.pricing-compare .pc-table th{background:var(--bg2);padding:14px 16px;font-size:12px;font-weight:700;text-align:center;color:var(--text2);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:0.5px}
.pricing-compare .pc-table th:first-child{text-align:left}
.pricing-compare .pc-table td{padding:12px 16px;font-size:12px;color:var(--text2);border-bottom:1px solid rgba(148,163,184,0.04);text-align:center}
.pricing-compare .pc-table td:first-child{text-align:left;color:var(--text);font-weight:500}
.pricing-compare .pc-table td .check{color:var(--teal);font-weight:700;font-size:16px}
.pricing-compare .pc-table td .dash{color:var(--text3)}
.pricing-compare .pc-table tbody tr:hover{background:rgba(20,184,166,0.02)}
.pricing-compare .pc-table tbody tr:last-child td{border-bottom:none}
.pricing-faq{margin-top:60px;max-width:700px;margin-left:auto;margin-right:auto}
/* === MODULES DETAIL === */
.modules-detail{padding:100px 40px;position:relative}
.modules-detail::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:radial-gradient(ellipse at 50% 0%,rgba(20,184,166,0.03),transparent 60%);pointer-events:none}
.modules-cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:1100px;margin:0 auto}
.module-detail-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:all .3s;position:relative;overflow:hidden}
.module-detail-card:hover{transform:translateY(-3px);border-color:rgba(20,184,166,0.12)}
.module-detail-card .md-icon{width:44px;height:44px;border-radius:10px;background:rgba(20,184,166,0.08);border:1px solid rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:22px}
.module-detail-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.module-detail-card .md-desc{font-size:12px;color:var(--text3);line-height:1.6;margin-bottom:12px}
.module-detail-card ul{list-style:none}
.module-detail-card ul li{font-size:12px;color:var(--text2);padding:3px 0;display:flex;align-items:center;gap:6px}
.module-detail-card ul li::before{content:'\2713';color:var(--teal);font-weight:700;font-size:11px}
.modules-cat-title{font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:20px;text-align:center;letter-spacing:-0.3px}
.modules-cat-title span{background:linear-gradient(135deg,var(--teal),#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.modules-header{text-align:center;max-width:680px;margin:0 auto 48px}
.modules-header h2{font-family:var(--font-display);font-size:clamp(28px,3.5vw,44px);font-weight:800;letter-spacing:-1px;margin-bottom:12px}
.modules-header p{color:var(--text2);font-size:15px;line-height:1.7;max-width:580px;margin:0 auto}
/* === BLOG === */
.blog-main{padding:100px 40px}
.blog-main .section-label{margin-bottom:40px}
.blog-featured{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1100px;margin:0 auto 48px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:all .3s}
.blog-featured:hover{transform:translateY(-2px);border-color:rgba(20,184,166,0.12)}
.blog-featured .bf-img{min-height:320px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:56px}
.blog-featured .bf-body{padding:36px;display:flex;flex-direction:column;justify-content:center}
.blog-featured .bf-tag{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--indigo);background:rgba(99,102,241,0.08);padding:2px 10px;border-radius:100px;margin-bottom:10px;width:fit-content}
.blog-featured h2{font-family:var(--font-display);font-size:clamp(22px,2.5vw,30px);font-weight:800;letter-spacing:-0.5px;margin-bottom:10px;line-height:1.2}
.blog-featured p{font-size:13px;color:var(--text3);line-height:1.7;margin-bottom:16px}
.blog-featured .bf-meta{font-size:11px;color:var(--text3);display:flex;gap:14px}
.blog-categories{display:flex;justify-content:center;gap:6px;margin-bottom:32px;flex-wrap:wrap}
.blog-categories button{background:rgba(255,255,255,0.03);border:1px solid var(--border);padding:7px 16px;border-radius:100px;font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;transition:all .25s;font-family:var(--font-body)}
.blog-categories button:hover{color:var(--text2);border-color:rgba(148,163,184,0.2)}
.blog-categories button.active{background:rgba(20,184,166,0.08);border-color:rgba(20,184,166,0.2);color:var(--teal)}
.blog-list{max-width:1100px;margin:0 auto}
.blog-pagination{display:flex;justify-content:center;gap:6px;margin-top:40px}
.blog-pagination button{width:34px;height:34px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font-body)}
.blog-pagination button:hover,.blog-pagination button.active{border-color:rgba(20,184,166,0.2);color:var(--teal);background:rgba(20,184,166,0.06)}
/* === RESPONSIVE === */
@media(max-width:768px){
.nav{padding:12px 20px}.nav-links{display:none}.nav-hamburger{display:flex}
.hero,.page-hero{padding:100px 20px 50px}.hero-stats{gap:24px}.hero h1{font-size:clamp(30px,7vw,42px)}
.features{padding:70px 20px}.features-grid{grid-template-columns:1fr}
.showcase{padding:70px 20px}.pc-mock{grid-template-columns:1fr}.pc-sidebar{display:none}
.modules{padding:70px 20px}.modules-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.security{padding:70px 20px}.pricing{padding:70px 20px}.pricing-card.featured{transform:none}
.cta{padding:70px 20px}.footer{padding:36px 20px}.footer-grid{grid-template-columns:1fr 1fr;gap:24px}
.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;text-align:center}
.testimonials{padding:70px 20px}.faq{padding:70px 20px}.blog-preview{padding:70px 20px}
.comparison{padding:70px 20px}.stats-section{padding:50px 20px}
.feature-tabs{padding:70px 20px}.feature-tab-content.active{grid-template-columns:1fr}
.feature-tabs-nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.feature-tabs-nav button{white-space:nowrap;flex-shrink:0}
.blog-grid{grid-template-columns:1fr}.blog-featured{grid-template-columns:1fr}
.blog-featured .bf-img{min-height:200px}.blog-featured .bf-body{padding:24px}
.contact-grid{grid-template-columns:1fr}.contact-form .form-row{grid-template-columns:1fr}
.chatbot-window{width:calc(100% - 32px);right:16px;bottom:84px}
.modules-detail{padding:70px 20px}.modules-cat-grid{grid-template-columns:1fr}
.contact-section{padding:70px 20px}.pricing-detail{padding:70px 20px}.blog-main{padding:70px 20px}
.team-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
.team-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}
.features-grid{grid-template-columns:1fr}
}

/* === TOLMORA DESIGN REFRESH 2026 === */
:root{
--teal:#0f766e;
--teal-dark:#115e59;
--teal-soft:rgba(15,118,110,0.09);
--teal-glow:rgba(15,118,110,0.18);
--indigo:#374151;
--indigo-soft:rgba(55,65,81,0.08);
--indigo-glow:rgba(55,65,81,0.16);
--bg:#f5f1e8;
--bg2:#ebe4d5;
--bg3:#d8cfbd;
--bg-card:#fffdf8;
--text:#151a18;
--text2:#505954;
--text3:#7b817b;
--border:rgba(35,43,39,0.13);
--border-hover:rgba(35,43,39,0.24);
--radius:6px;
--radius-lg:8px;
--radius-xl:8px;
}
body{
background:
linear-gradient(90deg,rgba(25,31,28,.035) 1px,transparent 1px),
linear-gradient(rgba(25,31,28,.03) 1px,transparent 1px),
linear-gradient(180deg,#f8f4ec 0%,#eee8dc 52%,#f8f4ec 100%);
background-size:56px 56px,56px 56px,auto;
color:var(--text);
}
canvas#hero-canvas,.hero-overlay,.grid-bg{display:none}
body::before{
content:"";
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
background:
linear-gradient(120deg,rgba(15,118,110,.08),transparent 32%),
linear-gradient(300deg,rgba(167,139,78,.12),transparent 28%);
opacity:.75;
}
.nav{
top:16px;
left:24px;
right:24px;
padding:10px 14px;
border:1px solid var(--border);
border-radius:8px;
background:rgba(255,253,248,.86);
box-shadow:0 16px 50px rgba(31,35,33,.08);
}
.nav.scrolled{background:rgba(255,253,248,.94);border-color:var(--border-hover)}
.nav-logo{font-size:17px;color:var(--text);letter-spacing:-.2px}
.nav-logo .logo-mark,.footer-brand .logo-mark{
background:#17211d;
color:#f7efe1;
border-radius:5px;
box-shadow:none;
}
.nav-logo span,.footer-brand span span{color:var(--teal)}
.nav-links{gap:8px}
.nav-links a{
color:var(--text2);
font-size:12px;
font-weight:700;
padding:8px 10px;
border-radius:6px;
letter-spacing:0;
}
.nav-links a:hover,.nav-links a.active{background:#f0eadf;color:var(--text)}
.nav-links a.active::after{display:none}
.nav-cta,.btn-primary,.pricing-card .btn-p.primary{
background:#17211d;
color:#fffdf8;
border:1px solid #17211d;
box-shadow:none;
border-radius:6px;
}
.nav-links a.nav-cta{color:#fffdf8;padding:8px 14px}
.nav-cta:hover,.btn-primary:hover,.pricing-card .btn-p.primary:hover{
background:var(--teal);
border-color:var(--teal);
color:#fffdf8;
box-shadow:0 12px 24px rgba(15,118,110,.18);
transform:translateY(-1px);
}
.btn-secondary,.pricing-card .btn-p.ghost{
background:#fffdf8;
color:var(--text);
border:1px solid var(--border);
border-radius:6px;
}
.btn-secondary:hover,.pricing-card .btn-p.ghost:hover{
background:#f0eadf;
border-color:var(--border-hover);
}
.hero{
min-height:auto;
padding:150px 40px 64px;
}
.page-hero{
min-height:auto !important;
padding:150px 40px 58px !important;
border-bottom:1px solid rgba(35,43,39,.08);
}
.hero-content{
max-width:1180px;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(420px,520px);
gap:44px;
align-items:center;
text-align:left;
}
.page-hero-content{text-align:left;max-width:980px;margin:0 auto}
.hero-badge,.page-hero-badge{
background:#e8ddc9;
border-color:#d5c6aa;
color:#67512d;
border-radius:999px;
font-size:10px;
margin-bottom:18px;
}
.ping-dot span{background:#a27633}
.hero h1,.page-hero h1{
font-size:clamp(42px,6vw,76px);
line-height:.98;
letter-spacing:-1.8px;
max-width:780px;
}
.page-hero h1{font-size:clamp(34px,4.8vw,60px)}
.hero h1 .gradient,.page-hero h1 .gradient,.modules-cat-title span,.stat-item .s-num,.modules-cat-title span{
background:none;
-webkit-text-fill-color:currentColor;
color:var(--teal);
}
.hero p,.page-hero p{
margin:0 0 28px;
max-width:650px;
color:var(--text2);
font-size:clamp(16px,1.45vw,19px);
line-height:1.72;
}
.hero-actions,.page-hero-actions{justify-content:flex-start}
.hero-proof{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:22px;
}
.hero-proof span{
background:#fffdf8;
border:1px solid var(--border);
border-radius:999px;
padding:8px 11px;
font-size:11px;
font-weight:800;
color:var(--text2);
}
.hero-dashboard{
grid-row:1 / span 4;
grid-column:2;
display:grid;
grid-template-columns:150px 1fr;
min-height:380px;
background:#fffdf8;
border:1px solid rgba(35,43,39,.16);
border-radius:8px;
overflow:hidden;
box-shadow:0 26px 70px rgba(31,35,33,.14);
}
.hd-side{
background:#17211d;
color:#cfd8d0;
padding:18px 12px;
display:flex;
flex-direction:column;
gap:8px;
}
.hd-brand{
font-weight:900;
font-family:var(--font-display);
font-size:14px;
color:#fffdf8;
margin-bottom:16px;
}
.hd-menu{
font-size:11px;
font-weight:700;
padding:9px 8px;
border-radius:6px;
color:#9fab9f;
}
.hd-menu.active{background:#26342f;color:#fffdf8}
.hd-main{padding:20px;display:flex;flex-direction:column;gap:18px}
.hd-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hd-toolbar strong{display:block;font-size:20px;font-family:var(--font-display);letter-spacing:-.4px}
.hd-toolbar small{display:block;color:var(--text3);font-size:11px;margin-top:2px}
.hd-toolbar span{
background:#e4f0eb;
color:var(--teal);
border:1px solid rgba(15,118,110,.14);
border-radius:999px;
padding:6px 8px;
font-size:10px;
font-weight:900;
white-space:nowrap;
}
.hd-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hd-metrics div,.hd-table,.hd-flow{
background:#f7f2e9;
border:1px solid rgba(35,43,39,.1);
border-radius:8px;
padding:14px;
}
.hd-metrics strong{font-size:20px;font-family:var(--font-display);letter-spacing:-.5px}
.hd-metrics span{display:block;font-size:10px;color:var(--text3);font-weight:700;margin-top:2px}
.hd-flow{display:flex;flex-direction:column;gap:12px}
.hd-flow span{
height:12px;
border-radius:999px;
background:linear-gradient(90deg,var(--teal),#a27633);
}
.hd-table{
display:grid;
grid-template-columns:1fr auto;
gap:10px 14px;
font-size:12px;
align-items:center;
}
.hd-table span{color:var(--text2)}
.hd-table strong{font-size:11px;color:var(--text);background:#fffdf8;border:1px solid var(--border);border-radius:999px;padding:4px 8px}
.hero-stats{
grid-column:1 / -1;
justify-content:space-between;
gap:14px;
margin-top:18px;
border-top:1px solid var(--border);
padding-top:24px;
}
.hero-stat{text-align:left;background:rgba(255,253,248,.62);border:1px solid rgba(35,43,39,.08);border-radius:8px;padding:14px 16px;min-width:180px}
.hero-stat .num{font-size:28px;color:var(--text)}
.hero-stat .label{color:var(--text3);font-weight:700}
.divider-section{background:linear-gradient(90deg,transparent,var(--border),transparent)}
.partners{padding:32px 40px}
.partner-chip,.stat-item,.feature-card,.security-item,.pricing-card,.testimonial-card,.blog-card,.module-card,.module-detail-card,.value-card,.team-card,.contact-form,.blog-featured{
background:rgba(255,253,248,.86);
border-color:rgba(35,43,39,.12);
border-radius:8px;
box-shadow:0 10px 30px rgba(31,35,33,.055);
}
.partner-chip:hover,.stat-item:hover,.feature-card:hover,.security-item:hover,.pricing-card:hover,.testimonial-card:hover,.blog-card:hover,.module-card:hover,.module-detail-card:hover,.value-card:hover,.team-card:hover,.blog-featured:hover{
border-color:rgba(15,118,110,.28);
transform:translateY(-2px);
}
.section-label{text-align:left;max-width:760px;margin:0 auto 44px}
.section-label h2,.modules-header h2,.cta-inner h2{
letter-spacing:-.9px;
color:var(--text);
}
.section-label h2 span,.cta-inner h2 span,.modules-header h2 span,[style*="color:var(--teal)"]{color:var(--teal)!important}
.features,.showcase,.modules,.security,.pricing,.cta,.testimonials,.faq,.blog-preview,.comparison,.feature-tabs,.contact-section,.pricing-detail,.modules-detail,.blog-main{
padding-top:84px;
padding-bottom:84px;
}
.features-grid,.security-grid,.modules-cat-grid,.blog-grid,.pricing-grid,.values-grid,.team-grid{
gap:18px;
}
.feature-card,.module-detail-card,.security-item,.value-card{
padding:24px;
}
.feature-card::before{display:none}
.feature-card .fc-icon,.module-detail-card .md-icon,.security-item .s-icon,.contact-info-item .ci-icon,.value-card .v-icon{
width:38px;
height:38px;
border-radius:7px;
background:#ece3d3;
border:1px solid #d8cbb5;
color:#17211d;
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
filter:saturate(.72);
}
.feature-card h3,.module-detail-card h3,.security-item h4,.value-card h4,.team-card h4,.blog-card h3{
font-size:16px;
letter-spacing:-.15px;
}
.feature-card p,.module-detail-card .md-desc,.security-item p,.value-card p,.team-card p,.blog-card p{
color:var(--text2);
font-size:13px;
}
.feature-tabs-nav{justify-content:flex-start;max-width:1100px;margin-left:auto;margin-right:auto}
.feature-tabs-nav button,.blog-categories button{
background:#fffdf8;
border-color:var(--border);
color:var(--text2);
border-radius:999px;
}
.feature-tabs-nav button.active,.blog-categories button.active{
background:#17211d;
border-color:#17211d;
color:#fffdf8;
}
.feature-tab-content .ft-visual{
background:#17211d;
border-color:#17211d;
color:#f4eadb;
font-size:54px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.mockup{
border-radius:8px;
border-color:rgba(35,43,39,.18);
box-shadow:0 24px 65px rgba(31,35,33,.16);
}
.mockup-bar,.pc-sidebar{background:#17211d}
.mockup-screen,.pc-main{background:#fffdf8}
.pc-sb-item{color:#aab4ad}
.pc-sb-item.active{background:#26342f;color:#fffdf8}
.pc-search,.contact-form input,.contact-form select,.contact-form textarea,.chatbot-input input{
background:#f7f2e9;
border-color:rgba(35,43,39,.13);
color:var(--text);
}
.pc-table th,.comparison-table th,.pricing-compare .pc-table th{
background:#eee5d7;
color:var(--text2);
}
.pc-table td,.comparison-table td,.pricing-compare .pc-table td{
color:var(--text2);
border-color:rgba(35,43,39,.07);
}
.pc-table td:first-child,.comparison-table td:first-child,.pricing-compare .pc-table td:first-child{color:var(--text)}
.comparison-table,.pricing-compare .pc-table{
border-color:rgba(35,43,39,.13);
background:#fffdf8;
}
.pricing-card.featured{
background:#17211d;
color:#fffdf8;
border-color:#17211d;
transform:none;
}
.pricing-card.featured h3,.pricing-card.featured .price,.pricing-card.featured .desc,.pricing-card.featured li{color:#fffdf8}
.pricing-card.featured .badge-top{
background:#d4b16a;
color:#17211d;
border-radius:999px;
}
.pricing-card .price{font-size:38px;color:var(--text);letter-spacing:-.6px}
.pricing-card h3{color:#7a6849}
.pricing-card ul li::before,.module-detail-card ul li::before,.feature-tab-content .ft-text ul li::before,.pricing-compare .pc-table td .check,.comparison-table td .yes{color:var(--teal)}
.cta{
background:#17211d;
color:#fffdf8;
}
.cta::before{display:none}
.cta-inner p{color:#c5cec6}
.cta .btn-primary{background:#fffdf8;color:#17211d;border-color:#fffdf8}
.cta .btn-secondary{background:transparent;color:#fffdf8;border-color:rgba(255,255,255,.2)}
.footer{
background:#fffdf8;
border-top:1px solid var(--border);
}
.footer-brand p,.footer-bottom p,.footer-col h5{color:var(--text3)}
.footer-col a{color:var(--text2)}
.blog-card .b-img,.blog-featured .bf-img{
background:linear-gradient(135deg,#eee4d2,#d7c6a6);
filter:saturate(.75);
color:#17211d;
}
.blog-card .b-img::after{background:linear-gradient(transparent,rgba(255,253,248,.92))}
.blog-card .b-tag,.blog-featured .bf-tag{
background:#e4f0eb;
color:var(--teal);
}
.contact-grid{align-items:start}
.contact-info [style*="background:var(--bg-card)"]{
background:rgba(255,253,248,.86)!important;
border-color:rgba(35,43,39,.12)!important;
border-radius:8px!important;
}
.chatbot-toggle{
background:#17211d;
color:#fffdf8;
box-shadow:0 14px 35px rgba(31,35,33,.2);
}
.chatbot-window{
background:#fffdf8;
border-color:var(--border);
box-shadow:0 22px 60px rgba(31,35,33,.18);
}
.chatbot-header{background:#17211d;color:#fffdf8}
.chatbot-msg.bot{background:#f0eadf;color:var(--text2)}
.chatbot-msg.user{background:#e4f0eb;color:var(--teal)}
.breadcrumb{justify-content:flex-start}
.timeline::before{background:linear-gradient(to bottom,transparent,var(--teal),#a27633,transparent)}
.timeline-item::before{background:#fffdf8;border-color:var(--teal)}
.fade-in{transition-duration:.45s}
.float{animation:none}
@media(max-width:980px){
.hero-content{grid-template-columns:1fr;text-align:left}
.hero-dashboard{grid-column:auto;grid-row:auto}
.hero-stats{grid-column:auto;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.nav{top:10px;left:12px;right:12px}
.nav-links.show{
top:68px;
left:12px;
right:12px;
background:#fffdf8;
border:1px solid var(--border);
border-radius:8px;
box-shadow:0 18px 45px rgba(31,35,33,.12);
}
.hero,.page-hero{padding-left:20px!important;padding-right:20px!important}
.hero-dashboard{grid-template-columns:1fr;min-height:auto}
.hd-side{display:none}
.hd-metrics{grid-template-columns:1fr}
.section-label,.modules-header,.page-hero-content{text-align:left}
.footer-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
.hero-stats{display:grid;grid-template-columns:1fr}
.hero-stat{min-width:0}
.stats-grid{grid-template-columns:1fr}
.hero h1{font-size:38px}
}

/* === FINAL PROFESSIONAL PASS === */
.nav{
left:28px;
right:28px;
transition:top .28s ease,padding .28s ease,transform .28s ease,box-shadow .28s ease,background .28s ease,border-color .28s ease;
transform-origin:top center;
}
.nav.nav-compact{
top:8px;
padding:7px 12px;
transform:scale(.985);
box-shadow:0 10px 34px rgba(31,35,33,.12);
}
.nav.nav-compact .nav-logo .logo-mark{width:26px;height:26px;font-size:12px}
.nav.nav-compact .nav-links a{padding-top:6px;padding-bottom:6px}
.nav.nav-compact .nav-logo{font-size:16px}
.hero-content,.showcase-inner,.comparison-inner,.pricing-grid,.security-grid,.features-grid,.stats-grid,.partners-inner,.footer-inner,.modules-cat-grid,.values-grid,.team-grid,.contact-grid,.blog-grid,.pricing-compare{
max-width:min(1440px,calc(100vw - 72px));
}
.feature-tabs-nav,.feature-tab-content{
max-width:min(1440px,calc(100vw - 72px));
}
.section-label{
max-width:min(1120px,calc(100vw - 72px));
}
.section-label-wide{
display:grid;
grid-template-columns:minmax(320px,.95fr) minmax(320px,.8fr);
gap:clamp(24px,5vw,90px);
align-items:end;
}
.section-label-wide p{margin:0;max-width:560px}
.section-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
font-size:10px;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
color:#7a6849;
}
.section-kicker::before{
content:"";
width:22px;
height:1px;
background:#a27633;
}
.features{
padding-left:36px;
padding-right:36px;
}
.features-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.feature-card{
min-height:250px;
padding:22px;
display:flex;
flex-direction:column;
isolation:isolate;
overflow:hidden;
position:relative;
background:linear-gradient(180deg,rgba(255,253,248,.98),rgba(246,240,229,.94));
}
.feature-card::after{
content:"";
position:absolute;
inset:auto 18px 0 18px;
height:3px;
border-radius:999px 999px 0 0;
background:linear-gradient(90deg,rgba(15,118,110,.85),rgba(162,118,51,.65));
opacity:.38;
transition:opacity .25s ease,transform .25s ease;
}
.feature-card:hover::after{opacity:1;transform:scaleX(.95)}
.feature-card-large{
grid-column:span 2;
background:#17211d;
color:#fffdf8;
}
.feature-card-dark{
background:#27332e;
color:#fffdf8;
}
.feature-card-large p,.feature-card-dark p{color:#d5ddd6}
.feature-card-large h3,.feature-card-dark h3{color:#fffdf8}
.fc-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:30px;
}
.feature-card .fc-icon{
width:34px;
height:34px;
font-size:11px;
font-family:var(--font-mono);
font-weight:800;
letter-spacing:0;
filter:none;
background:#17211d;
color:#fffdf8;
border-color:#17211d;
}
.feature-card-large .fc-icon,.feature-card-dark .fc-icon{
background:#fffdf8;
color:#17211d;
border-color:rgba(255,255,255,.18);
}
.fc-tag{
font-size:10px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#7a6849;
background:#eee4d2;
border:1px solid rgba(35,43,39,.1);
border-radius:999px;
padding:5px 8px;
white-space:nowrap;
}
.feature-card-large .fc-tag,.feature-card-dark .fc-tag{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.12);
color:#e6dbc8;
}
.feature-card h3{
font-size:20px;
line-height:1.15;
letter-spacing:-.4px;
margin-bottom:10px;
max-width:280px;
}
.feature-card p{
font-size:13px;
line-height:1.65;
margin-bottom:18px;
}
.feature-meta{
margin-top:auto;
display:flex;
gap:7px;
flex-wrap:wrap;
}
.feature-meta span{
font-size:10px;
font-weight:800;
color:var(--text2);
background:#fffdf8;
border:1px solid rgba(35,43,39,.1);
border-radius:999px;
padding:6px 8px;
}
.feature-card-large .feature-meta span,.feature-card-dark .feature-meta span{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.12);
color:#fffdf8;
}
.security{
padding-left:36px;
padding-right:36px;
background:linear-gradient(180deg,rgba(23,33,29,.03),rgba(23,33,29,.08));
}
.security-grid{
grid-template-columns:1.35fr repeat(2,1fr);
gap:14px;
}
.security-item{
min-height:230px;
padding:24px;
display:flex;
flex-direction:column;
background:#fffdf8;
}
.security-item-wide{
grid-row:span 2;
background:#17211d;
color:#fffdf8;
}
.security-grid .security-item:last-child{
grid-column:2 / -1;
min-height:180px;
}
.security-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:28px;
}
.security-head .s-icon{
width:auto;
min-width:44px;
height:30px;
padding:0 9px;
font-size:10px;
font-family:var(--font-mono);
font-weight:900;
filter:none;
background:#eee4d2;
border-color:#d8cbb5;
}
.security-head span:last-child{
font-size:10px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#7a6849;
}
.security-item-wide .security-head .s-icon{
background:#fffdf8;
color:#17211d;
border-color:rgba(255,255,255,.16);
}
.security-item-wide .security-head span:last-child{color:#d4b16a}
.security-item h4{
font-size:20px;
line-height:1.16;
letter-spacing:-.3px;
margin-bottom:10px;
}
.security-item p{
font-size:13px;
line-height:1.65;
color:var(--text2);
}
.security-item-wide p{color:#d5ddd6}
.security-item small{
margin-top:auto;
display:inline-flex;
width:fit-content;
font-size:10px;
font-weight:900;
color:var(--teal);
background:#e4f0eb;
border:1px solid rgba(15,118,110,.12);
border-radius:999px;
padding:6px 8px;
}
.security-item-wide small{
color:#fffdf8;
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.12);
}
.security-meter{
height:10px;
border-radius:999px;
background:rgba(255,255,255,.12);
overflow:hidden;
margin:22px 0 12px;
}
.security-meter span{
display:block;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#d4b16a,#fff1c8);
}
.cta{
padding:96px 36px;
background:transparent;
}
.cta-inner{
max-width:min(1440px,calc(100vw - 72px));
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,460px);
gap:44px;
align-items:center;
background:#17211d;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
padding:clamp(28px,5vw,64px);
box-shadow:0 28px 80px rgba(31,35,33,.16);
}
.cta-copy{max-width:760px}
.cta-inner h2{
font-size:clamp(34px,5vw,62px);
line-height:1;
letter-spacing:-1.3px;
margin-bottom:16px;
color:#fffdf8;
}
.cta-inner p{
font-size:16px;
line-height:1.7;
max-width:640px;
}
.cta .section-kicker{color:#d4b16a}
.cta-panel{
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.cta-panel div{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
padding:18px;
}
.cta-panel strong{
display:block;
font-family:var(--font-display);
font-size:30px;
line-height:1;
letter-spacing:-.8px;
color:#fffdf8;
}
.cta-panel span{
display:block;
margin-top:6px;
font-size:12px;
font-weight:800;
color:#c5cec6;
}
.footer{
padding:0 36px 36px;
background:transparent;
border-top:none;
}
.footer-inner{
max-width:min(1440px,calc(100vw - 72px));
background:#fffdf8;
border:1px solid rgba(35,43,39,.12);
border-radius:10px;
overflow:hidden;
box-shadow:0 18px 60px rgba(31,35,33,.08);
}
.footer-top{
display:grid;
grid-template-columns:minmax(320px,1fr) minmax(300px,520px);
gap:32px;
align-items:center;
padding:34px;
background:linear-gradient(135deg,#fffdf8,#f0e8d9);
border-bottom:1px solid var(--border);
}
.footer-brand p{
max-width:520px;
font-size:13px;
line-height:1.65;
}
.footer-news{
display:flex;
flex-direction:column;
gap:12px;
}
.footer-news strong{
font-size:14px;
letter-spacing:-.1px;
}
.footer-news form{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
}
.footer-news input{
min-width:0;
background:#fffdf8;
border:1px solid var(--border);
border-radius:6px;
padding:11px 12px;
font:inherit;
font-size:13px;
color:var(--text);
}
.footer-news button{
background:#17211d;
color:#fffdf8;
border:1px solid #17211d;
border-radius:6px;
padding:0 16px;
font-weight:800;
cursor:pointer;
}
.footer-grid{
grid-template-columns:repeat(4,1fr);
gap:18px;
margin:0;
padding:30px 34px;
}
.footer-col{
border-left:1px solid rgba(35,43,39,.09);
padding-left:18px;
}
.footer-col h5{
font-size:11px;
letter-spacing:.12em;
margin-bottom:12px;
color:#7a6849;
}
.footer-col a{
font-size:13px;
font-weight:650;
padding:5px 0;
}
.footer-bottom{
padding:18px 34px;
background:#17211d;
border-top:none;
}
.footer-bottom p{color:#d5ddd6;font-weight:700}
@media(max-width:1100px){
.features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.security-grid{grid-template-columns:1fr 1fr}
.security-item-wide{grid-column:1/-1;grid-row:auto}
.security-grid .security-item:last-child{grid-column:auto}
}
@media(max-width:768px){
.nav{left:12px;right:12px}
.nav.nav-compact{transform:none}
.hero-content,.showcase-inner,.comparison-inner,.pricing-grid,.security-grid,.features-grid,.stats-grid,.partners-inner,.footer-inner,.modules-cat-grid,.values-grid,.team-grid,.contact-grid,.blog-grid,.pricing-compare,.section-label,.feature-tabs-nav,.feature-tab-content,.cta-inner{
max-width:calc(100vw - 40px);
}
.section-label-wide,.cta-inner,.footer-top{grid-template-columns:1fr}
.features,.security,.cta,.footer{padding-left:20px;padding-right:20px}
.features-grid,.security-grid{grid-template-columns:1fr}
.feature-card-large{grid-column:auto}
.feature-card{min-height:auto}
.footer-grid{grid-template-columns:1fr 1fr;padding:26px 22px}
.footer-top{padding:26px 22px}
.footer-news form{grid-template-columns:1fr}
.footer-news button{padding:11px 16px}
}
@media(max-width:520px){
.footer-grid{grid-template-columns:1fr}
.footer-col{border-left:none;padding-left:0;border-top:1px solid rgba(35,43,39,.09);padding-top:16px}
.cta-panel strong{font-size:25px}
}

.feature-tabs{padding-bottom:46px}
.features{padding-top:68px}
section[id]{scroll-margin-top:110px}
.fade-in{opacity:1!important;transform:none!important}

/* === SITE PRODUCT STORY PASS === */
.feature-tab-content{
background:rgba(255,253,248,.58);
border:1px solid rgba(35,43,39,.1);
border-radius:12px;
padding:28px;
box-shadow:0 18px 54px rgba(31,35,33,.07);
}
.feature-tab-content .ft-text h3{font-size:clamp(28px,3vw,42px)}
.feature-tab-content .ft-text ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px}
.feature-tab-content .ft-text ul li{
background:#fffdf8;
border:1px solid rgba(35,43,39,.09);
border-radius:8px;
padding:9px 10px;
align-items:flex-start;
}
.feature-tab-content .ft-visual.product-panel{
min-height:360px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:stretch;
background:#17211d;
border-color:#17211d;
color:#fffdf8;
font-size:initial;
padding:22px;
position:relative;
overflow:hidden;
}
.feature-tab-content .ft-visual.product-panel::before{
content:"";
position:absolute;
inset:-30% -20% auto auto;
width:300px;
height:300px;
border-radius:50%;
background:radial-gradient(circle,rgba(212,177,106,.22),transparent 68%);
}
.panel-head,.panel-metric-row,.panel-list,.payroll-flow,.compliance-grid,.analytics-bars{position:relative}
.panel-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}
.panel-head span{
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#d8cdb7;
}
.panel-head strong{
font-size:11px;
font-weight:900;
color:#17211d;
background:#d4b16a;
border-radius:999px;
padding:6px 9px;
white-space:nowrap;
}
.panel-metric-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.panel-metric-row div,.panel-list span{
background:rgba(255,255,255,.075);
border:1px solid rgba(255,255,255,.11);
border-radius:10px;
padding:16px;
}
.panel-metric-row strong{
display:block;
font-family:var(--font-display);
font-size:34px;
line-height:1;
letter-spacing:-1px;
}
.panel-metric-row span,.panel-list em{
display:block;
margin-top:5px;
font-size:11px;
font-style:normal;
font-weight:750;
color:#b8c3bd;
}
.panel-list{
display:grid;
gap:9px;
margin-top:18px;
}
.panel-list span{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:12px 14px;
}
.panel-list b{font-size:13px}
.panel-list.compact{grid-template-columns:1fr 1fr}
.payroll-flow{display:grid;gap:13px;margin:18px 0}
.payroll-flow span{
height:46px;
display:flex;
align-items:center;
padding:0 14px;
border-radius:9px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.1);
position:relative;
overflow:hidden;
}
.payroll-flow span::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:var(--w);
background:linear-gradient(90deg,rgba(15,118,110,.9),rgba(212,177,106,.7));
opacity:.82;
}
.payroll-flow b{position:relative;font-size:12px;color:#fffdf8}
.compliance-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin:18px 0;
}
.compliance-grid span{
height:72px;
display:grid;
place-items:center;
border-radius:9px;
background:rgba(255,255,255,.075);
border:1px solid rgba(255,255,255,.11);
font-weight:900;
font-size:12px;
color:#fffdf8;
}
.analytics-bars{
height:190px;
display:flex;
align-items:end;
gap:12px;
padding:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
border-radius:10px;
margin:18px 0;
}
.analytics-bars i{
flex:1;
display:block;
border-radius:999px 999px 4px 4px;
background:linear-gradient(180deg,#d4b16a,#0f766e);
}
.product-architecture{
position:relative;
z-index:2;
padding:86px 36px;
}
.architecture-grid{
max-width:min(1440px,calc(100vw - 72px));
margin:0 auto;
display:grid;
grid-template-columns:1.4fr repeat(2,1fr);
gap:14px;
}
.architecture-card{
background:rgba(255,253,248,.88);
border:1px solid rgba(35,43,39,.12);
border-radius:10px;
padding:24px;
box-shadow:0 16px 42px rgba(31,35,33,.065);
min-height:210px;
}
.architecture-card h3{
font-family:var(--font-display);
font-size:21px;
line-height:1.1;
letter-spacing:-.4px;
margin:28px 0 8px;
}
.architecture-card p{
font-size:13px;
line-height:1.65;
color:var(--text2);
}
.architecture-grid .architecture-card:last-child:not(.arch-main){
grid-column:2 / -1;
min-height:160px;
}
.arch-main{
grid-row:span 2;
background:#17211d;
color:#fffdf8;
overflow:hidden;
}
.arch-main p{color:#d5ddd6}
.arch-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:24px;
}
.arch-top span,.arch-code{
font-size:10px;
font-weight:900;
letter-spacing:.11em;
text-transform:uppercase;
color:#7a6849;
background:#eee4d2;
border:1px solid rgba(35,43,39,.1);
border-radius:999px;
padding:6px 9px;
width:fit-content;
display:inline-flex;
}
.arch-top span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#d4b16a}
.arch-top strong{font-size:11px;color:#d8cdb7}
.arch-screen{
height:410px;
display:grid;
grid-template-columns:120px 1fr;
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
overflow:hidden;
background:#fffdf8;
}
.arch-sidebar{
background:#22312b;
padding:18px 12px;
display:flex;
flex-direction:column;
gap:12px;
}
.arch-sidebar span{
height:10px;
border-radius:999px;
background:rgba(255,255,255,.22);
}
.arch-sidebar span:first-child{width:80%;background:#d4b16a}
.arch-content{padding:22px;display:flex;flex-direction:column;gap:16px}
.arch-line{
height:22px;
border-radius:999px;
background:#17211d;
}
.arch-line.wide{width:68%}
.arch-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.arch-kpis span{
height:92px;
border-radius:10px;
background:#f0eadf;
border:1px solid rgba(35,43,39,.08);
}
.arch-table{
display:grid;
gap:10px;
margin-top:auto;
}
.arch-table i{
height:34px;
border-radius:8px;
background:#f7f2e9;
border:1px solid rgba(35,43,39,.08);
}
@media(max-width:1000px){
.feature-tab-content{grid-template-columns:1fr;padding:20px}
.feature-tab-content .ft-text ul{grid-template-columns:1fr}
.architecture-grid{grid-template-columns:1fr 1fr}
.arch-main{grid-column:1/-1}
.architecture-grid .architecture-card:last-child:not(.arch-main){grid-column:1/-1}
}
@media(max-width:768px){
.product-architecture{padding:70px 20px}
.architecture-grid{max-width:calc(100vw - 40px);grid-template-columns:1fr}
.arch-screen{height:300px;grid-template-columns:86px 1fr}
.panel-list.compact,.panel-metric-row,.compliance-grid{grid-template-columns:1fr}
.feature-tab-content .ft-visual.product-panel{min-height:auto}
}

/* === REAL PRODUCT VISUAL PASS === */
.hero-product{
grid-row:1 / span 4;
grid-column:2;
position:relative;
min-height:520px;
display:flex;
align-items:center;
isolation:isolate;
}
.hero-product::before{
content:"";
position:absolute;
inset:20px -28px 28px 40px;
border-radius:18px;
background:
linear-gradient(90deg,rgba(15,118,110,.12) 1px,transparent 1px),
linear-gradient(180deg,rgba(15,118,110,.12) 1px,transparent 1px),
radial-gradient(circle at 78% 18%,rgba(20,184,166,.18),transparent 34%),
radial-gradient(circle at 20% 82%,rgba(212,177,106,.18),transparent 30%);
background-size:34px 34px,34px 34px,auto,auto;
z-index:-1;
}
.hero-product-frame{
width:min(880px,54vw);
border:1px solid rgba(35,43,39,.13);
border-radius:14px;
overflow:hidden;
background:#fffdf8;
box-shadow:0 28px 90px rgba(31,35,33,.2);
transform:perspective(1600px) rotateY(-7deg) rotateX(2deg);
transform-origin:center left;
}
.hero-product-frame img{
display:block;
width:100%;
height:auto;
}
.hero-float-card{
position:absolute;
width:190px;
background:rgba(255,253,248,.94);
border:1px solid rgba(35,43,39,.12);
border-radius:10px;
padding:14px;
box-shadow:0 18px 46px rgba(31,35,33,.16);
backdrop-filter:blur(14px);
}
.hero-float-card span{
display:block;
font-size:10px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
color:#7a6849;
}
.hero-float-card strong{
display:block;
margin-top:7px;
font-family:var(--font-display);
font-size:22px;
line-height:1;
letter-spacing:-.45px;
color:#17211d;
}
.hero-float-card i{
display:block;
margin-top:8px;
font-style:normal;
font-size:11px;
font-weight:750;
color:var(--text3);
}
.hero-float-payroll{right:-16px;top:58px}
.hero-float-status{left:-26px;bottom:74px}
.hero-float-alert{right:42px;bottom:18px;background:#17211d;color:#fffdf8;border-color:rgba(255,255,255,.14)}
.hero-float-alert span{color:#d4b16a}
.hero-float-alert strong{color:#fffdf8;font-size:20px}
.hero-float-alert i{color:#c5cec6}
.showcase{
overflow:hidden;
}
.showcase::after{
content:"";
position:absolute;
inset:18% -10% auto auto;
width:420px;
height:420px;
border-radius:50%;
background:radial-gradient(circle,rgba(20,184,166,.13),transparent 66%);
pointer-events:none;
}
.showcase .legacy-mockup{display:none}
.interface-stage{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:18px;
align-items:stretch;
}
.interface-visual{
position:relative;
overflow:hidden;
border:1px solid rgba(35,43,39,.13);
border-radius:14px;
background:#fffdf8;
box-shadow:0 26px 76px rgba(31,35,33,.14);
}
.interface-bar{
height:42px;
display:flex;
align-items:center;
gap:8px;
padding:0 14px;
background:#17211d;
border-bottom:1px solid rgba(255,255,255,.08);
}
.interface-bar span{
width:9px;
height:9px;
border-radius:50%;
background:#d4b16a;
}
.interface-bar span:nth-child(2){background:#14b8a6}
.interface-bar span:nth-child(3){background:#6a7f76}
.interface-bar strong{
flex:1;
text-align:center;
font-family:var(--font-mono);
font-size:11px;
font-weight:650;
letter-spacing:.02em;
color:#c5cec6;
}
.interface-visual img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:top left;
}
.interface-insights{
display:grid;
grid-template-rows:repeat(3,1fr);
gap:12px;
}
.interface-insights div{
position:relative;
overflow:hidden;
background:#fffdf8;
border:1px solid rgba(35,43,39,.12);
border-radius:10px;
padding:20px;
box-shadow:0 14px 40px rgba(31,35,33,.07);
}
.interface-insights div::after{
content:"";
position:absolute;
left:20px;
right:20px;
bottom:20px;
height:5px;
border-radius:999px;
background:linear-gradient(90deg,#0f766e 74%,#efe4d1 74%);
}
.interface-insights div:nth-child(2)::after{background:linear-gradient(90deg,#d4b16a 58%,#efe4d1 58%)}
.interface-insights div:nth-child(3)::after{background:linear-gradient(90deg,#17211d 82%,#efe4d1 82%)}
.interface-insights span{
font-size:10px;
font-weight:900;
letter-spacing:.1em;
text-transform:uppercase;
color:#7a6849;
}
.interface-insights strong{
display:block;
margin-top:10px;
font-family:var(--font-display);
font-size:22px;
line-height:1.12;
letter-spacing:-.45px;
color:#17211d;
}
.features-grid{
grid-auto-flow:dense;
}
.features{padding-bottom:54px}
.showcase{padding-top:62px}
.features-grid .feature-card:nth-last-child(-n+3){
grid-column:span 2;
min-height:220px;
}
.feature-card{
border-color:rgba(35,43,39,.13);
box-shadow:0 14px 42px rgba(31,35,33,.06);
}
.feature-card::before{
display:block;
content:"";
position:absolute;
inset:74px 22px auto auto;
width:118px;
height:70px;
border-radius:9px;
background:
linear-gradient(90deg,rgba(15,118,110,.48) 58%,transparent 58%) 0 12px/100% 8px no-repeat,
linear-gradient(90deg,rgba(212,177,106,.48) 42%,transparent 42%) 0 32px/100% 8px no-repeat,
linear-gradient(90deg,rgba(23,33,29,.24) 76%,transparent 76%) 0 52px/100% 8px no-repeat;
opacity:.22;
}
.feature-card-large::before,.feature-card-dark::before{
opacity:.34;
filter:invert(1) saturate(.4);
}
.security-item{
position:relative;
overflow:hidden;
}
.security-item::after{
content:"";
position:absolute;
right:-34px;
bottom:-42px;
width:150px;
height:150px;
border-radius:22px;
background:
linear-gradient(90deg,rgba(15,118,110,.12) 1px,transparent 1px),
linear-gradient(180deg,rgba(15,118,110,.12) 1px,transparent 1px);
background-size:18px 18px;
transform:rotate(8deg);
}
.security-item-wide::after{
background:
linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),
linear-gradient(180deg,rgba(255,255,255,.12) 1px,transparent 1px);
}
.cta-panel{
position:relative;
}
.cta-panel::before{
content:"";
height:150px;
border-radius:10px;
border:1px solid rgba(255,255,255,.1);
background:
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
linear-gradient(90deg,rgba(212,177,106,.75) 18%,transparent 18%) 18px 42px/82% 10px no-repeat,
linear-gradient(90deg,rgba(20,184,166,.75) 64%,transparent 64%) 18px 76px/82% 10px no-repeat,
linear-gradient(90deg,rgba(255,255,255,.5) 46%,transparent 46%) 18px 110px/82% 10px no-repeat;
}
@media(max-width:1100px){
.hero-product{grid-column:1 / -1;grid-row:auto;min-height:auto;margin-top:28px}
.hero-product-frame{width:100%;transform:none}
.hero-float-payroll{right:16px;top:58px}
.hero-float-status{left:18px;bottom:78px}
.interface-stage{grid-template-columns:1fr}
.interface-insights{grid-template-columns:repeat(3,1fr);grid-template-rows:auto}
.features-grid .feature-card:nth-last-child(-n+3){grid-column:auto}
}
@media(max-width:768px){
.hero-product::before{inset:10px -8px 0}
.hero-float-card{position:relative;inset:auto;width:auto}
.hero-product{display:grid;gap:10px}
.hero-float-payroll,.hero-float-status,.hero-float-alert{right:auto;left:auto;top:auto;bottom:auto}
.interface-insights{grid-template-columns:1fr}
.interface-visual img{height:auto;object-fit:contain}
}

/* === CARD BACKGROUND ICON ASSETS === */
.feature-card[style*="--card-art"],
.architecture-card[style*="--card-art"],
.security-item[style*="--card-art"]{
position:relative;
overflow:hidden;
}
.feature-card[style*="--card-art"] > *,
.architecture-card[style*="--card-art"] > *,
.security-item[style*="--card-art"] > *{
position:relative;
z-index:2;
}
.feature-card[style*="--card-art"]::before{
display:block;
content:"";
position:absolute;
inset:auto 8px 12px auto;
width:170px;
height:170px;
border-radius:0;
background-image:var(--card-art);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:.16;
filter:saturate(.72) contrast(.96);
transform:rotate(-3deg);
pointer-events:none;
z-index:1;
}
.feature-card-large[style*="--card-art"]::before,
.feature-card-dark[style*="--card-art"]::before{
opacity:.18;
filter:brightness(1.65) saturate(.55) contrast(.9);
}
.features-grid .feature-card:nth-last-child(-n+3)[style*="--card-art"]::before{
width:210px;
height:210px;
right:18px;
bottom:8px;
}
.architecture-card[style*="--card-art"]::before{
content:"";
position:absolute;
right:-8px;
bottom:-18px;
width:178px;
height:178px;
background-image:var(--card-art);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:.14;
filter:saturate(.68) contrast(.94);
transform:rotate(-5deg);
pointer-events:none;
z-index:1;
}
.architecture-grid .architecture-card:last-child:not(.arch-main)[style*="--card-art"]::before{
width:220px;
height:220px;
right:22px;
bottom:-30px;
}
.security-item[style*="--card-art"]::after{
content:"";
position:absolute;
right:-12px;
bottom:-24px;
width:176px;
height:176px;
border-radius:0;
background-image:var(--card-art);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:.15;
filter:saturate(.68) contrast(.95);
transform:rotate(4deg);
pointer-events:none;
z-index:1;
}
.security-item-wide[style*="--card-art"]::after{
width:260px;
height:260px;
right:-24px;
bottom:-38px;
opacity:.2;
filter:brightness(1.7) saturate(.52) contrast(.9);
}
@media(max-width:768px){
.feature-card[style*="--card-art"]::before,
.architecture-card[style*="--card-art"]::before,
.security-item[style*="--card-art"]::after{
width:138px;
height:138px;
opacity:.11;
right:-4px;
bottom:-10px;
}
.security-item-wide[style*="--card-art"]::after{
width:190px;
height:190px;
}
}

/* === LANDING FLOW AND ALIGNMENT FIXES === */
.section-label:not(.section-label-wide),
.testimonials .section-label,
.faq .section-label,
.comparison .section-label,
.pricing .section-label{
text-align:center;
}
.section-label:not(.section-label-wide) p,
.testimonials .section-label p,
.faq .section-label p,
.comparison .section-label p,
.pricing .section-label p{
margin-left:auto;
margin-right:auto;
}
.feature-tabs-nav{
justify-content:center;
}
.testimonials{
padding-top:72px;
padding-bottom:72px;
}
.faq{
padding-top:54px;
padding-bottom:82px;
}
.testimonials-inner,
.faq-inner{
max-width:min(940px,calc(100vw - 72px));
}
.testimonial-card{
text-align:left;
}
.faq-question,
.faq-answer{
text-align:left;
}
@media(max-width:768px){
.section-label:not(.section-label-wide),
.testimonials .section-label,
.faq .section-label,
.comparison .section-label,
.pricing .section-label{
text-align:center;
}
.section-label-wide{
text-align:left;
}
.testimonials-inner,
.faq-inner{
max-width:calc(100vw - 40px);
}
}

/* === TOLMORA BRAND ASSETS === */
.nav-logo{
gap:8px;
min-width:0;
}
.nav-logo .logo-mark,
.footer-brand .logo-mark{
width:34px;
height:34px;
padding:0;
margin:0;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
overflow:hidden;
background:transparent;
border-radius:8px;
box-shadow:none;
}
.nav-logo .logo-mark img,
.footer-brand .logo-mark img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}
.logo-wordmark{
display:block;
width:156px;
height:32px;
object-fit:cover;
object-position:center;
flex:0 0 auto;
}
.footer-logo{
display:inline-flex;
align-items:center;
gap:8px;
min-width:0;
}
.footer-brand .logo-wordmark{
width:150px;
height:31px;
}
.nav.nav-compact .nav-logo .logo-mark{
width:30px;
height:30px;
font-size:0;
}
.nav.nav-compact .nav-logo .logo-wordmark{
width:144px;
height:29px;
}
@media(max-width:768px){
.nav-logo{
gap:7px;
}
.nav-logo .logo-mark{
width:30px;
height:30px;
}
.nav-logo .logo-wordmark{
width:134px;
height:29px;
}
.footer-brand .logo-mark{
width:30px;
height:30px;
}
.footer-brand .logo-wordmark{
width:138px;
height:29px;
}
}