
/* Compact SaaS public experience — DWELLIVRA */
.dw-premium{
 --saas-navy:#102b4c;
 --saas-navy-deep:#0b213b;
 --saas-teal:#16a59f;
 --saas-teal-dark:#0f7773;
 --saas-mint:#dff7f3;
 --saas-ink:#10243d;
 --saas-muted:#607086;
 --saas-line:#dbe4ed;
 --saas-surface:#f6f9fc;
 background:#fff;
 color:var(--saas-ink);
}
.dw-premium .notice-strip{display:none}
.dw-premium .topbar{
 position:sticky;top:0;z-index:80;
 background:rgba(16,43,76,.98);
 border-bottom:1px solid rgba(255,255,255,.1);
 box-shadow:0 8px 24px rgba(8,28,50,.12);
}
.dw-premium .public-nav{min-height:78px}
.dw-premium .public-links{gap:30px}
.dw-premium .public-links a{color:#f5fbff;font-size:14px;font-weight:700}
.dw-premium .public-links a:hover,.dw-premium .public-links a[aria-current=page]{color:#7ee3dc}
.dw-premium .topbar .btn-ghost{color:#fff}
.dw-premium .topbar .btn-outline{border-color:rgba(255,255,255,.38);color:#fff}
.dw-premium .topbar .btn-primary{background:var(--saas-teal);border-color:var(--saas-teal);color:#fff}
.dw-premium .topbar .hamburger{color:#fff}
.dw-premium .v2-container{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.dw-premium .v2-kicker{color:var(--saas-teal-dark);font-weight:800;letter-spacing:.16em}
.saas-home-hero{
 position:relative;
 overflow:hidden;
 background:linear-gradient(180deg,#fff 0%,#fff 84%,#f4fbfa 100%);
 min-height:710px;
 display:flex;
 align-items:center;
 padding:84px 0 104px;
}
.saas-home-hero::before{
 content:"";position:absolute;inset:0 auto auto 0;width:46%;height:5px;
 background:linear-gradient(90deg,var(--saas-teal),#58d4ca,transparent)
}
.saas-hero-grid{
 position:relative;z-index:2;
 display:grid;grid-template-columns:minmax(0,.92fr) minmax(540px,1.18fr);
 gap:58px;align-items:center;
}
.saas-hero-copy h1{
 margin:20px 0 24px;
 max-width:650px;
 font-size:clamp(50px,5.25vw,74px);
 line-height:.98;letter-spacing:-.055em;
 color:var(--saas-navy-deep);
}
.saas-hero-copy h1 em{display:block;color:var(--saas-teal-dark);font-style:normal}
.saas-hero-copy>p{
 max-width:620px;margin:0;color:#52657b;
 font-size:19px;line-height:1.7;
}
.saas-hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
.saas-hero-actions .btn{min-height:54px;padding:0 24px;border-radius:12px}
.saas-hero-actions .btn-primary{background:var(--saas-navy);border-color:var(--saas-navy)}
.saas-hero-actions .btn-outline{background:#fff;border-color:#b9c8d7;color:var(--saas-navy)}
.saas-hero-proof{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;color:#66778b;font-size:12px;font-weight:700}
.saas-hero-proof span{display:flex;align-items:center;gap:6px}
.saas-hero-proof svg{color:var(--saas-teal-dark)}
.saas-product-stage{position:relative;min-height:530px;display:grid;place-items:center;isolation:isolate}
.saas-product-stage .v2-ui-window{
 position:relative;z-index:3;width:690px;max-width:none;
 transform:perspective(1400px) rotateY(-7deg) rotateX(2deg);
 box-shadow:0 38px 80px rgba(10,35,63,.24),0 0 0 1px rgba(16,43,76,.08);
 border-radius:16px;overflow:hidden;
}
.saas-product-stage .v2-ui-main{min-height:390px}
.saas-product-stage .v2-ui-side{width:150px}
.saas-product-stage .v2-ui-content{padding:22px}
.saas-product-stage .v2-ui-greeting h3{font-size:20px}
.saas-product-stage .v2-ui-stats>div{min-width:0}
.saas-product-shadow{
 position:absolute;z-index:1;width:670px;height:430px;top:30px;right:-42px;
 border:1px solid #c9d8e6;border-radius:18px;background:#edf4f8;
 transform:rotate(3deg);
 box-shadow:0 18px 50px rgba(16,43,76,.12);
}
.saas-stage-orbit{
 position:absolute;z-index:0;width:510px;height:510px;border-radius:50%;
 border:1px solid rgba(22,165,159,.25);
 box-shadow:0 0 0 28px rgba(22,165,159,.04),0 0 0 70px rgba(16,43,76,.025);
}
.saas-stage-note{
 position:absolute;z-index:5;right:16px;bottom:8px;
 display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;
 padding:13px 16px;border-radius:12px;background:#fff;
 box-shadow:0 15px 38px rgba(10,35,63,.18);color:var(--saas-navy)
}
.saas-stage-note .notice-point{grid-row:1/3}
.saas-stage-note b{font-size:11px;letter-spacing:.12em}
.saas-stage-note small{font-size:11px;color:#738297}
.saas-wave{
 position:absolute;left:-4%;right:-4%;bottom:-70px;height:115px;
 background:linear-gradient(100deg,var(--saas-navy) 0 31%,#218dca 31% 48%,#81d8d1 48% 67%,#b9eae6 67% 100%);
 border-radius:50% 48% 0 0/65% 60% 0 0;
 transform:rotate(-1deg);
 opacity:.98;
}
.saas-trust{background:#f6fafc;border-bottom:1px solid var(--saas-line);padding:30px 0 34px}
.saas-trust-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:20px}
.saas-trust-head p{margin:0;color:#40546c;font-size:11px;font-weight:800;letter-spacing:.16em}
.saas-trust-head span{color:#8190a1;font-size:11px}
.saas-service-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--saas-line);border-radius:14px;overflow:hidden;background:#fff}
.saas-service{min-width:0;padding:17px 15px;border-right:1px solid var(--saas-line)}
.saas-service:last-child{border-right:0}
.saas-service strong{display:block;color:var(--saas-navy);font-size:17px;line-height:1.15;overflow-wrap:anywhere}
.saas-service small{display:block;margin-top:7px;color:#8794a5;font-size:9px;font-weight:800;letter-spacing:.1em}
.saas-capabilities{padding:96px 0 104px;background:#fff}
.saas-section-head{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:42px}
.saas-section-head .v2-heading{margin:0}
.saas-section-head .btn{flex:none;margin-bottom:6px}
.saas-capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.saas-capability-card{
 position:relative;min-height:320px;padding:26px;border:1px solid var(--saas-line);border-radius:18px;
 background:linear-gradient(180deg,#fff,#f9fbfd);color:inherit;text-decoration:none;
 transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.saas-capability-card:hover{transform:translateY(-5px);border-color:#98d8d4;box-shadow:0 22px 48px rgba(16,43,76,.1)}
.saas-card-number{position:absolute;right:22px;top:23px;color:#94a2b2;font-size:11px;font-weight:800;letter-spacing:.12em}
.saas-capability-card .v2-icon{width:48px;height:48px;margin-bottom:45px;background:var(--saas-mint);color:var(--saas-teal-dark)}
.saas-capability-card h3{font-size:23px;line-height:1.16;letter-spacing:-.025em;color:var(--saas-navy);margin:0 0 13px}
.saas-capability-card p{color:#66778b;font-size:14px;line-height:1.65;margin:0 0 22px}
.saas-capability-card>span:last-child{position:absolute;left:26px;bottom:24px;display:flex;gap:7px;align-items:center;color:var(--saas-teal-dark);font-size:12px;font-weight:800}
.saas-flow{padding:92px 0;background:var(--saas-navy-deep);color:#fff}
.saas-flow .v2-kicker{color:#75ddd6}
.saas-flow-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:95px;align-items:start}
.saas-flow h2{max-width:520px;margin:18px 0;font-size:clamp(36px,4vw,53px);line-height:1.04;letter-spacing:-.04em}
.saas-flow>div>div>p{max-width:520px;color:#bfd0df;font-size:16px;line-height:1.7}
.saas-flow ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.saas-flow li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.saas-flow li>b{color:#75ddd6;font-size:12px;letter-spacing:.12em}
.saas-flow li h3{margin:0 0 7px;font-size:20px}
.saas-flow li p{margin:0;color:#b9cad9;line-height:1.55;font-size:14px}
.saas-final-cta{padding:76px 0;background:#e8f7f5}
.saas-final-cta>.v2-container{display:flex;align-items:center;justify-content:space-between;gap:36px}
.saas-final-cta span{display:block;color:var(--saas-teal-dark);font-size:11px;font-weight:800;letter-spacing:.15em}
.saas-final-cta h2{margin:12px 0 8px;color:var(--saas-navy);font-size:clamp(34px,4vw,49px);letter-spacing:-.04em}
.saas-final-cta p{margin:0;color:#617487}
.saas-final-cta>.v2-container>div:last-child{display:flex;gap:12px;flex:none}
.saas-final-cta .btn{min-height:50px}
.dw-premium .saas-footer{padding-top:62px}
.dw-premium .saas-footer .footer-grid{grid-template-columns:1.6fr repeat(3,1fr);gap:54px}
.dw-premium .saas-footer .footer-brand p{max-width:330px;margin:20px 0 0;line-height:1.7}
.dw-premium .saas-footer a{margin-bottom:10px}
.dw-premium .saas-footer .footer-bottom{margin-top:42px}
.dw-premium main>.v2-hero:not(.saas-home-hero){min-height:560px}
.dw-premium .v2-section{padding-top:88px;padding-bottom:88px}
@media(max-width:1100px){
 .saas-hero-grid{grid-template-columns:.9fr 1.1fr;gap:30px}
 .saas-product-stage .v2-ui-window{width:590px}
 .saas-product-shadow{width:560px}
 .saas-service-row{grid-template-columns:repeat(3,1fr)}
 .saas-service:nth-child(3){border-right:0}
 .saas-service:nth-child(-n+3){border-bottom:1px solid var(--saas-line)}
 .saas-capability-grid{grid-template-columns:repeat(2,1fr)}
 .saas-capability-card{min-height:285px}
}
@media(max-width:860px){
 .dw-premium .public-links,.dw-premium .topbar .nav-secondary{display:none}
 .dw-premium .topbar .hamburger{display:inline-flex}
 .saas-home-hero{padding:68px 0 98px}
 .saas-hero-grid{grid-template-columns:1fr}
 .saas-hero-copy{text-align:center}
 .saas-hero-copy h1,.saas-hero-copy>p{margin-left:auto;margin-right:auto}
 .saas-hero-actions,.saas-hero-proof{justify-content:center}
 .saas-product-stage{min-height:475px}
 .saas-product-stage .v2-ui-window{width:min(690px,92vw);transform:rotate(-1deg)}
 .saas-product-shadow{right:3%;width:88%}
 .saas-flow-grid{grid-template-columns:1fr;gap:48px}
 .saas-final-cta>.v2-container{align-items:flex-start;flex-direction:column}
 .dw-premium .saas-footer .footer-grid{grid-template-columns:1.5fr repeat(3,1fr);gap:26px}
}
@media(max-width:640px){
 .dw-premium .v2-container{width:min(100% - 28px,1180px)}
 .dw-premium .public-nav{min-height:68px}
 .saas-home-hero{min-height:auto;padding:56px 0 86px}
 .saas-hero-copy h1{font-size:42px;line-height:1.02}
 .saas-hero-copy>p{font-size:16px}
 .saas-hero-proof{gap:10px 16px}
 .saas-product-stage{min-height:340px;margin-top:8px}
 .saas-product-stage .v2-ui-window{width:680px;transform:scale(.49);transform-origin:center}
 .saas-product-shadow{height:270px;top:35px}
 .saas-stage-orbit{width:320px;height:320px}
 .saas-stage-note{right:2px;bottom:0}
 .saas-trust-head{align-items:flex-start;flex-direction:column;gap:8px}
 .saas-service-row{grid-template-columns:repeat(2,1fr)}
 .saas-service,.saas-service:nth-child(3){border-right:1px solid var(--saas-line);border-bottom:1px solid var(--saas-line)}
 .saas-service:nth-child(even){border-right:0}
 .saas-service:nth-last-child(-n+2){border-bottom:0}
 .saas-capabilities{padding:70px 0}
 .saas-section-head{align-items:flex-start;flex-direction:column;margin-bottom:30px}
 .saas-capability-grid{grid-template-columns:1fr}
 .saas-capability-card{min-height:260px}
 .saas-flow{padding:70px 0}
 .saas-flow h2{font-size:37px}
 .saas-final-cta{padding:62px 0}
 .saas-final-cta>.v2-container>div:last-child{width:100%;flex-direction:column}
 .saas-final-cta .btn{width:100%;justify-content:center}
 .dw-premium .saas-footer .footer-grid{grid-template-columns:1fr 1fr}
 .dw-premium .saas-footer .footer-brand{grid-column:1/-1}
 .dw-premium .saas-footer .footer-bottom{align-items:flex-start;flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
 .saas-capability-card{transition:none}
}

/* Ensure code-native marketing actions remain legible on the light SaaS hero. */
.saas-hero-actions .v2-action,.saas-final-cta .v2-action{
 min-height:54px;padding:0 24px;border-radius:12px;
 display:inline-flex;align-items:center;justify-content:center;gap:16px;
 font-size:13px;font-weight:800;text-decoration:none;
}
.saas-hero-actions .v2-action:not(.v2-action--secondary),
.saas-final-cta .v2-action:not(.v2-action--secondary){background:var(--saas-teal);color:#fff;border:1px solid var(--saas-teal)}
.saas-hero-actions .v2-action--secondary{background:#fff;color:var(--saas-navy);border:1px solid #b9c8d7}
.saas-final-cta .v2-action--secondary{background:transparent;color:var(--saas-navy);border:1px solid #9bb9bd}
.saas-product-stage .v2-ui-window{transform:rotate(-1.2deg)}
@media(max-width:640px){
 .saas-hero-actions .v2-action{width:100%}
}
