/* Corporate brand pages */
.brand-hero,.about-hero{position:relative;overflow:hidden;background:#f7faff}.brand-hero{padding:106px 0 76px;background:radial-gradient(circle at 92% 7%,#dbeaff 0,rgba(219,234,255,.22) 28%,transparent 46%),linear-gradient(135deg,#f9fbff,#f1f6ff)}.brand-hero:before,.about-hero:before{position:absolute;inset:0;content:"";pointer-events:none;background-image:linear-gradient(rgba(22,79,157,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(22,79,157,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to right,#000,transparent 75%)}.brand-hero .container,.about-hero .container{position:relative;z-index:1}.brand-eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:18px;color:#2467d5;font-size:.74rem;font-weight:800;letter-spacing:.14em}.brand-eyebrow>span{display:inline-block;width:24px;height:2px;background:currentColor}.brand-eyebrow.light{color:#8ac2ff}.brand-hero h1,.about-hero h1{margin:0 0 24px;color:#17243c;font-size:clamp(2.65rem,5vw,4.55rem);font-weight:800;line-height:1.17;letter-spacing:-.076em;word-break:keep-all}.brand-hero h1 em,.about-hero h1 em{color:#1768d8;font-style:normal}.brand-hero-lead{max-width:610px;margin:0;color:#5b6a80;font-size:1.08rem;line-height:1.85;letter-spacing:-.02em;word-break:keep-all}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}.btn-brand-primary,.btn-brand-ghost,.btn-brand-white{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:8px;font-size:.93rem;font-weight:750;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.btn-brand-primary{color:#fff;background:#1768d8;box-shadow:0 11px 21px rgba(23,104,216,.21)}.btn-brand-primary:hover{color:#fff;background:#1059bd;transform:translateY(-2px);box-shadow:0 14px 26px rgba(23,104,216,.27)}.btn-brand-ghost{border:1px solid #cad8ea;color:#284465;background:rgba(255,255,255,.72)}.btn-brand-ghost:hover{border-color:#85abe4;color:#1768d8;transform:translateY(-2px)}.hero-proof{display:flex;flex-wrap:wrap;gap:19px;margin-top:27px;color:#69788d;font-size:.86rem;font-weight:600}.hero-proof i{margin-right:5px;color:#2c84e8}.hero-visual-wrap{position:relative;max-width:640px;margin:0 auto}.hero-visual-wrap:after{position:absolute;z-index:-1;top:15%;right:-6%;width:72%;height:72%;content:"";border-radius:50%;background:#c6dcff;filter:blur(60px);opacity:.68}.hero-visual-wrap img{display:block;width:100%;filter:drop-shadow(0 30px 26px rgba(30,70,142,.14))}.hero-visual-note{position:absolute;z-index:1;display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(158,191,239,.64);border-radius:7px;color:#35629b;background:rgba(255,255,255,.81);box-shadow:0 10px 25px rgba(39,72,126,.09);backdrop-filter:blur(8px);font-size:.65rem;font-weight:800;letter-spacing:.06em}.note-top{top:15%;left:-3%}.note-bottom{right:3%;bottom:13%}.hero-visual-note i{color:#477ff2}.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#11b8a6;box-shadow:0 0 0 3px rgba(17,184,166,.14)}
.brand-trust-bar{position:relative;z-index:2;background:#14284b}.trust-item{display:flex;align-items:center;gap:15px;min-height:105px;padding:24px 30px;color:#b9c6d9;border-right:1px solid rgba(189,211,241,.16);font-size:.86rem}.trust-item:last-child{border-right:0}.trust-item>i{display:grid;width:38px;height:38px;place-items:center;border-radius:9px;color:#8ac2ff;background:rgba(125,183,255,.12);font-size:1rem}.trust-item span{display:flex;flex-direction:column;gap:3px}.trust-item b{color:#fff;font-size:.9rem;letter-spacing:.01em}
.brand-section{padding:116px 0}.brand-section-heading{margin-bottom:52px}.brand-section-heading h2,.about-intro-section h2,.process-intro h2,.principle-title h2{margin:0;color:#17243c;font-size:clamp(2.1rem,3.7vw,3.45rem);font-weight:800;line-height:1.25;letter-spacing:-.068em;word-break:keep-all}.brand-section-heading>div:last-child>p{max-width:460px;margin:0 0 3px auto;color:#69778b;line-height:1.8;word-break:keep-all}.capabilities-section{background:#fff}.capability-card{height:100%;min-height:292px;padding:28px 25px;border:1px solid #e1e9f3;border-radius:14px;background:#fff;box-shadow:0 10px 26px rgba(32,57,95,.035);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.capability-card:hover{border-color:#9bbfed;box-shadow:0 18px 36px rgba(32,79,150,.1);transform:translateY(-5px)}.capability-icon{display:grid;width:48px;height:48px;place-items:center;margin-bottom:30px;border-radius:12px;font-size:1.25rem}.icon-blue{color:#1768d8;background:#eaf2ff}.icon-violet{color:#7557ce;background:#f1edff}.icon-cyan{color:#008b9a;background:#e7f8fa}.icon-orange{color:#d8781b;background:#fff3e4}.capability-card>span{display:block;margin-bottom:10px;color:#a5b3c6;font-size:.72rem;font-weight:800;letter-spacing:.1em}.capability-card h3{margin:0 0 11px;color:#1d2a3e;font-size:1.2rem;font-weight:750;letter-spacing:-.04em}.capability-card p{margin:0;color:#6b788a;font-size:.9rem;line-height:1.72;word-break:keep-all}
.process-section{position:relative;overflow:hidden;color:#fff;background:#112949}.process-section:before{position:absolute;top:-420px;right:-140px;width:720px;height:720px;content:"";border:1px solid rgba(115,177,255,.18);border-radius:50%;box-shadow:0 0 0 80px rgba(115,177,255,.035),0 0 0 160px rgba(115,177,255,.025)}.process-section .container{position:relative}.process-intro{margin-bottom:48px}.process-intro h2{color:#fff}.process-intro>div:last-child>p{max-width:455px;margin:0 0 3px auto;color:#b9c9df;line-height:1.8;word-break:keep-all}.work-process{display:flex;align-items:stretch}.work-step{flex:1;min-height:235px;padding:25px;border:1px solid rgba(173,207,251,.21);border-radius:11px;background:rgba(16,45,81,.45)}.work-step strong{display:block;color:#7ea9db;font-size:.72rem;letter-spacing:.12em}.work-step>i{display:block;margin:31px 0 18px;color:#8bc2ff;font-size:1.55rem}.work-step h3{margin:0 0 8px;color:#fff;font-size:1.1rem;font-weight:750}.work-step p{margin:0;color:#aec1d8;font-size:.86rem;line-height:1.65;word-break:keep-all}.work-step-arrow{display:grid;flex:0 0 42px;place-items:center;color:#76a6dc;font-size:.9rem}
.work-section{background:#f7f9fc}.solution-teaser{position:relative;overflow:hidden;min-height:330px;padding:30px 32px;border-radius:15px;color:#fff}.solution-teaser:after{position:absolute;right:-58px;bottom:-82px;width:260px;height:260px;content:"";border:42px solid rgba(255,255,255,.11);border-radius:50%}.teal-teaser{background:linear-gradient(135deg,#056c75,#10999a)}.blue-teaser{background:linear-gradient(135deg,#164f9b,#2679dd)}.solution-teaser-top{display:flex;justify-content:space-between;color:rgba(255,255,255,.72);font-size:.67rem;font-weight:800;letter-spacing:.1em}.solution-teaser-icon{display:grid;width:53px;height:53px;place-items:center;margin:32px 0 21px;border:1px solid rgba(255,255,255,.21);border-radius:12px;background:rgba(0,0,0,.1);font-size:1.35rem}.solution-teaser h3{position:relative;z-index:1;margin:0 0 11px;color:#fff;font-size:1.6rem;font-weight:750;line-height:1.3;letter-spacing:-.05em;word-break:keep-all}.solution-teaser p{position:relative;z-index:1;max-width:420px;margin:0;color:rgba(255,255,255,.78);font-size:.92rem;line-height:1.7;word-break:keep-all}.solution-teaser a{position:absolute;z-index:1;bottom:30px;color:#fff;font-size:.88rem;font-weight:700;text-decoration:none}.solution-teaser a i{margin-left:7px;transition:transform .2s ease}.solution-teaser a:hover{color:#fff}.solution-teaser a:hover i{transform:translateX(4px)}
.brand-cta-section{padding:92px 0;background:#fff}.brand-cta-box{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:56px 61px;border-radius:18px;color:#fff;background:linear-gradient(122deg,#0e315f 0,#185ebb 56%,#317ee0 100%);box-shadow:0 19px 40px rgba(27,80,156,.19)}.brand-cta-box h2{margin:0;color:#fff;font-size:clamp(1.85rem,3vw,2.75rem);font-weight:750;line-height:1.27;letter-spacing:-.065em}.brand-cta-action{text-align:right}.brand-cta-action p{margin:0 0 17px;color:rgba(255,255,255,.75);font-size:.91rem;line-height:1.7}.btn-brand-white{color:#1559b1;background:#fff}.btn-brand-white:hover{color:#1559b1;background:#f5f9ff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.15)}
.about-hero{padding:109px 0 91px;background:radial-gradient(circle at 88% 14%,#d6e8ff 0,rgba(214,232,255,.17) 32%,transparent 49%),linear-gradient(135deg,#f9fbff,#eef5ff)}.about-hero h1{font-size:clamp(2.7rem,5vw,4.65rem)}.about-hero>.container p{max-width:650px;margin:0;color:#5e6e83;font-size:1.1rem;line-height:1.85;word-break:keep-all}.about-hero-visual{position:relative;height:390px;max-width:460px;margin:0 auto}.about-orbit{position:absolute;top:50%;left:50%;border:1px dashed #93b6e7;border-radius:50%;transform:translate(-50%,-50%)}.orbit-one{width:300px;height:300px}.orbit-two{width:420px;height:170px;transform:translate(-50%,-50%) rotate(-28deg)}.about-core{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:132px;height:132px;border:9px solid #e8f1ff;border-radius:34px;color:#fff;background:linear-gradient(145deg,#1768d8,#0e407e);box-shadow:0 22px 38px rgba(22,83,165,.26);font-size:1.2rem;font-weight:800;line-height:1.08;letter-spacing:-.06em;transform:translate(-50%,-50%) rotate(-8deg)}.about-core i{position:absolute;right:-13px;bottom:-13px;display:grid;width:35px;height:35px;place-items:center;border-radius:50%;color:#1768d8;background:#fff;box-shadow:0 6px 14px rgba(33,71,124,.15);font-size:.75rem}.about-node{position:absolute;display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid #c8daf3;border-radius:10px;color:#315c91;background:rgba(255,255,255,.85);box-shadow:0 10px 21px rgba(35,71,124,.1)}.about-node i{color:#2974de;font-size:1rem}.about-node small{font-size:.62rem;font-weight:800;letter-spacing:.08em}.node-plan{top:37px;left:22px}.node-build{top:90px;right:0}.node-grow{bottom:38px;left:38px}.about-intro-section{background:#fff}.about-intro-copy .lead-copy{margin:0 0 22px;color:#263b57;font-size:1.28rem;font-weight:600;line-height:1.75;letter-spacing:-.035em;word-break:keep-all}.about-intro-copy p:last-child{margin:0;color:#6b788a;line-height:1.85;word-break:keep-all}.expertise-section{background:#f6f9fd}.expertise-card{height:100%;min-height:246px;padding:29px 27px;border:1px solid #e1e9f3;border-radius:13px;background:#fff}.expertise-card>i{display:grid;width:45px;height:45px;place-items:center;margin-bottom:30px;border-radius:11px;color:#1768d8;background:#eaf2ff;font-size:1.1rem}.expertise-card h3{margin:0 0 11px;color:#1c2d44;font-size:1.08rem;font-weight:750;letter-spacing:-.04em}.expertise-card p{margin:0;color:#6a788b;font-size:.89rem;line-height:1.72;word-break:keep-all}.principle-section{background:#112949}.principle-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:10%}.principle-title h2{color:#fff}.principle-title p{max-width:360px;margin:23px 0 0;color:#aebfd5;line-height:1.8;word-break:keep-all}.principle-list{display:grid;gap:0}.principle-list article{display:grid;grid-template-columns:58px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid rgba(184,210,242,.2)}.principle-list article:first-child{padding-top:0}.principle-list article:last-child{padding-bottom:0;border-bottom:0}.principle-list span{color:#79b4f0;font-size:.78rem;font-weight:800;letter-spacing:.12em}.principle-list h3{margin:0 0 9px;color:#fff;font-size:1.18rem;font-weight:700;letter-spacing:-.04em}.principle-list p{margin:0;color:#b4c4d9;font-size:.91rem;line-height:1.7;word-break:keep-all}
@media (max-width:991.98px){.brand-hero{padding:78px 0 62px}.brand-hero h1,.about-hero h1{font-size:clamp(2.6rem,7vw,4rem)}.hero-visual-wrap{max-width:590px}.brand-section{padding:82px 0}.brand-section-heading>div:last-child>p,.process-intro>div:last-child>p{max-width:none;margin:20px 0 0}.work-process{flex-wrap:wrap;gap:14px 0}.work-step{flex-basis:calc(50% - 21px)}.work-step-arrow{flex-basis:42px}.work-step-arrow:nth-of-type(4){display:none}.principle-layout{gap:55px}.about-hero{padding:80px 0 72px}.about-hero-visual{max-width:410px}}
@media (max-width:767.98px){.brand-hero{padding:65px 0 52px}.brand-hero h1,.about-hero h1{font-size:2.55rem}.brand-hero-lead,.about-hero>.container p{font-size:1rem}.hero-proof{display:grid;gap:9px}.hero-visual-wrap{max-width:470px}.note-top{left:-2%}.note-bottom{right:-2%}.brand-trust-bar .container{padding-right:0;padding-left:0}.trust-item{min-height:82px;padding:18px 25px;border-right:0;border-bottom:1px solid rgba(189,211,241,.16)}.trust-item:last-child{border-bottom:0}.brand-section{padding:68px 0}.brand-section-heading{margin-bottom:36px}.brand-section-heading h2,.about-intro-section h2,.process-intro h2,.principle-title h2{font-size:2.05rem}.capability-card{min-height:auto}.work-process{display:grid;grid-template-columns:1fr;gap:10px}.work-step{min-height:auto;padding:23px}.work-step>i{margin:22px 0 14px}.work-step-arrow{height:23px;transform:rotate(90deg)}.work-step-arrow:nth-of-type(4){display:grid}.solution-teaser{min-height:310px;padding:26px}.brand-cta-section{padding:64px 0}.brand-cta-box{display:block;padding:37px 28px}.brand-cta-action{margin-top:25px;text-align:left}.about-hero{padding:69px 0 61px}.about-hero-visual{height:300px;max-width:355px}.orbit-one{width:230px;height:230px}.orbit-two{width:330px;height:135px}.about-core{width:106px;height:106px;border-width:7px;border-radius:28px;font-size:1rem}.node-plan{top:23px;left:0}.node-build{top:62px;right:-5px}.node-grow{bottom:24px;left:8px}.about-node{padding:9px 10px}.principle-layout{grid-template-columns:1fr;gap:42px}.principle-list article{grid-template-columns:42px 1fr;gap:10px}.about-intro-copy .lead-copy{font-size:1.12rem}}

/* Local SVG icon variants for the corporate pages. */
.hero-proof .app-icon { margin-right: 5px; color: #2c84e8; }
.hero-proof > div { word-break: keep-all; }
.hero-visual-note .app-icon { color: #477ff2; }
.trust-item > .app-icon { display: grid; width: 38px; height: 38px; place-items: center; padding: 10px; border-radius: 9px; color: #8ac2ff; background: rgba(125,183,255,.12); font-size: 1rem; }
.work-step > .app-icon { display: block; margin: 31px 0 18px; color: #8bc2ff; font-size: 1.55rem; }
.solution-teaser a .app-icon { margin-left: 7px; transition: transform .2s ease; }
.solution-teaser a:hover .app-icon { transform: translateX(4px); }
.about-core .app-icon { position: absolute; right: -13px; bottom: -13px; display: grid; width: 35px; height: 35px; place-items: center; padding: 9px; border-radius: 50%; color: #1768d8; background: #fff; box-shadow: 0 6px 14px rgba(33,71,124,.15); font-size: .75rem; }
.about-node .app-icon { color: #2974de; font-size: 1rem; }
.expertise-card > .app-icon { display: grid; width: 45px; height: 45px; place-items: center; margin-bottom: 30px; padding: 11px; border-radius: 11px; color: #1768d8; background: #eaf2ff; font-size: 1.1rem; }
@media (max-width:767.98px) { .work-step > .app-icon { margin: 22px 0 14px; } }

/* Local SVG icon variants for solution pages. */
.solution-kicker .app-icon { margin-right: 8px; vertical-align: -0.15em; }
.hero-checks .app-icon { margin-right: 7px; color: var(--solution-blue); }
.screen-caption .app-icon { color: var(--solution-blue); }

/* Home hero rotator */
.hero-rotator { padding-bottom: 28px; }
.hero-rotator-track {
    display: grid;
}
.hero-slide {
    z-index: 0;
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(18px);
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.hero-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition-delay: 0s;
}
.hero-erp-visual {
    padding: 31px 5px 27px;
}
.hero-erp-visual::after {
    top: 8%;
    right: 2%;
    width: 82%;
    height: 84%;
    background: #9fd8ed;
    filter: blur(72px);
    opacity: .42;
}
.erp-dashboard-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(92, 145, 195, .32);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 25px 48px rgba(25, 75, 128, .22);
    transform: perspective(1200px) rotateY(-3.5deg) rotateX(1deg);
    transform-origin: center;
}
.hero-erp-visual .erp-dashboard-frame img {
    width: 100%;
    filter: none;
}
.erp-dashboard-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 31px;
    padding: 0 12px;
    border-bottom: 1px solid #dae5ee;
    background: #f8fbfd;
}
.erp-dashboard-toolbar span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9eb0c2;
}
.erp-dashboard-toolbar b {
    margin-left: 5px;
    color: #597087;
    font-size: .54rem;
    letter-spacing: .11em;
}
.erp-launch-ribbon {
    position: absolute;
    z-index: 2;
    top: -7px;
    right: -7px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #0d315d, #1768d8);
    box-shadow: 0 14px 28px rgba(18, 75, 151, .25);
}
.erp-launch-ribbon strong {
    font-size: 1.38rem;
    line-height: 1;
}
.erp-launch-ribbon span {
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, .32);
    font-size: .54rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .08em;
}
.erp-note-bottom {
    right: auto;
    bottom: 4px;
    left: 7%;
}
.hero-rotator-controls-wrap {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    display: flex;
    justify-content: center;
    margin-top: 0;
}
.hero-rotator-controls {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 8px 10px 8px 13px;
    border: 1px solid rgba(151, 181, 221, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 24px rgba(44, 79, 126, .08);
    backdrop-filter: blur(10px);
}
.hero-rotator-indicators {
    display: flex;
    align-items: center;
    gap: 7px;
}
.hero-rotator-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 30px;
    padding: 5px 2px;
    border: 0;
    color: #8797aa;
    background: transparent;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
}
.hero-rotator-indicator::after {
    width: 8px;
    height: 3px;
    content: "";
    border-radius: 99px;
    background: #c0cddd;
    transition: width .25s ease, background .25s ease;
}
.hero-rotator-indicator.is-active {
    color: #1768d8;
}
.hero-rotator-indicator.is-active::after {
    width: 28px;
    background: #1768d8;
}
.hero-rotator-divider {
    width: 1px;
    height: 20px;
    background: #d2deeb;
}
.hero-rotator-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border: 0;
    border-radius: 99px;
    color: #415873;
    background: #eff5fc;
    font-size: .75rem;
    font-weight: 750;
    line-height: 1;
}
.hero-rotator-toggle:hover {
    color: #1768d8;
    background: #e4effc;
}
.hero-rotator-toggle:focus-visible,
.hero-rotator-indicator:focus-visible {
    outline: 3px solid rgba(23, 104, 216, .25);
    outline-offset: 2px;
}
.hero-toggle-pause,
.hero-toggle-play {
    width: 11px;
    color: #1768d8;
    font-size: .64rem;
    text-align: center;
}
.hero-toggle-play {
    display: none;
}
.hero-rotator.is-paused .hero-toggle-pause {
    display: none;
}
.hero-rotator.is-paused .hero-toggle-play {
    display: inline-block;
}
@media (max-width: 991.98px) {
    .hero-rotator { padding-bottom: 26px; }
    .hero-erp-visual { max-width: 640px; padding-top: 28px; }
}
@media (max-width: 767.98px) {
    .hero-rotator { padding-bottom: 22px; }
    .hero-rotator-controls-wrap { bottom: 14px; }
    .hero-erp-visual { padding: 20px 8px 24px; }
    .erp-launch-ribbon { top: -5px; right: 0; padding: 9px 11px; border-radius: 9px; }
    .erp-launch-ribbon strong { font-size: 1.12rem; }
    .erp-launch-ribbon span { font-size: .47rem; }
    .erp-dashboard-frame { border-radius: 10px; transform: none; }
    .erp-dashboard-toolbar { height: 25px; }
    .erp-note-bottom { bottom: 1px; left: 4%; }
}
@media (max-width: 420px) {
    .hero-rotator-controls { gap: 10px; }
    .hero-rotator-indicator.is-active::after { width: 19px; }
    .hero-rotator-toggle { padding-right: 9px; padding-left: 9px; }
}
.brand-hero.is-flagship {
    background: radial-gradient(circle at 92% 7%, #ccefea 0, rgba(219, 234, 255, .2) 28%, transparent 46%), linear-gradient(135deg, #f3f9ff, #eef8f5);
}
.hero-product-kicker {
    margin: 0 0 8px;
    color: #3d536f;
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: -.02em;
    word-break: keep-all;
}
.hero-slide-essential h1 {
    margin-bottom: 18px;
    font-size: clamp(3.2rem, 6.4vw, 5.4rem);
    letter-spacing: -.08em;
}
.hero-slide-personal h1 { font-size: clamp(2.35rem, 3.7vw, 3.55rem); }
.hero-slide-personal h1 em { color: #1d6b55; }
.hero-slide-personal .brand-eyebrow { color: #1d6b55; }
.hero-slide-personal .btn-brand-primary { background: #1d6b55; box-shadow: 0 11px 21px rgba(29, 107, 85, .22); }
.hero-slide-personal .btn-brand-primary:hover { background: #173f35; }
.hero-personal-visual::after { background: #7fd6b8; opacity: .36; }
.hero-personal-visual .erp-dashboard-frame { border-color: rgba(29, 107, 85, .3); box-shadow: 0 25px 52px rgba(19, 63, 53, .22); }
.hero-personal-visual .hero-flagship-badge { background: linear-gradient(135deg, #173f35, #1d6b55); box-shadow: 0 12px 24px rgba(19, 63, 53, .26); }
.hero-slide-mini h1 em { color: #1f5f96; }
.hero-slide-mini .brand-eyebrow { color: #1f5f96; }
.hero-slide-mini .btn-brand-primary { background: #1f5f96; box-shadow: 0 11px 21px rgba(31, 95, 150, .22); }
.hero-slide-mini .btn-brand-primary:hover { background: #17344f; }
.hero-mini-visual::after { background: #8cc6f2; opacity: .38; }
.hero-mini-visual .erp-dashboard-frame { border-color: rgba(31, 95, 150, .3); box-shadow: 0 25px 52px rgba(18, 44, 72, .22); }
.hero-mini-visual .hero-flagship-badge { background: linear-gradient(135deg, #17344f, #1f5f96); box-shadow: 0 12px 24px rgba(18, 44, 72, .26); }
.hero-slide-office h1 em { color: #34489a; }
.hero-slide-office .brand-eyebrow { color: #34489a; }
.hero-slide-office .btn-brand-primary { background: #34489a; box-shadow: 0 11px 21px rgba(52, 72, 154, .22); }
.hero-slide-office .btn-brand-primary:hover { background: #1d2f5e; }
.hero-office-visual::after { background: #a9b6f0; opacity: .38; }
.hero-office-visual .erp-dashboard-frame { border-color: rgba(52, 72, 154, .3); box-shadow: 0 25px 52px rgba(29, 47, 94, .22); }
.hero-office-visual .hero-flagship-badge { background: linear-gradient(135deg, #1d2f5e, #34489a); box-shadow: 0 12px 24px rgba(29, 47, 94, .26); }
.hero-slide-essential .hero-proof {
    display: grid;
    gap: 10px;
}
.hero-flagship-badge {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #0d315d, #1768d8);
    box-shadow: 0 12px 24px rgba(18, 75, 151, .24);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.hero-essential-visual .note-top {
    top: 18%;
    left: -2%;
}
.hero-essential-visual .erp-note-bottom {
    bottom: 22px;
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-rotator-indicator::after {
        transition: none;
    }
}
@media (max-width: 767.98px) {
    .hero-slide-essential h1 { font-size: 3rem; }
    .hero-flagship-badge { top: 16px; right: 18px; padding: 7px 11px; font-size: .66rem; }
    .hero-essential-visual .note-top { top: 12%; left: 0; }
    .hero-essential-visual .erp-note-bottom { bottom: 28px; }
}

/* Latest notice cards on the home page */
.brand-news-section { padding: 0 0 96px; background: #fff; }
.brand-news-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 33px; }
.brand-news-heading .brand-eyebrow { margin-bottom: 13px; }
.brand-news-heading h2 { margin: 0 0 10px; color: #17243c; font-size: clamp(1.8rem, 3vw, 2.45rem); font-weight: 800; letter-spacing: -.065em; }
.brand-news-heading p { margin: 0; color: #69778b; line-height: 1.7; word-break: keep-all; }
.brand-news-more { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 11px 0; color: #2467d5; font-size: .88rem; font-weight: 750; text-decoration: none; }
.brand-news-more .app-icon, .brand-news-card-link .app-icon { transition: transform .2s ease; }
.brand-news-more:hover { color: #1059bd; }
.brand-news-more:hover .app-icon, .brand-news-card a:hover .brand-news-card-link .app-icon { transform: translateX(4px); }
.brand-news-card { height: 100%; border: 1px solid #e0e8f2; border-radius: 14px; background: #fff; box-shadow: 0 10px 25px rgba(32,57,95,.035); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.brand-news-card:hover { border-color: #9bbfed; box-shadow: 0 18px 35px rgba(32,79,150,.1); transform: translateY(-4px); }
.brand-news-card a { display: flex; flex-direction: column; height: 100%; min-height: 226px; padding: 27px 26px; color: inherit; text-decoration: none; }
.brand-news-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #8492a5; font-size: .76rem; font-weight: 650; }
.brand-news-card-meta span { padding: 5px 9px; border-radius: 99px; color: #2367cf; background: #eaf2ff; }
.brand-news-card h3 { display: -webkit-box; overflow: hidden; margin: 26px 0 0; color: #1d2a3e; font-size: 1.12rem; font-weight: 750; line-height: 1.5; letter-spacing: -.04em; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.brand-news-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 20px; color: #3974c8; font-size: .83rem; font-weight: 700; }
.brand-news-empty { padding: 42px 24px; border: 1px dashed #cfdceb; border-radius: 14px; color: #78869a; background: #f8fbff; text-align: center; }
@media (max-width: 767.98px) {
    .brand-news-section { padding-bottom: 66px; }
    .brand-news-heading { display: block; margin-bottom: 27px; }
    .brand-news-more { margin-top: 12px; }
    .brand-news-card a { min-height: 208px; }
}

/* Product-first information architecture: implementation guide and experience pages. */
.slate-teaser { background: linear-gradient(135deg, #294562, #557998); }
.mini-teaser { background: linear-gradient(135deg, #17344f, #1f5f96 60%, #2f8fd0); }
.office-teaser { background: linear-gradient(135deg, #1d2f5e, #34489a 60%, #4f63c4); }
.website-teaser { background: linear-gradient(135deg, #654098, #9466cf); }
@media (min-width: 768px) { .work-section .solution-teaser { min-height: 390px; } }
.section-inline-link { margin-top: 28px; text-align: right; }
.section-inline-link a { display: inline-flex; align-items: center; gap: 8px; color: #8bc2ff; font-size: .9rem; font-weight: 750; text-decoration: none; }
.section-inline-link a:hover { color: #fff; }
.section-inline-link .app-icon { transition: transform .2s ease; }
.section-inline-link a:hover .app-icon { transform: translateX(4px); }
.experience-preview-section { padding: 96px 0; background: #eaf2fb; }
.experience-preview-section h2 { margin: 0 0 18px; color: #17243c; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 800; line-height: 1.3; letter-spacing: -.07em; word-break: keep-all; }
.experience-preview-section p { max-width: 720px; margin: 0; color: #5c6d82; line-height: 1.85; word-break: keep-all; }
.footer-contact-link { display: inline-flex; align-items: center; gap: 8px; color: #8cbcf5; font-size: .86rem; font-weight: 700; text-decoration: none; }
.footer-contact-link:hover { color: #fff; }

.guide-hero { position: relative; overflow: hidden; padding: 104px 0 94px; background: radial-gradient(circle at 88% 10%, #d8e9ff 0, rgba(216,233,255,.2) 28%, transparent 50%), linear-gradient(135deg, #f9fbff, #edf5ff); }
.guide-hero::before { position: absolute; inset: 0; content: ""; pointer-events: none; background-image: linear-gradient(rgba(22,79,157,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,79,157,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to right, #000, transparent 76%); }
.guide-hero .container { position: relative; z-index: 1; }
.guide-hero h1 { margin: 0 0 22px; color: #17243c; font-size: clamp(2.65rem, 5vw, 4.4rem); font-weight: 800; line-height: 1.16; letter-spacing: -.076em; word-break: keep-all; }
.guide-hero h1 em { color: #1768d8; font-style: normal; }
.guide-hero > .container p { max-width: 650px; margin: 0; color: #5b6a80; font-size: 1.08rem; line-height: 1.85; letter-spacing: -.02em; word-break: keep-all; }
.guide-summary-card { position: relative; overflow: hidden; padding: 35px 34px; border: 1px solid #bcd2ee; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #163f73, #1c67bf); box-shadow: 0 22px 44px rgba(23, 84, 165, .19); }
.guide-summary-card::after { position: absolute; top: -78px; right: -70px; width: 240px; height: 240px; border: 34px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; }
.guide-summary-card > * { position: relative; z-index: 1; }
.guide-summary-card > span { color: #9dcbff; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.guide-summary-card h2 { margin: 12px 0 23px; color: #fff; font-size: 1.8rem; font-weight: 750; line-height: 1.35; letter-spacing: -.06em; }
.guide-summary-card ul { display: grid; gap: 13px; padding: 0; margin: 0; list-style: none; }
.guide-summary-card li { display: flex; gap: 9px; color: #e3efff; font-size: .9rem; line-height: 1.55; word-break: keep-all; }
.guide-summary-card .app-icon { flex: 0 0 auto; width: 1.08rem; color: #89c3ff; }
.guide-fit-section { background: #fff; }
.guide-fit-card { display: flex; height: 100%; min-height: 320px; padding: 30px 28px; flex-direction: column; border: 1px solid #dfe8f3; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgba(32,57,95,.035); }
.guide-fit-card > .app-icon { display: grid; width: 47px; height: 47px; place-items: center; padding: 11px; border-radius: 12px; color: #1768d8; background: #eaf2ff; }
.guide-fit-card h3 { margin: 27px 0 12px; color: #1d2a3e; font-size: 1.19rem; font-weight: 750; line-height: 1.45; letter-spacing: -.045em; word-break: keep-all; }
.guide-fit-card p { margin: 0; color: #677689; font-size: .9rem; line-height: 1.75; word-break: keep-all; }
.guide-fit-card a { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 22px; color: #2467d5; font-size: .86rem; font-weight: 750; text-decoration: none; }
.guide-fit-card a:hover { color: #1059bd; }
.guide-fit-card a .app-icon { transition: transform .2s ease; }
.guide-fit-card a:hover .app-icon { transform: translateX(4px); }
.guide-steps-section { color: #fff; background: #112949; }
.guide-steps-section .brand-section-heading h2 { color: #fff; }
.guide-steps-section .brand-section-heading > div:last-child > p { color: #b9c9df; }
.guide-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.guide-timeline article { min-height: 250px; padding: 28px 24px; border: 1px solid rgba(173,207,251,.22); border-radius: 13px; background: rgba(16,45,81,.43); }
.guide-timeline strong { display: block; margin-bottom: 30px; color: #7ea9db; font-size: .78rem; letter-spacing: .12em; }
.guide-timeline span { color: #91c5ff; font-size: .68rem; font-weight: 800; letter-spacing: .11em; }
.guide-timeline h3 { margin: 10px 0; color: #fff; font-size: 1.18rem; font-weight: 750; letter-spacing: -.04em; }
.guide-timeline p { margin: 0; color: #b7c8df; font-size: .88rem; line-height: 1.7; word-break: keep-all; }
.guide-support-section { background: #f7f9fc; }
.guide-support-section h2 { margin: 0; color: #17243c; font-size: clamp(2rem, 3.5vw, 3.3rem); font-weight: 800; line-height: 1.3; letter-spacing: -.07em; word-break: keep-all; }
.guide-support-list { display: grid; gap: 22px; }
.guide-support-list article { display: grid; grid-template-columns: 50px 1fr; gap: 17px; }
.guide-support-list .app-icon { display: grid; width: 48px; height: 48px; place-items: center; padding: 12px; border-radius: 12px; color: #1768d8; background: #e5f0ff; }
.guide-support-list h3 { margin: 3px 0 6px; color: #1d2a3e; font-size: 1.07rem; font-weight: 750; }
.guide-support-list p { margin: 0; color: #69778b; font-size: .92rem; line-height: 1.7; word-break: keep-all; }

.portfolio-hero { position: relative; overflow: hidden; padding: 106px 0 94px; color: #fff; background: radial-gradient(circle at 88% 14%, rgba(64,143,237,.34) 0, rgba(32,94,170,.12) 31%, transparent 50%), linear-gradient(135deg, #0b203b 0, #123b6d 58%, #145ca7 100%); }
.portfolio-hero::before { position: absolute; inset: 0; content: ""; pointer-events: none; background-image: linear-gradient(rgba(176,211,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(176,211,255,.07) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to right, #000, transparent 85%); }
.portfolio-hero::after { position: absolute; right: -210px; bottom: -390px; width: 720px; height: 720px; border: 1px solid rgba(160,205,255,.17); border-radius: 50%; box-shadow: 0 0 0 80px rgba(124,187,255,.035), 0 0 0 160px rgba(124,187,255,.025); content: ""; pointer-events: none; }
.portfolio-hero .container { position: relative; z-index: 1; }
.portfolio-hero h1 { margin: 0 0 25px; color: #fff; font-size: clamp(2.65rem, 4.7vw, 4.25rem); font-weight: 800; line-height: 1.16; letter-spacing: -.075em; word-break: keep-all; }
.portfolio-hero h1 em { color: #8bc7ff; font-style: normal; }
.portfolio-hero p { max-width: 570px; margin: 0; color: #c2d3e8; font-size: 1.04rem; line-height: 1.85; letter-spacing: -.02em; word-break: keep-all; }
.portfolio-hero .hero-actions { margin-top: 32px; }
.portfolio-hero .btn-brand-white .app-icon { width: .95rem; height: .95rem; }
.btn-portfolio-ghost { display: inline-flex; align-items: center; padding: 14px 20px; border: 1px solid rgba(205,226,251,.42); border-radius: 8px; color: #e6f1ff; background: rgba(255,255,255,.04); font-size: .93rem; font-weight: 750; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.btn-portfolio-ghost:hover { border-color: rgba(228,241,255,.78); color: #fff; background: rgba(255,255,255,.09); transform: translateY(-2px); }
.portfolio-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; margin: 31px 0 0; color: #8eb6e1; font-size: .66rem; font-weight: 800; letter-spacing: .11em; list-style: none; }
.portfolio-hero-meta li { position: relative; }
.portfolio-hero-meta li:not(:last-child)::after { position: absolute; top: 50%; right: -12px; width: 3px; height: 3px; border-radius: 50%; background: #6d9bcc; content: ""; transform: translateY(-50%); }
.portfolio-hero-visual { position: relative; display: block; overflow: hidden; padding: 10px; border: 1px solid rgba(183,215,252,.31); border-radius: 19px; color: inherit; background: rgba(255,255,255,.08); box-shadow: 0 30px 58px rgba(3,19,39,.32); text-decoration: none; backdrop-filter: blur(8px); transform: rotate(1.25deg); transition: transform .3s ease, box-shadow .3s ease; }
.portfolio-hero-visual:hover { color: inherit; box-shadow: 0 36px 68px rgba(3,19,39,.4); transform: rotate(0) translateY(-4px); }
.portfolio-browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; color: #88add7; font-size: .57rem; letter-spacing: .09em; }
.portfolio-browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: #6e98c4; }
.portfolio-browser-bar b { margin-left: 5px; font-weight: 800; }
.portfolio-hero-visual > img { display: block; width: 100%; height: auto; border-radius: 10px; }
.portfolio-visual-caption { position: absolute; right: 27px; bottom: 25px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid rgba(206,228,255,.5); border-radius: 10px; color: #294d78; background: rgba(255,255,255,.91); box-shadow: 0 12px 28px rgba(17,54,98,.2); backdrop-filter: blur(8px); }
.portfolio-visual-caption > b { color: #1768d8; font-size: 1.15rem; }
.portfolio-visual-caption > span { font-size: .68rem; font-weight: 800; line-height: 1.35; letter-spacing: .08em; }
.portfolio-visual-caption small { color: #66819f; font-size: .57rem; }

.portfolio-focus-strip { position: relative; z-index: 2; border-bottom: 1px solid #dce5f0; background: #fff; box-shadow: 0 12px 25px rgba(29,60,102,.04); }
.portfolio-focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.portfolio-focus-grid > div { display: grid; min-height: 118px; padding: 25px 29px; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; border-right: 1px solid #e1e8f1; }
.portfolio-focus-grid > div:first-child { border-left: 1px solid #e1e8f1; }
.portfolio-focus-grid span { color: #2b70ca; font-size: .72rem; font-weight: 800; letter-spacing: .09em; }
.portfolio-focus-grid p { margin: 0; color: #748297; font-size: .81rem; line-height: 1.55; word-break: keep-all; }
.portfolio-focus-grid b { display: block; margin-bottom: 5px; color: #20344f; font-size: .95rem; letter-spacing: -.03em; }

.portfolio-work-section { scroll-margin-top: 74px; background: #f5f8fc; }
.portfolio-project-featured { display: grid; overflow: hidden; min-height: 510px; grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr); border: 1px solid #d9e4f0; border-radius: 22px; background: #fff; box-shadow: 0 20px 45px rgba(25,58,102,.08); }
.portfolio-project-media { position: relative; display: flex; overflow: hidden; padding: 30px; align-items: center; justify-content: center; color: inherit; background: linear-gradient(145deg, #e7eef7, #dce7f4); text-decoration: none; }
.portfolio-project-media::after { position: absolute; right: -130px; bottom: -150px; width: 340px; height: 340px; border: 45px solid rgba(52,113,188,.08); border-radius: 50%; content: ""; }
.portfolio-project-media img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border: 1px solid #c9d5e4; border-radius: 10px; box-shadow: 0 24px 42px rgba(33,68,113,.2); transition: transform .35s ease; }
.portfolio-project-media:hover img { transform: translateY(-5px) scale(1.01); }
.portfolio-project-media > span { position: absolute; z-index: 2; top: 20px; left: 23px; padding: 8px 11px; border-radius: 6px; color: #fff; background: #164e8e; font-size: .61rem; font-weight: 800; letter-spacing: .1em; }
.portfolio-project-content { display: flex; padding: 42px 39px 38px; flex-direction: column; }
.portfolio-project-number { color: #94a7bd; font-size: .69rem; font-weight: 800; letter-spacing: .12em; }
.portfolio-project-category { margin-top: auto; color: #2a70c9; font-size: .68rem; font-weight: 800; letter-spacing: .11em; }
.portfolio-project-content h3 { margin: 12px 0 12px; color: #192b43; font-size: clamp(1.75rem, 2.4vw, 2.35rem); font-weight: 800; line-height: 1.3; letter-spacing: -.06em; word-break: keep-all; }
.portfolio-project-lead { margin: 0; color: #53657b; font-size: 1rem; line-height: 1.75; word-break: keep-all; }
.portfolio-project-story { display: grid; gap: 14px; margin: 25px 0 0; }
.portfolio-project-story > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 9px; padding-top: 13px; border-top: 1px solid #e4eaf1; }
.portfolio-project-story dt { color: #2a70c9; font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-project-story dd { margin: 0; color: #69778a; font-size: .82rem; line-height: 1.65; word-break: keep-all; }
.portfolio-project-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.portfolio-project-tags span { padding: 6px 9px; border-radius: 999px; color: #376cae; background: #edf4ff; font-size: .72rem; font-weight: 700; }
.portfolio-project-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 25px; color: #1d64bd; font-size: .85rem; font-weight: 800; text-decoration: none; }
.portfolio-project-link .app-icon { transition: transform .2s ease; }
.portfolio-project-link:hover { color: #0e4f9f; }
.portfolio-project-link:hover .app-icon { transform: translateX(4px); }
.portfolio-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.portfolio-project-card { display: flex; overflow: hidden; min-width: 0; height: 100%; flex-direction: column; border: 1px solid #dce5f0; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(30,61,104,.055); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.portfolio-project-card:hover { border-color: #a9c6ea; box-shadow: 0 20px 42px rgba(30,73,134,.11); transform: translateY(-5px); }
.portfolio-card-media { display: flex; overflow: hidden; aspect-ratio: 16 / 8.4; align-items: center; justify-content: center; background: #e7edf5; }
.portfolio-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .35s ease; }
.portfolio-project-card:hover .portfolio-card-media img { transform: scale(1.025); }
.portfolio-project-card-tool .portfolio-card-media { padding: 22px; background: linear-gradient(145deg, #e8eef7, #f3f6fa); }
.portfolio-project-card-tool .portfolio-card-media img { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 7px; box-shadow: 0 14px 28px rgba(33,68,113,.16); }
.portfolio-card-content { display: flex; padding: 31px 30px 29px; flex: 1; flex-direction: column; }
.portfolio-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #97a5b7; font-size: .64rem; font-weight: 800; letter-spacing: .1em; }
.portfolio-card-top b { color: #3774be; text-align: right; }
.portfolio-card-content h3 { margin: 20px 0 11px; color: #1b2c43; font-size: 1.45rem; font-weight: 800; line-height: 1.36; letter-spacing: -.055em; word-break: keep-all; }
.portfolio-card-content > p { margin: 0; color: #667589; font-size: .9rem; line-height: 1.75; word-break: keep-all; }
.portfolio-card-content .portfolio-project-link { margin-top: auto; padding-top: 25px; }

.portfolio-archive-section { position: relative; overflow: hidden; color: #fff; background: #112949; }
.portfolio-archive-section::after { position: absolute; top: -380px; right: -250px; width: 700px; height: 700px; border: 1px solid rgba(125,184,251,.15); border-radius: 50%; box-shadow: 0 0 0 80px rgba(125,184,251,.025), 0 0 0 160px rgba(125,184,251,.02); content: ""; pointer-events: none; }
.portfolio-archive-section .container { position: relative; z-index: 1; }
.portfolio-archive-section .brand-section-heading h2 { color: #fff; }
.portfolio-archive-section .brand-section-heading > div:last-child > p { color: #b8c7da; }
.portfolio-archive-context { display: block; padding-left: 12px; margin: 13px 0 0 auto; border-left: 2px solid rgba(132,186,244,.55); color: #8fa7c4; font-size: .73rem; line-height: 1.65; word-break: keep-all; }
.portfolio-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.portfolio-archive-grid article { display: flex; min-width: 0; min-height: 390px; padding: 29px 27px 27px; flex-direction: column; border: 1px solid rgba(181,210,245,.2); border-radius: 15px; background: rgba(255,255,255,.045); }
.portfolio-archive-top { display: flex; justify-content: space-between; gap: 16px; color: #779dc9; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }
.portfolio-archive-top b { color: #84baf4; text-align: right; }
.portfolio-archive-grid h3 { margin: 33px 0 13px; color: #fff; font-size: 1.28rem; font-weight: 750; line-height: 1.45; letter-spacing: -.045em; word-break: keep-all; }
.portfolio-archive-grid article > p { margin: 0; color: #b6c5d8; font-size: .88rem; line-height: 1.75; white-space: pre-line; word-break: keep-all; }
.portfolio-archive-grid .portfolio-project-tags { margin-top: 21px; }
.portfolio-archive-grid .portfolio-project-tags span { color: #9bc8fa; background: rgba(127,186,251,.12); }
.portfolio-contribution { display: grid; gap: 4px; padding-top: 18px; margin-top: auto; border-top: 1px solid rgba(185,212,245,.18); color: #9fb2ca; font-size: .75rem; line-height: 1.55; }
.portfolio-contribution b { color: #8cc2fa; font-size: .67rem; letter-spacing: .08em; }

.portfolio-note-section { padding: 31px 0; border-bottom: 1px solid #e2e8f0; background: #f7f9fc; }
.portfolio-note { display: flex; align-items: center; gap: 15px; padding: 0 4px; color: #6a788b; }
.portfolio-note .app-icon { flex: 0 0 auto; width: 26px; height: 26px; color: #3974bd; }
.portfolio-note p { margin: 0; font-size: .82rem; line-height: 1.65; word-break: keep-all; }
.portfolio-note strong { margin-right: 11px; color: #314d70; }

/* Admin-managed past project portfolio */
.portfolio-hero-project { position: relative; display: flex; min-height: 440px; padding: 34px 35px; flex-direction: column; overflow: hidden; isolation: isolate; border: 1px solid rgba(183,215,252,.3); border-radius: 22px; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045)); box-shadow: 0 28px 58px rgba(3,19,39,.27); text-decoration: none; backdrop-filter: blur(8px); transition: transform .28s ease, border-color .28s ease, background .28s ease; }
.portfolio-hero-project:hover { border-color: rgba(204,228,255,.58); color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.06)); transform: translateY(-5px); }
.portfolio-hero-project.has-thumbnail::after { position: absolute; z-index: 1; inset: 0; content: ""; background: linear-gradient(145deg, rgba(5,27,53,.88), rgba(11,51,91,.7) 58%, rgba(18,79,139,.78)); pointer-events: none; }
.portfolio-hero-project-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portfolio-hero-project > :not(.portfolio-hero-project-image) { position: relative; z-index: 2; }
.portfolio-hero-project-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #8fc3fa; font-size: .67rem; font-weight: 800; letter-spacing: .11em; }
.portfolio-hero-project-top b { color: #b8cee7; font-size: .67rem; }
.portfolio-hero-project-main { margin: auto 0; }
.portfolio-hero-project-main small { display: block; margin-bottom: 15px; color: #89bdf2; font-size: .67rem; font-weight: 800; letter-spacing: .1em; }
.portfolio-hero-project-main h2 { margin: 0 0 17px; color: #fff; font-size: clamp(1.75rem, 2.7vw, 2.5rem); font-weight: 780; line-height: 1.35; letter-spacing: -.055em; word-break: keep-all; }
.portfolio-hero-project-main p { display: -webkit-box; overflow: hidden; max-width: none; margin: 0; color: #bfd0e3; font-size: .9rem; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.portfolio-hero-project-bottom { display: flex; align-items: center; gap: 8px; padding-top: 19px; border-top: 1px solid rgba(188,216,248,.19); }
.portfolio-hero-project-bottom span { padding: 6px 9px; border-radius: 999px; color: #c8def6; background: rgba(127,186,251,.12); font-size: .68rem; font-weight: 700; }
.portfolio-hero-project-bottom .app-icon { width: 1rem; height: 1rem; margin-left: auto; color: #8bc7ff; }
.portfolio-hero-project-empty { justify-content: center; text-align: center; }
.portfolio-hero-project-empty > .app-icon { width: 52px; height: 52px; padding: 13px; margin: 0 auto 24px; border: 1px solid rgba(180,214,252,.28); border-radius: 15px; color: #8bc7ff; background: rgba(128,187,252,.1); }
.portfolio-hero-project-empty > span { color: #88bdf3; font-size: .68rem; font-weight: 800; letter-spacing: .11em; }
.portfolio-hero-project-empty h2 { margin: 15px 0 13px; color: #fff; font-size: 2rem; font-weight: 750; line-height: 1.4; letter-spacing: -.055em; }
.portfolio-hero-project-empty p { max-width: 390px; margin: 0 auto; color: #b9cadf; font-size: .9rem; }

.portfolio-entry-list { display: grid; gap: 28px; }
.portfolio-entry { display: grid; overflow: hidden; min-height: 470px; scroll-margin-top: 92px; grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr); border: 1px solid #d9e3ef; border-radius: 21px; background: #fff; box-shadow: 0 17px 38px rgba(29,59,100,.07); }
.portfolio-entry.is-reverse .portfolio-entry-cover { order: 2; }
.portfolio-entry.is-reverse .portfolio-entry-content { order: 1; }
.portfolio-entry-cover { display: flex; min-width: 0; padding: 32px 31px; flex-direction: column; color: #fff; background: linear-gradient(145deg, #143e70, #1b68b9); }
.portfolio-entry-cover.tone-2 { background: linear-gradient(145deg, #125a67, #0d8a90); }
.portfolio-entry-cover.tone-3 { background: linear-gradient(145deg, #3a3a73, #6751af); }
.portfolio-entry-cover.tone-4 { background: linear-gradient(145deg, #263d59, #426b8e); }
.portfolio-entry-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: rgba(221,237,255,.68); font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.portfolio-entry-cover-top b { overflow: hidden; max-width: 55%; color: rgba(234,245,255,.85); text-align: right; white-space: nowrap; text-overflow: ellipsis; }
.portfolio-entry-cover > .app-icon { width: 58px; height: 58px; padding: 14px; margin: auto 0 24px; border: 1px solid rgba(255,255,255,.21); border-radius: 16px; color: #c5e1ff; background: rgba(255,255,255,.09); }
.portfolio-entry-thumbnail { overflow: hidden; width: 100%; aspect-ratio: 16 / 10; margin: auto 0 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: rgba(3,20,38,.18); box-shadow: 0 16px 30px rgba(3,20,38,.2); }
.portfolio-entry-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portfolio-entry-cover-title { color: #fff; font-size: 1.05rem; font-weight: 800; line-height: 1.45; letter-spacing: .055em; word-break: keep-all; }
.portfolio-entry-cover-meta { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 23px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.17); }
.portfolio-entry-cover-meta span { padding: 6px 9px; border-radius: 999px; color: rgba(244,249,255,.9); background: rgba(255,255,255,.11); font-size: .68rem; font-weight: 700; }
.portfolio-entry-content { display: flex; min-width: 0; padding: 45px 44px 40px; flex-direction: column; }
.portfolio-entry-kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: #2e70bf; font-size: .69rem; font-weight: 800; letter-spacing: .06em; }
.portfolio-entry-kicker span { padding: 6px 9px; border-radius: 999px; color: #2f6eb5; background: #edf4ff; }
.portfolio-entry-kicker b { color: #8998aa; font-size: .69rem; }
.portfolio-entry-content h3 { margin: 29px 0 17px; color: #192b43; font-size: clamp(1.65rem, 2.4vw, 2.25rem); font-weight: 800; line-height: 1.34; letter-spacing: -.06em; word-break: keep-all; }
.portfolio-entry-description { margin: 0; color: #5e6e82; font-size: .96rem; line-height: 1.85; white-space: pre-line; word-break: keep-all; }
.portfolio-entry-role { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 17px; padding: 19px 20px; margin-top: 27px; border: 1px solid #dce7f4; border-radius: 12px; background: #f5f9ff; }
.portfolio-entry-role b { color: #2868b6; font-size: .72rem; letter-spacing: .06em; }
.portfolio-entry-role p { margin: 0; color: #536a84; font-size: .82rem; line-height: 1.65; white-space: pre-line; word-break: keep-all; }
.portfolio-entry-content .portfolio-project-tags { margin-top: auto; padding-top: 27px; }
.portfolio-empty-state { padding: 70px 28px; border: 1px dashed #bdccdf; border-radius: 20px; background: #fff; text-align: center; }
.portfolio-empty-state > .app-icon { width: 56px; height: 56px; padding: 14px; margin-bottom: 23px; border-radius: 16px; color: #3677c7; background: #edf4ff; }
.portfolio-empty-state h3 { margin: 0 0 12px; color: #1d304a; font-size: 1.55rem; font-weight: 780; letter-spacing: -.045em; }
.portfolio-empty-state p { margin: 0 0 27px; color: #718095; line-height: 1.7; word-break: keep-all; }
.portfolio-thumbnail-editor-preview { display: grid; overflow: hidden; aspect-ratio: 16 / 10; place-items: center; border: 1px solid #d7e1ed; border-radius: 14px; background: #f4f7fb; }
.portfolio-thumbnail-editor-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portfolio-thumbnail-editor-placeholder { display: grid; gap: 10px; place-items: center; color: #75849a; text-align: center; }
.portfolio-thumbnail-editor-placeholder .fas { color: #4077b8; font-size: 2rem; }
.portfolio-thumbnail-editor-placeholder.is-missing { padding: 20px; color: #9b3d3d; }
.portfolio-thumbnail-editor-placeholder.is-missing .fas { color: #c15050; }
.portfolio-admin-thumbnail { display: block; width: 82px; aspect-ratio: 16 / 10; border: 1px solid #d9e2ee; border-radius: 8px; object-fit: cover; background: #f3f6fa; }
.portfolio-admin-thumbnail-missing { display: inline-flex; width: 82px; aspect-ratio: 16 / 10; align-items: center; justify-content: center; gap: 4px; flex-direction: column; border: 1px solid #edc7c7; border-radius: 8px; color: #9b3d3d; background: #fff4f4; font-size: .69rem; font-weight: 700; }

@media (max-width: 991.98px) {
    .guide-timeline { grid-template-columns: repeat(2, 1fr); }
    .portfolio-hero { padding: 82px 0 78px; }
    .portfolio-hero-visual { max-width: 820px; margin: 12px auto 0; }
    .portfolio-project-featured { min-height: 0; grid-template-columns: 1fr; }
    .portfolio-project-media { aspect-ratio: 16 / 8.3; }
    .portfolio-project-category { margin-top: 42px; }
    .portfolio-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-hero-project { max-width: 760px; margin: 12px auto 0; }
    .portfolio-entry { grid-template-columns: 1fr; }
    .portfolio-entry.is-reverse .portfolio-entry-cover,
    .portfolio-entry.is-reverse .portfolio-entry-content { order: initial; }
    .portfolio-entry-cover { min-height: 320px; }
}
@media (max-width: 767.98px) {
    .experience-preview-section { padding: 67px 0; }
    .guide-hero { padding: 69px 0 62px; }
    .guide-hero h1 { font-size: 2.55rem; }
    .guide-hero > .container p { font-size: 1rem; }
    .guide-summary-card { padding: 28px 25px; }
    .guide-fit-card { min-height: auto; }
    .guide-timeline { grid-template-columns: 1fr; }
    .guide-timeline article { min-height: auto; }
    .portfolio-hero { padding: 68px 0 61px; }
    .portfolio-hero h1 { font-size: 2.55rem; }
    .portfolio-hero p { font-size: .98rem; }
    .portfolio-hero-meta { gap: 8px 16px; }
    .portfolio-hero-meta li:not(:last-child)::after { right: -10px; }
    .portfolio-hero-visual { padding: 7px; border-radius: 13px; transform: none; }
    .portfolio-browser-bar { height: 27px; }
    .portfolio-visual-caption { right: 16px; bottom: 15px; padding: 9px 11px; }
    .portfolio-focus-grid { grid-template-columns: 1fr; }
    .portfolio-focus-grid > div { min-height: 0; padding: 21px 6px; border-right: 0; border-bottom: 1px solid #e1e8f1; }
    .portfolio-focus-grid > div:first-child { border-left: 0; }
    .portfolio-focus-grid > div:last-child { border-bottom: 0; }
    .portfolio-project-media { padding: 18px; }
    .portfolio-project-media > span { top: 13px; left: 14px; }
    .portfolio-project-content { padding: 31px 25px 29px; }
    .portfolio-project-category { margin-top: 31px; }
    .portfolio-project-story > div { grid-template-columns: 1fr; gap: 5px; }
    .portfolio-project-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
    .portfolio-card-content { padding: 27px 24px 26px; }
    .portfolio-card-content h3 { font-size: 1.32rem; }
    .portfolio-archive-grid { grid-template-columns: 1fr; }
    .portfolio-archive-grid article { min-height: 0; }
    .portfolio-note { align-items: flex-start; }
    .portfolio-note strong { display: block; margin: 0 0 3px; }
    .portfolio-hero-project { min-height: 380px; padding: 28px 25px; }
    .portfolio-hero-project-bottom { flex-wrap: wrap; }
    .portfolio-entry { min-height: 0; border-radius: 17px; }
    .portfolio-entry-cover { min-height: 270px; padding: 26px 24px; }
    .portfolio-entry-content { padding: 32px 25px 29px; }
    .portfolio-entry-content h3 { margin-top: 24px; font-size: 1.55rem; }
    .portfolio-entry-role { grid-template-columns: 1fr; gap: 7px; }
    .portfolio-empty-state { padding: 54px 22px; }
    .section-inline-link { text-align: left; }
}
@media (max-width: 575.98px) {
    .portfolio-hero-meta { display: grid; gap: 6px; }
    .portfolio-hero-meta li::after { display: none; }
    .portfolio-browser-bar b { overflow: hidden; max-width: 180px; white-space: nowrap; text-overflow: ellipsis; }
    .portfolio-visual-caption { display: none; }
    .portfolio-card-top { align-items: flex-start; }
    .portfolio-card-top b { max-width: 65%; }
}

/* Launch event highlight: custom feature (violet) */
.event-text-custom, .hero-proof .event-text-custom, .hero-checks .event-text-custom { color: #6741d9; font-weight: 800; }
.hero-proof .event-text-custom .app-icon, .personal-page .hero-checks .event-text-custom i { color: #6741d9; }

/* Home: SONSA ON Mini spotlight for adjusters who work alone */
.mini-spotlight { padding: 84px 0; background: #fff; }
.mini-spotlight .brand-eyebrow { color: #1f5f96; }
.mini-spotlight h2 { margin: 0 0 28px; color: #17243c; font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 800; line-height: 1.28; letter-spacing: -.065em; word-break: keep-all; }
.mini-spotlight-pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.mini-spotlight-pains a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px 20px 18px; border: 1px solid #e3eaf2; border-left: 4px solid #d9480f; border-radius: 12px; color: inherit; background: #fbfcfe; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.mini-spotlight-pains .is-wide { grid-column: 1 / -1; }
.mini-spotlight-pains a:hover { border-color: #b9d2e8; border-left-color: #d9480f; box-shadow: 0 12px 26px rgba(18, 44, 72, .08); transform: translateY(-3px); }
.mini-spotlight-pains b { color: #17243c; font-size: 1.04rem; font-weight: 800; line-height: 1.4; letter-spacing: -.035em; word-break: keep-all; }
.mini-spotlight-pains span { color: #5b6a80; font-size: .88rem; line-height: 1.65; word-break: keep-all; }
.mini-spotlight-card { display: flex; flex-direction: column; height: 100%; padding: 30px 30px 28px; border-radius: 18px; color: #fff; background: linear-gradient(140deg, #0f2438 0%, #17344f 55%, #1f5f96 100%); box-shadow: 0 22px 44px rgba(18, 44, 72, .22); }
.mini-spotlight-label { align-self: flex-start; padding: 5px 11px; border-radius: 999px; color: #17344f; background: #d4e7f7; font-size: .74rem; font-weight: 800; }
.mini-spotlight-card h3 { margin: 16px 0 8px; color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: -.05em; }
.mini-spotlight-card > p { margin: 0 0 18px; color: rgba(226, 238, 249, .82); font-size: .93rem; line-height: 1.7; word-break: keep-all; }
.mini-spotlight-price { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.mini-spotlight-price .is-tag { align-self: center; padding: 3px 9px; border-radius: 999px; color: #fff; background: #d9480f; font-size: .74rem; font-weight: 800; }
.mini-spotlight-price strong { color: #ffd77a; font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; }
.mini-spotlight-price small { flex: 1 1 100%; color: rgba(226, 238, 249, .78); font-size: .8rem; }
.mini-spotlight-price del { color: rgba(226, 238, 249, .6); }
.mini-spotlight-card ul { display: grid; gap: 7px; padding: 0; margin: 18px 0 22px; color: rgba(236, 244, 251, .92); font-size: .9rem; font-weight: 600; list-style: none; }
.mini-spotlight-card ul .app-icon { margin-right: 6px; color: #8cc6f2; }
.mini-spotlight-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.mini-spotlight-actions .btn-brand-primary { color: #17344f; background: #fff; box-shadow: none; }
.mini-spotlight-actions .btn-brand-primary:hover { color: #17344f; background: #eaf2fa; }
.mini-spotlight-actions .btn-brand-ghost { border-color: rgba(212, 231, 247, .5); color: #fff; background: transparent; }
.mini-spotlight-actions .btn-brand-ghost:hover { border-color: #fff; color: #fff; }
@media (max-width: 767.98px) {
    .mini-spotlight { padding: 60px 0; }
    .mini-spotlight-pains { grid-template-columns: 1fr; gap: 10px; }
    .mini-spotlight-pains a { padding: 16px; }
    .mini-spotlight-card { padding: 24px 20px; }
    .mini-spotlight-actions a { flex: 1 1 100%; justify-content: center; }
}