:root{
    --ink:#0b0d12;
    --muted:#606875;
    --line:#e6e9ee;
    --paper:#f7f8fa;
    --card:#fbfcfd;
    --blue:#4f78ff;
    --soft-blue:#eef4ff;
    --green:#16a36f;
    --radius:24px;
    --shadow:0 24px 70px rgba(22,31,55,.12);
    --shell:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--ink);
    background:#f4f5f7;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
.page{overflow:hidden;background:linear-gradient(180deg,#f8f9fb 0%,#fff 32%,#fff 100%)}
.shell{width:min(calc(100% - 88px),var(--shell));margin-inline:auto}
.site-header{
    height:66px;
    background:rgba(248,249,251,.92);
    border-bottom:1px solid rgba(212,217,225,.72);
    display:flex;
    align-items:center;
    position:relative;
    z-index:20;
}
.nav-shell{display:grid;grid-template-columns:210px 1fr 280px;align-items:center;height:100%;gap:30px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:720;font-size:24px;letter-spacing:-.035em;width:max-content}
.brand-mark{width:28px;height:28px;object-fit:contain}
.primary-nav{display:flex;justify-content:center;gap:34px;font-size:13px;font-weight:560;color:#202530}
.primary-nav a,.nav-login{transition:opacity .2s ease}
.primary-nav a:hover,.nav-login:hover{opacity:.58}
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:28px;font-size:13px;font-weight:560}
.button{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    padding:0 24px;
    border-radius:999px;
    font-size:14px;
    font-weight:650;
    letter-spacing:-.015em;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.button:hover{transform:translateY(-1px)}
.button-dark{background:#0d1016;color:#fff;box-shadow:0 10px 24px rgba(5,8,13,.12)}
.button-small{min-height:38px;padding-inline:19px;font-size:12px}
.button-link{display:inline-flex;align-items:center;gap:11px;font-size:14px;font-weight:620}
.play{
    width:26px;height:26px;border:1px solid #141821;border-radius:50%;display:inline-flex;
    align-items:center;justify-content:center;font-size:9px;padding-left:1px;
}
.hero{
    min-height:570px;
    position:relative;
    background:
      radial-gradient(circle at 72% 28%,rgba(113,158,255,.15),transparent 29%),
      radial-gradient(circle at 94% 74%,rgba(107,159,255,.10),transparent 26%),
      linear-gradient(180deg,#f9fafc 0%,#f5f7fa 100%);
    border-bottom:1px solid var(--line);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.hero-glow-one{width:600px;height:420px;right:-110px;top:60px;background:rgba(198,219,255,.22)}
.hero-glow-two{width:540px;height:340px;left:48%;bottom:-170px;background:rgba(230,238,255,.36)}
.hero-grid{
    min-height:570px;
    display:grid;
    grid-template-columns:31% 69%;
    align-items:center;
    gap:26px;
    position:relative;
    z-index:1;
}
.hero-copy{padding:48px 0 34px}
.eyebrow{
    margin:0 0 9px;
    font-size:16px;
    letter-spacing:-.018em;
    font-weight:560;
    color:#2d323d;
}
.hero h1{
    margin:0;
    font-size:146px;
    line-height:.86;
    letter-spacing:-.078em;
    font-weight:740;
}
.hero-promise{
    font-size:43px;
    line-height:1.05;
    letter-spacing:-.052em;
    font-weight:710;
    margin:11px 0 18px;
}
.hero-description{
    max-width:430px;
    margin:0;
    color:#5b6471;
    font-size:17px;
    line-height:1.45;
    letter-spacing:-.018em;
}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:24px}
.hero-benefits{
    display:flex;
    gap:36px;
    margin-top:35px;
    color:#56606f;
    font-size:11px;
    line-height:1.22;
    font-weight:530;
}
.benefit{display:flex;align-items:center;gap:12px;min-width:100px}
.line-icon{font-size:26px;color:#1b273b;font-weight:300;line-height:1}
.icon-nodes{font-size:19px}
.hero-product{position:relative;padding:30px 0 16px 0}
.device{
    position:relative;
    width:100%;
    max-width:980px;
    margin-left:-6px;
    transform:perspective(1700px) rotateY(-4deg) rotateZ(-1deg);
    transform-origin:center right;
}
.device:after{
    content:"";
    position:absolute;
    left:9%;right:3%;bottom:-20px;height:36px;
    border-radius:50%;
    background:rgba(51,73,116,.15);
    filter:blur(18px);
}
.device-frame{
    position:relative;
    padding:12px;
    border-radius:28px;
    background:linear-gradient(145deg,#707d95,#b8c0cf 20%,#738097 58%,#334054 100%);
    box-shadow:0 26px 50px rgba(43,61,93,.23),inset 0 0 0 1px rgba(255,255,255,.75);
}
.device-frame:before{
    content:"";
    position:absolute;inset:3px;border-radius:25px;
    box-shadow:inset 0 0 0 1px rgba(7,12,20,.35);
    pointer-events:none;
}
.app-shell{
    min-height:430px;
    background:#f8fafc;
    border-radius:19px;
    display:grid;
    grid-template-columns:178px 1fr;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.9);
}
.app-sidebar{
    background:#f4f6f9;
    border-right:1px solid #e4e8ef;
    padding:22px 15px 18px;
    color:#5a6471;
}
.app-logo{display:flex;align-items:center;gap:7px;color:#111720;margin-bottom:18px;font-size:13px}
.app-logo img{width:18px;height:18px}
.sidebar-primary{display:flex;flex-direction:column;gap:6px}
.side-item{
    display:flex;align-items:center;gap:8px;height:31px;padding:0 9px;border-radius:9px;
    font-size:10px;font-weight:560;color:#5f6977;
}
.side-item i{font-style:normal;width:15px;text-align:center;color:#6e7785}
.side-item.active{background:#edf1f6;color:#111820}
.side-label{font-size:8px;font-weight:650;color:#9aa3ae;margin:19px 9px 7px;text-transform:uppercase;letter-spacing:.06em}
.sidebar-secondary{display:flex;flex-direction:column;gap:9px;padding:0 10px;font-size:9px;color:#7a8492}
.app-main{position:relative;padding:19px 25px 16px;background:linear-gradient(180deg,#fbfcfe 0%,#f7f9fc 100%)}
.app-topbar{display:flex;justify-content:flex-end;align-items:center;height:16px;margin-bottom:8px}
.avatar{
    width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,#f7d8c7,#8fb7ef);color:#10213d;font-size:10px;font-weight:750;
    border:2px solid #fff;box-shadow:0 1px 6px rgba(36,54,87,.18)
}
.avatar-small{width:25px;height:25px;flex:0 0 auto}
.prompt{
    margin:6px 4px 11px auto;
    max-width:80%;
    display:flex;gap:10px;align-items:flex-start;
}
.prompt p{
    margin:0;background:#e9f0ff;border-radius:12px;padding:12px 14px;color:#1c2532;font-size:10px;
    line-height:1.35;border:1px solid #dbe5fa;
}
.execution-list{padding:4px 4px 5px 36px;display:flex;flex-direction:column;gap:9px}
.execution-list>div{display:grid;grid-template-columns:18px 1fr 16px;align-items:center;font-size:9px;color:#4f5968}
.execution-list b{color:#1d9c69;text-align:right;font-size:10px}
.status,.brand-dot{width:16px;height:16px;display:grid;place-items:center;border-radius:6px;font-size:9px}
.status.success{background:#e5f7ef;color:#109a65}
.brand-dot.slack{background:#fff0fb;color:#c52887}
.brand-dot.crm{background:#edf4ff;color:#3d72db}
.brand-dot.calendar{background:#eef4ff;color:#2e68df}
.done-card{
    margin:9px 4px 12px 36px;
    padding:12px 14px;
    border:1px solid #cdebdc;
    background:#eaf8f1;
    border-radius:12px;
    display:grid;grid-template-columns:25px 1fr 18px;gap:9px;align-items:center;
    color:#1b3a30;
}
.done-check{width:20px;height:20px;background:#1aa36f;color:white;border-radius:50%;display:grid;place-items:center;font-size:10px}
.done-card strong{display:block;font-size:11px}.done-card small{display:block;margin-top:2px;font-size:8px;color:#567064}
.chat-input{
    margin-top:10px;
    height:42px;border:1px solid #dfe5ed;border-radius:14px;background:white;
    display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;
    color:#a1a8b2;font-size:9px;
}
.send{width:29px;height:29px;border-radius:50%;background:#7d8ca2;color:white;display:grid;place-items:center;font-size:14px}
.section-rule{border-bottom:1px solid var(--line)}
.highlights{padding:20px 0 28px;background:#fff}
.section-heading-row{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 12px}
.section-heading-row h2{
    margin:0;font-size:32px;line-height:1.05;letter-spacing:-.045em;font-weight:720;
}
.section-heading-row p{margin:0 6px 4px;color:#7b8491;font-size:12px}
.highlight-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.feature-card{
    min-height:220px;
    background:linear-gradient(180deg,#fafbfc 0%,#f7f8fa 100%);
    border:1px solid #edf0f3;
    border-radius:14px;
    padding:19px 17px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.feature-card h3{margin:0 0 7px;font-size:20px;line-height:1.02;letter-spacing:-.04em}
.feature-card>p{margin:0;color:#737d8b;font-size:11px;line-height:1.38}
.mini-command{
    margin-top:29px;background:white;border:1px solid #e5e9ef;border-radius:11px;height:54px;padding:8px 10px;
    display:flex;align-items:center;gap:10px;box-shadow:0 7px 18px rgba(39,54,78,.06);
}
.mini-command strong{font-size:9px;line-height:1.25}
.mini-orb{width:28px;height:28px;border-radius:8px;background:#0d1020;color:#b569ff;display:grid;place-items:center}
.mini-client{
    margin-top:30px;background:#fff;border:1px solid #e5e9ef;border-radius:11px;height:54px;padding:8px 10px;
    display:flex;align-items:center;gap:9px
}
.client-icon{width:29px;height:29px;border-radius:50%;background:#e8efff;color:#4774ff;display:grid;place-items:center;font-size:12px}
.mini-client strong,.mini-client small{display:block}.mini-client strong{font-size:9px}.mini-client small{font-size:7px;color:#8c95a2;margin-top:3px}
.brand-mini-grid{display:grid;grid-template-columns:repeat(4,24px);gap:9px 12px;margin-top:14px;align-items:center}
.brand-mini-grid img{width:21px;height:21px;object-fit:contain}
.brand-fallback{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800}
.brand-fallback.google{color:#4285f4;background:#fff;border:1px solid #e8ebef}
.mini-checks{display:flex;flex-direction:column;gap:9px;margin-top:22px;font-size:9px;color:#5a6571}
.mini-checks span{display:flex;align-items:center;gap:8px}
.mini-checks i{font-style:normal;width:16px;height:16px;border-radius:50%;background:#daf5e9;color:#159c66;display:grid;place-items:center;font-size:8px}
.avatar-stack{display:flex;margin-top:32px;padding-left:5px}
.avatar-stack span{
    width:31px;height:31px;border-radius:50%;margin-left:-7px;border:2px solid white;
    display:grid;place-items:center;color:white;font-size:9px;font-weight:720;
}
.avatar-stack span:first-child{margin-left:0}
.a1{background:#3d77df}.a2{background:#d35c4b}.a3{background:#20252f}.a4{background:#2d9c6a}.a5{background:#f3f5f8!important;color:#58606c!important}
.flow-section{padding:31px 0 33px;background:#fff}
.split-section{display:grid;grid-template-columns:30% 70%;gap:22px;align-items:start}
.section-copy{padding-top:8px}
.section-copy h2,.detail-copy h2{
    margin:0;font-size:34px;line-height:1.03;letter-spacing:-.05em;font-weight:720;
}
.section-copy p,.detail-copy p{
    color:#6f7987;font-size:12px;line-height:1.45;max-width:350px;margin:13px 0 11px;
}
.section-copy a,.detail-copy a{font-size:11px;color:#2f5fab;font-weight:640}
.section-copy a span,.detail-copy a span{margin-left:5px}
.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mode-card{min-width:0}
.mode-card strong{display:block;font-size:11px;margin-top:7px}
.mode-card small{display:block;color:#7c8592;font-size:9px;line-height:1.3;margin-top:2px}
.mini-app{height:160px;border-radius:10px;border:1px solid #e4e9ef;background:#f8fafc;position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(37,57,87,.06)}
.mini-side{position:absolute;left:0;top:0;bottom:0;width:22%;background:#f0f3f7;border-right:1px solid #e4e8ee}
.mini-content{position:absolute;left:28%;right:8%;top:18%;display:flex;flex-direction:column;gap:11px}
.mini-content span{height:11px;background:#e3eaf6;border-radius:8px}.mini-content span:nth-child(2){width:72%}.mini-content span:nth-child(3){width:85%}
.split-col{position:absolute;left:28%;top:16%;bottom:13%;width:30%;background:#eef3f8;border-radius:8px}.split-col.second{left:61%;width:31%;background:#e8edf4}
.dash-block{position:absolute;border-radius:7px;background:#e7edf6}.b1{left:27%;top:14%;width:29%;height:31%}.b2{right:8%;top:14%;width:31%;height:31%}.b3{left:27%;right:8%;bottom:13%;height:32%}
.review-lines{position:absolute;left:29%;right:10%;top:20%;display:flex;flex-direction:column;gap:14px}
.review-lines span{height:15px;border-radius:7px;background:linear-gradient(90deg,#e8eef6 70%,#dff5e9 70%)}
.workspace-section{padding:16px 0 0;background:#fff}
.workspace-grid{display:grid;grid-template-columns:29% 51% 20%;min-height:350px;align-items:stretch}
.workspace-copy{padding:28px 28px 20px 0}
.workspace-window{
    align-self:end;
    height:318px;
    border:1px solid #dfe4ea;
    border-radius:15px 15px 0 0;
    overflow:hidden;
    display:grid;grid-template-columns:105px 1fr;
    background:white;
    box-shadow:0 -2px 24px rgba(40,55,82,.06);
}
.workspace-sidebar{background:#f5f7f9;border-right:1px solid #e5e8ed;padding:14px 10px;display:flex;flex-direction:column;gap:10px;font-size:8px;color:#68727f}
.app-logo.small{font-size:10px;margin-bottom:8px}.app-logo.small img{width:15px;height:15px}
.workspace-sidebar span{padding:6px;border-radius:6px}.workspace-sidebar .w-active{background:#fff;color:#222a35}
.workspace-main{padding:16px 17px;background:#fbfcfd}
.workspace-title{display:flex;justify-content:space-between;align-items:center}
.workspace-title h3{margin:0;font-size:16px;letter-spacing:-.035em}.workspace-title p{margin:3px 0 0;font-size:7px;color:#89919c}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:13px}
.metrics article{min-height:70px;border:1px solid #e8ebef;background:white;border-radius:9px;padding:8px;display:grid;grid-template-columns:23px 1fr;grid-template-rows:auto auto auto;column-gap:5px}
.metric-icon{grid-row:1/4;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font-size:8px}
.metric-icon.green{background:#e5f7ee;color:#149969}.metric-icon.blue{background:#eaf0ff;color:#4b72e8}.metric-icon.cyan{background:#e5f7f8;color:#2d9aa4}
.metrics strong{font-size:15px;line-height:1}.metrics small{font-size:6.5px;color:#7f8895}.metrics em{font-style:normal;font-size:6px;color:#28a074}
.workspace-lists{display:grid;grid-template-columns:1.4fr .9fr;gap:10px;margin-top:13px}
.workspace-lists h4{font-size:8px;margin:0 0 7px}
.task-list,.connection-list{font-size:6.7px}
.task-list span,.connection-list span{display:flex;align-items:center;padding:5px 0;border-top:1px solid #eef0f3}
.task-list span i{width:6px;height:6px;border-radius:50%;background:#4f7cff;margin-right:6px}.task-list span b{margin-left:auto;font-weight:600;color:#8d96a2}
.connection-list span{justify-content:space-between}.connection-list b{font-size:6px;color:#31a170;font-weight:600}
.workspace-message{position:relative;padding:30px 0 0 26px;background:linear-gradient(145deg,#fff 15%,#fff8f1 63%,#e8f2ff 100%);overflow:hidden}
.workspace-message p{position:relative;z-index:2;margin:0;color:#677387;font-size:20px;line-height:1.35;letter-spacing:-.03em}
.mountains{position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,transparent,#e7eef9)}
.mountains i,.mountains b,.mountains span{position:absolute;bottom:-8px;width:140px;height:100px;clip-path:polygon(0 100%,50% 0,100% 100%);background:linear-gradient(135deg,#d9e6f7,#adc2e0)}
.mountains i{left:-20px}.mountains b{left:70px;bottom:-16px;background:linear-gradient(135deg,#c7d8ef,#8aa6ce)}.mountains span{right:-55px;bottom:-11px;background:linear-gradient(135deg,#dbe7f5,#b9c9dd)}
.integrations-section,.workflow-section,.capabilities-section,.use-cases-section{padding:25px 0;background:#fff}
.detail-row{display:grid;grid-template-columns:29% 71%;gap:18px;align-items:center}
.detail-copy h2{font-size:26px}.detail-copy p{font-size:11px;max-width:310px;margin:8px 0}.detail-copy a{font-size:10px}
.integration-strip{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}
.integration-strip>div{text-align:center}
.integration-strip>div>span{
    width:56px;height:56px;margin:0 auto 7px;border:1px solid #e4e8ed;border-radius:13px;background:#fff;
    display:grid;place-items:center;box-shadow:0 5px 14px rgba(38,52,76,.04)
}
.integration-strip img{width:27px;height:27px;object-fit:contain}
.integration-strip small{display:block;font-size:8px;color:#707b89;line-height:1.15}
.workflow-row{align-items:stretch}
.workflow-cards{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr;align-items:center;gap:7px}
.workflow-cards article{min-height:137px;border:1px solid #e5e9ef;border-radius:12px;background:#fbfcfd;padding:12px 12px 10px;position:relative}
.workflow-cards .step{position:absolute;left:8px;top:8px;width:16px;height:16px;border-radius:50%;background:#e4e8ef;display:grid;place-items:center;font-size:7px}
.workflow-cards h3{font-size:9px;margin:0 0 5px;padding-left:22px;line-height:1.15}.workflow-cards p{font-size:7px;color:#8a929d;margin:0;padding-left:22px;line-height:1.35}
.flow-arrow{font-size:13px;color:#8390a0;font-weight:400;text-align:center}
.bar-chart{height:48px;margin:9px 12px 0 22px;display:flex;align-items:flex-end;gap:4px}.bar-chart i{width:11px;background:#a9bcff;border-radius:2px}.bar-chart i:nth-child(1){height:18px}.bar-chart i:nth-child(2){height:26px}.bar-chart i:nth-child(3){height:35px}.bar-chart i:nth-child(4){height:45px}
.slack-message{height:46px;margin:9px 4px 0 22px;border:1px solid #e6e9ee;background:white;border-radius:8px;padding:8px;display:grid;grid-template-columns:20px 1fr;grid-template-rows:1fr 1fr;gap:4px}.slack-message img{width:18px;height:18px;grid-row:1/3}.slack-message span{height:5px;background:#e8ecf1;border-radius:5px}.slack-message span:last-child{width:75%}
.crm-card,.calendar-card{height:48px;margin:9px 2px 0 22px;border:1px solid #e6e9ee;border-radius:8px;background:#fff;display:flex;align-items:center;gap:8px;padding:7px}
.crm-card>span,.calendar-card>span{width:24px;height:24px;border-radius:50%;background:#e9f0ff;color:#4f78ff;display:grid;place-items:center;font-size:9px}
.crm-card strong,.crm-card small,.calendar-card strong,.calendar-card small{display:block}.crm-card strong,.calendar-card strong{font-size:7px}.crm-card small,.calendar-card small{font-size:5.5px;color:#8a929d;margin-top:2px}
.compact p{max-width:220px}
.capability-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.capability-grid article{min-height:108px;border:1px solid #e7eaee;border-radius:12px;background:#fbfcfd;padding:10px}
.cap-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-bottom:8px;font-size:13px}.cap-icon.pink{background:#fff0f8;color:#e861a9}.cap-icon.blue{background:#edf3ff;color:#4b7bed}.cap-icon.purple{background:#f2ecff;color:#7a55dd}.cap-icon.green{background:#eaf8ef;color:#2a9a63}.cap-icon.yellow{background:#fff7de;color:#d99b16}.cap-icon.violet{background:#f4ebff;color:#8d57db}
.capability-grid strong,.capability-grid small{display:block}.capability-grid strong{font-size:8.5px}.capability-grid small{font-size:6.8px;line-height:1.3;color:#7a8491;margin-top:2px}
.use-heading{margin-bottom:12px}.use-heading h2{font-size:28px}.use-heading p{font-size:10px}
.use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.use-grid article{min-height:94px;border:1px solid #e7eaee;border-radius:12px;background:#fbfcfd;padding:13px;display:flex;align-items:center;gap:13px}
.use-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:11px;letter-spacing:-2px}.sales{background:#e9f8ef;color:#28a36b}.ops{background:#eef4ff;color:#4d7bea}.support{background:#f3edff;color:#805bd4}.commerce{background:#fff0e7;color:#ef7c36}
.use-grid strong{font-size:10px}.use-grid p{font-size:8px;color:#7f8995;line-height:1.35;margin:3px 0 0}
.cta-section{
    position:relative;
    min-height:165px;
    background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);
    overflow:hidden;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--line)
}
.cta-inner{text-align:center;position:relative;z-index:2;padding:26px 0}
.cta-inner h2{font-size:31px;letter-spacing:-.05em;margin:0 0 4px}.cta-inner p{margin:0;color:#747e8a;font-size:11px}
.cta-actions{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:15px}.cta-actions .button{min-height:38px;font-size:11px;padding-inline:18px}.cta-actions .button-link{font-size:11px}.cta-actions .play{width:22px;height:22px}
.cta-curve{position:absolute;bottom:-80px;width:700px;height:170px;border-radius:50%;filter:blur(.2px);opacity:.8}
.cta-curve-one{left:-220px;background:linear-gradient(90deg,#d9e7ff,#f1f5ff)}
.cta-curve-two{right:-260px;background:linear-gradient(90deg,#eff6ff,#d8e0ff)}
footer{background:#fff;padding:28px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.8fr repeat(4,.65fr) 1.45fr;gap:25px;align-items:start}
.footer-brand .brand{font-size:20px}.footer-brand .brand-mark{width:23px;height:23px}.footer-brand p{font-size:8px;color:#7b8490;margin:7px 0 0}
.footer-col{display:flex;flex-direction:column;gap:4px;font-size:7px}.footer-col strong{font-size:8px;margin-bottom:1px}.footer-col a{color:#747d89}
.footer-social{text-align:right}.footer-social>div{display:flex;justify-content:flex-end;gap:19px;font-size:10px;font-weight:650}.footer-social p{font-size:6.5px;color:#8b939f;margin:28px 0 0}


.mini-app:before{
    content:"";
    position:absolute;
    left:27%;right:7%;top:9%;
    height:7px;
    border-radius:5px;
    background:linear-gradient(90deg,#cfd8e8 0 17%,transparent 17% 22%,#e9edf3 22% 47%,transparent 47%);
    opacity:.9;
}
.chat-mode:after{
    content:"";
    position:absolute;left:31%;right:10%;bottom:13%;height:32%;
    border-radius:8px;
    background:linear-gradient(180deg,#e8eef7 0 34%,transparent 34% 45%,#eef3f8 45% 74%,transparent 74%);
}
.split-mode:after{
    content:"";
    position:absolute;left:31%;right:10%;bottom:10%;height:12%;
    border-radius:6px;background:#e9eef5;
}
.dashboard-mode:after{
    content:"";
    position:absolute;left:29%;right:9%;bottom:10%;height:10%;
    border-radius:5px;background:linear-gradient(90deg,#e5ebf4 0 45%,transparent 45% 51%,#dff1e9 51%);
}
.review-mode:after{
    content:"";
    position:absolute;right:11%;top:19%;width:8px;height:8px;border-radius:50%;
    background:#6ec79b;box-shadow:0 29px 0 #6ec79b,0 58px 0 #6ec79b;
}

/* KAIROWEB3 — high fidelity product-surface pass */
.hero{min-height:615px}
.hero-grid{min-height:615px;grid-template-columns:39% 61%;gap:22px}
.hero-copy{padding:58px 0 38px}
.hero-product{padding:38px 0 24px 16px}
.device{
    max-width:830px;
    margin-left:auto;
    margin-right:-4px;
    transform:perspective(1600px) rotateY(-4.8deg) rotateZ(-1.15deg);
}
.device-frame{
    padding:11px;
    border-radius:31px;
    background:
      linear-gradient(145deg,#607086 0%,#b8c1cf 16%,#78869d 43%,#ced4dd 57%,#536176 77%,#2f3a4c 100%);
    box-shadow:
      0 31px 48px rgba(43,61,93,.20),
      0 8px 16px rgba(40,55,85,.10),
      inset 0 0 0 1px rgba(255,255,255,.9);
}
.device-frame:before{
    inset:3px;
    border-radius:28px;
    box-shadow:
      inset 0 0 0 1px rgba(6,12,22,.42),
      inset 0 0 0 3px rgba(255,255,255,.22);
}
.app-shell{min-height:448px;grid-template-columns:182px 1fr;border-radius:21px}
.app-main{display:flex;flex-direction:column}
.app-main .execution-list{gap:12px;padding-top:8px}
.app-main .done-card{margin-top:auto}
.app-main .chat-input{margin-top:12px}
.hero-product:after{
    content:"";
    position:absolute;
    left:15%;right:2%;bottom:5px;
    height:18px;
    border-radius:50%;
    background:linear-gradient(90deg,rgba(39,55,82,.03),rgba(46,64,96,.21),rgba(39,55,82,.04));
    filter:blur(13px);
    z-index:-1;
}

.flow-section{padding:28px 0 30px}
.mode-grid{gap:10px}
.mode-card strong{margin-top:6px}
.mini-app.mode-ui{
    height:150px;
    display:grid;
    grid-template-columns:24% 76%;
    border-radius:10px;
    background:#fbfcfe;
    box-shadow:0 8px 20px rgba(37,57,87,.07);
}
.mini-app.mode-ui:before,.mini-app.mode-ui:after{content:none}
.mode-sidebar{
    position:relative;
    background:#f3f5f8;
    border-right:1px solid #e5e9ef;
    padding:9px 6px;
    overflow:hidden;
}
.mode-brand{height:13px;display:flex;align-items:center;gap:3px;margin-bottom:8px;font-size:4.5px;font-weight:700;color:#202631}
.mode-brand img{width:8px;height:8px}
.mode-nav{
    display:block;
    height:7px;
    width:78%;
    border-radius:3px;
    background:#e7ebf1;
    margin:6px 0;
}
.mode-nav.active{background:#fff;box-shadow:0 1px 3px rgba(34,48,71,.06)}
.mode-nav.short{width:58%}
.mode-main{position:relative;padding:9px 8px;background:#fbfcfe;overflow:hidden}
.mode-top{height:10px;display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.mode-top i{display:block;width:34%;height:4px;border-radius:3px;background:#dce3ed}
.mode-top span{display:block;width:8px;height:8px;border-radius:50%;background:#dbe2ec}
.mode-chat-bubble{
    width:71%;height:25px;margin-left:auto;border-radius:7px;background:#eaf0fd;
    border:1px solid #dfe7f7;
}
.mode-chat-bubble.narrow{height:20px;width:82%}
.mode-exec{display:flex;flex-direction:column;gap:5px;margin:8px 6px 6px 9px}
.mode-exec span{height:4px;border-radius:3px;background:linear-gradient(90deg,#7bd4aa 0 5px,#e5eaf1 5px 72%,transparent 72%)}
.mode-exec.compact{gap:4px;margin-top:7px}
.mode-complete{height:18px;border-radius:6px;background:#e8f7ef;border:1px solid #d8eee3;margin:4px 2px 6px 9px}
.mode-complete.small{height:14px}
.mode-input{height:12px;border-radius:6px;background:white;border:1px solid #e2e6ec;margin:0 2px 0 9px}
.mode-split-main{display:grid;grid-template-columns:58% 42%;padding:0}
.mode-chat-pane{padding:8px 6px;border-right:1px solid #e6e9ee}
.mode-context-pane{padding:9px 6px;background:#f8fafc}
.mode-context-pane>b,.mode-dashboard-head b,.mode-review-head b{display:block;width:46%;height:4px;border-radius:3px;background:#dce3ed}
.context-card{height:33px;border:1px solid #e4e8ed;border-radius:6px;background:white;margin:9px 0 8px;padding:6px}
.context-card i{display:block;width:9px;height:9px;border-radius:50%;background:#e7efff;float:left;margin-right:4px}
.context-card span{display:block;height:3px;background:#dfe5ed;border-radius:2px;margin:2px 0}
.context-card span:last-child{width:65%}
.context-lines{display:flex;flex-direction:column;gap:5px}
.context-lines span{height:4px;border-radius:3px;background:#e2e7ee}
.mode-dashboard-main{padding:9px 7px}
.mode-dashboard-head,.mode-review-head{display:flex;justify-content:space-between;align-items:center;height:10px}
.mode-dashboard-head span,.mode-review-head span{width:8px;height:8px;border-radius:50%;background:#dbe2ec}
.mode-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:9px 0 7px}
.mode-metrics i{height:29px;border:1px solid #e6e9ee;border-radius:5px;background:linear-gradient(180deg,#fff,#fafbfd)}
.mode-dashboard-bottom{display:grid;grid-template-columns:1.3fr .8fr;gap:5px}
.mode-task-lines,.mode-app-lines{display:flex;flex-direction:column;gap:5px}
.mode-task-lines span,.mode-app-lines span{height:7px;border-top:1px solid #e9edf2;position:relative}
.mode-task-lines span:before{content:"";position:absolute;top:3px;left:0;width:4px;height:4px;border-radius:50%;background:#6490ff}
.mode-app-lines span:after{content:"";position:absolute;right:0;top:2px;width:13px;height:3px;border-radius:2px;background:#b6e7ce}
.mode-review-main{padding:9px 7px}
.mode-review-head{margin-bottom:7px}
.mode-review-row{
    height:23px;border:1px solid #e7eaee;border-radius:5px;background:white;margin:5px 0;
    display:grid;grid-template-columns:12px 1fr 18px;gap:5px;align-items:center;padding:0 5px;
}
.mode-review-row i{font-style:normal;width:10px;height:10px;border-radius:50%;background:#e5f6ed;color:#279668;display:grid;place-items:center;font-size:5px}
.mode-review-row span{height:4px;border-radius:3px;background:#dfe5ec}
.mode-review-row em{height:7px;border-radius:4px;background:#e4f5eb}

.workspace-message{
    background:
      radial-gradient(circle at 72% 24%,rgba(255,226,205,.54),transparent 42%),
      linear-gradient(155deg,#fff 8%,#fff8f2 56%,#eef4fb 100%);
}
.mountains{
    left:-12%;right:-10%;bottom:-1px;height:63%;
    background:
      linear-gradient(180deg,rgba(238,244,251,0) 0%,rgba(227,236,247,.60) 65%,rgba(215,226,241,.88) 100%);
    filter:saturate(.78);
}
.mountains:before{
    content:"";position:absolute;left:3%;right:0;bottom:-7%;height:82%;
    clip-path:polygon(0 100%,0 83%,10% 72%,18% 78%,29% 55%,39% 67%,48% 42%,58% 63%,70% 24%,78% 42%,87% 30%,100% 61%,100% 100%);
    background:linear-gradient(180deg,rgba(219,230,243,.35),rgba(182,200,223,.76));
    filter:blur(1.2px);
}
.mountains:after{
    content:"";position:absolute;left:19%;right:-4%;bottom:-13%;height:74%;
    clip-path:polygon(0 100%,0 87%,11% 73%,21% 81%,33% 49%,43% 68%,57% 34%,67% 57%,79% 22%,89% 50%,100% 37%,100% 100%);
    background:linear-gradient(180deg,rgba(179,199,224,.18),rgba(135,162,198,.68));
    filter:blur(.5px);
}
.mountains i,.mountains b,.mountains span{
    display:block;
    position:absolute;
    bottom:-14%;
    height:58%;
    width:54%;
    clip-path:polygon(0 100%,10% 81%,24% 88%,38% 48%,52% 76%,68% 34%,82% 71%,100% 49%,100% 100%);
    background:linear-gradient(180deg,rgba(154,180,211,.14),rgba(112,144,183,.54));
    filter:blur(.8px);
}
.mountains i{left:-8%}
.mountains b{left:32%;bottom:-18%;opacity:.77}
.mountains span{right:-16%;bottom:-10%;opacity:.62}

.integration-strip>div>span{box-shadow:0 7px 16px rgba(38,52,76,.055)}
.workflow-cards article,.capability-grid article,.use-grid article{box-shadow:0 3px 11px rgba(35,49,73,.025)}

/* KAIROWEB3A — canonical hero geometry + atmospheric vector art */
.hero:before{
    content:"";
    position:absolute;
    z-index:0;
    right:-5%;
    top:8%;
    width:73%;
    height:92%;
    background:linear-gradient(142deg,rgba(233,241,255,.20),rgba(205,222,250,.43) 58%,rgba(236,243,255,.18));
    clip-path:polygon(18% 4%,100% 0,100% 79%,72% 94%,32% 100%,0 67%);
    border-radius:48% 0 0 34%;
    pointer-events:none;
}
.hero-grid{grid-template-columns:40% 60%}
.hero h1{font-size:158px}
.hero-description{max-width:470px}
.hero-product{padding-left:8px}
.device{max-width:800px;margin-left:auto;margin-right:0}
.app-shell{min-height:500px;grid-template-columns:176px 1fr}
.workspace-message{background:#fff}
.mountains{
    left:0;
    right:0;
    bottom:0;
    height:100%;
    background:url("/assets/art/workspace-mountains.svg") center bottom / cover no-repeat;
    filter:none;
}
.mountains:before,.mountains:after,.mountains i,.mountains b,.mountains span{display:none}
.cta-section{
    min-height:170px;
    background:#fff url("/assets/art/cta-waves.svg") center bottom / 100% 115px no-repeat;
}
.cta-curve{display:none}

/* KAIROWEB4A — measured desktop micro-fidelity geometry */
@media (min-width:1201px){
    .shell{width:min(calc(100% - 118px),var(--shell))}
    .nav-shell{width:min(calc(100% - 218px),var(--shell))}

    .hero,.hero-grid{min-height:593px}
    .hero-copy{
        padding-left:48px;
        transform:translateY(-6px);
    }
    .eyebrow{margin-bottom:4px}
    .hero h1{letter-spacing:-.02em}
    .hero-promise{margin:2px 0 18px}

    .device{
        max-width:778px;
        margin-right:37px;
        transform:translateY(-41px) perspective(1600px) rotateY(-4.8deg) rotateZ(-1.15deg);
    }
    .app-shell{min-height:516px}

    .section-heading-row h2{font-size:36px}
    .highlights{padding-bottom:59px}
    .flow-section{padding-bottom:27px}
    .workspace-grid{min-height:339px}

    .integrations-section{padding-bottom:40px}
    .workflow-section{padding-bottom:39px}
    .capabilities-section{padding-bottom:39px}

    .use-grid article{min-height:80px}
    .use-cases-section{padding-bottom:0}
}

/* KAIROWEB4B — hero optical lock */
@media (min-width:1201px){
    .hero-copy{transform:translateY(-15px)}
    .hero-description{max-width:405px}
    .hero-actions{margin-top:27px}

    .hero-product{padding-top:18px}
    .device{
        margin-right:66px;
        transform:translateY(-18px) perspective(1600px) rotateY(-4.8deg) rotateZ(-1.15deg);
    }
    .app-shell{min-height:536px}
}

/* KAIROWEB4C — uniform-scale vertical lock */
@media (min-width:1201px){
    .hero,.hero-grid{min-height:577px}
    .hero-copy{transform:translateY(-3px)}
    .eyebrow{position:relative;top:11px}
    .hero h1{position:relative;top:8px}
    .hero-promise{position:relative;top:4px}

    .hero-product{margin-bottom:-6px}
    .device{
        transform:translateX(-27px) translateY(-18px) perspective(1600px) rotateY(-4.8deg) rotateZ(-1.15deg);
    }
    .app-shell{min-height:519px}

    .highlights{padding-bottom:48px}
    .flow-section{padding-bottom:22px}
    .workspace-grid{min-height:331px}

    .integrations-section{padding-bottom:36px}
    .workflow-section{padding-bottom:36px}
    .capabilities-section{padding-bottom:32.5px}

    .use-grid article{min-height:66px}
}

/* KAIROWEB4D — optical closure */
@media (min-width:1201px){
    .eyebrow{top:8px}
    .device{
        transform:translateX(-29px) translateY(-18px) perspective(1600px) rotateY(-4.8deg) rotateZ(-1.15deg);
    }
    .app-shell{min-height:507px}
    .use-grid article{min-height:62px}
}

/* KAIROWEB4E — final geometry closure */
@media (min-width:1201px){
    .hero-promise{line-height:1.02}
    .device{
        transform:translateX(-29px) translateY(-24px) perspective(1600px) rotateY(-4.8deg) rotateZ(-1.15deg);
    }
    .use-grid article{padding:11px 13px}
}

/* KAIROWEB4F — micro-type and UI density */
@media (min-width:1201px){
    .device{
        transform:translateX(-29px) translateY(-19px) perspective(1600px) rotateY(-4.8deg) rotateZ(-1.15deg);
    }
    .app-shell{min-height:514px}

    .feature-card h3{font-size:22px}
    .feature-card>p{font-size:12px;line-height:1.34}
    .mini-command strong{font-size:10px}
    .mini-client strong{font-size:10px}
    .mini-client small{font-size:8px}
    .mini-checks{font-size:10px}

    .mode-card strong{font-size:12px}
    .mode-card small{font-size:10px}

    .detail-copy h2{font-size:29px;line-height:1}
    .detail-copy p{font-size:12px;line-height:1.35;margin:6px 0}
    .detail-copy a{font-size:11px}
    .detail-copy.compact h2{font-size:28px}
    .detail-copy.compact p{font-size:11.5px;line-height:1.3}

    .integration-strip small{font-size:9px}

    .workflow-cards h3{font-size:10.5px;line-height:1.12}
    .workflow-cards p{font-size:8.5px;line-height:1.28}
    .crm-card strong,.calendar-card strong{font-size:8px}
    .crm-card small,.calendar-card small{font-size:6.5px}

    .capability-grid strong{font-size:10px}
    .capability-grid small{font-size:8px;line-height:1.25}
    .use-grid p{font-size:9px}

    .workspace-title h3{font-size:18px}
    .workspace-title p{font-size:8px}
    .metrics strong{font-size:16px}
    .metrics small{font-size:7.5px}
    .metrics em{font-size:7px}
    .workspace-lists h4{font-size:9px}
    .task-list,.connection-list{font-size:7.5px}

    .prompt p{font-size:10.5px}
    .execution-list>div{font-size:9.5px}
    .done-card strong{font-size:11.5px}
    .done-card small{font-size:8.5px}
    .chat-input{font-size:9.5px}
}

/* KAIROWEB4G — post-type rhythm compensation */
@media (min-width:1201px){
    .flow-section{padding-bottom:17.375px}
    .integrations-section{padding-bottom:35px}
    .use-grid article{padding:9.5px 13px}
}

/* KAIROWEB4H — hero UI internal fidelity */
@media (min-width:1201px){
    .app-main{padding:33px 80px 16px 25px}
    .execution-list{padding:8px 60px 5px 95px}
    .done-card{
        margin-left:65px;
        margin-right:18px;
        padding:22px 14px;
        transform:translateY(-17px);
    }
    .chat-input{margin-right:-40px}
}

/* KAIROWEB4I — prompt and execution pixel lock */
@media (min-width:1201px){
    .prompt{transform:translate(-3px,-2px)}
    .prompt p{
        width:335px;
        padding:13.5px 14px;
    }
    .execution-list{
        padding:8px 4px 5px 100px;
        margin-right:-10px;
        transform:translateY(2px);
    }
}

/* KAIROWEB4J — prompt optical closure */
@media (min-width:1201px){
    .prompt{
        width:382px;
        max-width:none;
        transform:translate(0,-2px);
    }
    .prompt p{
        width:auto;
        flex:1 1 auto;
    }
}

/* KAIROWEB4L — execution icon and result fidelity */
@media (min-width:1201px){
    .status.success{
        border-radius:50%;
        background:#18a36c;
        color:#fff;
        box-shadow:0 0 0 2px #dff5eb;
        font-size:8px;
        font-weight:800;
    }
    .brand-dot.brand-logo{
        background:transparent;
        border-radius:0;
    }
    .brand-dot.brand-logo img{
        width:15px;
        height:15px;
        object-fit:contain;
    }
    .done-card{margin-left:68px}
}

/* KAIROWEB4M — canonical prompt gradient */
@media (min-width:1201px){
    .prompt p{
        background:linear-gradient(
            90deg,
            #f6f6f6 0%,
            #f0f2fa 7%,
            #edf0fb 14%,
            #eaf0fc 21%,
            #e9eefc 28%,
            #e9eefc 100%
        );
        border-color:#e9edf3;
    }
}
@media (max-width:1200px){
    .shell{width:min(calc(100% - 48px),var(--shell))}
    .hero h1{font-size:94px}.hero-promise{font-size:32px}
    .hero-grid{grid-template-columns:39% 61%}
    .app-shell{grid-template-columns:145px 1fr;min-height:390px}
    .app-sidebar{padding-inline:12px}
    .highlight-grid{gap:8px}.feature-card{padding:16px 13px}.feature-card h3{font-size:17px}
    .workspace-grid{grid-template-columns:28% 54% 18%}
    .integration-strip>div>span{width:46px;height:46px}
    .integration-strip img{width:24px;height:24px}
}
@media (max-width:980px){
    .site-header{height:66px}.nav-shell{grid-template-columns:1fr auto}.primary-nav{display:none}.nav-actions{gap:14px}
    .hero-grid{grid-template-columns:1fr;gap:0;padding-top:28px;padding-bottom:45px}
    .hero-copy{padding:28px 0 18px;max-width:700px}
    .hero h1{font-size:92px}.hero-promise{font-size:34px}
    .hero-product{padding:10px 0}.device{margin:0 auto;max-width:780px;transform:none}
    .highlight-grid{grid-template-columns:repeat(2,1fr)}.feature-card:last-child{grid-column:span 2}
    .split-section,.detail-row{grid-template-columns:1fr}
    .mode-grid{margin-top:12px}
    .workspace-grid{grid-template-columns:1fr}.workspace-copy{padding:8px 0 22px}
    .workspace-window{height:320px;border-radius:15px;margin-bottom:0}.workspace-message{min-height:180px;padding:25px}
    .integration-strip{grid-template-columns:repeat(5,1fr);gap:16px}.workflow-cards{margin-top:8px}
    .capability-grid{grid-template-columns:repeat(3,1fr)}
    .footer-grid{grid-template-columns:1.5fr repeat(4,1fr)}.footer-social{grid-column:1/-1;text-align:left;display:flex;justify-content:space-between}.footer-social>div{justify-content:flex-start}.footer-social p{margin:0}
}
@media (max-width:720px){
    .shell{width:min(calc(100% - 30px),var(--shell))}
    .nav-login{display:none}.brand{font-size:20px}.brand-mark{width:24px;height:24px}.button-small{min-height:34px;padding:0 15px}
    .hero{min-height:auto}.hero-grid{min-height:auto}
    .eyebrow{font-size:13px}.hero h1{font-size:76px}.hero-promise{font-size:29px}.hero-description{font-size:16px}
    .hero-benefits{gap:18px;flex-wrap:wrap}.hero-benefits .benefit{min-width:110px}
    .app-shell{grid-template-columns:118px 1fr;min-height:350px}.app-sidebar{padding:15px 8px}.app-main{padding:14px 13px}.prompt{max-width:88%}.execution-list{padding-left:18px}.done-card{margin-left:18px}
    .section-heading-row{align-items:flex-start;gap:14px;flex-direction:column}.section-heading-row h2{font-size:28px}
    .highlight-grid{grid-template-columns:1fr}.feature-card:last-child{grid-column:auto}
    .mode-grid{grid-template-columns:repeat(2,1fr)}
    .workspace-window{grid-template-columns:82px 1fr}.workspace-sidebar{padding-inline:7px}
    .metrics{grid-template-columns:1fr}.workspace-window{height:auto;min-height:430px}.workspace-lists{grid-template-columns:1fr}
    .integration-strip{grid-template-columns:repeat(3,1fr)}
    .workflow-cards{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg)}.workflow-cards article{min-height:120px}
    .capability-grid{grid-template-columns:repeat(2,1fr)}
    .use-grid{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-social{grid-column:1/-1}
}
@media (max-width:480px){
    .hero h1{font-size:66px}.hero-promise{font-size:27px}
    .hero-actions{gap:20px;flex-wrap:wrap}.button{min-height:44px;padding:0 20px}
    .device-frame{padding:7px;border-radius:20px}.app-shell{grid-template-columns:1fr;min-height:410px}.app-sidebar{display:none}
    .prompt{max-width:95%}.execution-list{padding-left:0}.done-card{margin-left:0}
    .mode-grid,.capability-grid,.use-grid{grid-template-columns:1fr}
    .integration-strip{grid-template-columns:repeat(3,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr}
}