/* Ongmatmedia — Signal & Flow art direction. */
.site-shell { overflow:clip; }
.site-shell .container,.site-shell .hero .container { width:min(100% - 64px,1320px); }

/* Hero: editorial copy + real order flow, without dashboard chrome. */
.site-shell .hero {
  position:relative;
  background:
    radial-gradient(circle at 85% 15%,rgba(20,184,166,.13),transparent 28%),
    radial-gradient(circle at 4% 4%,rgba(37,99,235,.09),transparent 24%),
    #fbfdff;
}
.site-shell .hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(132deg,transparent 0 20%,rgba(37,99,235,.035) 20.1% 20.25%,transparent 20.35%);
  pointer-events:none;
}
.site-shell .hero-surface { min-height:780px; padding:112px 0 122px; }
.site-shell .hero-grid { grid-template-columns:.8fr 1.2fr; align-items:center; gap:88px; }
.site-shell .hero-copy { max-width:535px; }
.site-shell .hero h1 { max-width:560px; margin:0 0 28px; color:#08163b; font-size:clamp(58px,5vw,76px); font-weight:800; line-height:1.04; letter-spacing:-.057em; }
.site-shell .hero-copy>p { max-width:470px; color:#52687a; font-size:15px; line-height:1.85; }
.site-shell .hero-actions { margin-top:38px; }
.site-shell .hero .button { border-radius:12px; box-shadow:0 16px 34px rgba(8,117,238,.18); }

.site-shell .order-stage { position:relative; width:100%; min-height:540px; display:grid; place-items:center; }
.site-shell .signal-line { position:absolute; border:1px solid rgba(18,132,207,.12); border-radius:50%; pointer-events:none; }
.site-shell .signal-line.one { width:620px; height:620px; right:-165px; top:-90px; }
.site-shell .signal-line.two { width:450px; height:450px; right:-80px; top:-5px; border-color:rgba(20,184,166,.15); }
.site-shell .order-window { position:relative; z-index:2; width:100%; overflow:hidden; border:1px solid #cbdbe6; border-radius:25px; background:#fff; box-shadow:0 42px 90px rgba(26,66,96,.18),0 8px 24px rgba(26,66,96,.08); }
.site-shell .order-window-bar { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:22px; min-height:68px; padding:0 26px; border-bottom:1px solid #e1e9ef; background:rgba(255,255,255,.92); }
.site-shell .order-window-bar>div { display:flex; align-items:center; gap:10px; color:#193349; font-size:11px; font-weight:800; }
.site-shell .order-window-bar .logo { width:28px; height:28px; }
.site-shell .order-window-bar small { color:#8294a2; font-size:8px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.site-shell .order-window-bar b { padding:7px 9px; border-radius:8px; background:#eaf3ff; color:#0875ee; font-size:8px; }
.site-shell .order-window-body { padding:34px; background:linear-gradient(145deg,#f8fbfd,#f3f8fa); }
.site-shell .order-window-title { display:flex; align-items:end; justify-content:space-between; gap:25px; }
.site-shell .order-window-title span { display:block; margin-bottom:6px; color:#11937f; font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.site-shell .order-window-title h3 { margin:0; color:#10283b; font-size:28px; letter-spacing:-.045em; }
.site-shell .order-window-title i { color:#708694; font-size:9px; font-style:normal; }
.site-shell .order-service-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:27px; }
.site-shell .order-service-list article { display:grid; grid-template-columns:43px minmax(0,1fr) 20px; align-items:center; gap:13px; min-height:104px; padding:17px; border:1px solid #d2dfe7; border-radius:16px; background:#fff; }
.site-shell .order-service-list article.active { border-color:#258af0; box-shadow:0 10px 25px rgba(8,117,238,.11); }
.site-shell .order-service-list article>span { display:grid; place-items:center; width:43px; height:43px; border-radius:12px; background:#eaf3ff; color:#1877f2; }
.site-shell .order-service-list article:nth-child(2)>span { background:#edf4f5; color:#132d3d; }
.site-shell .order-service-list svg { width:18px; height:18px; }
.site-shell .order-service-list small { display:block; color:#8495a2; font-size:7px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.site-shell .order-service-list strong { display:block; margin-top:5px; overflow:hidden; color:#243d50; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.site-shell .order-service-list article>svg { color:#0875ee; }
.site-shell .order-link { display:block; margin-top:18px; }
.site-shell .order-link>span { display:block; margin-bottom:7px; color:#526f82; font-size:8px; font-weight:800; }
.site-shell .order-link>div { display:flex; align-items:center; height:48px; padding:0 14px; border:1px solid #d2dee6; border-radius:12px; background:#fff; color:#8ba0ae; font-size:9px; }
.site-shell .order-window-body footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:21px; }
.site-shell .order-window-body footer>span { display:flex; align-items:center; gap:8px; color:#5e7889; font-size:8px; font-weight:700; }
.site-shell .order-window-body footer>span i { width:7px; height:7px; border-radius:50%; background:#18b99f; box-shadow:0 0 0 5px rgba(24,185,159,.12); }
.site-shell .order-window-body footer button { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 15px; border:0; border-radius:10px; background:#0875ee; box-shadow:0 10px 22px rgba(8,117,238,.18); color:#fff; font-size:9px; font-weight:800; }
.site-shell .order-window-body footer button svg { width:14px; }

/* Services: two editorial chapters, not cards. */
.site-shell .services-section { padding:190px 0 210px; background:#fff; }
.site-shell .services-section .section-heading { max-width:720px; margin-bottom:115px; }
.site-shell .services-section .section-heading h2 { font-size:clamp(46px,4.8vw,68px); }
.site-shell .service-grid { gap:0; }
.site-shell .service-card,.site-shell .service-card.ink { position:relative; display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:120px; min-height:720px; padding:90px 0; border-radius:0; background:transparent; }
.site-shell .service-card+.service-card { border-top:1px solid #e8eef2; }
.site-shell .service-card.ink { grid-template-columns:1.18fr .82fr; }
.site-shell .service-card.ink .service-copy { order:2; }
.site-shell .service-card.ink .service-visual { order:1; }
.site-shell .service-copy { max-width:430px; }
.site-shell .service-index { margin-bottom:38px; color:#1283ee; font-size:11px; font-weight:800; letter-spacing:.12em; }
.site-shell .ink .service-index { color:#13a88f; }
.site-shell .service-card h3 { max-width:430px; margin:0 0 24px; color:#0d1832; font-size:clamp(39px,4vw,56px); line-height:1.08; }
.site-shell .service-card p,.site-shell .service-card.ink p { max-width:420px; color:#5c7081; font-size:14px; line-height:1.9; }
.site-shell .service-copy>a { margin-top:34px; }
.site-shell .signal-visual { position:relative; min-height:540px; overflow:visible; display:grid; place-items:center; border-radius:0; background:radial-gradient(circle,rgba(37,99,235,.075),transparent 63%); }
.site-shell .ink .signal-visual { background:radial-gradient(circle,rgba(20,184,166,.08),transparent 63%); }
.site-shell .signal-visual::before { display:none; }
.site-shell .signal-core { position:relative; z-index:5; display:grid; place-items:center; width:118px; height:118px; border-radius:35px; background:linear-gradient(145deg,#0875ee,#16a9cd); box-shadow:0 27px 65px rgba(8,117,238,.3); color:#fff; }
.site-shell .ink .signal-core { background:linear-gradient(145deg,#102334,#17a994); box-shadow:0 27px 65px rgba(16,129,116,.28); }
.site-shell .signal-core svg { width:45px; height:45px; }
.site-shell .signal-ring { position:absolute; border:1px solid rgba(8,117,238,.18); border-radius:50%; animation:signal-breathe 5s ease-in-out infinite; }
.site-shell .ink .signal-ring { border-color:rgba(20,184,166,.2); }
.site-shell .ring-one { width:240px; height:240px; }
.site-shell .ring-two { width:370px; height:370px; animation-delay:-1.6s; }
.site-shell .ring-three { width:510px; height:510px; animation-delay:-3.2s; }
.site-shell .signal-dot { position:absolute; z-index:3; width:12px; height:12px; border:3px solid #fff; border-radius:50%; background:#258af0; box-shadow:0 7px 18px rgba(8,117,238,.28); }
.site-shell .ink .signal-dot { background:#19b99f; }
.site-shell .dot-one { transform:translate(116px,-118px); }
.site-shell .dot-two { transform:translate(-185px,55px); }
.site-shell .dot-three { transform:translate(178px,170px); }
@keyframes signal-breathe { 50% { transform:scale(1.025); opacity:.65; } }

/* Process: one continuous line instead of boxed steps. */
.site-shell .how-section { min-height:860px; padding:190px 0; background:linear-gradient(135deg,#f5f9fe,#f2faf8); }
.site-shell .how-section::after { display:none; }
.site-shell .how-section .section-heading { max-width:720px; margin-bottom:105px; }
.site-shell .steps { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:70px; }
.site-shell .steps::before { content:""; position:absolute; top:52px; left:5%; right:5%; height:1px; background:linear-gradient(90deg,#2c8cf1,#20b5ac); }
.site-shell .step { position:relative; z-index:1; min-height:245px; padding:0; border:0!important; }
.site-shell .step+.step { padding-left:0; }
.site-shell .step>span { position:static; display:block; margin-bottom:42px; color:#0c78e8; font-size:12px; letter-spacing:.12em; }
.site-shell .step-icon { width:70px; height:70px; margin-bottom:35px; border-radius:50%; background:#fff; box-shadow:0 15px 38px rgba(24,69,103,.1); }
.site-shell .step h3 { font-size:20px; }
.site-shell .step p { font-size:13px; line-height:1.85; }

/* Proof: quiet split composition. */
.site-shell .why-section { min-height:820px; padding:195px 0; background:linear-gradient(90deg,#fff 0 54%,#f4f8fb 54% 100%); }
.site-shell .why-layout { gap:150px; }
.site-shell .why-layout>div:first-child h2 { max-width:570px; }
.site-shell .why-proof { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.site-shell .proof-header { padding-bottom:33px; border-bottom:1px solid #d8e4eb; }
.site-shell .proof-header strong { font-size:16px; }
.site-shell .proof-list { gap:0; margin:0; padding:0; border:0; }
.site-shell .proof-list span { justify-content:space-between; min-height:72px; border-bottom:1px solid #d8e4eb; color:#314b5d; font-size:12px; }
.site-shell .proof-list .check { order:2; width:20px; }

/* API is the dark interruption in the page rhythm. */
.site-shell .reseller-section { padding:0; background:linear-gradient(115deg,#06172c,#092a43 58%,#0a4146); }
.site-shell .reseller { min-height:720px; padding:135px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.site-shell .reseller::before { opacity:.5; }
.site-shell .code-visual { transform:none; border:1px solid rgba(142,207,220,.16); box-shadow:0 30px 75px rgba(0,0,0,.32); }
.site-shell .reseller:hover .code-visual { transform:translateY(-5px); }

/* Pricing and FAQ return to daylight. */
.site-shell .pricing-section { min-height:800px; padding:190px 0; background:linear-gradient(135deg,#f3faf8,#f5f9fd); }
.site-shell .pricing-layout { gap:160px; }
.site-shell .price-panel { padding:10px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.site-shell .price-row { padding:29px 0; border-color:#d8e4e9; }
.site-shell .faq-section { padding:190px 0; background:#fff; }
.site-shell .faq-layout { gap:155px; }
.site-shell .faq-list details { border-color:#dce5eb; }
.site-shell .faq-list details[open] { background:#f7fafc; }
.site-shell .cta-section { padding:0 0 150px; background:#fff; }
.site-shell .cta-box { min-height:270px; padding:65px 72px; border-radius:28px; background:radial-gradient(circle at 82% 10%,rgba(85,238,216,.3),transparent 25%),linear-gradient(115deg,#0965e9,#0796ca 60%,#12aa91); }

/* Motion is subtle and purposeful. */
html.js .site-shell .reveal,html.js .site-shell .reveal-item { transform:translateY(16px); transition:opacity .58s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1); }
.site-shell .service-copy>a,.site-shell .text-link { transition:gap .25s ease,color .25s ease; }
.site-shell .service-copy>a:hover,.site-shell .text-link:hover { gap:14px; }
.site-shell .order-window { transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease; }
.site-shell .order-stage:hover .order-window { transform:translateY(-5px); box-shadow:0 50px 100px rgba(26,66,96,.22),0 10px 28px rgba(26,66,96,.1); }

@media (prefers-reduced-motion:reduce) {
  .site-shell .signal-ring { animation:none; }
  .site-shell .order-stage:hover .order-window { transform:none; }
}

@media (prefers-color-scheme:dark) and (scripting:none) {
  .site-shell .hero { background:radial-gradient(circle at 85% 15%,rgba(20,184,166,.14),transparent 28%),#081522; }
  .site-shell .hero h1,.site-shell .service-card h3 { color:#f5fbff; }
  .site-shell .services-section,.site-shell .faq-section,.site-shell .cta-section { background:#0b1220; }
  .site-shell .service-card+.service-card { border-color:rgba(148,163,184,.16); }
  .site-shell .why-section { background:linear-gradient(90deg,#0b1220 0 54%,#0e1b29 54% 100%); }
  .site-shell .proof-header,.site-shell .proof-list span { border-color:rgba(148,163,184,.2); }
  .site-shell .proof-list span { color:#c1d0dc; }
}

@media (max-width:1000px) {
  .site-shell .hero-grid { grid-template-columns:1fr; }
  .site-shell .hero-copy { max-width:650px; }
  .site-shell .order-stage { max-width:820px; }
  .site-shell .service-card,.site-shell .service-card.ink { grid-template-columns:1fr; gap:50px; min-height:0; }
  .site-shell .service-card.ink .service-copy { order:1; }
  .site-shell .service-card.ink .service-visual { order:2; }
  .site-shell .why-layout,.site-shell .pricing-layout,.site-shell .faq-layout { gap:85px; }
}

@media (max-width:700px) {
  .site-shell .container,.site-shell .hero .container { width:min(100% - 32px,1320px); }
  .site-shell .hero-surface { min-height:0; padding:72px 0 92px; }
  .site-shell .hero h1 { font-size:46px; }
  .site-shell .hero-grid { gap:58px; }
  .site-shell .order-stage { min-height:0; }
  .site-shell .signal-line { display:none; }
  .site-shell .order-window { border-radius:19px; }
  .site-shell .order-window-bar { grid-template-columns:1fr auto; padding:0 16px; }
  .site-shell .order-window-bar small { display:none; }
  .site-shell .order-window-body { padding:23px 16px; }
  .site-shell .order-window-title i { display:none; }
  .site-shell .order-service-list { grid-template-columns:1fr; }
  .site-shell .order-window-body footer>span { display:none; }
  .site-shell .order-window-body footer { justify-content:flex-end; }
  .site-shell .section,.site-shell .services-section,.site-shell .how-section,.site-shell .why-section,.site-shell .pricing-section,.site-shell .faq-section { min-height:0; padding:120px 0; }
  .site-shell .services-section .section-heading,.site-shell .how-section .section-heading { margin-bottom:70px; }
  .site-shell .service-card,.site-shell .service-card.ink { min-height:0; padding:68px 0; }
  .site-shell .signal-visual { min-height:390px; }
  .site-shell .ring-one { width:190px; height:190px; }
  .site-shell .ring-two { width:280px; height:280px; }
  .site-shell .ring-three { width:370px; height:370px; }
  .site-shell .signal-core { width:96px; height:96px; border-radius:28px; }
  .site-shell .steps { grid-template-columns:1fr; gap:65px; }
  .site-shell .steps::before { top:0; bottom:0; left:34px; right:auto; width:1px; height:auto; }
  .site-shell .step { padding-left:98px; }
  .site-shell .step>span { margin-bottom:18px; }
  .site-shell .step-icon { position:absolute; top:0; left:0; }
  .site-shell .why-section { background:linear-gradient(180deg,#fff,#f4f8fb); }
  .site-shell .why-layout { gap:75px; }
  .site-shell .reseller { min-height:0; padding:110px 0; }
  .site-shell .cta-section { padding:0 0 100px; }
  .site-shell .cta-box { min-height:0; padding:46px 28px; }
}