/* Tracis LP final v3 */
:root {
    --blue:#005be8;
    --blue-2:#1e90ff;
    --sky:#21b7ee;
    --navy:#061b64;
    --text:#0f172a;
    --muted:#52677f;
    --line:#dbeafe;
    --white:#fff;
    --shadow:0 24px 70px rgba(6,27,100,.13);
    --shadow-blue:0 28px 70px rgba(0,91,232,.25);
    --max:1180px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:92px
}

body {
    margin:0;
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
    line-height:1.75;
    background:radial-gradient(circle at top right,rgba(33,183,238,.18),transparent 34rem),radial-gradient(circle at 10% 40%,rgba(0,91,232,.09),transparent 28rem),linear-gradient(180deg,#fff 0%,#f7fbff 54%,#fff 100%)
}

body.is-menu-open {
    overflow:hidden
}

a {
    color:inherit;
    text-decoration:none
}

img,svg {
    display:block;
    max-width:100%
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
}

.site-header {
    position:sticky;
    top:0;
    z-index:100;
    height:82px;
    display:flex;
    align-items:center;
    gap:28px;
    padding:0 clamp(20px,4vw,56px);
    background:rgba(255,255,255,.9);
    border-bottom:1px solid rgba(219,234,254,.82);
    backdrop-filter:blur(18px)
}

.site-header.is-scrolled {
    box-shadow:0 16px 34px rgba(6,27,100,.08)
}

.brand {
    flex-shrink:0;
    display:inline-flex;
    align-items:center
}

.brand img {
    width:176px;
    height:auto
}

.global-nav {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:clamp(16px,2vw,28px);
    color:var(--navy);
    font-size:14px;
    font-weight:800
}

.global-nav a {
    position:relative;
    white-space:nowrap
}

.global-nav a::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:0;
    height:2px;
    border-radius:999px;
    background:var(--blue);
    transition:width .22s ease
}

.global-nav a:hover::after {
    width:100%
}

.header-cta {
    flex-shrink:0;
    padding:12px 20px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--blue-2));
    font-size:14px;
    font-weight:900;
    box-shadow:0 14px 28px rgba(0,91,232,.26)
}

.menu-toggle {
    display:none;
    width:42px;
    height:42px;
    margin-left:auto;
    padding:0;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff
}

.menu-toggle span {
    display:block;
    width:20px;
    height:2px;
    margin:5px auto;
    border-radius:999px;
    background:var(--navy)
}

main {
    overflow:hidden
}

.hero {
    padding:clamp(26px,4vw,44px) 20px clamp(48px,7vw,76px)
}

.hero-shell {
    position:relative;
    max-width:1240px;
    margin:0 auto;
    padding:clamp(16px,2.2vw,24px);
    border:1px solid rgba(191,219,254,.9);
    border-radius:34px;
    background:radial-gradient(circle at right top,rgba(33,183,238,.18),transparent 24rem),linear-gradient(135deg,#f7fbff 0%,#edf7ff 48%,#e4f6ff 100%);
    box-shadow:var(--shadow);
    text-align:center
}

.hero-visual {
    width:100%;
    border-radius:22px;
    box-shadow:0 26px 60px rgba(6,27,100,.15)
}

.hero-cta-area {
    margin-top:clamp(20px,3.2vw,30px)
}

.hero-marketplace {
    margin:0 0 20px;
    color:var(--navy);
    font-size:21px;
    font-weight:900;
    line-height:1.65
}

.hero-marketplace span {
    color:var(--blue)
}

.hero-actions {
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap
}

.button {
    display:inline-flex;
    min-width:190px;
    min-height:54px;
    align-items:center;
    justify-content:center;
    padding:14px 26px;
    border-radius:999px;
    font-weight:900;
    transition:transform .2s ease,box-shadow .2s ease
}

.button:hover {
    transform:translateY(-2px)
}

.button.primary {
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--blue-2));
    box-shadow:var(--shadow-blue)
}

.button.secondary {
    color:var(--blue);
    background:#fff;
    border:1px solid rgba(0,91,232,.36)
}

.section {
    max-width:var(--max);
    margin:0 auto;
    padding:clamp(58px,6.8vw,86px) 20px
}

.section-heading {
    max-width:1200px;
    margin:0 auto clamp(28px,4.2vw,42px);
    text-align:center
}

@media (min-width: 769px){
  #pricing .section-heading p{
    white-space: nowrap;
  }
}

.section-kicker {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 0 12px;
    padding:7px 17px;
    border-radius:999px;
    color:var(--blue);
    background:#eaf4ff;
    font-size:13px;
    font-weight:900;
    letter-spacing:0;
    text-transform:uppercase
}

.section-kicker.light {
    color:#fff;
    background:rgba(255,255,255,.15)
}

h2,h3,p {
    margin-top:0
}

.section-heading h2 {
    margin-bottom:12px;
    color:var(--navy);
    font-size:48px;
    line-height:1.22;
    letter-spacing:0
}

.section-heading p {
    margin-bottom:0;
    color:var(--muted);
    font-size:16px;
    font-weight:700
}

.about-panel {
    display:grid;
    grid-template-columns: .9fr 1.5fr;
    gap:40px;
    align-items:center;
    padding:clamp(30px,4.2vw,46px);
    border:1px solid rgba(191,219,254,.85);
    border-radius:26px;
    background:linear-gradient(135deg,#fff,#f2f9ff);
    box-shadow:0 20px 54px rgba(6,27,100,.08)
}

.about-copy h3 {
    margin-bottom:16px;
    color:var(--navy);
    font-size:32px;
    line-height:1.35;
    letter-spacing:0
}

.about-copy p {
    margin-bottom:0;
    color:#26405f;
    font-size:15.5px;
    font-weight:700
}

.about-flow {
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:16px;
    align-items:center
}

.flow-item {
    min-height:140px;
    display:grid;
    place-items:center;
    gap:12px;
    padding:26px 18px;
    text-align:center;
    color:var(--navy);
    font-weight:900;
    border:1px solid rgba(191,219,254,.95);
    border-radius:18px;
    background:rgba(255,255,255,.84);
    box-shadow:0 16px 34px rgba(6,27,100,.07)
}

.flow-item span {
    white-space:nowrap;
    line-height:1.55
}

.flow-icon {
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    color:var(--blue);
    border-radius:18px;
    background:linear-gradient(180deg,#eaf6ff,#fff);
    border:1px solid #cfe7ff
}

.flow-icon svg {
    width:44px;
    height:44px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round
}

.flow-arrow {
    color:var(--blue);
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(191,219,254,.95);
    box-shadow:0 12px 26px rgba(6,27,100,.07);
    font-size:26px;
    font-weight:900
}

.compare {
    padding-top:clamp(44px,5.8vw,74px)
}

.compare-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px
}

.compare-card {
    position:relative;
    min-height:300px;
    padding:34px;
    border:1px solid rgba(191,219,254,.95);
    border-radius:24px;
    background:#fff;
    box-shadow:0 18px 42px rgba(6,27,100,.07);
    overflow:hidden
}

.compare-card::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:5px;
    background:#b9c7db
}

.compare-card.after {
    color:#fff;
    background:linear-gradient(135deg,#061b64,#005be8);
    border:none;
    box-shadow:var(--shadow-blue)
}

.compare-card.after::before {
    background:var(--sky)
}

.compare-card span {
    display:inline-flex;
    margin-bottom:18px;
    color:var(--blue);
    font-size:13px;
    font-weight:900;
    text-transform:uppercase
}

.compare-card.after span {
    color:#9be2ff
}

.compare-card h3 {
    margin-bottom:18px;
    color:var(--navy);
    font-size:28px;
    line-height:1.32
}

.compare-card.after h3 {
    color:#fff
}

.compare-card ul {
    display:grid;
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
    color:var(--muted);
    font-weight:800
}

.compare-card.after ul {
    color:rgba(255,255,255,.9)
}

.compare-card li {
    position:relative;
    padding-left:22px
}

.compare-card li::before {
    content:"";
    position:absolute;
    left:0;
    top:.75em;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--blue)
}

.compare-card.after li::before {
    background:#9be2ff
}

.solution {
    max-width:none;
    background:linear-gradient(180deg,rgba(247,251,255,0),#f1f8ff 12%,#f1f8ff 88%,rgba(247,251,255,0))
}

.solution>* {
    max-width:var(--max);
    margin-left:auto;
    margin-right:auto
}

.solution-steps {
    display:grid;
    grid-template-columns:1fr 46px 1fr 46px 1fr;
    align-items:stretch;
    gap:12px;
    margin-bottom:26px
}

.step-card {
    position:relative;
    min-height:252px;
    display:flex;
    flex-direction:column;
    padding:28px;
    border:1px solid rgba(191,219,254,.85);
    border-radius:22px;
    background:#fff;
    box-shadow:0 18px 42px rgba(6,27,100,.08)
}

.step-card::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:5px;
    border-radius:22px 22px 0 0;
    background:linear-gradient(90deg,var(--blue),var(--sky))
}

.step-head {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:13px
}

.step-number {
    width:36px;
    height:36px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:var(--blue);
    font-weight:900
}

.step-card h3 {
    margin-bottom:0;
    color:var(--navy);
    font-size:19px
}

.step-card p {
    color:#415975;
    font-size:15px;
    font-weight:700
}

.step-visual {
    height:96px;
    display:grid;
    place-items:center;
    margin:2px 0 16px;
    border:1px solid #dbeafe;
    border-radius:18px;
    background:linear-gradient(135deg,#f8fcff,#eaf6ff)
}

.step-visual svg {
    width:112px;
    height:76px;
    fill:none;
    stroke:var(--blue);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round
}

.step-demo,.step-checks,.step-report {
    margin-top:auto;
    padding:16px;
    border-radius:16px;
    background:#f5f9ff;
    border:1px solid #e1eeff
}

.step-demo {
    display:flex;
    justify-content:space-between;
    align-items:center
}

.step-demo span {
    font-weight:800
}

.step-demo b {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--blue);
    color:#fff
}

.step-checks {
    display:grid;
    gap:8px
}

.step-checks span {
    position:relative;
    padding-left:26px;
    font-weight:800
}

.step-checks span::before {
    content:"";
    position:absolute;
    left:0;
    top:.55em;
    width:13px;
    height:7px;
    border-left:3px solid var(--blue);
    border-bottom:3px solid var(--blue);
    transform:rotate(-45deg)
}

.step-report {
    display:grid;
    gap:10px
}

.step-report span {
    padding-bottom:8px;
    border-bottom:4px solid #cbdcf2;
    color:var(--blue);
    font-weight:900
}

.step-separator {
    display:grid;
    place-items:center;
    color:var(--blue);
    font-size:52px;
    font-weight:200
}

.automation-map {
    display:grid;
    grid-template-columns:1fr 1.05fr .82fr 1.18fr;
    gap:16px;
    align-items:center;
    padding:20px;
    border:1px solid rgba(191,219,254,.9);
    border-radius:24px;
    background:
        linear-gradient(90deg,rgba(0,91,232,.09) 1px,transparent 1px),
        linear-gradient(180deg,rgba(0,91,232,.07) 1px,transparent 1px),
        #fff;
    background-size:34px 34px;
    box-shadow:0 20px 54px rgba(6,27,100,.08)
}

.map-node,
.map-hub,
.map-stack {
    min-height:178px;
    height:178px;
    position:relative;
    display:grid;
    align-content:start;
    gap:8px;
    padding:20px;
    border-radius:18px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(191,219,254,.95);
    box-shadow:0 14px 34px rgba(6,27,100,.07)
}

.map-node,
.map-hub {
    grid-template-rows:18px 58px 34px;
    align-content:center
}

.map-node strong,
.map-hub img {
    align-self:center
}

.map-node p,
.map-hub p {
    align-self:start
}

.map-node::after,
.map-hub::after,
.map-stack::after {
    content:"";
    position:absolute;
    top:50%;
    right:-18px;
    width:22px;
    height:2px;
    background:var(--blue)
}

.map-result::after {
    display:none
}

.map-node span,
.map-hub span {
    color:var(--blue);
    font-size:13px;
    font-weight:900;
    text-transform:uppercase
}

.map-stack > span {
    color:#fff;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase
}

.map-node strong {
    color:var(--navy);
    font-size:22px;
    line-height:1.25
}

.map-node p {
    margin:0;
    color:var(--muted);
    font-size:14px;
    font-weight:800
}

.map-hub {
    justify-items:start;
    text-align:left;
    background:linear-gradient(145deg,#f8fcff,#eaf6ff)
}

.map-hub img {
    width:132px;
    margin-top:0;
    filter:drop-shadow(0 8px 12px rgba(6,27,100,.12))
}

.map-hub p {
    margin:0;
    color:var(--muted);
    font-size:14px;
    font-weight:800
}

.map-stack {
    gap:10px;
    background:linear-gradient(145deg,#005be8,#21b7ee);
    grid-template-rows:18px 44px 44px;
    align-content:center
}

.map-stack div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:44px;
    padding:8px 12px;
    border-radius:10px;
    color:#fff;
    background:rgba(255,255,255,.16);
    font-weight:900
}

.map-stack div::after {
    content:"";
    width:30px;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.7)
}

.benefits {
    padding-top:clamp(44px,5.8vw,74px)
}

.benefit-band {
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    overflow:hidden;
    border-radius:24px;
    background:linear-gradient(135deg,#073ca7,#005be8 48%,#071d63 100%);
    box-shadow:var(--shadow-blue)
}

.benefit-item {
    position:relative;
    min-height:260px;
    padding:34px 28px;
    color:#fff;
    overflow:hidden
}

.benefit-item:not(:last-child) {
    border-right:1px solid rgba(255,255,255,.28)
}

.benefit-item::after {
    content:"";
    position:absolute;
    right:-46px;
    bottom:-46px;
    width:140px;
    height:140px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.14)
}

.benefit-item::before {
    content:"";
    display:block;
    width:44px;
    height:44px;
    margin-bottom:18px;
    border-radius:12px;
    background:
        linear-gradient(135deg,rgba(255,255,255,.92) 0 24%,transparent 24% 42%,rgba(255,255,255,.62) 42% 68%,transparent 68%),
        rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.2)
}

.benefit-number {
    display:block;
    margin-bottom:14px;
    color:#96d9ff;
    font-size:15px;
    font-weight:900;
    letter-spacing:0
}

.benefit-item strong {
    min-height:58px;
    display:flex;
    align-items:flex-end;
    gap:3px;
    margin-bottom:10px;
    font-size:46px;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap
}

.benefit-prefix {
    display:inline-flex;
    margin:0 4px 4px 0;
    font-size:18px;
    line-height:1;
    color:#96d9ff;
    font-weight:900
}

.benefit-item strong span {
    font-size:.48em
}

.benefit-item strong .benefit-prefix {
    font-size:18px
}

.benefit-item h3 {
    margin-bottom:10px;
    font-size:19px;
    line-height:1.35;
    white-space:nowrap
}

.benefit-item p {
    margin-bottom:0;
    color:rgba(255,255,255,.88);
    font-size:14px;
    font-weight:700
}

.price-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    align-items:stretch
}

.price-card {
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:340px;
    padding:54px 38px 32px;
    border:1px solid rgba(191,219,254,.95);
    border-radius:28px;
    background:#fff;
    box-shadow:0 18px 42px rgba(6,27,100,.08)
}

.price-card.featured {
    color:#fff;
    background:linear-gradient(145deg,#005be8,#21b7ee);
    border:none;
    box-shadow:var(--shadow-blue);
    transform:none
}

.recommend {
    position:absolute;
    inset:0 0 auto;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:28px 28px 0 0;
    background:rgba(0,0,0,.13);
    color:#fff;
    font-size:14px;
    font-weight:900
}

.plan-name {
    margin:0 0 16px;
    color:var(--blue);
    font-weight:900
}

.featured .plan-name {
    margin-top:0;
    color:#fff
}

.price-card h3 {
    margin-bottom:20px;
    color:var(--navy);
    font-size:36px;
    line-height:1.16;
    letter-spacing:0
}

.featured h3 {
    color:#fff
}

.price-card ul {
    margin:0 0 28px;
    padding-left:20px;
    color:#334155;
    font-weight:800
}

.featured ul {
    color:#fff
}

.price-card a {
    margin-top:auto;
    display:flex;
    justify-content:center;
    padding:13px 20px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-weight:900
}

.price-disabled {
    margin-top:auto;
    display:flex;
    justify-content:center;
    padding:13px 20px;
    border-radius:999px;
    background:#e2e8f0;
    color:#64748b;
    font-weight:900;
    cursor:not-allowed
}

.featured a {
    background:#fff;
    color:var(--blue)
}

.install {
    max-width:none;
    background:linear-gradient(180deg,#fff 0%,#f1f8ff 100%)
}

.install>* {
    max-width:var(--max);
    margin-left:auto;
    margin-right:auto
}

.start-requirements {
    margin-bottom:28px;
    padding:28px 32px;
    border:1px solid rgba(191,219,254,.95);
    border-radius:22px;
    background:#fff;
    box-shadow:0 14px 34px rgba(6,27,100,.07)
}

.start-requirements-label {
    margin:0 0 16px;
    color:var(--blue);
    font-size:13px;
    font-weight:900
}

.start-requirements-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:stretch
}

.start-requirements h3 {
    margin:0 0 14px;
    color:var(--navy);
    font-size:21px
}

.start-requirements ul {
    margin:0;
    padding-left:1.4em;
    color:var(--text);
    font-weight:700
}

.start-requirements li+li {
    margin-top:8px
}

.start-requirements-scope {
    padding-left:28px;
    border-left:1px solid var(--line)
}

@media (max-width:760px) {
    .start-requirements {
        padding:26px 22px
    }

    .start-requirements-grid {
        grid-template-columns:1fr;
        gap:22px
    }

    .start-requirements-scope {
        padding:22px 0 0;
        border-left:0;
        border-top:1px solid var(--line)
    }
}
.install-steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}

.install-steps article {
    position:relative;
    min-height:210px;
    padding:28px 24px 30px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(191,219,254,.95);
    box-shadow:0 14px 34px rgba(6,27,100,.07);
    overflow:hidden
}

.install-steps article::after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--blue),var(--sky))
}

.install-icon {
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    color:var(--blue);
    border-radius:16px;
    background:linear-gradient(180deg,#eaf6ff,#fff);
    border:1px solid #cfe7ff
}

.install-icon svg {
    width:36px;
    height:36px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round
}

.install-steps span {
    display:inline-flex;
    margin-bottom:12px;
    color:var(--blue);
    font-weight:900;
    letter-spacing:0
}

.install-steps h3 {
    margin-bottom:10px;
    color:var(--navy);
    font-size:20px;
    line-height:1.35
}

.install-steps p {
    margin-bottom:0;
    color:var(--muted);
    font-size:14px;
    font-weight:700
}

.docs {
    max-width:none;
    background:#fff
}

.docs>* {
    max-width:var(--max);
    margin-left:auto;
    margin-right:auto
}

.docs-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.docs-card {
    min-height:260px;
    display:flex;
    flex-direction:column;
    padding:30px 28px;
    border:1px solid rgba(191,219,254,.95);
    border-radius:22px;
    background:linear-gradient(180deg,#fff,#f7fbff);
    box-shadow:0 14px 34px rgba(6,27,100,.07)
}

.docs-card span {
    display:inline-flex;
    width:max-content;
    margin-bottom:16px;
    padding:6px 13px;
    border-radius:999px;
    color:var(--blue);
    background:#eaf4ff;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase
}

.docs-card h3 {
    margin-bottom:12px;
    color:var(--navy);
    font-size:24px;
    line-height:1.32
}

.docs-card p {
    margin-bottom:22px;
    color:var(--muted);
    font-size:15px;
    font-weight:700
}

.docs-card a {
    margin-top:auto;
    display:inline-flex;
    justify-content:center;
    padding:12px 18px;
    border-radius:999px;
    color:#fff;
    background:var(--blue);
    font-weight:900
}

.contact-faq {
    padding-top:clamp(54px,6vw,78px)
}

.contact-page {
    max-width:none;
    min-height:calc(100vh - 82px);
    background:linear-gradient(180deg,#f7fbff 0%,#fff 100%)
}

.contact-page-shell {
    max-width:var(--max);
    display:grid;
    gap:28px;
    margin:0 auto
}

.contact-page-intro {
    max-width:760px
}

.contact-page-intro h1 {
    margin:0 0 14px;
    color:var(--navy);
    font-size:clamp(38px,6vw,62px);
    line-height:1.12;
    letter-spacing:0
}

.contact-page-intro p {
    margin:0;
    color:var(--muted);
    font-size:17px;
    font-weight:700
}

.contact-page-panel {
    width:min(960px,100%)
}

.contact-faq-grid {
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:24px;
    align-items:stretch
}

.faq-panel {
    padding:34px;
    border-radius:26px;
    background:#fff;
    border:1px solid rgba(191,219,254,.95);
    box-shadow:0 18px 42px rgba(6,27,100,.07)
}

.faq-panel h2 {
    margin-bottom:22px;
    color:var(--navy);
    font-size:36px;
    letter-spacing:0
}

.faq-list {
    display:grid;
    gap:10px
}

details {
    border:1px solid rgba(191,219,254,.9);
    border-radius:14px;
    background:#fff;
    overflow:hidden
}

summary {
    cursor:pointer;
    list-style:none;
    padding:17px 18px;
    color:var(--navy);
    font-weight:900;
    font-size:14px
}

summary::-webkit-details-marker {
    display:none
}

summary::after {
    content:"+";
    float:right;
    color:var(--blue);
    font-size:22px;
    line-height:1
}

details[open] summary::after {
    content:"-"
}

details p {
    margin:0;
    padding:0 18px 18px;
    color:var(--muted);
    font-size:14px;
    font-weight:700
}

.contact-panel {
    padding:clamp(30px,4vw,44px);
    border-radius:26px;
    background:#fff;
    border:1px solid rgba(191,219,254,.95);
    box-shadow:0 18px 42px rgba(6,27,100,.08)
}

.contact-panel h2 {
    margin-bottom:12px;
    color:var(--navy);
    font-size:40px;
    line-height:1.25;
    letter-spacing:0
}

.contact-panel>p:not(.section-kicker):not(.contact-status) {
    margin-bottom:26px;
    color:var(--muted);
    font-weight:700
}

.contact-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px
}

.contact-open,
.contact-trial {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:190px;
    min-height:50px;
    padding:13px 22px;
    border-radius:999px;
    font:inherit;
    font-weight:900
}

.contact-open {
    border:0;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--sky));
    box-shadow:0 16px 34px rgba(0,91,232,.22)
}

.contact-trial {
    color:var(--blue);
    background:#edf6ff;
    border:1px solid #cfe7ff
}

.contact-form {
    display:grid;
    gap:18px
}

.form-row {
    display:grid;
    grid-template-columns:168px 1fr;
    gap:18px;
    align-items:center
}

.form-row.align-top {
    align-items:start
}

.form-row label {
    color:var(--navy);
    font-size:14px;
    font-weight:900
}

.required {
    margin-left:4px;
    color:#e11d48
}

.form-field {
    min-width:0
}

.form-field-split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}

.contact-form input,
.contact-form textarea {
    width:100%;
    border:1px solid #cfe0f5;
    border-radius:12px;
    background:#f8fbff;
    color:var(--text);
    font:inherit;
    font-weight:700;
    outline:none;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}

.contact-form input {
    min-height:48px;
    padding:0 14px
}

.contact-form textarea {
    min-height:150px;
    resize:vertical;
    padding:13px 14px
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color:var(--blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(0,91,232,.12)
}

.policy-area {
    display:grid;
    gap:12px;
    margin-top:4px
}

.policy-area>p {
    margin:0;
    color:#415975;
    font-size:13px;
    font-weight:700
}

.policy-area a {
    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:3px
}

.policy-box {
    max-height:230px;
    overflow:auto;
    padding:18px;
    border:1px solid #cfe0f5;
    border-radius:14px;
    background:#f8fbff
}

.policy-box p {
    margin:0 0 12px;
    color:#334155;
    font-size:13px;
    line-height:1.75;
    font-weight:700
}

.policy-box p:last-child {
    margin-bottom:0
}

.agreement-check {
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--navy);
    font-size:14px;
    font-weight:900
}

.agreement-check input {
    width:18px;
    min-width:18px;
    height:18px;
    min-height:18px;
    margin-top:4px;
    accent-color:var(--blue)
}

.contact-submit {
    width:100%;
    border:0;
    cursor:pointer;
    padding:15px 22px;
    border-radius:999px;
    font:inherit;
    font-weight:900
}

.contact-submit {
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--sky));
    box-shadow:0 16px 34px rgba(0,91,232,.22)
}

.contact-submit:disabled {
    cursor:not-allowed;
    opacity:.62;
    box-shadow:none
}

.contact-status {
    min-height:24px;
    margin:18px 0 0;
    color:var(--muted);
    font-size:14px;
    font-weight:800
}

.contact-status.is-success {
    color:#047857
}

.contact-status.is-error {
    color:#be123c
}

.cta-panel {
    padding:clamp(34px,4vw,48px);
    border-radius:26px;
    color:#fff;
    background:radial-gradient(circle at top right,rgba(33,183,238,.3),transparent 18rem),linear-gradient(135deg,#061b64,#005be8);
    box-shadow:var(--shadow-blue)
}

.cta-panel h2 {
    margin-bottom:14px;
    font-size:46px;
    line-height:1.25;
    letter-spacing:0
}

.cta-panel p {
    color:rgba(255,255,255,.86);
    font-weight:700
}

.cta-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:28px
}

.cta-button {
    display:inline-flex;
    min-width:190px;
    justify-content:center;
    padding:14px 22px;
    border-radius:999px;
    font-weight:900
}

.cta-button.white {
    color:var(--blue);
    background:#fff
}

.cta-button.outline {
    color:#fff;
    border:1px solid rgba(255,255,255,.45)
}

.cta-mail {
    margin-top:24px;
    font-size:14px
}

.cta-mail a {
    color:#fff;
    text-decoration:underline
}

.site-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:34px clamp(22px,5vw,64px);
    border-top:1px solid var(--line);
    background:#fff;
    color:var(--muted);
    font-weight:700
}

.site-footer img {
    width:148px;
    margin-bottom:8px
}

.site-footer p {
    margin:0
}

.site-footer a {
    color:var(--blue)
}

.reveal {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .72s ease,transform .72s ease
}

.reveal.is-visible {
    opacity:1;
    transform:translateY(0)
}

@media (max-width:1100px) {
.global-nav {
        gap:12px;
        font-size:13px
    }

.about-panel {
        grid-template-columns:1fr
    }

.about-flow {
        grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr) auto minmax(150px,1fr)
    }

}

@media (max-width:980px) {
.about-flow,.compare-grid,.solution-steps,.automation-map,.install-steps,.price-grid,.docs-grid,.contact-faq-grid {
        grid-template-columns:1fr
    }

.flow-arrow,.step-separator {
        transform:rotate(90deg);
        height:28px
    }

.flow-item {
        min-height:auto
    }

.map-node::after,
.map-hub::after,
.map-stack::after {
        top:auto;
        right:auto;
        left:50%;
        bottom:-18px;
        width:2px;
        height:22px
    }

.map-node,
.map-hub,
.map-stack {
        height:auto
    }

.benefit-band {
        grid-template-columns:1fr 1fr
    }

.benefit-item:nth-child(2) {
        border-right:none
    }

.price-card.featured {
        transform:none
    }

}

@media (max-width:760px) {
html {
        scroll-padding-top:72px
    }

.site-header {
        height:70px;
        padding:0 18px
    }

.brand img {
        width:142px
    }

.header-cta {
        display:none
    }

.menu-toggle {
        display:block
    }

.global-nav {
        position:fixed;
        inset:70px 16px auto;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:12px;
        border:1px solid var(--line);
        border-radius:18px;
        background:#fff;
        box-shadow:var(--shadow)
    }

.global-nav.is-open {
        display:flex
    }

.global-nav a {
        padding:14px 12px
    }

.global-nav a::after {
        display:none
    }

.hero {
        padding-top:22px
    }

.hero-shell {
        padding:12px;
        border-radius:22px
    }

.hero-visual {
        border-radius:16px
    }

.hero-marketplace {
        font-size:17px
    }

.button,.cta-button {
        width:100%
    }

.section {
        padding-top:58px;
        padding-bottom:58px
    }

.about-panel {
        padding:28px 22px;
        border-radius:24px
    }

.section-heading h2 {
        font-size:34px
    }

.about-copy h3 {
        font-size:26px
    }

.compare-card {
        min-height:auto;
        padding:28px 22px
    }

.compare-card h3 {
        font-size:24px
    }

.map-node,
.map-hub,
.map-stack {
        min-height:132px;
        padding:20px
    }

.benefit-item strong,
.price-card h3,
.faq-panel h2,
.cta-panel h2 {
        font-size:32px
    }

.benefit-band {
        grid-template-columns:1fr
    }

.benefit-item:not(:last-child) {
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.22)
    }

.price-card {
        min-height:auto;
        padding:54px 26px 28px
    }

.faq-panel,.cta-panel,.contact-panel {
        padding:28px 22px
    }

.contact-actions,
.contact-open,
.contact-trial {
        width:100%
    }

.form-row {
        grid-template-columns:1fr
    }

.form-field-split {
        grid-template-columns:1fr
    }

.site-footer {
        flex-direction:column;
        align-items:flex-start
    }

}