/* FONS OS — visual refinement layer */
:root{
  --bg:#f4f6f7;
  --ink:#111820;
  --muted:#68737d;
  --line:#dfe4e7;
  --dark:#0e151c;
  --dark-2:#121b24;
  --accent:#24d9a7;
  --accent-soft:#d8f8ee;
  --accent2:#8cebd2;
  --radius:24px;
  --radius-sm:16px;
  --shadow:0 28px 80px rgba(11,20,28,.11);
  --shadow-soft:0 10px 35px rgba(15,25,34,.065);
  --gutter:max(24px,calc((100vw - 1440px)/2 + 30px));
}
*{box-sizing:border-box}
html{scroll-padding-top:88px}
body{
  background:var(--bg);
  font-family:Inter,"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
::selection{background:#baf3e2;color:#08140f}
a,button{transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(36,217,167,.28);outline-offset:2px}
.section-pad{padding:112px var(--gutter)}

.topbar{
  height:72px;
  padding:0 var(--gutter);
  background:rgba(247,248,249,.82);
  border-bottom:1px solid rgba(13,20,28,.07);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.brand{gap:11px}
.brand-text{font-size:19px;font-weight:760;letter-spacing:-.035em}
.brand-text b{font-weight:560;color:#7b8791}
.brand-mark{width:31px;height:31px;gap:3px;transform:rotate(6deg);filter:drop-shadow(0 3px 8px rgba(15,25,34,.08))}
.brand-mark span{border-radius:42%;background:#111820}
.brand-mark span:nth-child(2){background:var(--accent)}
.brand-mark span:nth-child(3){opacity:.28}
.brand-mark span:nth-child(4){background:#6b7680}
.topbar nav{gap:32px;font-size:13px;font-weight:560;color:#66717b}
.topbar nav a{position:relative;padding:25px 0}
.topbar nav a:after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:1px;background:#111820;transition:right .2s ease}
.topbar nav a:hover:after{right:0}
.btn{border-radius:12px;padding:14px 20px;font-size:13px;font-weight:720;letter-spacing:-.01em;box-shadow:0 6px 18px rgba(13,20,28,.08)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(13,20,28,.12)}
.btn-small{padding:10px 15px}
.btn-ghost{box-shadow:none;background:rgba(255,255,255,.35);border-color:#d2d8dc}
.btn-ghost:hover{background:#fff;border-color:#bec7cd}

.hero{
  min-height:790px;
  padding-top:82px;
  padding-bottom:96px;
  grid-template-columns:.9fr 1.1fr;
  gap:6vw;
  background:
    radial-gradient(circle at 13% 24%,rgba(36,217,167,.10),transparent 27%),
    radial-gradient(circle at 91% 70%,rgba(111,140,255,.10),transparent 30%);
}
.hero-glow{opacity:.26;filter:blur(110px)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid rgba(20,28,36,.09);border-radius:999px;background:rgba(255,255,255,.55);margin-bottom:24px;color:#53606a}
.hero .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(36,217,167,.12)}
.hero h1{font-size:clamp(50px,5.5vw,84px);line-height:.96;letter-spacing:-.06em;max-width:760px;margin-bottom:28px}
.hero h1 span{color:#7d8992}
.lead{font-size:17px;line-height:1.68;color:#596670;max-width:650px}
.hero-actions{margin-top:32px}
.hero-proof{gap:24px;margin-top:44px;padding-top:24px;border-color:#dde2e5}
.hero-proof strong{font-size:24px;letter-spacing:-.04em}
.hero-proof span{font-size:11px;line-height:1.45;color:#77828b;max-width:145px;margin-top:3px}
.mock-window{padding:9px;border-radius:25px;background:linear-gradient(145deg,#111820,#0b1117);box-shadow:0 34px 90px rgba(12,22,31,.22),0 0 0 1px rgba(255,255,255,.04) inset;transform:perspective(1500px) rotateY(-2deg) rotateX(1deg)}
.mock-top{height:40px;border-radius:17px 17px 5px 5px;background:#151e27;color:#8f99a2}
.mock-top span{width:6px;height:6px}
.mock-body{height:510px;border-radius:5px 5px 17px 17px;background:#f6f8f9;grid-template-columns:58px 1fr}
.mock-nav{background:#111922;padding-top:18px}
.mock-content{padding:27px 28px}
.mock-heading h3{font-size:23px;letter-spacing:-.035em}
.mock-heading button{font-size:8.5px;border-radius:8px;padding:9px 11px}
.metric-row{gap:11px;margin:19px 0}
.metric-row>div,.mock-list,.mock-flow{border-color:#e5e9ec;box-shadow:0 2px 8px rgba(14,25,34,.025)}
.metric-row>div{padding:13px 14px}
.metric-row small{font-size:8.5px}.metric-row b{font-size:23px}.metric-row em{font-size:7.5px}
.list-item{padding:11px 0}.list-item b{font-size:8.5px}.list-item small{font-size:7px}.list-item strong{font-size:7.5px}

.section-head{max-width:810px;margin-bottom:48px}
.section-head .eyebrow{margin-bottom:16px}
.eyebrow{font-size:10px;letter-spacing:.16em;color:#73808a}
.section-head h2{font-size:clamp(38px,4.2vw,60px);line-height:1.02;letter-spacing:-.052em;margin-bottom:18px}
.section-head p{font-size:16px;line-height:1.68;color:#69747e;max-width:740px}
.problem{background:#fff}
.before-after{grid-template-columns:1fr 64px 1fr;gap:22px}
.chaos-card,.system-card{min-height:470px;padding:34px;border-radius:23px;border:1px solid #e3e7e9}
.chaos-card{background:#f6f7f8}
.system-card{background:linear-gradient(145deg,#111922,#0c1218);border-color:#202a34;box-shadow:0 24px 60px rgba(11,19,26,.14)}
.chaos-card h3,.system-card h3{font-size:28px;line-height:1.08;margin-top:34px}
.chaos-card p,.system-card p{font-size:13px;line-height:1.7}
.arrow-core{width:56px;height:56px;margin:auto;background:#f1f3f4;border:1px solid #e0e5e8;font-size:22px;color:#79858e}
.chaos-icons span{border-radius:12px;box-shadow:0 10px 25px rgba(18,28,36,.06)}
.os-core{width:104px;height:104px;border-radius:29px;box-shadow:0 16px 45px rgba(36,217,167,.16)}
.os-orbit i{border-color:#303a44;background:#18222c}

.formula{background:linear-gradient(160deg,#0d141b,#101921 60%,#0d151c);position:relative}
.formula:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 20%,rgba(36,217,167,.08),transparent 28%);pointer-events:none}
.formula>*{position:relative}
.formula-grid{border-radius:22px;border-color:#26313b;background:#26313b}
.formula-grid>div{min-height:280px;padding:31px;background:rgba(17,25,34,.9)}
.formula-grid>div:hover{background:#15202a}
.formula-grid h3{font-size:25px;margin-top:64px}
.formula-grid p{font-size:13px;line-height:1.7}
.principle{border-radius:18px;padding:25px 30px;background:linear-gradient(110deg,#31dbaa,#9bead5);box-shadow:0 18px 45px rgba(36,217,167,.10)}
.principle strong{font-size:20px}

.live-demo{background:#f1f3f4}
.live-demo .section-head{max-width:900px}
.demo-shell{border:1px solid #e0e5e8;border-radius:24px;box-shadow:0 24px 70px rgba(14,24,32,.08);overflow:hidden}
.demo-tabs{padding:9px;background:#f1f3f4;border-color:#e1e6e9;gap:3px}
.demo-tab{padding:13px 12px;border-radius:10px;font-size:11px;font-weight:680;white-space:nowrap}
.demo-tab.active{box-shadow:0 3px 12px rgba(18,28,36,.06);border:1px solid #e5e9ec}
.demo-panel{padding:36px;min-height:590px}
.demo-panel#tab-bot{gap:64px}
.phone{width:372px;border:8px solid #101820;border-radius:34px;box-shadow:0 28px 70px rgba(15,24,32,.13)}
.phone-top{height:51px}.chat{height:158px}
.bot-form{padding:15px}
.bot-form input{transition:border-color .2s ease,box-shadow .2s ease}
.bot-form input:focus{border-color:#98dcca;box-shadow:0 0 0 3px rgba(36,217,167,.10)}
.photo-pick{border-radius:10px;overflow:hidden}
.demo-explain{max-width:520px}
.demo-explain>span,.lead-source>span{display:inline-flex;padding:7px 10px;border-radius:999px;background:#e5faf3;color:#24735e;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.11em}
.demo-explain h3,.lead-source h3{font-size:34px;line-height:1.06;letter-spacing:-.045em;margin-top:18px}
.demo-explain p,.lead-source p{font-size:14px;line-height:1.7;color:#68747d}
.demo-explain li{font-size:13px;line-height:1.55;color:#46535d;margin:10px 0}

.crm-demo{border:1px solid #e1e6e9;border-radius:18px;overflow:hidden;box-shadow:0 12px 35px rgba(18,28,36,.05)}
.crm-side{background:linear-gradient(#111922,#0e151c)}
.crm-main{background:#f8f9fa}
.crm-car,.automation-box{box-shadow:0 5px 18px rgba(15,25,34,.035)}
.status-pill{font-weight:700}
.status-pill.live{box-shadow:0 0 0 4px rgba(36,217,167,.08)}
.publish-grid{gap:18px}
.public-site,.telegram-card{border-radius:18px;border:1px solid #e1e6e9;overflow:hidden;box-shadow:0 10px 30px rgba(16,26,35,.045)}
.public-header{background:#101820}
.site-card,.tg-post{background:#fff}
.sync-banner{border-radius:16px;background:#101820;color:#fff}
.lead-source,.lead-crm{border-radius:18px;border:1px solid #e1e6e9;box-shadow:0 8px 26px rgba(14,24,32,.04)}

.interfaces{background:#fff}
.interface-grid{gap:15px}
.interface-grid>div{min-height:245px;border-radius:20px;padding:31px;background:linear-gradient(180deg,#fff,#fbfcfc);box-shadow:0 8px 25px rgba(17,27,35,.025)}
.interface-grid>div:hover{transform:translateY(-3px);border-color:#cfd7dc;box-shadow:0 18px 40px rgba(17,27,35,.06)}
.interface-grid h3{font-size:27px;margin-top:62px}
.interface-grid p{font-size:13px;line-height:1.68}
.industries{background:linear-gradient(160deg,#0e151c,#121c25)}
.industry-grid{gap:12px}
.industry-grid article{min-height:205px;border-radius:18px;padding:25px;background:#141e27;border-color:#29343e;position:relative;overflow:hidden}
.industry-grid article:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-50px;top:-50px;background:rgba(36,217,167,.035)}
.industry-grid article:hover{transform:translateY(-2px);border-color:#3c4a55;background:#17222c}
.industry-grid article b{font-size:9.5px;letter-spacing:.02em}
.industry-grid h3{font-size:24px;margin-top:67px}
.industry-grid p{font-size:11.5px;line-height:1.62}
.stack{background:#f5f6f7}
.stack-grid{gap:12px}
.stack-grid>div{min-height:180px;border-radius:18px;padding:24px;background:#fff;box-shadow:0 6px 20px rgba(17,27,35,.025)}
.stack-grid>div:hover{border-color:#cad3d9;transform:translateY(-2px);box-shadow:0 16px 36px rgba(17,27,35,.055)}
.stack-grid b{font-size:16px;margin-top:40px}
.stack-grid p{font-size:11.5px;line-height:1.62}

.final-cta{min-height:480px;background:linear-gradient(118deg,#35dbaa 0%,#94ead3 62%,#baf3e4 100%);position:relative;overflow:hidden}
.final-cta:before,.final-cta:after{content:"";position:absolute;border:1px solid rgba(7,18,14,.08);border-radius:50%;width:420px;height:420px}
.final-cta:before{left:-230px;bottom:-260px}.final-cta:after{right:-220px;top:-250px}
.final-cta>*{position:relative;z-index:1}
.final-cta h2{font-size:clamp(56px,7vw,92px);line-height:.9}
.final-cta p{font-size:15px;line-height:1.7;margin:20px 0 4px;color:#21483d}
.light-btn{box-shadow:0 10px 30px rgba(15,44,35,.12)}
footer{height:98px;padding:0 var(--gutter);border-top:1px solid rgba(255,255,255,.04)}
footer p,footer>span{font-size:10px;letter-spacing:.02em}

.lead-modal{background:rgba(8,13,18,.58);backdrop-filter:blur(12px)}
.modal-card{border-radius:20px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.24)}
.modal-card h3{font-size:28px;letter-spacing:-.04em}
.modal-card input{border-radius:10px}

@media(max-width:1050px){
  :root{--gutter:max(24px,5vw)}
  .hero{grid-template-columns:1fr;gap:56px;min-height:auto;padding-top:72px}
  .hero-copy{max-width:800px}
  .hero-visual{max-width:900px;width:100%}
  .mock-window{transform:none}
  .before-after{grid-template-columns:1fr}.arrow-core{transform:rotate(90deg)}
  .topbar nav{display:none}
  .formula-grid{grid-template-columns:1fr 1fr}
  .demo-panel#tab-bot,.lead-layout{grid-template-columns:1fr}
  .demo-explain{margin:0 auto;padding:12px 0 6px}
}
@media(max-width:680px){
  :root{--gutter:20px}
  .section-pad{padding:76px var(--gutter)}
  .topbar{height:64px}.topbar>.btn{display:none}
  .brand-mark{width:28px;height:28px}.brand-text{font-size:18px}
  .hero{padding-top:54px;padding-bottom:72px;gap:44px}
  .hero .eyebrow{margin-bottom:20px}
  .hero h1{font-size:48px;line-height:.98}
  .lead{font-size:15px;line-height:1.65}
  .hero-actions{flex-direction:column}.hero-actions .btn{width:100%}
  .hero-proof{grid-template-columns:repeat(3,1fr);gap:12px}
  .hero-proof strong{font-size:20px}.hero-proof span{font-size:9px}
  .mock-window{padding:6px;border-radius:20px}
  .mock-body{height:430px}.mock-content{padding:14px}
  .section-head{margin-bottom:38px}.section-head h2{font-size:38px}.section-head p{font-size:14px}
  .chaos-card,.system-card{min-height:415px;padding:25px}
  .formula-grid{grid-template-columns:1fr}.formula-grid>div{min-height:205px}.formula-grid h3{margin-top:42px}
  .principle{padding:22px;gap:16px}.principle strong{font-size:18px}
  .demo-shell{margin:0 -6px;border-radius:18px}.demo-tabs{overflow:auto;scrollbar-width:none}.demo-tabs::-webkit-scrollbar{display:none}
  .demo-tab{min-width:145px}.demo-panel{padding:18px;min-height:auto}.phone{width:100%;max-width:380px}
  .demo-explain h3,.lead-source h3{font-size:29px}
  .interface-grid,.industry-grid,.stack-grid{grid-template-columns:1fr}
  .final-cta{min-height:430px}.final-cta h2{font-size:54px}
  footer{height:auto;padding:28px var(--gutter);flex-direction:column;align-items:flex-start;gap:15px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}