:root{
  --bg:#f7f9fc;
  --surface:#ffffff;
  --ink:#102235;
  --muted:#607084;
  --primary:#0f4c81;
  --primary-2:#0b78b7;
  --accent:#13b6a2;
  --line:#dde5ee;
  --dark:#0d1d2b;
  --shadow:0 24px 70px rgba(18,42,68,.12);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,249,252,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(221,229,238,.8)}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:white;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 10px 30px rgba(15,76,129,.2)}
.brand-text span{color:var(--primary-2)}
.main-nav{display:flex;align-items:center;gap:24px;color:#43576b;font-size:14px;font-weight:650}
.main-nav a:hover{color:var(--primary)}
.menu-toggle{display:none;border:0;background:transparent;font-size:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:14px 19px;font-weight:750;transition:.2s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-1px)}
.btn-small{padding:10px 14px}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:white;box-shadow:0 10px 25px rgba(15,76,129,.2)}
.btn-ghost{background:white;border-color:var(--line)}
.hero{padding:78px 0 62px;background:radial-gradient(circle at 75% 15%,rgba(19,182,162,.13),transparent 30%),linear-gradient(180deg,#fbfdff,#f5f8fb)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:54px}
.eyebrow,.section-kicker{font-size:12px;font-weight:850;letter-spacing:.15em;color:var(--primary-2)}
.hero h1{font-size:clamp(44px,5vw,70px);line-height:1.02;letter-spacing:-.045em;margin:16px 0 22px}
.hero h1 span,.section h2 span{color:var(--primary-2)}
.hero-copy>p{font-size:19px;color:var(--muted);max-width:630px}
.hero-actions{display:flex;gap:12px;margin:30px 0 24px;flex-wrap:wrap}
.trust-row{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;font-weight:700;color:#4a6074}
.hero-visual{position:relative}
.mock-window{background:#eef4f8;border:1px solid #d9e3ec;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);transform:perspective(1000px) rotateY(-2deg)}
.mock-topbar{height:42px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 15px}
.mock-topbar span{width:8px;height:8px;border-radius:50%;background:#c7d3df}
.mock-body{display:grid;grid-template-columns:82px 1fr;min-height:430px}
.sidepanel{background:#122a3e;padding:22px 15px;display:flex;flex-direction:column;gap:16px}
.mini-logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#1e88c8,#16b7a4);margin-bottom:10px}
.side-line{height:8px;border-radius:6px;background:#28465d}
.side-line.active{background:#4b89af}
.dashboard{padding:24px;background:#f9fbfd;position:relative}
.dash-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dash-head small{color:#7b8b99}.dash-head h3{margin:2px 0;font-size:22px}
.status-pill{font-size:11px;background:#e3f7f2;color:#16816f;padding:7px 10px;border-radius:999px;font-weight:800}
.alert-card{background:white;border:1px solid #e1e8ef;border-left:4px solid var(--accent);border-radius:13px;padding:14px 16px;margin:20px 0}
.alert-card p{margin:5px 0 0;font-size:12px;color:#718091}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.metric{background:white;border:1px solid #e1e8ef;border-radius:13px;padding:14px}
.metric small{display:block;color:#718091;font-size:10px}.metric strong{font-size:21px}
.chart-card{height:120px;background:white;border:1px solid #e1e8ef;border-radius:13px;margin-top:10px;padding:13px;overflow:hidden}
.chart-title{font-size:11px;color:#718091;margin-bottom:24px}
.chart-lines{position:relative;height:65px}
.line{position:absolute;left:0;right:0;height:3px;border-radius:99px;transform-origin:left center}
.line.one{top:35px;background:#1a80ba;transform:rotate(-7deg)}
.line.two{top:43px;background:#17b19d;transform:rotate(-2deg)}
.smartia-float{position:absolute;right:18px;bottom:16px;background:#102c42;color:white;border-radius:15px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 25px rgba(10,34,52,.18)}
.spark{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#1e88c8,#17b7a3)}
.smartia-float small{display:block;color:#bdd0df;font-size:10px}
.floating-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 14px 32px rgba(12,46,70,.12)}
.floating-card small{display:block;color:#7c8b97;font-size:10px}.floating-card strong{font-size:12px}
.f1{left:-36px;bottom:44px}.f2{right:-26px;top:42px}
.logos{padding:36px 0;background:#fff;border-top:1px solid #eef2f5;border-bottom:1px solid #eef2f5}
.center{text-align:center}
.logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:22px}
.logo-placeholder{height:58px;border:1px dashed #c9d4de;border-radius:12px;display:grid;place-items:center;color:#93a0ab;font-weight:800;font-size:11px;background:#fbfcfd}
.note{color:#91a0ac;font-size:12px;margin-top:14px}
.section{padding:92px 0}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:42px}
.section h2{font-size:clamp(34px,4vw,52px);line-height:1.06;letter-spacing:-.035em;margin:10px 0 0}
.section-lead{max-width:520px;color:var(--muted);font-size:17px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;min-height:210px;transition:.2s ease}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(16,42,64,.08)}
.feature-card .icon{width:46px;height:46px;border-radius:13px;background:#eef5fa;display:grid;place-items:center;color:var(--primary);font-weight:900;margin-bottom:28px}
.feature-card h3{margin:0 0 8px;font-size:20px}.feature-card p{margin:0;color:var(--muted)}
.feature-card.accent{background:linear-gradient(145deg,#102c42,#0f4c81);color:#fff}.feature-card.accent p{color:#cbd9e4}.feature-card.accent .icon{background:rgba(255,255,255,.12);color:#fff}
.smartia-section{background:#eef4f8}
.smartia-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.bullet-list{margin-top:32px;display:grid;gap:14px}
.bullet-list>div{display:flex;align-items:flex-start;gap:12px}
.bullet-list span{font-size:11px;font-weight:900;color:var(--primary-2);background:#dcebf3;border-radius:99px;padding:6px 8px}
.bullet-list p{margin:0;color:#41576a}
.chat-demo{background:#fff;border:1px solid #dce5ed;border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.chat-head{display:flex;gap:11px;align-items:center;padding-bottom:17px;border-bottom:1px solid #edf1f4}
.chat-head small{display:block;color:#8796a2}
.bubble{max-width:86%;padding:14px 16px;border-radius:15px;margin-top:18px;font-size:14px}
.bubble.user{background:#edf3f7;margin-left:auto}
.bubble.ai{background:#0f2c42;color:#fff}
.bubble.ai ol{margin:10px 0 0;padding-left:20px;color:#d5e1e9}
.quick-actions{display:flex;gap:9px;margin-top:16px}
.quick-actions button{border:1px solid #d5e0e8;background:#fff;padding:10px 12px;border-radius:10px;color:#24465e;font-weight:700;cursor:pointer}
.dark-section{background:var(--dark);color:#fff}
.light{color:#83cde9!important}.section-lead.light{color:#b6c5d1}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:center;margin-top:24px}
.flow-node,.flow-core{padding:22px;border-radius:15px;text-align:center;font-weight:800}
.flow-node{background:#183247;border:1px solid #28495f}.flow-core{background:linear-gradient(135deg,#1e88c8,#16b7a4)}
.flow-arrow{text-align:center;color:#6da8c5;font-size:26px}
.module-list{display:flex;flex-wrap:wrap;gap:10px}
.module-list span{padding:11px 15px;border-radius:999px;background:white;border:1px solid var(--line);font-weight:700;font-size:14px}
.module-list .module-ai{background:#102c42;color:#fff}
.personas{background:#fff}
.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:38px}
.persona-grid article{padding:28px;border:1px solid var(--line);border-radius:18px}
.persona-grid span{font-size:12px;color:var(--primary-2);font-weight:850}
.persona-grid h3{margin:22px 0 8px}.persona-grid p{color:var(--muted);margin:0}
.cta-section{padding-top:60px}
.cta-box{background:linear-gradient(135deg,#0d2e47,#0f5e8c);color:#fff;border-radius:28px;padding:52px;display:flex;justify-content:space-between;gap:30px;align-items:center}
.cta-box h2{font-size:38px;max-width:680px}.cta-box p{color:#c9dae6}.cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn-light{background:#fff;color:#12334b}.btn-outline-light{border-color:rgba(255,255,255,.35);color:#fff}
footer{padding:62px 0 26px;background:#0a1824;color:#b9c7d1}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:35px}
.footer-grid>div{display:flex;flex-direction:column;gap:9px}.footer-grid strong{color:#fff}.footer-brand{color:white}.footer-grid p{max-width:330px}
.footer-bottom{padding-top:30px;margin-top:30px;border-top:1px solid #1a3143;font-size:12px;color:#718696}

/* Inner pages */
.inner-page{min-height:100vh;background:linear-gradient(180deg,#f7fafc,#edf3f7);display:grid;place-items:center;padding:40px 20px}
.auth-card,.demo-card{width:min(100%,470px);background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow)}
.demo-card{width:min(100%,760px)}
.auth-title{margin:26px 0 8px;font-size:32px}.auth-sub{color:var(--muted);margin-top:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:750;color:#385269}
.field input,.field textarea,.field select{width:100%;border:1px solid #ccd8e2;border-radius:11px;padding:13px 14px;background:#fff;color:var(--ink);outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#4f98c2;box-shadow:0 0 0 3px rgba(46,126,175,.1)}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.small-link{font-size:13px;color:var(--primary);font-weight:700}
.back-link{display:inline-block;margin-bottom:24px;color:var(--primary);font-weight:750}
.success{display:none;background:#e9f7f3;color:#236d61;border:1px solid #ccebe3;padding:13px;border-radius:10px;margin-top:16px}
.success.show{display:block}

@media(max-width:980px){
  .main-nav{display:none;position:absolute;top:76px;left:20px;right:20px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}
  .main-nav.open{display:flex}
  .menu-toggle{display:block}
  .hero-grid,.smartia-grid{grid-template-columns:1fr}
  .hero-visual{margin-top:22px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .persona-grid{grid-template-columns:repeat(2,1fr)}
  .logo-row{grid-template-columns:repeat(3,1fr)}
  .section-heading{align-items:flex-start;flex-direction:column}
  .flow{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .container{width:min(100% - 28px,1180px)}
  .hero{padding:48px 0}
  .hero h1{font-size:42px}
  .feature-grid,.persona-grid,.logo-row,.form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .mock-body{grid-template-columns:56px 1fr}
  .sidepanel{padding:18px 10px}
  .metric-grid{grid-template-columns:1fr}
  .mock-body{min-height:520px}
  .f1,.f2{display:none}
  .flow{grid-template-columns:1fr}
  .flow-arrow{transform:rotate(90deg)}
  .cta-box{padding:34px 24px;align-items:flex-start;flex-direction:column}
  .footer-grid{grid-template-columns:1fr}
}