/* HOME-VISUAL-REFACTOR 2026-08-22 */
.home-page{overflow-x:hidden}
.home-page main{overflow:clip}

/* Hero */
/* HOME-HERO-DESKTOP-V3 2026-08-23 */
.home-hero{position:relative;overflow:hidden;padding:clamp(62px,6.2vw,86px) 0 clamp(62px,6vw,84px);background:radial-gradient(circle at 88% 9%,rgba(76,226,221,.23) 0%,rgba(76,226,221,0) 27%),radial-gradient(circle at 48% 112%,rgba(24,184,184,.14) 0%,rgba(24,184,184,0) 34%),linear-gradient(136deg,#fff 0%,#fbfefd 38%,#f3fbfa 68%,#e8f9f8 100%);border-bottom:1px solid rgba(8,44,53,.08)}
.home-hero::before{content:"";position:absolute;pointer-events:none;z-index:0;width:180px;height:216px;right:1.5%;top:42%;opacity:.42;background-image:radial-gradient(circle,rgba(10,166,170,.50) 1.35px,transparent 1.45px);background-size:18px 18px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000)}
.home-hero::after{content:"";position:absolute;pointer-events:none;z-index:0;left:43%;right:-16%;bottom:-52%;height:58%;border-radius:50%;background:linear-gradient(112deg,rgba(112,232,226,.06),rgba(15,173,180,.18));filter:blur(2px);transform:rotate(-8deg)}
.home-hero-inner{position:relative;z-index:1;display:grid;width:min(1480px,calc(100% - 64px));grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);align-items:center;gap:clamp(32px,3vw,48px)}
.home-hero-copy{position:relative;z-index:4;max-width:740px}
.home-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;min-height:36px;margin-bottom:26px;padding:8px 15px;border:1px solid rgba(10,166,170,.16);border-radius:999px;background:rgba(236,250,248,.96);color:#0a7f86;box-shadow:0 10px 24px rgba(8,44,53,.05);font-size:.82rem;font-weight:900;line-height:1.2;letter-spacing:.03em}
.home-hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(145deg,#12b8b7,#07848c);box-shadow:0 0 0 6px rgba(10,166,170,.10)}
.home-hero-copy h1{max-width:13.5ch;margin-bottom:20px;font-size:clamp(3.06rem,3.22vw,3.66rem);line-height:.99;letter-spacing:-.058em;text-wrap:balance}
.home-hero-copy h1 span,.home-hero-copy h1 strong{display:block}
.home-hero-copy h1 strong{margin-top:10px;color:#078f96;font-weight:900;letter-spacing:-.062em;text-wrap:balance}
.home-hero-copy p{max-width:60ch;margin-bottom:0;color:#4d6972;font-size:clamp(1.03rem,1.08vw,1.1rem);font-weight:500;line-height:1.78}
.home-hero .home-actions{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:32px}
.home-hero .home-actions .btn{min-height:56px;padding:14px 24px;border-radius:16px;font-size:1rem;font-weight:800}
.home-hero .home-actions .btn-primary{background:linear-gradient(135deg,#13b8ba,#07858d);box-shadow:0 15px 30px rgba(9,145,151,.23)}
.home-hero .home-actions .btn-primary:hover{background:linear-gradient(135deg,#0ca8ac,#066f77);box-shadow:0 18px 36px rgba(8,123,130,.26)}
.home-hero .home-actions .btn-secondary{border-color:rgba(8,44,53,.20);background:rgba(255,255,255,.84);box-shadow:0 10px 28px rgba(8,44,53,.07);backdrop-filter:blur(10px)}
.home-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.home-benefit-card{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:13px;min-height:86px;padding:14px 15px;border:1px solid rgba(8,44,53,.10);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,251,250,.84));box-shadow:0 14px 28px rgba(8,44,53,.055);color:#264a53;font-size:.93rem;font-weight:800;line-height:1.34;backdrop-filter:blur(12px)}
.home-benefit-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#16b8b8,#0c838b);color:#fff;box-shadow:0 12px 24px rgba(10,166,170,.18)}
.home-benefit-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.home-device-stage{position:relative;min-height:600px;display:grid;place-items:center;isolation:isolate}
.home-device-stage::before{content:"";position:absolute;z-index:-1;width:92%;height:72%;right:-7%;bottom:5%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(61,214,211,.25),rgba(61,214,211,.09) 42%,transparent 70%);filter:blur(6px)}
.home-device-stage::after{content:"";position:absolute;z-index:-1;left:4%;right:-5%;bottom:4%;height:74px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(8,44,53,.16),rgba(8,44,53,0) 68%);filter:blur(10px)}
.home-desktop-device{position:relative;z-index:2;width:min(108%,798px);transform:translateX(22px);filter:drop-shadow(0 34px 46px rgba(8,44,53,.18))}
.home-desktop-device img{width:100%}
.home-phone-device{position:absolute;z-index:4;right:-2%;bottom:0;width:min(27%,208px);transform:rotate(1.2deg);filter:drop-shadow(0 26px 36px rgba(8,44,53,.22))}

/* Proof */
.home-proof{padding:38px 0 42px;background:#fff;border-bottom:1px solid var(--border-soft)}
.home-proof-layout{display:grid;gap:20px}
.home-proof-copy{display:grid;justify-items:center;gap:10px;text-align:center}
.home-proof h2{max-width:760px;margin:0;font-size:clamp(1.45rem,2.35vw,2.15rem);line-height:1.18}
.home-logo-panel{width:min(100%,1080px);margin-inline:auto;padding:16px;border:1px solid rgba(8,44,53,.08);border-radius:24px;background:#f7fbfa;box-shadow:0 14px 32px rgba(8,44,53,.045)}
.home-logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:14px;width:100%;border-top:none}
.home-logo-item{display:flex;align-items:center;justify-content:center;min-width:0;height:116px;padding:18px 22px;border:1px solid rgba(8,44,53,.09);border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(8,44,53,.045);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.home-logo-item img{display:block;width:auto;height:auto;object-fit:contain;filter:none;opacity:1;transform:none}
.home-logo-item:nth-child(1) img{max-width:235px;max-height:62px}
.home-logo-item:nth-child(2) img{max-width:220px;max-height:64px}
.home-logo-item:nth-child(3) img{max-width:235px;max-height:68px}
.home-logo-item:nth-child(4) img{max-width:132px;max-height:82px}
@media (hover:hover){.home-logo-item:hover{transform:translateY(-2px);border-color:rgba(10,166,170,.22);box-shadow:0 12px 26px rgba(8,44,53,.07)}.home-logo-item img{transition:transform .2s ease}.home-logo-item:hover img{transform:scale(1.015)}}

/* Outcomes */
.home-outcomes{position:relative;padding:clamp(74px,8vw,112px) 0;background:linear-gradient(180deg,#f8fbfb 0%,#f2f8f7 100%);border-block:1px solid rgba(8,44,53,.05)}
.home-outcomes .wrap{display:grid;gap:34px}
.outcome-heading{display:grid;justify-items:center;gap:16px;width:min(100%,980px);text-align:center;margin-inline:auto}.outcome-heading h2{max-width:760px;margin-inline:auto}.outcome-heading p{max-width:920px;margin-inline:auto;font-size:clamp(1rem,1.22vw,1.12rem);line-height:1.62;color:var(--text-secondary);text-wrap:balance}
.outcome-flow{display:none}
.outcome-stage{width:min(100%,1140px);margin-inline:auto;padding:18px;border:1px solid rgba(8,44,53,.09);border-radius:32px;background:linear-gradient(145deg,#ffffff 0%,#f6fbfb 100%);box-shadow:0 24px 54px rgba(8,44,53,.06)}
.outcome-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.outcome-card{display:grid;grid-template-rows:auto 1fr;gap:12px;min-width:0;height:100%;padding:14px;position:relative;border:1px solid rgba(8,44,53,.08);border-radius:22px;background:#f9fcfb;box-shadow:0 10px 24px rgba(8,44,53,.045);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.outcome-card::before,.outcome-card::after{content:"";position:absolute;top:22px;bottom:22px;width:3px;border-radius:999px;background:linear-gradient(180deg,var(--brand-teal),#7de3df);opacity:.82}
.outcome-card::before{left:0}
.outcome-card::after{right:0}
.outcome-card:hover{transform:translateY(-2px);border-color:rgba(10,166,170,.22);box-shadow:0 16px 34px rgba(8,44,53,.08)}
.outcome-card-header{padding:18px;border:1px solid rgba(10,166,170,.10);border-radius:16px;background:linear-gradient(145deg,#effaf9 0%,#f7fcfb 100%)}
.outcome-card-copy{display:flex;align-items:flex-start;min-height:150px;padding:18px;border:1px solid rgba(8,44,53,.07);border-radius:16px;background:#fff}
.outcome-card .ui-card-head{grid-template-columns:54px minmax(0,1fr);gap:16px;align-items:center}.outcome-card .ui-card-icon{width:54px;height:54px;flex-basis:54px;border-radius:16px}.outcome-card .ui-card-icon svg{width:24px;height:24px}
.outcome-card .ui-card-heading{display:grid;gap:6px}.outcome-card .ui-card-heading h3{font-size:clamp(1.08rem,1.35vw,1.22rem);line-height:1.4;max-width:18ch}.outcome-card-copy p{margin:0;font-size:.97rem;line-height:1.72;color:var(--text-secondary)}

/* Workflow — dark CTA family */
.home-workflow{padding:var(--section-space) 0;background:#fff;border-block:0}
.home-workflow>.wrap{position:relative;overflow:hidden;padding:clamp(30px,4.5vw,50px);border:1px solid rgba(86,226,222,.18);border-radius:26px;background:linear-gradient(105deg,#031c25 0%,#062f38 58%,#0a5860 100%);box-shadow:0 22px 52px rgba(8,44,53,.16)}
.home-workflow>.wrap::before{content:"";position:absolute;width:520px;aspect-ratio:1;right:-150px;top:-320px;border-radius:50%;background:radial-gradient(circle,rgba(14,213,208,.34),rgba(10,166,170,0) 68%);pointer-events:none}
.home-workflow>.wrap::after{content:"";position:absolute;z-index:0;inset:9px;pointer-events:none;border:1px solid rgba(86,226,222,.18);border-radius:20px;box-shadow:inset 0 0 32px rgba(10,166,170,.035)}
.home-workflow>.wrap>*{position:relative;z-index:1}
.home-workflow .home-section-heading{display:grid;justify-items:center;width:min(100%,820px);margin-inline:auto;text-align:center}
.home-workflow .home-section-heading h2{color:#fff;max-width:760px;margin-inline:auto}
.home-workflow .home-section-heading p{color:rgba(255,255,255,.72);max-width:660px;margin-inline:auto}
.home-workflow .home-kicker{color:#37d5d2;border-color:rgba(50,221,216,.26);background:rgba(10,166,170,.10)}
.workflow-shell{position:relative;padding:22px;border:1px solid rgba(84,224,220,.16);border-radius:20px;background:linear-gradient(140deg,rgba(255,255,255,.055),rgba(11,106,113,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.08)}
.workflow-progress{height:4px;margin-bottom:20px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}.workflow-progress span{display:block;width:16.666%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0bbbc0,#40ede8);box-shadow:0 0 16px rgba(11,187,192,.38);transition:width .35s var(--ease)}
.workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.workflow-card{min-width:0;padding:20px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:linear-gradient(140deg,rgba(255,255,255,.055),rgba(11,106,113,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 20px rgba(0,0,0,.06);cursor:pointer;transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.workflow-card:hover{transform:translateY(-2px);border-color:rgba(64,237,232,.30);background:linear-gradient(140deg,rgba(255,255,255,.075),rgba(11,128,135,.22))}
.workflow-card .ui-card-head{grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center}.workflow-card .ui-card-icon{width:44px;height:44px;flex-basis:44px;border:1px solid rgba(64,237,232,.24);border-radius:14px;background:rgba(11,187,192,.12);color:#55e5e1;box-shadow:inset 0 0 0 5px rgba(64,237,232,.035)}.workflow-card .ui-card-icon svg{width:20px;height:20px}
.workflow-card .ui-card-heading{gap:0}.workflow-card h3{color:#fff;font-size:1.02rem}.workflow-card p{color:rgba(255,255,255,.82);margin:7px 0 0;font-size:.9rem;line-height:1.58}
.workflow-card.is-active{border-color:rgba(64,237,232,.42);background:rgba(11,187,192,.16);box-shadow:0 0 0 1px rgba(60,238,233,.13),0 0 22px rgba(11,187,192,.16),inset 0 1px 0 rgba(255,255,255,.06)}
.workflow-card.is-active h3{color:#fff}.workflow-card.is-active p{color:rgba(255,255,255,.78)}.workflow-card.is-active .ui-card-icon{border-color:rgba(64,237,232,.46);background:rgba(11,187,192,.24);color:#68f2ee;box-shadow:0 0 18px rgba(11,187,192,.20),inset 0 0 0 5px rgba(64,237,232,.055)}
.workflow-detail{margin-top:18px;padding:22px 24px;border:1px solid rgba(84,224,220,.16);border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);color:#fff}.workflow-detail strong{display:block;margin-bottom:6px;color:#68f2ee;font-size:1rem}.workflow-detail p{margin:0;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;font-size:1rem;line-height:1.72;font-weight:600}

/* Roles */
.home-roles{padding:var(--section-space) 0;background:#fff}
.roles-heading{display:grid;justify-items:center;width:min(100%,840px);text-align:center;margin-inline:auto}.roles-heading h2{max-width:760px;margin-inline:auto}.roles-heading p{max-width:700px;margin-inline:auto}
.role-tabs{max-width:1120px;margin-inline:auto}
.tab-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px}
.tab-list button{min-height:42px;padding:8px 14px;border:1px solid var(--border-soft);border-radius:999px;background:#fff;color:var(--text-secondary);font-size:.88rem;font-weight:800;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.tab-list button:hover{border-color:var(--border-teal);color:var(--brand-teal-dark)}.tab-list button[aria-selected="true"]{border-color:var(--brand-teal);background:var(--brand-teal);color:#fff;box-shadow:0 8px 20px rgba(10,166,170,.15)}
.role-panel-content{overflow:hidden;padding:12px;border:1px solid rgba(8,44,53,.10);border-radius:26px;background:linear-gradient(145deg,#ffffff 0%,#f4fbfa 100%);box-shadow:0 18px 44px rgba(8,44,53,.06)}
.role-panel-content>div{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:stretch;gap:0;min-height:200px}
.role-panel-head{align-self:center;align-items:center;align-content:center;min-height:100%;padding:26px 30px}.role-panel-head .ui-card-icon{width:50px;height:50px;flex-basis:50px;border-radius:15px}.role-panel-head .ui-card-heading{justify-content:center}.role-panel-head h3{max-width:520px;font-size:clamp(1.22rem,1.8vw,1.55rem);line-height:1.42}
.role-panel-content ul{margin:0;padding:22px 24px 22px 30px;list-style:none;display:grid;align-content:center;gap:10px;border-left:1px solid rgba(8,44,53,.09);border-radius:0 18px 18px 0;background:rgba(255,255,255,.66)}
.role-panel-content li{position:relative;min-height:48px;padding:12px 14px 12px 44px;border:1px solid rgba(8,44,53,.07);border-radius:14px;background:#fff;color:var(--text-secondary);font-size:.94rem;line-height:1.55;box-shadow:0 5px 14px rgba(8,44,53,.025)}
.role-panel-content li::before{content:"✓";position:absolute;left:13px;top:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:var(--surface-aqua);color:var(--brand-teal-dark);font-size:.78rem;font-weight:900}

/* FAQ teaser */
.home-info-faq{padding:var(--section-space) 0;background:var(--surface-page)}
.home-faq-heading{text-align:center;margin-inline:auto}.home-faq-heading p{margin-inline:auto}
.home-info-faq-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);align-items:start;gap:24px}
.home-faq{display:grid;gap:10px}.home-faq details{border:1px solid var(--border-soft);border-radius:var(--radius-card);background:#fff;box-shadow:0 6px 18px rgba(8,44,53,.025);overflow:hidden}.home-faq summary{position:relative;display:flex;align-items:center;min-height:72px;list-style:none;padding:18px 64px 18px 20px;color:var(--text-primary);font-weight:800;cursor:pointer}.home-faq summary::-webkit-details-marker{display:none}.home-faq summary::after{content:"";position:absolute;right:16px;top:50%;width:32px;height:32px;transform:translateY(-50%);border-radius:10px;background-color:var(--surface-aqua);background-repeat:no-repeat;background-position:center;background-size:16px 16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3V13M3 8H13' stroke='%230d7f8d' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");box-sizing:border-box}.home-faq details[open]{border-color:var(--border-teal);background:#fbfefe}.home-faq details[open] summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 4L12 12M12 4L4 12' stroke='%230d7f8d' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}.home-faq details p{padding:0 20px 20px;margin:0;font-size:.95rem;line-height:1.7}
.home-faq-aside{padding:28px;border-radius:var(--radius-large);background:var(--brand-navy);box-shadow:var(--shadow-medium);text-align:center}.home-faq-aside-head{display:grid;justify-items:center}.home-faq-aside-head .ui-card-heading{align-items:center;text-align:center}.home-faq-aside h3{max-width:520px;margin-inline:auto;color:#fff}.home-faq-aside p{max-width:62ch;margin:18px auto 0;color:rgba(255,255,255,.75)}.home-faq-aside .ui-card-label{color:#83e4e2}
.home-faq-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}.home-faq-facts>div{padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-compact);background:rgba(255,255,255,.06)}.home-faq-facts strong,.home-faq-facts span{display:block}.home-faq-facts strong{color:#fff;font-size:.9rem}.home-faq-facts span{margin-top:4px;color:rgba(255,255,255,.80);font-size:.78rem;line-height:1.45}
.home-faq-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}.home-faq-actions .btn-secondary{border-color:transparent;background:var(--brand-teal);color:#fff;box-shadow:0 12px 28px rgba(10,166,170,.20)}.home-faq-actions .btn-secondary:hover{background:var(--brand-teal-dark);box-shadow:0 16px 34px rgba(8,123,130,.22)}

/* Final CTA */
.home-final-cta{padding:0 0 var(--section-space);background:var(--surface-page)}
.home-final-panel{position:relative;overflow:hidden;padding:clamp(32px,5vw,54px);border-radius:var(--radius-large);background:linear-gradient(140deg,var(--brand-navy-strong),var(--brand-navy) 58%,#0c5059);box-shadow:var(--shadow-strong);text-align:center}.home-final-panel::after{content:"";position:absolute;width:340px;aspect-ratio:1;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(42,205,202,.30),rgba(42,205,202,0) 70%)}.home-final-panel>*{position:relative;z-index:1}.home-final-panel h2{max-width:980px;margin-inline:auto;color:#fff}.home-final-panel h2 span{display:block;white-space:nowrap}.home-final-panel p{max-width:66ch;margin-inline:auto;color:rgba(255,255,255,.75)}.home-final-panel .home-actions{justify-content:center}.home-final-panel .btn-secondary{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;box-shadow:none}

@media (min-width:1500px){
  .home-hero-copy h1 span{white-space:nowrap}
  .home-hero-copy h1 strong{max-width:700px;text-wrap:balance}
}

@media (max-width:1199px){
  .home-hero-inner{grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);gap:36px}.home-device-stage{min-height:510px}.home-desktop-device{width:min(100%,650px)}.home-phone-device{width:min(28%,174px)}  .home-proof-layout{gap:18px}.home-proof h2{margin-inline:auto}.home-logo-panel{max-width:980px}
  .outcome-stage{max-width:860px;padding:14px}.outcome-grid{grid-template-columns:1fr}.outcome-card{padding:12px}.outcome-card-copy{min-height:0}
  .workflow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .role-panel-content>div{grid-template-columns:1fr;min-height:0}.role-panel-head{padding:24px 26px 20px}.role-panel-content ul{padding:18px 22px 22px;border-left:0;border-top:1px solid rgba(8,44,53,.09);border-radius:0 0 18px 18px}
  .home-info-faq-grid{grid-template-columns:1fr}.home-faq-aside{max-width:none}
}

@media (max-width:768px){
  .home-final-panel h2 span{white-space:normal}
  .home-hero{padding:54px 0 62px}.home-hero-inner{width:var(--wrap);grid-template-columns:1fr;gap:34px}.home-hero-copy{text-align:center;margin-inline:auto}.home-hero-copy p{margin-inline:auto}.home-hero-eyebrow{margin-bottom:20px}.home-hero .home-actions{justify-content:center}.home-benefits{grid-template-columns:1fr;max-width:440px;margin-inline:auto;text-align:left}.home-device-stage{min-height:0;padding:12px 0 30px}.home-desktop-device{width:min(94%,620px);transform:none}.home-phone-device{right:2%;bottom:0;width:min(27%,158px)}  .home-proof{padding:32px 0 36px}.home-logo-panel{padding:10px;border-radius:20px}.home-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-logo-item{height:96px;padding:14px 18px;border:1px solid rgba(8,44,53,.09);border-radius:16px}.home-logo-item:nth-child(1) img{max-width:200px;max-height:54px}.home-logo-item:nth-child(2) img{max-width:188px;max-height:56px}.home-logo-item:nth-child(3) img{max-width:200px;max-height:58px}.home-logo-item:nth-child(4) img{max-width:110px;max-height:70px}
  .outcome-stage{padding:10px;border-radius:24px}.outcome-card{padding:10px;border-radius:18px}.outcome-card::before,.outcome-card::after{top:14px;bottom:14px}.outcome-card-header,.outcome-card-copy{padding:16px;border-radius:14px}.outcome-card-copy{min-height:0}.outcome-card .ui-card-head{grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center}.outcome-card .ui-card-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px}
  .home-workflow>.wrap{padding:28px 18px}.home-workflow>.wrap::after{inset:7px;border-radius:17px}.workflow-shell{padding:16px}.workflow{grid-template-columns:1fr}.workflow-card{padding:18px}.workflow-detail{padding:18px;margin-top:14px}
  .tab-list{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.tab-list::-webkit-scrollbar{display:none}.tab-list button{flex:0 0 auto}.role-panel-content{padding:8px;border-radius:20px}.role-panel-head{align-self:center;align-items:center;align-content:center;padding:20px 18px 18px}.role-panel-content ul{padding:16px 14px 14px}.role-panel-content li{min-height:46px;padding:11px 12px 11px 42px;font-size:.93rem}.role-panel-content li::before{left:12px;top:11px}
  .home-faq-aside{padding:24px}.home-faq summary{min-height:68px;padding-right:60px}.home-faq summary::after{right:14px;width:30px;height:30px;background-size:15px 15px}.home-faq-facts{grid-template-columns:1fr}.home-faq-actions{display:grid;grid-template-columns:1fr}.home-faq-actions .btn{width:100%}
  .home-final-panel{padding:30px 22px}
}

@media (max-width:479px){
  .home-hero h1{font-size:clamp(2.35rem,11vw,3rem);letter-spacing:-.045em}.home-hero-copy h1 strong{margin-top:6px}.home-hero .home-actions{display:grid;grid-template-columns:1fr;width:100%}.home-hero .home-actions .btn{width:100%}.home-benefits{width:100%}.home-device-stage{padding:6px 0 16px}.home-phone-device{right:0;bottom:2%;width:30%}  .home-logo-panel{padding:8px;border-radius:18px}.home-logo-grid{gap:8px}.home-logo-item{height:86px;padding:12px;border-radius:14px}.home-logo-item:nth-child(1) img{max-width:165px;max-height:46px}.home-logo-item:nth-child(2) img{max-width:155px;max-height:48px}.home-logo-item:nth-child(3) img{max-width:165px;max-height:50px}.home-logo-item:nth-child(4) img{max-width:92px;max-height:62px}
  .outcome-card{padding:8px}.outcome-card-header,.outcome-card-copy{padding:14px}.outcome-card .ui-card-heading h3{max-width:none}.role-panel-content{padding:7px}.role-panel-head{padding:18px 14px 16px}.role-panel-content ul{padding:14px 10px 10px}.home-faq-aside{padding:20px}
  .workflow-card .ui-card-head{grid-template-columns:42px minmax(0,1fr);gap:12px}.workflow-card .ui-card-icon{width:42px;height:42px;flex-basis:42px}
}

/* PREMIUM-DARK-SECTIONS 2026-08-23: Hasil + Peran */
#hasil .wrap,
#peran .wrap{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,4.2vw,52px);border:1px solid rgba(91,226,222,.15);border-radius:32px;background:linear-gradient(145deg,#082f38 0%,#0b4049 58%,#0b4b52 100%);box-shadow:0 26px 64px rgba(5,35,42,.16),inset 0 1px 0 rgba(255,255,255,.04)}
#hasil .wrap::before,#peran .wrap::before{content:"";position:absolute;z-index:-1;inset:-28% auto auto -10%;width:440px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(44,210,205,.16) 0%,rgba(44,210,205,.055) 38%,transparent 70%);pointer-events:none}
#hasil .wrap::after,#peran .wrap::after{content:"";position:absolute;z-index:-1;right:-8%;bottom:-45%;width:400px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(20,129,140,.18) 0%,transparent 70%);pointer-events:none}
#hasil .outcome-heading h2{color:#fff}
#hasil .outcome-heading p,#peran .roles-heading p{color:rgba(255,255,255,.72)}
#hasil .home-kicker,#peran .home-kicker{border-color:rgba(55,213,210,.24);background:rgba(55,213,210,.085);color:#6ee7e3;box-shadow:none}
#hasil .home-kicker::before,#peran .home-kicker::before{background:#37d5d2;box-shadow:0 0 0 5px rgba(55,213,210,.10),0 0 16px rgba(55,213,210,.24)}
#hasil .outcome-stage{position:relative;padding:18px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(145deg,#082f38 0%,#0b4049 58%,#0b4b52 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 38px rgba(0,0,0,.12)}
#hasil .outcome-card{border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.065);box-shadow:0 12px 28px rgba(0,0,0,.11);backdrop-filter:blur(10px)}
#hasil .outcome-card:hover{border-color:rgba(55,213,210,.34);background:rgba(255,255,255,.085);box-shadow:0 18px 38px rgba(0,0,0,.16),0 0 0 1px rgba(55,213,210,.07)}
#hasil .outcome-card::before,#hasil .outcome-card::after{background:linear-gradient(180deg,#37d5d2,#85f2ed);box-shadow:0 0 16px rgba(55,213,210,.22)}
#hasil .outcome-card-header{border-color:rgba(55,213,210,.14);background:rgba(55,213,210,.055)}
#hasil .outcome-card-copy{border-color:rgba(255,255,255,.08);background:rgba(4,31,37,.24)}
#hasil .outcome-card .ui-card-heading h3{color:#fff}
#hasil .outcome-card-copy p{color:rgba(255,255,255,.70)}
#hasil .outcome-label{color:#6ee7e3}

#peran{background:#fff}
#peran .roles-heading h2{color:#fff}
#peran .tab-list button{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.74);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
#peran .tab-list button:hover{border-color:rgba(55,213,210,.35);background:rgba(55,213,210,.08);color:#8cf0ec}
#peran .tab-list button[aria-selected="true"]{border-color:#37d5d2;background:linear-gradient(135deg,#0aa6aa,#25c8c4);color:#fff;box-shadow:0 10px 24px rgba(10,166,170,.22),0 0 0 1px rgba(255,255,255,.05) inset}
#peran .role-panel-content{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.065);box-shadow:0 16px 36px rgba(0,0,0,.13);backdrop-filter:blur(10px)}
#peran .role-panel-head .ui-card-heading h3{color:#fff}
#peran .role-panel-kicker{color:#6ee7e3}
#peran .role-panel-content ul{border-left-color:rgba(255,255,255,.10);background:rgba(3,28,34,.24)}
#peran .role-panel-content li{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.055);color:rgba(255,255,255,.72);box-shadow:none}
#peran .role-panel-content li::before{background:rgba(55,213,210,.13);color:#72ebe7}

@media (max-width:900px){
  #hasil .wrap,#peran .wrap{padding:24px;border-radius:26px}
  #peran .role-panel-content ul{border-left:0;border-top:1px solid rgba(255,255,255,.10)}
}
@media (max-width:640px){
  #hasil .wrap,#peran .wrap{padding:18px 14px;border-radius:22px}
  #hasil .outcome-stage{padding:10px;border-radius:20px}
  #peran .tab-list{margin-inline:-2px;padding-inline:2px}
}


/* READABILITY CONSOLIDATED V1 — Home owns Home typography */
.workflow-card p{font-size:.96875rem;line-height:1.68;color:rgba(255,255,255,.82)}
.home-faq-facts strong{font-size:.9375rem}
.home-faq-facts span{font-size:.84375rem;line-height:1.6;color:rgba(255,255,255,.80)}
#hasil .outcome-heading p,#peran .roles-heading p{color:rgba(255,255,255,.82)}
#hasil .outcome-card-copy p{font-size:.96875rem;line-height:1.68;color:rgba(255,255,255,.82)}
#peran .tab-list button{font-size:.875rem;color:rgba(255,255,255,.80)}
#peran .role-panel-content li{font-size:.96875rem;line-height:1.68;color:rgba(255,255,255,.82)}
@media (max-width:767px){
  .home-faq-facts span{font-size:.8125rem}
}