
:root{
  --ink:#0a1830;--muted:#68778b;--blue:#1769e8;--blue2:#18a8ff;--navy:#06152a;
  --soft:#f6f9fd;--line:#e5edf6;--white:#fff;--green:#16a36a;--amber:#f0a500;
  --shadow:0 24px 80px rgba(20,55,100,.12);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#fff;color:var(--ink);line-height:1.6}
a{text-decoration:none;color:inherit}.container{width:min(1220px,calc(100% - 40px));margin:auto}
.topbar{background:#041224;color:#c5d3e5;font-size:12px}.topbar .container{height:34px;display:flex;align-items:center;justify-content:space-between}
header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid #edf2f7}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px}.brandmark{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,var(--blue),var(--blue2));display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 10px 28px rgba(23,105,232,.25)}.brand strong,.brand span{display:block}.brand strong{font-size:18px}.brand span{font-size:11px;color:#7f8fa4}
.navlinks{display:flex;gap:22px;align-items:center}.navlinks a{font-size:14px;font-weight:700;color:#334155}.navlinks a:hover{color:var(--blue)}.navcta{padding:11px 16px;border-radius:11px;background:var(--blue);color:#fff!important}.menubtn{display:none;border:0;background:none;font-size:27px}
.loginmenu{display:flex;gap:7px}.loginmenu a{padding:8px 11px;border:1px solid #dfe7f1;border-radius:9px;font-size:12px;font-weight:700}.loginmenu .dark{background:#0d2748;color:#fff;border-color:#0d2748}

.hero{position:relative;overflow:hidden;padding:94px 0 78px;background:radial-gradient(circle at 88% 12%,#dff4ff 0,transparent 26%),radial-gradient(circle at 6% 78%,#eaf2ff 0,transparent 22%),linear-gradient(180deg,#f9fcff,#fff 82%)}
.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:76px;align-items:center}.tag{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #dbe9f8;border-radius:999px;padding:8px 12px;color:var(--blue);font-size:12px;font-weight:800;box-shadow:0 8px 20px rgba(19,83,160,.05)}.hero h1{font-size:clamp(48px,6.4vw,82px);line-height:.99;letter-spacing:-.055em;margin:18px 0 24px}.hero p{font-size:19px;color:#596a7f;max-width:720px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:12px;font-weight:800;border:1px solid transparent;cursor:pointer}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 13px 30px rgba(23,105,232,.23)}.btn-secondary{background:#fff;border-color:#dbe5ef}.btn-dark{background:#0d2748;color:#fff}.hero-proof{display:flex;gap:24px;flex-wrap:wrap;color:#66758a;font-size:13px}.hero-proof b{display:block;color:#0f2848;font-size:19px}

.browser{background:#0a1730;padding:14px;border-radius:30px;box-shadow:0 35px 90px rgba(10,31,65,.26);transform:rotate(1deg)}.browser-shell{background:#f4f8fd;border-radius:20px;overflow:hidden}.browser-top{height:50px;background:#fff;border-bottom:1px solid #e7edf4;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#bec9d6;margin-right:5px}.app{display:grid;grid-template-columns:138px 1fr;min-height:450px}.sidebar{background:#0d2748;color:#b8c8db;padding:22px 15px;display:flex;flex-direction:column;gap:17px;font-size:12px}.sidebar strong{color:#fff;font-size:15px}.sidebar .active{background:rgba(255,255,255,.08);padding:9px;border-radius:8px;color:#fff}.mainpane{padding:22px}.panehead{display:flex;justify-content:space-between;align-items:center}.run{padding:8px 10px;border-radius:9px;background:#1267e8;color:#fff;font-size:11px;font-weight:800}.metricrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.metric{background:#fff;border:1px solid #e3eaf3;border-radius:14px;padding:14px}.metric small,.metric b{display:block}.metric b{font-size:21px}.graph{height:172px;background:#fff;border:1px solid #e3eaf3;border-radius:14px;padding:16px;display:flex;align-items:end;gap:9px}.graph span{flex:1;background:linear-gradient(#2ab4ff,#1267e8);border-radius:6px 6px 0 0}

.trust{border-top:1px solid #eef3f7;border-bottom:1px solid #eef3f7}.trust .container{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;text-align:center;padding:18px 0;color:#6b7a8d;font-size:13px;font-weight:800}
section{padding:100px 0}.soft{background:var(--soft)}.dark-section{background:var(--navy);color:#fff}.section-title{text-align:center;max-width:870px;margin:0 auto 46px}.eyebrow{font-size:12px;letter-spacing:.17em;color:var(--blue);font-weight:800}.dark-section .eyebrow{color:#72caff}.section-title h2,.copy h2{font-size:clamp(36px,4.8vw,60px);line-height:1.07;letter-spacing:-.045em;margin:11px 0 18px}.section-title p,.copy p{font-size:17px;color:#68778a}.dark-section p{color:#bac7d7}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 10px 28px rgba(30,65,105,.04);transition:.25s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.card .num{font-size:12px;color:#94a3b8}.card h3{font-size:24px;margin:10px 0}.card p{color:#6b7a90}.card a{color:var(--blue);font-weight:800}
.split{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}.feature-list{display:grid;gap:11px;margin:26px 0}.feature{padding:15px 17px;background:#fff;border:1px solid var(--line);border-radius:14px}.feature b,.feature span{display:block}.feature span{font-size:14px;color:#6b7a8f;margin-top:3px}
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.portal{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}.portal strong{display:block;font-size:22px}.portal span{display:block;color:#718095;font-size:14px;margin:7px 0 16px}.portal a{font-weight:800;color:#1267e8}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.step .n{width:34px;height:34px;border-radius:50%;background:#e8f3ff;color:#1267e8;display:grid;place-items:center;font-weight:900;margin-bottom:14px}.step p{font-size:14px;color:#6d7c90}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.price-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px}.price-card.popular{border:2px solid #1267e8;box-shadow:0 24px 60px rgba(18,103,232,.13)}.badge{position:absolute;top:16px;right:16px;background:#e7f2ff;color:#1267e8;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800}.price-card h3{font-size:24px}.amount{font-size:48px;font-weight:900;letter-spacing:-.05em}.amount small{font-size:14px;color:#718096}.price-card ul{padding-left:18px;color:#617187}.price-card .btn{width:100%;margin-top:12px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;transition:.25s}.service:hover{transform:translateY(-4px)}.service .ico{font-size:26px}.service h3{margin:8px 0}.service p{font-size:14px;color:#6a7a8f}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.industry{padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px}.industry h3{margin:5px 0}.industry p{font-size:14px;color:#6d7c90}
.faq{max-width:920px;margin:auto;display:grid;gap:12px}.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}.faq summary{cursor:pointer;font-weight:800}.faq p{color:#68788c}
.cta{background:linear-gradient(135deg,#07182f,#0a427f);color:#fff;border-radius:30px;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:50px}.cta h2{font-size:44px;line-height:1.08;margin:10px 0}.cta p{color:#c0cfe0}.form{display:grid;gap:11px}.form input,.form select,.form textarea{width:100%;padding:14px;border-radius:11px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;outline:none}.form input::placeholder,.form textarea::placeholder{color:#c7d2df}.form option{color:#111}.form textarea{min-height:90px;resize:vertical}
.pagehero{padding:76px 0;background:linear-gradient(180deg,#f4f9ff,#fff)}.pagehero h1{font-size:60px;line-height:1.04;letter-spacing:-.045em;margin:12px 0}.pagehero p{font-size:18px;color:#66758a;max-width:760px}
.adhero{padding:88px 0 60px;background:linear-gradient(180deg,#f5faff,#fff)}.adhero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.adhero h1{font-size:clamp(44px,6vw,72px);line-height:1.01;letter-spacing:-.05em;margin:14px 0 20px}.adhero p{font-size:18px;color:#617085}.adbox{background:#0a1830;color:#fff;border-radius:26px;padding:30px;box-shadow:var(--shadow)}.adbox p{color:#c4d0df}.adlist{display:grid;gap:10px;margin:20px 0}.adlist div{padding:12px 14px;background:rgba(255,255,255,.07);border-radius:12px}
.sticky-cta{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:#fff;border:1px solid #dfe8f2;border-radius:999px;padding:8px;display:flex;gap:8px;box-shadow:0 18px 50px rgba(0,0,0,.13);z-index:50}.sticky-cta a{padding:10px 16px;border-radius:999px;font-weight:800;font-size:13px}.sticky-cta .primary{background:#1267e8;color:#fff}
footer{background:#041224;color:#c0d0e1;padding:56px 0 22px}.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:40px}.footergrid h4{color:#fff;margin:0 0 12px}.footergrid a,.footergrid span{display:block;font-size:14px;margin:7px 0}.footbottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:18px;font-size:12px}.whatsapp{position:fixed;right:20px;bottom:20px;background:#20c869;color:#fff;padding:13px 17px;border-radius:999px;font-weight:800;box-shadow:0 12px 32px rgba(0,0,0,.2);z-index:40}
.reveal{opacity:0;transform:translateY(20px);transition:.65s}.reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){.navlinks{display:none;position:absolute;top:116px;left:20px;right:20px;background:#fff;padding:18px;border-radius:16px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.navlinks.open{display:flex}.loginmenu{display:none}.menubtn{display:block}.hero-grid,.split,.cta,.adhero .container{grid-template-columns:1fr}.grid3,.price-grid{grid-template-columns:1fr}.service-grid,.industry-grid,.how-grid{grid-template-columns:repeat(2,1fr)}.trust .container{grid-template-columns:repeat(3,1fr)}.browser{transform:none}.footergrid{grid-template-columns:1fr 1fr}.topbar .container{justify-content:center}.topbar span:first-child{display:none}}
@media(max-width:640px){.container{width:min(100% - 28px,1220px)}.topbar{display:none}.navlinks{top:82px}.hero{padding-top:58px}.hero h1,.adhero h1{font-size:44px}.pagehero h1{font-size:44px}.metricrow,.portal-grid,.service-grid,.industry-grid,.how-grid,.footergrid{grid-template-columns:1fr}.trust .container{grid-template-columns:1fr 1fr}.app{grid-template-columns:92px 1fr}.sidebar{padding:18px 9px}.cta{padding:28px}.sticky-cta{left:14px;right:14px;transform:none;justify-content:center}.sticky-cta a{flex:1;text-align:center}}

.cookie-bar{position:fixed;left:18px;right:18px;bottom:18px;z-index:120;background:#07182f;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 18px 60px rgba(0,0,0,.24)}.cookie-bar b,.cookie-bar span{display:block}.cookie-bar span{font-size:12px;color:#c7d3e1}.cookie-bar a{text-decoration:underline}.cookie-bar button{border:0;background:#1769e8;color:#fff;border-radius:10px;padding:10px 16px;font-weight:800;cursor:pointer}@media(max-width:640px){.cookie-bar{flex-direction:column;align-items:stretch}.cookie-bar button{width:100%}}

/* Version 7 official CloudDesk branding */
.brand-logo-wrap{display:flex;align-items:center;gap:12px;min-width:210px}
.brand-logo-img{height:58px;width:auto;display:block;object-fit:contain}
.footer-logo-img{height:92px;width:auto;max-width:270px;display:block;object-fit:contain}
.brandmark{display:none!important}
.brand>div:not(.brandmark){display:none}
@media(max-width:640px){
  .brand-logo-img{height:48px;max-width:180px}
  .footer-logo-img{height:78px;max-width:230px}
}

.nav{min-height:86px}
@media(max-width:1000px){.navlinks{top:120px}}
@media(max-width:640px){.nav{min-height:78px}.navlinks{top:78px}}

/* Version 8 product showcase */
.product-showcase{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.showcase-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 18px 55px rgba(20,55,100,.08)}
.showcase-panel.dark-ui{background:#09182f;color:#fff;border-color:#132848}
.showcase-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.showcase-head span{font-size:12px;color:#7a8ba1}
.dark-ui .showcase-head span{color:#9fb0c6}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dash-kpi{padding:14px;border-radius:14px;background:#f6f9fd;border:1px solid #e5edf5}
.dark-ui .dash-kpi{background:#102646;border-color:#18385f}
.dash-kpi small,.dash-kpi b{display:block}.dash-kpi b{font-size:22px;margin-top:4px}
.dash-list{display:grid;gap:10px;margin-top:16px}
.dash-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;background:#f8fbfe;border:1px solid #e8eef6;font-size:13px}
.dark-ui .dash-row{background:#102646;border-color:#18385f;color:#d9e4f1}
.status-ok{color:#15a56d;font-weight:800}.status-warn{color:#f0a500;font-weight:800}
.product-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;transition:.25s}
.gallery-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.gallery-card h3{margin:10px 0}.gallery-card p{font-size:14px;color:#6a7b90}
.gallery-screen{height:220px;border-radius:16px;background:linear-gradient(145deg,#edf5ff,#ffffff);border:1px solid #e3ebf4;padding:16px;overflow:hidden}
.gallery-bar{height:12px;border-radius:999px;background:#dce9f8;margin-bottom:10px}.gallery-bar.short{width:52%}.gallery-bar.mid{width:76%}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.gallery-box{height:54px;border-radius:10px;background:#fff;border:1px solid #dce7f2}
.gallery-chart{height:92px;margin-top:8px;display:flex;align-items:end;gap:6px}.gallery-chart span{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(#28b1ff,#1267e8)}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat-card{background:#0a1830;color:#fff;border-radius:18px;padding:22px;text-align:center}.stat-card b{display:block;font-size:28px}.stat-card span{font-size:13px;color:#bac7d8}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.value-card{padding:24px;border-radius:20px;background:#fff;border:1px solid var(--line)}.value-card h3{margin:8px 0}.value-card p{font-size:14px;color:#6c7b8f}
.lead-band{background:linear-gradient(135deg,#eaf5ff,#f8fbff);border:1px solid #dbe8f7;border-radius:24px;padding:30px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.lead-band h3{font-size:30px;margin:0 0 8px}.lead-band p{color:#627287}
@media(max-width:900px){.product-showcase,.lead-band{grid-template-columns:1fr}.product-gallery,.stats-strip,.value-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.product-gallery,.stats-strip,.value-grid,.dash-kpis{grid-template-columns:1fr}}

/* Version 9 launch candidate additions */
.compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:#fff}
.compare-table{width:100%;border-collapse:collapse;min-width:760px}
.compare-table th,.compare-table td{padding:16px 18px;border-bottom:1px solid #edf2f7;text-align:left}
.compare-table th{background:#f8fbff;font-size:13px}
.compare-table th:not(:first-child),.compare-table td:not(:first-child){text-align:center}
.compare-table tr:last-child td{border-bottom:0}
.check{color:#15a56d;font-weight:900}.dash{color:#9aa8b8}
.plan-finder{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch}
.finder-box{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px}
.finder-box label{display:block;font-weight:800;margin:12px 0 7px}
.finder-box select,.finder-box input{width:100%;padding:13px;border:1px solid #dbe5ef;border-radius:11px;font:inherit}
.finder-result{background:linear-gradient(135deg,#07182f,#0a427f);color:#fff;border-radius:22px;padding:28px}
.finder-result small,.finder-result strong,.finder-result span{display:block}
.finder-result strong{font-size:34px;margin:6px 0}.finder-result span{color:#c5d2e2}
.seo-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.launch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.launch-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.launch-item b{display:block;margin-bottom:6px}.launch-item span{font-size:14px;color:#6c7b8e}
.mobile-cta{display:none}
@media(max-width:900px){.plan-finder{grid-template-columns:1fr}.launch-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.launch-grid{grid-template-columns:1fr}.mobile-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:130;gap:8px;background:#fff;border:1px solid #dfe7f1;border-radius:14px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.16)}.mobile-cta a{flex:1;text-align:center;padding:11px 8px;border-radius:10px;font-weight:800;font-size:13px}.mobile-cta .primary{background:#1267e8;color:#fff}.whatsapp{display:none}}
