/* Apps 365 AI - shared design system (homepage + service pages) */
:root{
  --ink:#0F162E; --ink-2:#4A4F63; --ink-3:#7C8196;
  --paper:#FFFFFF; --mist:#F6F6FC; --line:#EAEAF3;
  --violet:#4554EA; --violet-2:#6E63F0; --violet-3:#948CF6; --violet-wash:#E8E8F6;
  --grad:linear-gradient(120deg,#4554EA 0%,#6E63F0 55%,#948CF6 100%);
  --dark:#0B0E1F;
  --shadow-sm:0 1px 2px rgba(15,18,34,.06),0 8px 24px -16px rgba(15,18,34,.30);
  --shadow:0 2px 6px rgba(15,18,34,.05),0 30px 60px -30px rgba(50,40,120,.35);
  --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:15px;padding:13px 24px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px -10px rgba(69,84,234,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(69,84,234,.8)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn .arw{transition:transform .18s}.btn:hover .arw{transform:translateX(3px)}

/* header */
header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:72px}
.brand img{height:30px;width:auto}
.nav-links{display:flex;gap:24px;margin-left:12px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:5px;white-space:nowrap;padding:6px 0}
.nav-links a:hover{color:var(--ink)}
.nav-sp{flex:1}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .login{font-size:14.5px;font-weight:600;color:var(--ink)}
.menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;place-items:center;cursor:pointer}
.nav-in .nav-cta-m{display:none}
/* solutions dropdown / mega-menu */
.has-drop{position:relative}
.has-drop .drop-t{cursor:pointer}
.has-drop::before{content:"";position:absolute;top:100%;left:0;right:-24px;height:16px}
.drop{position:absolute;top:calc(100% + 10px);left:-18px;width:540px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:80}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.drop-grid a{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:10px;transition:background .15s;color:var(--ink)}
.drop-grid a:hover{background:var(--violet-wash)}
.drop-grid .di{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--violet-wash);color:var(--violet);flex:0 0 auto}
.drop-grid .di svg{width:18px;height:18px}
.drop-grid .dt b{display:block;font-size:13.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.drop-grid .dt small{display:block;font-size:11.5px;color:var(--ink-3)}
.drop-foot{display:block;margin-top:6px;padding:11px 12px 4px;font-size:13px;font-weight:700;color:var(--violet);border-top:1px solid var(--line)}
@media(max-width:940px){
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 0 16px;box-shadow:var(--shadow);margin-left:0}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px clamp(18px,5vw,40px);font-size:16px}
  .nav-links.open .nav-cta-m{display:inline-flex;margin:12px clamp(18px,5vw,40px) 2px}
  .menu-btn{display:grid;margin-left:auto}
  .nav-cta{display:none}
  .has-drop{width:100%}
  .has-drop::before{display:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;width:auto;padding:0 clamp(10px,4vw,32px) 8px}
  .nav-links .drop-grid{grid-template-columns:1fr;gap:0}
  .nav-links .drop-grid a{padding:11px 10px;font-size:14px}
  .drop-foot{display:none}
}

/* sections */
section.blk{padding-block:clamp(48px,6vw,84px)}
.sec-head{max-width:660px;margin-bottom:clamp(30px,4vw,50px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,4vw,46px);font-weight:800;margin-top:16px}
.sec-head p{margin-top:16px;color:var(--ink-2);font-size:17px}

/* page hero */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 82% -10%,rgba(110,99,240,.20),transparent 60%);pointer-events:none}
.ph-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding-block:clamp(19px,2.5vw,32px) clamp(38px,5vw,64px)}
@media(max-width:900px){.ph-in{grid-template-columns:1fr;gap:26px}}
.crumb{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.crumb a{color:var(--violet)}
.ph-in h1{font-size:clamp(34px,5vw,58px);font-weight:800;margin:16px 0 0}
.ph-in .lede{margin-top:18px;font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:52ch}
.ph-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ph-trust{margin-top:20px;font-size:13.5px;color:var(--ink-3)}
.ph-trust b{color:var(--ink)}

/* clean service hero visual */
.svc-visual{position:relative;aspect-ratio:4/3;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,#211c4a,#0d0c24);box-shadow:var(--shadow);display:grid;place-items:center}
.svc-visual::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 0);background-size:22px 22px}
.svc-visual::after{content:"";position:absolute;width:60%;height:60%;left:50%;top:48%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(110,99,240,.6),transparent 62%);filter:blur(30px)}
.svc-ico{position:relative;width:118px;height:118px;border-radius:28px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 24px 50px -18px rgba(69,84,234,.8)}
.svc-ico svg{width:58px;height:58px}
.svc-badge{position:absolute;z-index:2;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:9px 13px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.svc-badge .d{width:8px;height:8px;border-radius:50%;background:#22c55e}
.sb1{top:12%;left:6%}.sb2{bottom:12%;right:6%}

/* benefits */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.grid3{grid-template-columns:1fr}}
.benefit{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:transform .2s,box-shadow .2s,border-color .2s}
.benefit:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.benefit .bi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--violet-wash);color:var(--violet);margin-bottom:14px}
.benefit h3{font-size:19px;font-weight:700}
.benefit p{margin-top:8px;color:var(--ink-2);font-size:14.5px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.steps{grid-template-columns:1fr}}
.step{padding:24px 22px 28px;border-left:1px dashed var(--line)}
.step:first-child{border-left:0}
.step .num{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--violet);letter-spacing:.1em}
.step h3{font-size:18px;font-weight:700;margin:12px 0 6px}
.step p{color:var(--ink-2);font-size:14px}

/* faq */
.faq{max-width:820px;margin-inline:auto;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;gap:16px;align-items:center;font-weight:700;font-size:16px;font-family:"Plus Jakarta Sans",sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{color:var(--violet);font-family:"JetBrains Mono",monospace;transition:transform .2s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .a{padding:0 22px 20px;color:var(--ink-2);font-size:15px}

/* cta */
.cta{position:relative;overflow:hidden;border-radius:32px;background:linear-gradient(150deg,#171d3a,#0b0e1f);color:#fff;padding:clamp(40px,6vw,68px);text-align:center;box-shadow:var(--shadow)}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% -10%,rgba(110,99,240,.4),transparent 60%)}
.cta h2{position:relative;font-size:clamp(28px,4.4vw,48px);font-weight:800;color:#fff;max-width:20ch;margin-inline:auto}
.cta p{position:relative;color:#b9beda;margin-top:14px;font-size:17px}
.cta .ph-cta{position:relative;justify-content:center;margin-top:26px}
.cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.cta .btn-ghost:hover{background:#fff;color:var(--ink)}

/* footer */
footer{background:var(--ink);color:#cfd2e0;padding-block:52px 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.foot-grid{grid-template-columns:1fr}}
.foot-grid img{height:30px;filter:brightness(0) invert(1);margin-bottom:14px}
.foot-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:22px;letter-spacing:.02em}
.foot-tag{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:16px;color:#fff;margin:12px 0}
.foot-grid p{font-size:14px;color:#9aa0b8;max-width:32ch}
.fcol h4{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7a80a0;margin:0 0 14px}
.fcol a{display:block;padding:5px 0;font-size:14px;color:#cfd2e0}
.fcol a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#7a80a0}
.foot-legal a{color:#9aa0b8}.foot-legal a:hover{color:#fff}
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#c7cbe0;transition:transform .16s,background .16s,color .16s,border-color .16s}
.foot-social a:hover{background:var(--violet);border-color:var(--violet);color:#fff;transform:translateY(-2px)}
.foot-social svg{width:19px;height:19px}

/* ---------- Otto chat widget ---------- */
.otto-launch{position:fixed;right:22px;bottom:22px;z-index:180;display:inline-flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:15px;color:#fff;background:var(--grad);border:none;border-radius:999px;padding:9px 20px 9px 9px;cursor:pointer;box-shadow:0 18px 40px -14px rgba(69,84,234,.85);animation:opulse 2.8s infinite;transition:transform .15s}
.otto-launch:hover{transform:translateY(-2px)}
.otto-launch .oi{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:0 0 auto}
.otto-launch .oi img{width:23px;filter:brightness(0) invert(1)}
@keyframes opulse{0%{box-shadow:0 18px 40px -14px rgba(69,84,234,.85),0 0 0 0 rgba(69,84,234,.45)}70%{box-shadow:0 18px 40px -14px rgba(69,84,234,.85),0 0 0 14px rgba(69,84,234,0)}100%{box-shadow:0 18px 40px -14px rgba(69,84,234,.85),0 0 0 0 rgba(69,84,234,0)}}
.otto-backdrop{position:fixed;inset:0;z-index:190;background:rgba(15,22,46,.5);backdrop-filter:blur(3px);animation:ofade .25s ease}
@keyframes ofade{from{opacity:0}to{opacity:1}}
.otto-bubble{position:fixed;right:22px;bottom:22px;z-index:200;width:344px;max-width:calc(100vw - 32px)}
@keyframes ottoIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.otto-inner{position:relative;background:#fff;border-radius:28px;box-shadow:0 44px 100px -22px rgba(20,10,80,.55);overflow:hidden;animation:ottoIn .3s cubic-bezier(.2,.9,.2,1)}
.otto-inner::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);z-index:6}
.otto-head{display:flex;align-items:center;gap:12px;padding:18px 16px 12px}
.otto-ava{width:48px;height:48px;border-radius:50%;background:var(--violet-wash);display:grid;place-items:center;flex:0 0 auto}
.otto-ava img{width:31px}
.otto-head .oh{flex:1}
.otto-head b{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:18px;color:var(--ink);line-height:1.15}
.otto-head small{font-size:13px;color:var(--ink-3)}
.otto-x{width:36px;height:36px;border-radius:50%;background:#eef0f5;border:none;color:var(--ink-2);font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;flex:0 0 auto;transition:background .15s}
.otto-x:hover{background:#e1e4ec}
.otto-video{height:min(40vh,280px);aspect-ratio:1/1;width:auto;max-width:calc(100% - 32px);margin:2px auto 0;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#211c4a,#0d0c24);position:relative;cursor:pointer}
.otto-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.otto-cap{padding:14px 20px 2px;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.45;text-align:center}
.otto-form{padding:10px 16px 18px;display:grid;gap:9px}
.otto-form input,.otto-form textarea{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.otto-form input:focus,.otto-form textarea:focus{outline:none;border-color:var(--violet)}
.otto-form textarea{resize:none}
.otto-form .btn{width:100%;justify-content:center;margin-top:2px}
.otto-hp{position:absolute!important;left:-9999px}
.otto-note{font-size:12.5px;color:var(--ink-3);text-align:center}
.otto-note.ok{color:#1f8a5b}.otto-note.err{color:#d33f27}
@media(max-width:520px){.otto-bubble{right:10px;left:10px;bottom:10px;width:auto}.otto-launch{right:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}