body {--bg: #fafaf5; --surface: #fffefa; --ink: #182f28; --muted: #53665c; --line: #d9e0d6; --pale: #edf2e5; --blue: #426b3c; background: var(--bg);}
html[data-theme=dark] body {--bg: #101a18; --surface: #1b2a25; --ink: #f2f4ea; --muted: #bbc9bc; --line: #3c5045; --pale: #2a3e2e; --blue: #c1dca5;}
::selection {background: #c6ddab; color: #183426;}
.landing-shell {max-width: 1480px; margin: 16px auto 0; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: var(--surface);}
header {height: 82px; max-width: none; padding: 0 48px; background: var(--surface);}
.brand {font-size: 21px;}
.brand img {width: 34px; height: 34px;}
nav {gap: 28px; font-size: 14px;}
.prefs button {font-size: 13px;}
.prefs #theme {height: 34px; width: 34px;}
.cta {margin: 25px 0 0; gap: 12px;}
.button {border-radius: 30px; font-size: 15px; padding: 12px 23px; min-height: 47px;}
.primary {background: #244c35; border-color: #244c35; color: #fff;}
.principles {font-size: 12px; padding: 28px 20px; color: var(--muted); letter-spacing: .3px;}
.section {max-width: 1240px; padding: 98px 60px;}
.section-head {position: relative; z-index: 3; gap: 60px; margin-bottom: 48px;}
.section-head p {font-size: 17px; line-height: 1.8;}
.section-head h2 {font-size: 40px;}
.section-head h2 em {color: var(--blue);}
.feature-garden {position: relative; isolation: isolate;}
.explain-grid {position: relative; z-index: 1; gap: 25px; grid-template-columns: 1fr .78fr 1fr;}
.screen-panel {background: #d5e6c4; border: 1px solid #cadabb; border-radius: 22px; height: 560px; padding: 28px 24px 0;}
.screen-panel.answer {background: #efcfaa; border-color: #e1bd97;}
.screen-panel h3 {color: #263c29; font-size: 17px;}
.phone {border-color: #253b33; box-shadow: 0 0 0 1px #ffffff80,12px 22px 35px #132a3038;}
.screen-panel .phone {width: 222px;}
.explain-copy {padding: 18px;}
.explain-copy h3 {font-size: 27px;}
.explain-copy p {font-size: 16px;}
.explain-copy small {font-size: 9px;}
.star {color: #7a8654;}
.nova {position: relative; isolation: isolate; margin: 20px auto; max-width: 1290px; padding: 68px 75px 0; background: #244c45; border: 1px solid #376157; border-radius: 26px; gap: 65px;}
.nova>div {position: relative; z-index: 2;}
.nova .eyebrow,.nova small {color: #c9e6aa;}
.nova p {color: #dfebda;}
.nova h2 {font-size: 39px;}
.nova-logo {width: 45px; height: 45px;}
.nova-scene .phone {border-color: #a3b995; transform: rotate(4deg); width: 263px; margin: 10px auto;}
.nova-scene {height: 555px;}
.nova-note {background: #f0ecd9; color: #233c2a; border: 1px solid #fff5; box-shadow: 0 15px 30px #0c271c30; bottom: 65px; left: -35px;}
.nova-note small {color: #537142;}
.nova-note h3 {font-size: 23px;}
.tabs .active {background: #daedc3; color: #203b23;}
.tabs button {color: #d1dfd4;}
.tools-layout {gap: 45px; grid-template-columns: .8fr 1.3fr;}
.tool-display {background: #dddbef; border: 1px solid #c8c6df; border-radius: 22px; padding: 36px; gap: 30px; min-height: 550px; color: #282b42;}
.tool-display p {color: #565b72;}
.tool-display small {color: #595877;}
.tool-display .phone {border-color: #354454; width: 213px; transform: rotate(-4deg); margin-bottom: -75px;}
.tool.active {background: #e5ebdb; color: #304b2b;}
.tool-display h3 {font-size: 29px;}
.workspace {padding-top: 70px; padding-bottom: 80px;}
.workspace-grid {gap: 28px;}
.workspace-grid article {background: #d7e8ce; border: 1px solid #c4d7bc; border-radius: 23px; position: relative; height: 595px; padding: 35px; color: #253b25;}
.workspace-grid article:nth-child(2) {background: #efddbb; border-color: #e2cda4;}
.workspace-grid p {color: #4e624a;}
.workspace-grid small {color: #5b714a;}
.workspace-grid h3 {font-size: 32px;}
.workspace-grid .phone {margin-top: 25px; width: 226px;}
.language-banner {position: relative; margin-top: 30px;}
.downloads {position: relative; background: #e9eedf; padding: 90px max(40px,calc((100vw - 1120px)/2)); overflow: hidden;}
.download-heading,.download-grid {position: relative; z-index: 2;}
.download-heading {margin-bottom: 48px;}
.download-grid {gap: 22px;}
.download-grid article {background: #fffef7; border: 1px solid #d6ddcb; border-radius: 22px; box-shadow: 0 12px 25px #41503308;}
.platform {color: #47703e;}
.faq {max-width: 960px; padding-top: 85px; padding-bottom: 95px;}
.garden-footer {display: block; max-width: none; margin: 0; padding: 38px max(30px,calc((100vw - 1320px)/2)) 24px; background: #e8edff; color: #34405b; border: 0; overflow: hidden;}
.footer-top {display: flex; align-items: center; justify-content: space-between; gap: 25px;}
.footer-top nav {display: flex; gap: 26px; font: 13px Arial;}
.footer-top .brand {font-size: 19px;}
.footer-top .brand em {color: #77759f;}
.back-top {font: 24px Arial; width: 36px; text-align: center;}
.footer-wordmark {display: flex; align-items: flex-start; justify-content: center; white-space: nowrap; margin: 75px 0 65px; font: 900 clamp(70px,17vw,240px)/.86 Arial,sans-serif; letter-spacing: -.085em;}
.footer-wordmark>span {display: block;}
.footer-wordmark sup {font: normal .15em/1 Georgia; color: #8d80b2; letter-spacing: 0; margin-left: .22em; margin-top: .1em;}
.footer-bottom {display: flex; justify-content: space-between; align-items: center; gap: 25px; font: 11px/1.7 Arial,sans-serif; color: #66728a;}
.footer-bottom a {font: inherit;}
.footer-bottom>span:nth-child(2) {font-family: Ador,Arial,sans-serif;}
.skip-link {position: fixed; left: 12px; top: -100px; z-index: 100; background: var(--surface); color: var(--ink); padding: 12px;}
.skip-link:focus {top: 12px;}
:focus-visible {outline: 2px solid var(--blue); outline-offset: 5px;}
#spider-layer {position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden;}
#spider-layer canvas {width: 100%; height: 100%; display: block;}
.pet-toggle {position: fixed; right: 18px; bottom: 18px; z-index: 45; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); color: var(--ink); box-shadow: 0 4px 18px #0002; display: flex; align-items: center; gap: 8px; padding: 9px 13px; font: 12px Ador,Arial;}
.pet-toggle>span:first-child {font-size: 22px;}
.pet-toggle i {width: 6px; height: 6px; background: #638d43; border-radius: 50%;}
.pet-toggle[aria-pressed=false] i {background: #999;}
.reveal {opacity: 1; transform: none;}
html[data-theme=dark] .primary {background: #c3d9a7; color: #1d3521; border-color: #c3d9a7;}
html[data-theme=dark] .screen-panel {background: #3c5744; border-color: #516950;}
html[data-theme=dark] .screen-panel.answer {background: #66533d; border-color: #786546;}
html[data-theme=dark] .screen-panel h3 {color: #f1f3e2;}
html[data-theme=dark] .tool-display {background: #46445d; color: #f4f0ff; border-color: #69647d;}
html[data-theme=dark] .tool-display p,html[data-theme=dark] .tool-display small {color: #ded9ee;}
html[data-theme=dark] .tool.active {background: #344c36; color: #d8e8c5;}
html[data-theme=dark] .workspace-grid article {background: #3d5440; color: #eff4e7; border-color: #51694e;}
html[data-theme=dark] .workspace-grid article:nth-child(2) {background: #66543b; border-color: #796549;}
html[data-theme=dark] .workspace-grid p,html[data-theme=dark] .workspace-grid small {color: #e0e6d2;}
html[data-theme=dark] .downloads {background: #20332a;}
html[data-theme=dark] .download-grid article {background: #263b30; border-color: #476148;}
html[data-theme=dark] .garden-footer {background: #10182b; color: #d8deed;}
html[data-theme=dark] .footer-bottom {color: #a8b3cf;}
@media (min-width:1550px) {.landing-shell {margin-top: 30px;}}
@media (max-width:1150px) {.landing-shell {margin: 12px;}.section {padding-left: 40px; padding-right: 40px;}.nova {margin: 10px 20px; padding: 50px 40px 0; gap: 35px;}.tool-display {padding: 25px; gap: 20px;}.tool-display .phone {width: 185px;}}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}}
.workspace-grid .phone {position: relative; z-index: 2;}
.workspace-grid h3,.workspace-grid p,.workspace-grid small {position: relative; z-index: 3;}
.screen-panel .phone {width: min(222px,100%);}
@media (min-width:761px) and (max-width:960px) {.tool-display .phone {width: 44%; min-width: 140px;}.tool-display {padding: 25px 20px; gap: 19px;}.tool-display h3 {font-size: 24px;}.tools-layout {gap: 28px;}.section-head h2 {font-size: 34px;}}
/* v5: calm cloud atmosphere drawn in CSS, zero decorative image requests. */
body{--bg:#f7f9fc;--surface:#fff;--ink:#172b43;--muted:#5a6b7e;--line:#dce4ec;--pale:#edf3f9;--blue:#55779b;background:var(--bg)}
.landing-shell{max-width:1440px;margin:24px auto 0;background:var(--surface);box-shadow:0 15px 65px #21456808}.hero{position:relative;isolation:isolate;margin:0!important;border:0;border-radius:0;max-width:none!important;background:linear-gradient(180deg,#fcfeff 0%,#edf6fc 68%,#dfeef8 100%);overflow:hidden}.hero:before{display:none}.cloudscape{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 85%,#fff 0,transparent 65%)}.cloud-mist{position:absolute;width:620px;height:270px;opacity:.85;filter:blur(11px);background:radial-gradient(ellipse at 27% 65%,#fff 0 21%,transparent 45%),radial-gradient(ellipse at 45% 45%,#fff 0 21%,transparent 47%),radial-gradient(ellipse at 69% 67%,#fff 0 25%,transparent 52%)}.mist-left{left:-230px;top:210px;transform:rotate(-8deg)}.mist-right{right:-240px;top:145px;transform:rotate(9deg)}
.hero-copy{position:relative;z-index:3;max-width:840px;padding:38px 24px 0;margin:auto;text-align:center}.hero .eyebrow{font-size:9px;letter-spacing:2.1px;color:#667e93}.hero h1,html[lang=en] .hero h1{font-size:clamp(40px,4.65vw,65px);line-height:1.07;letter-spacing:-2.1px;color:#142b43;margin:19px 0 18px}.hero h1 em{color:#4a789e}html[lang=bn] .hero h1{font-size:clamp(40px,4.5vw,62px);line-height:1.2;letter-spacing:-.9px}.hero .intro,html[lang=en] .hero .intro{font-size:16px;line-height:1.7;max-width:650px;color:#526d81}.hero .cta{margin-top:23px;gap:10px}.hero .button{font-size:14px;padding:11px 22px;min-height:44px;box-shadow:0 5px 15px #3156730a}.hero .primary{background:#244b6d;border-color:#244b6d;color:#fff}.hero .cta .button:not(.primary){background:#fffffff0;color:#2c4b62;border-color:#d9e5ee}
.scene{position:relative;isolation:isolate;height:450px;margin:38px auto 0;max-width:1180px;perspective:none}.scene:before{content:'';position:absolute;left:50%;bottom:-45px;transform:translateX(-50%);width:70%;height:220px;border-radius:50%;background:radial-gradient(ellipse,#c4dced55,transparent 70%);z-index:0}.hero-phone{width:290px;position:absolute;left:50%;top:0;transform:translateX(-50%);border:6px solid #263745;border-radius:39px;box-shadow:0 0 0 2px #9faeb9,0 30px 45px #24466d2b;z-index:2}.hero-phone img{width:100%;height:auto;border-radius:29px}.float{position:absolute;z-index:3;width:270px;padding:25px 23px 23px;border:1px solid #fff;border-radius:20px;background:#ffffffed;box-shadow:0 16px 38px #3457720d;text-align:center;backdrop-filter:none;transform:none;rotate:0deg;animation:none}.float.left{left:7%;top:100px}.float.right{right:7%;top:33px}.float .card-icon{font:34px/1.2 Georgia;color:#597e9d;margin-bottom:14px}.float small{font:9px/1.5 monospace;letter-spacing:1.4px;color:#6b8496}.float h3,html[lang=en] .float h3{font-size:22px;line-height:1.4;color:#263c4f;margin:12px 0}.float p,html[lang=en] .float p{font-size:12px;line-height:1.7;color:#6b7d8b}.garden-caption{position:absolute;z-index:4;bottom:16px;left:28px;right:28px;display:flex;justify-content:space-between;font:9px/1.5 monospace;letter-spacing:1.2px;color:#58738b}.garden-caption span{max-width:25%}
/* Existing sections retain their layout; cooler, clearer grading around screens. */
.section-head h2 em{color:#527397}.screen-panel{background:#dbe8ee;border-color:#cfdee6}.screen-panel.answer{background:#f0e0cc;border-color:#e5d3ba}.nova{background:#243f51;border-color:#39586a}.nova .eyebrow,.nova small{color:#c0dbe6}.nova p{color:#d3e1e7}.nova-note{background:#f2eee4;color:#273e4c}.nova-note small{color:#607c8d}.tabs .active{background:#dce9ed;color:#244557}.tool-display{background:#e3dfef;border-color:#d4cfe3}.tool.active{background:#e9eef7;color:#395a7b}.workspace-grid article{background:#dce9e5;border-color:#ccddd6}.workspace-grid article:nth-child(2){background:#eee3d4;border-color:#e1d3c0}.downloads{background:#eaf0f6}.download-grid article{border-color:#d5dfe9;background:#fff}.primary{background:#2a4e70;border-color:#2a4e70}.platform{color:#527397}
html[data-theme=dark] body{--bg:#111b29;--surface:#1b2a3c;--ink:#eef3fa;--muted:#b4c3d3;--line:#354960;--pale:#22384b;--blue:#aac9e6}html[data-theme=dark] .hero{background:linear-gradient(#1b2a3c,#203c55 70%,#294964)}html[data-theme=dark] .cloudscape{background:radial-gradient(ellipse at 50% 85%,#5983a020,transparent 65%)}html[data-theme=dark] .cloud-mist{opacity:.055}html[data-theme=dark] .hero h1{color:#f1f6fc}html[data-theme=dark] .hero h1 em{color:#b2d0e8}html[data-theme=dark] .hero .intro,html[data-theme=dark] .hero .eyebrow{color:#c0d1de}html[data-theme=dark] .float{background:#22394deb;border-color:#4a637744}html[data-theme=dark] .float h3{color:#eef4fa}html[data-theme=dark] .float p,html[data-theme=dark] .float small,html[data-theme=dark] .float .card-icon{color:#bdd2e4}html[data-theme=dark] .hero .primary,html[data-theme=dark] .primary{background:#afcde5;border-color:#afcde5;color:#193248}html[data-theme=dark] .hero .cta .button:not(.primary){background:#2b4358;border-color:#496176;color:#eef4fa}html[data-theme=dark] .garden-caption{color:#afc7da}html[data-theme=dark] .screen-panel{background:#344e61;border-color:#4b6679}html[data-theme=dark] .screen-panel.answer{background:#675542;border-color:#7d6a52}html[data-theme=dark] .workspace-grid article{background:#344e48;border-color:#4f6861}html[data-theme=dark] .workspace-grid article:nth-child(2){background:#625443;border-color:#786953}html[data-theme=dark] .downloads{background:#1a2c40}html[data-theme=dark] .download-grid article{background:#23394d;border-color:#3e5870}html[data-theme=dark] .section-head h2 em{color:#aac9e6}
@media(max-width:1150px){.landing-shell{margin:14px}.float{width:230px;padding:23px 18px}.float.left{left:4%}.float.right{right:4%}.hero-phone{width:270px}.float h3,html[lang=en] .float h3{font-size:20px}}
@media(min-width:761px) and (max-width:960px){.float{width:195px;padding:20px 14px}.float.left{left:2%}.float.right{right:2%}.float h3,html[lang=en] .float h3{font-size:18px}.hero-phone{width:245px}.scene{height:420px}}