/* UniVerse360 homepage — responsive static website */
:root{--navy:#07142f;--navy2:#0b2250;--blue:#1268df;--cyan:#12a9e8;--orange:#f28a1b;--ink:#142746;--muted:#687995;--pale:#f3f7fd;--line:#e3ebf6;--white:#fff;--radius:22px;--shadow:0 20px 55px rgba(15,44,89,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.topline{height:4px;background:linear-gradient(90deg,#0a2a67,#0875d1,#f28a1b)}.contact-topbar{background:linear-gradient(100deg,#073b86,#0878c9 68%,#079dd2);color:#fff;font-size:13px}.contact-topbar-inner{max-width:1440px;margin:auto;padding:9px 4.5%;display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar-details{display:flex;align-items:center;gap:27px;flex-wrap:wrap}.topbar-details span,.topbar-details a{display:inline-flex;align-items:center;gap:9px;color:#fff}.topbar-symbol{font-size:15px;font-weight:700;font-style:normal}.topbar-social{display:flex;align-items:center;gap:9px}.topbar-social a{width:29px;height:29px;border:1px solid rgba(255,255,255,.75);border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;transition:background .2s}.topbar-social a:hover{background:rgba(255,255,255,.18)}.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(110deg,#ffffff 0%,#f1f7ff 62%,#e8f3ff 100%);color:#102448;box-shadow:0 5px 22px rgba(13,48,95,.10);border-bottom:1px solid #dce8f6}.nav-wrap{max-width:1440px;margin:auto;padding:0 4.5%;height:104px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:flex;align-items:center;justify-content:flex-start;flex:0 0 265px;max-width:265px;height:96px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.brand img{width:100%;height:90px;object-fit:contain;object-position:left center;background:transparent;border-radius:0}.main-nav{display:flex;align-items:center;gap:clamp(15px,2.1vw,34px);height:100%;font-size:15px;font-weight:600}.main-nav>a:not(.btn),.nav-trigger{color:#1c3154;transition:color .2s}.main-nav>a:hover,.nav-trigger:hover{color:#0878c9}.nav-item{height:100%;display:flex;align-items:center;position:static}.nav-trigger{border:0;background:none;padding:16px 0;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:9px}.chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s}.nav-trigger[aria-expanded=true] .chevron{transform:rotate(225deg);margin-top:4px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:15px 22px;background:linear-gradient(115deg,#1466df,#0da6e3);color:#fff;border:0;border-radius:13px;font-weight:700;box-shadow:0 10px 24px rgba(18,104,223,.18);transition:transform .2s,box-shadow .2s;cursor:pointer}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(18,104,223,.25)}.btn span{font-size:20px}.nav-cta{padding:17px 25px;min-width:125px}.mega-menu{position:absolute;top:calc(100% - 1px);left:4.5%;right:4.5%;background:#fff;color:var(--ink);border:1px solid #e8eef7;border-radius:0 0 24px 24px;box-shadow:0 28px 60px rgba(5,22,55,.18);padding:34px 32px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s;max-height:calc(100vh - 120px);overflow:auto}.has-menu:hover .mega-menu,.has-menu:focus-within .mega-menu,.has-menu.menu-open .mega-menu{opacity:1;visibility:visible;transform:translateY(0)}.mega-column{padding:0 25px 28px;border-right:1px solid var(--line)}.mega-column:first-child{padding-left:8px}.mega-column:last-of-type{border-right:0}.mega-column h3{font-size:13px;letter-spacing:1.4px;color:#124a9c;text-transform:uppercase;margin:0 0 22px;display:flex;align-items:center;gap:12px}.category-mark{width:35px;height:35px;display:inline-grid;place-items:center;border-radius:10px;background:#edf5ff;color:var(--blue);font-size:15px}.menu-link{display:flex;align-items:center;gap:14px;padding:11px 8px;margin:0 0 7px;border-radius:13px;transition:background .2s;min-height:69px}.menu-link:hover{background:#f3f7fd}.menu-icon{flex:0 0 47px;width:47px;height:47px;border-radius:14px;display:grid;place-items:center;background:#eff5ff;color:#176be2;font-size:21px;box-shadow:0 9px 22px rgba(25,65,122,.07)}.menu-link b{display:block;font-size:14px;line-height:1.4}.menu-link small{display:block;font-size:12px;color:#7a8aa5;margin-top:4px;line-height:1.45}.featured-link{background:#f1f8ff;border:1px solid #dfebfb}.featured-link .menu-icon{background:linear-gradient(135deg,#1769df,#42ae74);color:#fff}.view-all{display:flex;justify-content:space-between;padding:15px;background:#f2f6ff;border-radius:12px;color:#145bbd;font-weight:700;font-size:13px;margin-top:10px}.mega-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 7px;border-top:1px solid var(--line);background:linear-gradient(90deg,#f6faff,#f7fcfa);margin:0 -32px;border-radius:0 0 24px 24px}.mega-footer b,.mega-footer small{display:block}.mega-footer b{font-size:14px}.mega-footer small{font-size:12px;color:var(--muted);margin-top:3px}.btn-small{padding:11px 18px;border-radius:10px;font-size:13px}.mobile-toggle{display:none;background:none;border:0;color:white;padding:10px}.mobile-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px;border-radius:3px}
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 28%,rgba(34,140,237,.12),transparent 37%),linear-gradient(130deg,#f8fbff,#edf4fd 70%,#f8fbff);min-height:630px}.hero-inner{max-width:1240px;margin:auto;padding:78px 28px 55px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:35px;position:relative;z-index:1}.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:10px;color:#1265ca;font-size:11px;letter-spacing:1.8px;font-weight:800}.eyebrow{background:#e9f3ff;padding:9px 13px;border-radius:50px}.eyebrow-dot{width:7px;height:7px;background:#13a96b;border-radius:50%;box-shadow:0 0 0 4px #d6f5e7}.hero h1{font-size:clamp(42px,5.2vw,68px);line-height:1.08;letter-spacing:-2.8px;margin:24px 0 20px;color:#0b1c3c;font-weight:800}.hero h1 span,.section-heading h2 span,.benefits-copy h2 span,.contact-copy h2 span{background:linear-gradient(90deg,#1468dc,#10a9e2);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-text{font-size:16px;max-width:565px;color:#62728d;line-height:1.85;margin:0 0 28px}.hero-actions{display:flex;flex-wrap:wrap;gap:13px}.btn-outline{background:#fff;color:#16345d;border:1px solid #dce6f3;box-shadow:none}.btn-outline:hover{box-shadow:var(--shadow)}.play{font-size:11px;background:#eaf3ff;color:#1769df;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}.hero-proof{display:flex;align-items:center;gap:13px;margin-top:34px}.proof-avatars{display:flex}.proof-avatars span{width:34px;height:34px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:#1767d7;color:#fff;font-size:10px;font-weight:800;margin-left:-7px}.proof-avatars span:first-child{margin-left:0;background:#0c2554}.proof-avatars span:last-child{background:#e9f5ef;color:#15915d}.hero-proof p{margin:0}.hero-proof b,.hero-proof small{display:block}.hero-proof b{font-size:12px}.hero-proof small{color:#7b8aa2;font-size:11px;margin-top:2px}.hero-visual{height:445px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid rgba(28,113,213,.17);border-radius:50%;transform:rotate(-24deg)}.orbit-a{width:410px;height:270px}.orbit-b{width:500px;height:340px}.core-card{width:230px;height:225px;border:1px solid #fff;background:rgba(255,255,255,.88);box-shadow:0 25px 70px rgba(27,79,148,.16);border-radius:26px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;z-index:2;backdrop-filter:blur(10px)}.core-logo{font-size:55px;letter-spacing:-5px;line-height:1;font-weight:800;color:#0b2864}.core-logo span{font-size:23px;color:#168de0;letter-spacing:-1px}.core-card>b{font-size:17px;margin-top:13px}.core-card>small{font-size:11px;color:#7b8aa2}.core-status{font-size:10px;color:#428265;background:#eaf8f0;border-radius:30px;padding:6px 10px;margin-top:14px}.core-status span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#26b16f;margin-right:5px}.float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;background:#fff;padding:13px 15px;border:1px solid #e9eff8;border-radius:15px;box-shadow:0 14px 36px rgba(27,69,130,.12);min-width:200px;animation:float 5s ease-in-out infinite}.float-card b,.float-card small{display:block}.float-card b{font-size:12px}.float-card small{font-size:10px;color:#8090a8;margin-top:2px}.float-icon{width:36px;height:36px;border-radius:11px;background:#eaf3ff;color:#1768d8;display:grid;place-items:center;font-size:18px}.card-admission{top:45px;left:0}.card-academic{top:80px;right:-4px;animation-delay:-1s}.card-fees{bottom:55px;left:0;animation-delay:-2s}.card-results{bottom:28px;right:-8px;animation-delay:-3s}.status-check{margin-left:auto;background:#e7f8ef;color:#16a05f;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px}.visual-spark{position:absolute;color:#1684dc;font-size:27px}.spark-one{top:20px;right:95px}.spark-two{bottom:60px;left:80px;color:#f19b24}.hero-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.glow-one{width:230px;height:230px;background:#cbe5ff;opacity:.3;top:-120px;right:8%}.glow-two{width:190px;height:190px;background:#d7f6e8;opacity:.35;bottom:-90px;left:20%}.hero-bottom{display:flex;justify-content:center;align-items:center;gap:23px;flex-wrap:wrap;border-top:1px solid #dce7f5;padding:17px 20px;color:#7a8aa4;font-size:10px;font-weight:800;letter-spacing:1.5px}.hero-bottom i{height:4px;width:4px;border-radius:50%;background:#1685dd}.stats-strip{max-width:1160px;margin:-1px auto 0;padding:28px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;background:#fff;position:relative;z-index:2;border:1px solid #e7edf6;border-radius:0 0 20px 20px;box-shadow:0 15px 35px rgba(20,53,101,.05)}.stats-strip div{padding-left:22px;border-left:1px solid #e7edf6}.stats-strip div:first-child{border-left:0}.stats-strip strong,.stats-strip span{display:block}.stats-strip strong{font-size:22px;color:#1259b8;letter-spacing:-.6px}.stats-strip span{font-size:12px;color:#7888a1;margin-top:3px}
.section{max-width:1160px;margin:0 auto;padding:100px 28px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:40px}.section-heading h2,.benefits-copy h2,.contact-copy h2{font-size:clamp(30px,3.5vw,43px);line-height:1.2;letter-spacing:-1.5px;margin:13px 0 0;color:#102448}.section-heading>p{max-width:410px;color:#71819a;font-size:14px;margin:0 0 4px;line-height:1.8}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.solution-card{position:relative;overflow:hidden;border:1px solid #e4ebf5;border-radius:19px;padding:26px;background:#fff;min-height:250px;transition:transform .25s,box-shadow .25s,border-color .25s}.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cbdcf3}.solution-featured{background:linear-gradient(135deg,#071a43,#0d3978);color:#fff;border-color:#0d3978}.solution-icon{width:47px;height:47px;border-radius:14px;background:#edf5ff;color:#1768d8;display:grid;place-items:center;font-size:22px;margin-bottom:20px}.solution-featured .solution-icon{background:rgba(255,255,255,.13);color:#fff}.card-tag{font-size:9px;letter-spacing:1.4px;color:#9bc7ff;font-weight:800}.solution-card h3{font-size:16px;line-height:1.4;margin:0 0 10px;max-width:290px}.solution-card p{font-size:12px;line-height:1.8;color:#7787a0;margin:0 0 20px}.solution-featured p{color:#d0def2}.solution-card a{display:inline-flex;gap:10px;align-items:center;color:#1766cf;font-weight:700;font-size:12px}.solution-featured a{color:#fff}.card-decoration{position:absolute;right:-8px;bottom:-58px;font-size:180px;line-height:1;font-weight:800;color:rgba(255,255,255,.045);pointer-events:none}.benefits-section{background:#f4f8fd;border-top:1px solid #e9f0f8;border-bottom:1px solid #e9f0f8}.benefits-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.benefits-copy>p,.contact-copy>p{font-size:14px;line-height:1.9;color:#71819a;max-width:420px;margin:20px 0 26px}.benefit-list{display:grid;gap:0}.benefit{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid #dfe8f4}.benefit:last-child{border-bottom:0}.benefit>span{flex:0 0 43px;height:43px;border-radius:13px;background:#fff;border:1px solid #e0eaf7;color:#1767d6;display:grid;place-items:center;font-size:12px;font-weight:800}.benefit h3{font-size:15px;margin:0 0 5px}.benefit p{font-size:12px;color:#7888a0;line-height:1.7;margin:0}.centered{display:block;text-align:center}.centered>p{margin:15px auto 0}.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.industry-grid article{text-align:center;border:1px solid #e4ebf5;border-radius:18px;padding:28px 18px;background:#fff;transition:transform .2s,box-shadow .2s}.industry-grid article:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.industry-icon{width:57px;height:57px;margin:0 auto 15px;border-radius:17px;background:#edf5ff;display:grid;place-items:center;font-size:24px}.industry-grid h3{font-size:15px;margin:0 0 7px}.industry-grid p{font-size:12px;color:#7a89a1;line-height:1.7;margin:0}.cta-section{position:relative;overflow:hidden;text-align:center;padding:80px 25px;background:linear-gradient(115deg,#071638,#0b3d82 65%,#087cb9);color:#fff}.cta-content{position:relative;z-index:1}.cta-section .section-kicker{color:#a6d5ff}.cta-section h2{font-size:clamp(30px,4vw,46px);letter-spacing:-1.5px;line-height:1.2;margin:16px 0}.cta-section h2 span{color:#64c7ff}.cta-section p{color:#c3d7f3;font-size:14px;margin:0 0 25px}.btn-light{background:#fff;color:#0b3d82;box-shadow:none}.cta-orb{position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}.orb-one{width:450px;height:450px;left:-160px;top:-250px}.orb-two{width:520px;height:520px;right:-180px;bottom:-400px}.contact-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.contact-note{display:flex;align-items:center;gap:13px;margin-top:30px}.contact-note>span{width:43px;height:43px;display:grid;place-items:center;background:#edf5ff;color:#1769db;border-radius:13px}.contact-note b,.contact-note small{display:block}.contact-note b{font-size:13px}.contact-note small{font-size:11px;color:#7b8ba3;margin-top:3px}.contact-form{padding:30px;border:1px solid #e3ebf5;border-radius:21px;box-shadow:0 14px 45px rgba(18,50,97,.06);background:#fff}.contact-form label{display:block;font-size:11px;font-weight:700;color:#344865;margin-bottom:17px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;margin-top:8px;padding:13px 14px;border:1px solid #dfe7f2;border-radius:10px;background:#fbfdff;color:#142746;font-size:12px;outline:none;transition:border .2s,box-shadow .2s}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#5ca2ef;box-shadow:0 0 0 3px #eaf4ff}.contact-form textarea{resize:vertical}.form-submit{width:100%}.form-feedback{font-size:12px;color:#188457;margin:10px 0 0}.form-disclaimer{display:block;color:#8a98ad;font-size:10px;text-align:center;margin-top:12px}.site-footer{background:#06132e;color:#c5d2e7;padding:55px max(28px,calc((100vw - 1160px)/2)) 0}.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:45px;padding-bottom:40px}.footer-brand img{width:230px;height:95px;object-fit:contain;object-position:left center;background:transparent;border:0;border-radius:0;padding:0}.footer-brand p{font-size:12px;color:#94a5c0;line-height:1.8;max-width:280px}.footer-links h4{font-size:13px;color:#fff;margin:5px 0 18px}.footer-links a{display:block;font-size:12px;color:#9eafc9;margin:11px 0;transition:color .2s}.footer-links a:hover,.footer-bottom a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:19px 0;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#8395b2}.footer-bottom div{display:flex;gap:22px}.footer-bottom a{color:#9eafc9}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:1050px){.contact-topbar-inner{padding-left:25px;padding-right:25px}.topbar-details{gap:14px}.nav-wrap{padding:0 25px}.brand{flex-basis:190px;max-width:190px}.main-nav{gap:14px;font-size:13px}.mega-menu{left:20px;right:20px;padding:25px 20px 0}.mega-column{padding:0 13px 22px}.menu-link{gap:9px;padding:8px 4px}.menu-icon{flex-basis:39px;width:39px;height:39px}.menu-link b{font-size:12px}.menu-link small{font-size:10px}.hero-inner{padding-top:60px}.hero-visual{transform:scale(.9);margin:0 -20px}.benefits-inner{gap:45px}}
@media(max-width:800px){.contact-topbar-inner{padding:8px 20px;align-items:flex-start}.topbar-details{gap:6px 14px;font-size:11px}.topbar-details span{display:none}.topbar-social{display:none}.nav-wrap{height:82px}.brand{flex-basis:190px;max-width:190px;height:68px;padding:0;border-radius:0}.brand img{height:65px}.mobile-toggle{display:block;margin-left:auto}.main-nav{display:none;position:absolute;top:82px;left:0;right:0;height:auto;background:#07142f;padding:12px 22px 25px;align-items:stretch;flex-direction:column;gap:0;box-shadow:0 20px 30px rgba(0,0,0,.2)}.main-nav.mobile-open{display:flex}.main-nav>a:not(.btn),.nav-trigger{padding:14px 4px;display:flex;width:100%;text-align:left}.nav-item{height:auto;display:block}.nav-trigger{justify-content:space-between}.nav-cta{margin-top:12px}.mega-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;max-height:none;overflow:visible;box-shadow:none;border-radius:15px;padding:15px;grid-template-columns:1fr;background:#fff;margin:0 0 12px}.has-menu.menu-open .mega-menu{display:grid}.mega-column{padding:10px 0;border-right:0;border-bottom:1px solid var(--line)}.mega-column:first-child{padding-left:0}.mega-column h3{margin-bottom:12px}.mega-footer{margin:0 -15px -15px;padding:15px;align-items:flex-start;flex-direction:column}.hero-inner{grid-template-columns:1fr;padding:60px 25px 30px}.hero-copy{max-width:650px}.hero h1{font-size:clamp(42px,9vw,62px)}.hero-visual{height:370px;max-width:560px;width:100%;margin:0 auto;transform:none}.orbit-a{width:330px;height:230px}.orbit-b{width:390px;height:285px}.card-admission{left:3%;top:28px}.card-academic{right:0;top:45px}.card-fees{left:2%;bottom:40px}.card-results{right:0;bottom:20px}.stats-strip{margin:0 18px;grid-template-columns:repeat(2,1fr);border-radius:18px}.stats-strip div:nth-child(3){border-left:0}.section{padding:75px 24px}.section-heading{display:block}.section-heading>p{margin-top:20px}.solution-grid{grid-template-columns:repeat(2,1fr)}.benefits-inner{grid-template-columns:1fr;gap:35px}.industry-grid{grid-template-columns:repeat(2,1fr)}.contact-section{grid-template-columns:1fr;gap:30px}.footer-main{grid-template-columns:repeat(2,1fr);gap:30px}.footer-brand{grid-column:1/-1}}
@media(max-width:480px){.contact-topbar-inner{justify-content:center}.topbar-details{justify-content:center}.topbar-details a{font-size:10px}.hero-inner{padding:44px 20px 22px}.hero h1{letter-spacing:-1.8px}.hero-text{font-size:14px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%}.hero-visual{height:330px;transform:scale(.9);width:111%;margin-left:-5.5%}.float-card{min-width:168px;padding:10px;gap:8px}.float-icon{width:31px;height:31px}.float-card b{font-size:10px}.float-card small{font-size:9px}.card-admission{left:0}.card-academic{right:0}.card-fees{left:0}.card-results{right:0}.hero-bottom{gap:10px;font-size:8px;letter-spacing:.8px}.stats-strip{padding:20px 16px;gap:18px}.stats-strip div{padding-left:13px}.stats-strip strong{font-size:19px}.stats-strip span{font-size:10px}.section{padding:60px 20px}.section-heading h2,.benefits-copy h2,.contact-copy h2{font-size:31px}.solution-grid{grid-template-columns:1fr}.solution-card{min-height:220px}.industry-grid{gap:10px}.industry-grid article{padding:22px 12px}.industry-grid h3{font-size:13px}.industry-grid p{font-size:11px}.cta-section{padding:65px 20px}.form-row{grid-template-columns:1fr;gap:0}.contact-form{padding:20px}.footer-main{grid-template-columns:1fr 1fr;gap:25px 15px}.footer-brand{grid-column:1/-1}.footer-brand img{width:190px}.footer-bottom{flex-direction:column}.footer-bottom div{gap:18px}.mega-menu{margin-left:-4px;margin-right:-4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* =========================================================
   UniVerse360 | Custom Software Development
   Complete responsive page stylesheet
   ========================================================= */

.custom-software-page {
    --csd-navy: #0b1735;
    --csd-blue: #1268d8;
    --csd-cyan: #11a8e8;
    --csd-orange: #f28a1b;
    --csd-text: #172746;
    --csd-muted: #66758f;
    --csd-light: #f4f8ff;
    --csd-border: #e1eaf6;

    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--csd-text);
    background: #fff;
    font-family: inherit;
    line-height: 1.7;
    overflow: clip;
}

.custom-software-page *,
.custom-software-page *::before,
.custom-software-page *::after {
    box-sizing: border-box;
}

.custom-software-page a {
    text-decoration: none;
}

.custom-software-page p {
    margin-top: 0;
}

.custom-software-page h1,
.custom-software-page h2,
.custom-software-page h3 {
    margin-top: 0;
    color: var(--csd-navy);
    line-height: 1.2;
}

.custom-software-page h1 {
    margin-bottom: 22px;
    font-size: clamp(36px, 3.4vw, 54px);
    font-weight: 800;
    letter-spacing: -1.5px;
}

.custom-software-page h2 {
    margin-bottom: 18px;
    font-size: clamp(28px, 2.7vw, 40px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.custom-software-page h3 {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 750;
}

.custom-software-page h1 span,
.custom-software-page h2 span {
    display: block;
    color: var(--csd-blue);
}

.csd-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* =========================================================
   HERO: EQUAL LEFT AND RIGHT COLUMNS
   ========================================================= */

.custom-software-page .csd-hero {
    width: 100%;
    margin: 0;
    padding: 30px 0 65px;
    position: relative;
    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(17, 168, 232, 0.13),
            transparent 34%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--csd-border);
}

.custom-software-page .csd-hero::after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -180px;
    width: 320px;
    height: 320px;
    border: 42px solid rgba(18, 104, 216, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

/* Hero uses a wider container than the other sections */
.custom-software-page .csd-hero .csd-container {
    width: 100%;
    max-width: 1600px;
    padding-inline: clamp(24px, 4vw, 64px);
    margin-inline: auto;
}

/* Exactly equal columns */
.custom-software-page .csd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.custom-software-page .csd-hero-content {
    width: 100%;
    min-width: 0;
    max-width: none;
    align-self: center;
}

.custom-software-page .csd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 25px;
    color: var(--csd-muted);
    font-size: 13px;
}

.custom-software-page .csd-breadcrumb a {
    color: var(--csd-blue);
}

.custom-software-page .csd-breadcrumb a:hover {
    color: var(--csd-orange);
}

.custom-software-page .csd-eyebrow,
.custom-software-page .csd-section-label {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--csd-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.custom-software-page .csd-eyebrow::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 3px;
    margin-right: 12px;
    background: var(--csd-orange);
    vertical-align: middle;
}

.custom-software-page .csd-hero-content > p {
    max-width: 620px;
    margin-bottom: 25px;
    color: var(--csd-muted);
    font-size: 16px;
    line-height: 1.85;
}

/* Buttons */

.custom-software-page .csd-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.custom-software-page .csd-btn,
.custom-software-page .csd-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 750;
    transition: all 0.25s ease;
}

.custom-software-page .csd-btn {
    color: #fff;
    background: linear-gradient(
        110deg,
        var(--csd-blue),
        var(--csd-cyan)
    );
    box-shadow: 0 8px 20px rgba(18, 104, 216, 0.17);
}

.custom-software-page .csd-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, 0.25);
}

.custom-software-page .csd-btn-outline {
    color: var(--csd-navy);
    background: #fff;
    border-color: #d6e3f5;
}

.custom-software-page .csd-btn-outline:hover {
    color: var(--csd-blue);
    border-color: var(--csd-blue);
}

.custom-software-page .csd-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    color: #536580;
    font-size: 12px;
    font-weight: 650;
}

/* =========================================================
   RIGHT COLUMN: CODE PANEL
   ========================================================= */

.custom-software-page .csd-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 30px 8px 35px;
    align-self: center;
}

.custom-software-page .csd-code-card {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: var(--csd-navy);
    box-shadow: 0 24px 55px rgba(11, 23, 53, 0.18);
}

.custom-software-page .csd-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    color: #c9d7f0;
    background: #101f43;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
}

.custom-software-page .csd-window-dots {
    display: flex;
    gap: 7px;
}

.custom-software-page .csd-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6b63;
}

.custom-software-page .csd-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.custom-software-page .csd-window-dots i:nth-child(3) {
    background: #38c982;
}

.custom-software-page .csd-code-content {
    padding: 24px 18px;
    overflow-x: auto;
    color: #dce8ff;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    line-height: 2.4;
}

.custom-software-page .csd-code-line {
    white-space: pre;
}

.custom-software-page .csd-line-number {
    display: inline-block;
    width: 26px;
    margin-right: 10px;
    color: #7183a7;
    user-select: none;
}

.custom-software-page .csd-code-purple {
    color: #c7a5ff;
}

.custom-software-page .csd-code-blue {
    color: #5dcaff;
}

.custom-software-page .csd-code-status {
    padding: 14px 21px;
    color: #c3d3ed;
    background: #101f43;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
}

.custom-software-page .csd-code-status span {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #3edb98;
}

/* Floating cards */

.custom-software-page .csd-floating-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(260px, 75%);
    padding: 13px 16px;
    border: 1px solid var(--csd-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(21, 53, 101, 0.12);
}

.custom-software-page .csd-float-one {
    top: 0;
    right: -5px;
}

.custom-software-page .csd-float-two {
    bottom: 0;
    left: -5px;
}

.custom-software-page .csd-float-icon {
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: var(--csd-blue);
    background: #eaf4ff;
    font-size: 22px;
}

.custom-software-page .csd-floating-card strong,
.custom-software-page .csd-floating-card small {
    display: block;
}

.custom-software-page .csd-floating-card strong {
    color: var(--csd-navy);
    font-size: 12px;
}

.custom-software-page .csd-floating-card small {
    margin-top: 3px;
    color: var(--csd-muted);
    font-size: 10px;
}

/* =========================================================
   INTRODUCTION
   ========================================================= */

.custom-software-page .csd-section {
    padding: 75px 0;
}

.custom-software-page .csd-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 50px;
}

.custom-software-page .csd-intro-text p,
.custom-software-page .csd-tech-content > p {
    color: var(--csd-muted);
    font-size: 15px;
    line-height: 1.9;
}

.custom-software-page .csd-intro-text p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   SERVICES
   ========================================================= */

.custom-software-page .csd-services-section,
.custom-software-page .csd-process-section {
    background: var(--csd-light);
}

.custom-software-page .csd-section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.custom-software-page .csd-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--csd-muted);
    font-size: 14px;
}

.custom-software-page .csd-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.custom-software-page .csd-service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 265px;
    padding: 26px 24px;
    border: 1px solid var(--csd-border);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(20, 49, 91, 0.035);
    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.custom-software-page .csd-service-card:hover {
    transform: translateY(-5px);
    border-color: #b9d6ff;
    box-shadow: 0 16px 35px rgba(20, 49, 91, 0.09);
}

.custom-software-page .csd-service-icon {
    display: grid;
    place-items: center;
    width: 53px;
    height: 53px;
    margin-bottom: 19px;
    border-radius: 13px;
    color: var(--csd-blue);
    background: linear-gradient(145deg, #e9f3ff, #f2f8ff);
    font-size: 26px;
    font-weight: 700;
}

.custom-software-page .csd-service-card h3 {
    font-size: 18px;
}

.custom-software-page .csd-service-card p {
    margin-bottom: 20px;
    color: var(--csd-muted);
    font-size: 13px;
    line-height: 1.8;
}

.custom-software-page .csd-service-card > a {
    margin-top: auto;
    color: var(--csd-blue);
    font-size: 12px;
    font-weight: 750;
}

.custom-software-page .csd-service-card > a:hover {
    color: var(--csd-orange);
}

/* =========================================================
   TECHNOLOGY
   ========================================================= */

.custom-software-page .csd-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 50px;
}

.custom-software-page .csd-tech-content > p {
    margin-bottom: 25px;
}

.custom-software-page .csd-tech-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    padding: 20px;
    border: 1px solid var(--csd-border);
    border-radius: 17px;
    background: linear-gradient(135deg, #f5f9ff, #fff);
}

.custom-software-page .csd-tech-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 95px;
    padding: 16px;
    border: 1px solid #e5edf8;
    border-radius: 11px;
    background: #fff;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.custom-software-page .csd-tech-item:hover {
    transform: translateY(-3px);
    border-color: var(--csd-cyan);
}

.custom-software-page .csd-tech-item strong {
    margin-bottom: 5px;
    color: var(--csd-blue);
    font-size: 19px;
}

.custom-software-page .csd-tech-item span {
    color: var(--csd-muted);
    font-size: 11px;
}

/* =========================================================
   DEVELOPMENT PROCESS
   ========================================================= */

.custom-software-page .csd-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 19px;
}

.custom-software-page .csd-process-card {
    padding: 23px 20px;
    border: 1px solid var(--csd-border);
    border-radius: 13px;
    background: #fff;
    transition: transform 0.2s ease;
}

.custom-software-page .csd-process-card:hover {
    transform: translateY(-4px);
}

.custom-software-page .csd-process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 22px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--csd-blue), var(--csd-cyan));
    font-size: 14px;
    font-weight: 800;
}

.custom-software-page .csd-process-card h3 {
    font-size: 16px;
}

.custom-software-page .csd-process-card p {
    margin-bottom: 0;
    color: var(--csd-muted);
    font-size: 13px;
}

/* =========================================================
   BENEFITS
   ========================================================= */

.custom-software-page .csd-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19px 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.custom-software-page .csd-benefit {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 21px;
    border: 1px solid var(--csd-border);
    border-radius: 12px;
    background: #fff;
}

.custom-software-page .csd-benefit > span {
    display: grid;
    flex: 0 0 35px;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #08794c;
    background: #e8f8f0;
    font-weight: 800;
}

.custom-software-page .csd-benefit h3 {
    margin-bottom: 7px;
    font-size: 16px;
}

.custom-software-page .csd-benefit p {
    margin-bottom: 0;
    color: var(--csd-muted);
    font-size: 13px;
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.custom-software-page .csd-final-cta {
    padding: 60px 0;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(17, 168, 232, 0.22),
            transparent 32%
        ),
        linear-gradient(115deg, #0b1735, #123c79);
}

.custom-software-page .csd-final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.custom-software-page .csd-final-cta h2 {
    margin-bottom: 14px;
    color: #fff;
}

.custom-software-page .csd-final-cta h2 span {
    color: #67d0ff;
}

.custom-software-page .csd-final-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #c4d5ef;
}

.custom-software-page .csd-final-cta .csd-section-label {
    color: #78d5ff;
}

.custom-software-page .csd-btn-white {
    flex-shrink: 0;
    color: var(--csd-navy);
    background: #fff;
    box-shadow: none;
}

.custom-software-page .csd-btn-white:hover {
    color: var(--csd-blue);
    background: #f1f7ff;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
    .custom-software-page .csd-hero .csd-container {
        padding-inline: 28px;
    }

    .custom-software-page .csd-hero-grid {
        gap: 25px;
    }

    .custom-software-page h1 {
        font-size: clamp(34px, 4vw, 44px);
    }

    .custom-software-page .csd-floating-card {
        max-width: 220px;
        padding: 10px;
    }

    .custom-software-page .csd-intro-grid,
    .custom-software-page .csd-tech-grid {
        gap: 30px;
    }

    .custom-software-page .csd-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .custom-software-page .csd-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .custom-software-page .csd-hero {
        padding: 22px 0 45px;
    }

    .custom-software-page .csd-hero .csd-container {
        width: 100%;
        padding-inline: 18px;
    }

    .custom-software-page .csd-hero-grid,
    .custom-software-page .csd-intro-grid,
    .custom-software-page .csd-tech-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .custom-software-page .csd-breadcrumb {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .custom-software-page h1 {
        font-size: clamp(34px, 8.5vw, 46px);
        letter-spacing: -1px;
    }

    .custom-software-page h2 {
        font-size: clamp(27px, 7vw, 35px);
    }

    .custom-software-page .csd-hero-content > p {
        font-size: 15px;
    }

    .custom-software-page .csd-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-software-page .csd-btn,
    .custom-software-page .csd-btn-outline {
        width: 100%;
    }

    .custom-software-page .csd-hero-visual {
        padding: 24px 0 32px;
    }

    .custom-software-page .csd-code-content {
        padding: 20px 12px;
        font-size: 10px;
    }

    .custom-software-page .csd-floating-card {
        gap: 8px;
        max-width: 210px;
        padding: 9px 11px;
    }

    .custom-software-page .csd-float-one {
        top: 0;
        right: 0;
    }

    .custom-software-page .csd-float-two {
        bottom: 0;
        left: 0;
    }

    .custom-software-page .csd-float-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .custom-software-page .csd-floating-card strong {
        font-size: 10px;
    }

    .custom-software-page .csd-floating-card small {
        font-size: 9px;
    }

    .custom-software-page .csd-section {
        padding: 52px 0;
    }

    .custom-software-page .csd-section-heading {
        margin-bottom: 30px;
    }

    .custom-software-page .csd-service-grid,
    .custom-software-page .csd-process-grid,
    .custom-software-page .csd-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .custom-software-page .csd-service-card {
        min-height: auto;
        padding: 24px 21px;
    }

    .custom-software-page .csd-tech-panel {
        gap: 10px;
        padding: 13px;
    }

    .custom-software-page .csd-tech-item {
        min-height: 82px;
        padding: 12px;
    }

    .custom-software-page .csd-final-cta {
        padding: 45px 0;
    }

    .custom-software-page .csd-final-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .custom-software-page .csd-hero .csd-container {
        padding-inline: 14px;
    }

    .custom-software-page .csd-tech-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .custom-software-page .csd-code-content {
        font-size: 9px;
    }
}

/* Accessibility */

.custom-software-page a:focus-visible {
    outline: 3px solid var(--csd-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .custom-software-page *,
    .custom-software-page *::before,
    .custom-software-page *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}



/* FINAL HERO ALIGNMENT FIX */

.custom-software-page .csd-hero {
    padding: 35px 0 55px !important;
}

.custom-software-page .csd-hero .csd-container {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

.custom-software-page .csd-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 36px !important;
    width: 100% !important;
}

.custom-software-page .csd-hero-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}

.custom-software-page .csd-hero-visual {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 30px 8px !important;
    align-self: center !important;
}

.custom-software-page .csd-code-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.custom-software-page .csd-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

/* Laptop */
@media (max-width: 1024px) {
    .custom-software-page .csd-hero .csd-container {
        padding: 0 24px !important;
    }

    .custom-software-page .csd-hero-grid {
        gap: 24px !important;
    }

    .custom-software-page .csd-hero-content h1 {
        font-size: 38px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .custom-software-page .csd-hero .csd-container {
        padding: 0 18px !important;
    }

    .custom-software-page .csd-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 25px !important;
    }

    .custom-software-page .csd-hero-content h1 {
        font-size: clamp(32px, 8vw, 44px) !important;
    }

    .custom-software-page .csd-hero-visual {
        padding: 25px 0 32px !important;
    }
}




/* =====================================================
   FIX BASED ON ACTUAL HTML STRUCTURE
   Custom Software Development Hero
   ===================================================== */

/* Hero section */
.custom-software-page .csd-hero {
    width: 100% !important;
    margin: 0 !important;
    padding: 35px 0 55px !important;
    overflow: hidden;
}

/* IMPORTANT:
   csd-container and csd-hero-grid are on the SAME div */
.custom-software-page .csd-hero > .csd-container.csd-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 40px !important;

    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* LEFT SIDE: Start at the top instead of vertical centering */
.custom-software-page .csd-hero-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    align-self: start !important;
}

/* Breadcrumb */
.custom-software-page .csd-hero-content .csd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 25px !important;
}

/* Heading */
.custom-software-page .csd-hero-content h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    font-size: clamp(34px, 3.2vw, 50px) !important;
    line-height: 1.16 !important;
    letter-spacing: -1.3px;
}

/* Description */
.custom-software-page .csd-hero-content > p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 25px !important;
    line-height: 1.8;
}

/* RIGHT SIDE */
.custom-software-page .csd-hero-visual {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 8px 35px !important;
    transform: none !important;
    align-self: start !important;
}

/* Code card fills its half of the grid */
.custom-software-page .csd-hero-visual .csd-code-card {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Floating cards */
.custom-software-page .csd-hero-visual .csd-float-one {
    top: -12px;
    right: -5px;
}

.custom-software-page .csd-hero-visual .csd-float-two {
    bottom: 0;
    left: -5px;
}

/* TABLET */
@media (max-width: 1024px) {
    .custom-software-page .csd-hero > .csd-container.csd-hero-grid {
        gap: 25px !important;
        padding: 0 24px !important;
    }

    .custom-software-page .csd-hero-content h1 {
        font-size: clamp(30px, 3.5vw, 40px) !important;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    .custom-software-page .csd-hero {
        padding: 25px 0 40px !important;
    }

    .custom-software-page .csd-hero > .csd-container.csd-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 25px !important;
        padding: 0 18px !important;
    }

    .custom-software-page .csd-hero-content h1 {
        font-size: clamp(32px, 8vw, 44px) !important;
    }

    .custom-software-page .csd-hero-visual {
        padding: 15px 0 30px !important;
    }
}



/* ==========================================================
   UniVerse360 - ERP Solutions Page
   Scoped stylesheet: erp-
   ========================================================== */

.erp-page {
    --erp-navy: #0b1735;
    --erp-blue: #1268d8;
    --erp-cyan: #10a7e5;
    --erp-orange: #f28b1b;
    --erp-green: #13834d;
    --erp-text: #172746;
    --erp-muted: #687993;
    --erp-light: #f3f7ff;
    --erp-border: #e1eaf6;

    width: 100%;
    margin: 0;
    color: var(--erp-text);
    background: #fff;
    font-family: inherit;
    line-height: 1.7;
    overflow: clip;
}

.erp-page *,
.erp-page *::before,
.erp-page *::after {
    box-sizing: border-box;
}

.erp-page a {
    text-decoration: none;
}

.erp-page h1,
.erp-page h2,
.erp-page h3,
.erp-page p {
    margin-top: 0;
}

.erp-page h1,
.erp-page h2,
.erp-page h3 {
    color: var(--erp-navy);
    line-height: 1.2;
}

.erp-page h1 {
    margin-bottom: 22px;
    font-size: clamp(36px, 3.5vw, 54px);
    font-weight: 800;
    letter-spacing: -1.5px;
}

.erp-page h1 span,
.erp-page h2 span {
    display: block;
    color: var(--erp-blue);
}

.erp-page h2 {
    margin-bottom: 20px;
    font-size: clamp(29px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
}

.erp-page h3 {
    font-size: 18px;
    font-weight: 750;
}

.erp-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* HERO */

.erp-page .erp-hero {
    position: relative;
    padding: 45px 0 70px;
    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(16, 167, 229, 0.15),
            transparent 35%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--erp-border);
}

.erp-page .erp-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 38px;
}

.erp-page .erp-hero-content {
    min-width: 0;
}

.erp-page .erp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: var(--erp-muted);
    font-size: 13px;
}

.erp-page .erp-breadcrumb a {
    color: var(--erp-blue);
}

.erp-page .erp-breadcrumb a:hover {
    color: var(--erp-orange);
}

.erp-page .erp-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
    color: var(--erp-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.erp-page .erp-eyebrow > span {
    flex: 0 0 25px;
    width: 25px;
    height: 3px;
    background: var(--erp-orange);
}

.erp-page .erp-hero-description {
    margin-bottom: 25px;
    color: var(--erp-muted);
    font-size: 15px;
    line-height: 1.9;
}

.erp-page .erp-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
}

.erp-page .erp-btn,
.erp-page .erp-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 50px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 750;
    transition: transform .25s ease,
                box-shadow .25s ease,
                background .25s ease;
}

.erp-page .erp-btn {
    color: #fff;
    background: linear-gradient(110deg, var(--erp-blue), var(--erp-cyan));
    box-shadow: 0 8px 20px rgba(18, 104, 216, .18);
}

.erp-page .erp-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, .25);
}

.erp-page .erp-btn-outline {
    color: var(--erp-navy);
    background: #fff;
    border-color: #d8e4f5;
}

.erp-page .erp-btn-outline:hover {
    color: var(--erp-blue);
    border-color: var(--erp-blue);
}

.erp-page .erp-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 15px;
    color: #536580;
    font-size: 11px;
    font-weight: 650;
}

/* DASHBOARD VISUAL */

.erp-page .erp-hero-visual {
    position: relative;
    min-width: 0;
    padding: 25px 5px 30px;
}

.erp-page .erp-dashboard {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 17px;
    color: #dce8ff;
    background: var(--erp-navy);
    box-shadow: 0 25px 55px rgba(11, 23, 53, .18);
}

.erp-page .erp-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: #101f43;
    color: #cad7ef;
    font-size: 11px;
}

.erp-page .erp-window-dots {
    display: flex;
    gap: 7px;
}

.erp-page .erp-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6962;
}

.erp-page .erp-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.erp-page .erp-window-dots i:nth-child(3) {
    background: #38c982;
}

.erp-page .erp-dashboard-body {
    padding: 23px 20px;
}

.erp-page .erp-dashboard-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 22px;
}

.erp-page .erp-dashboard-title small {
    color: #8ca4ca;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.erp-page .erp-dashboard-title h3 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 17px;
}

.erp-page .erp-live-badge {
    flex-shrink: 0;
    padding: 5px 8px;
    border: 1px solid rgba(62, 219, 152, .2);
    border-radius: 20px;
    color: #68e4ad;
    background: rgba(62, 219, 152, .08);
    font-size: 9px;
}

.erp-page .erp-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.erp-page .erp-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
}

.erp-page .erp-stat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 9px;
    color: #70baff;
    background: rgba(18, 104, 216, .18);
    font-size: 20px;
}

.erp-page .erp-stat-icon.erp-orange {
    color: #ffbb69;
}

.erp-page .erp-stat-icon.erp-green {
    color: #6ce3ad;
}

.erp-page .erp-stat-icon.erp-purple {
    color: #c5a7ff;
}

.erp-page .erp-stat-card small {
    color: #9dafcc;
    font-size: 10px;
}

.erp-page .erp-stat-card strong {
    margin-top: 3px;
    color: #fff;
    font-size: 14px;
}

.erp-page .erp-stat-note {
    margin-top: 5px;
    color: #8196b7;
    font-size: 9px;
}

.erp-page .erp-workflow {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.erp-page .erp-workflow-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.erp-page .erp-workflow-heading strong {
    color: #fff;
    font-size: 12px;
}

.erp-page .erp-workflow-heading > span {
    color: #8ca4ca;
    font-size: 9px;
}

.erp-page .erp-workflow-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.erp-page .erp-workflow-item > span {
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #8ec7ff;
    background: rgba(18, 104, 216, .18);
    font-size: 10px;
}

.erp-page .erp-workflow-item > div {
    flex: 1;
    min-width: 0;
}

.erp-page .erp-workflow-item strong,
.erp-page .erp-workflow-item small {
    display: block;
}

.erp-page .erp-workflow-item strong {
    color: #eaf2ff;
    font-size: 11px;
}

.erp-page .erp-workflow-item small {
    margin-top: 2px;
    color: #91a5c5;
    font-size: 9px;
}

.erp-page .erp-workflow-item > b {
    color: #59bfff;
    font-size: 15px;
}

/* FLOATING CARDS */

.erp-page .erp-floating-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 240px;
    padding: 12px 14px;
    border: 1px solid var(--erp-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(21, 53, 101, .12);
}

.erp-page .erp-float-top {
    top: 0;
    right: -5px;
}

.erp-page .erp-float-bottom {
    bottom: 0;
    left: -5px;
}

.erp-page .erp-floating-icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--erp-blue);
    background: #eaf4ff;
    font-size: 20px;
}

.erp-page .erp-floating-orange {
    color: var(--erp-orange);
    background: #fff2e4;
}

.erp-page .erp-floating-card strong,
.erp-page .erp-floating-card small {
    display: block;
}

.erp-page .erp-floating-card strong {
    color: var(--erp-navy);
    font-size: 11px;
}

.erp-page .erp-floating-card small {
    margin-top: 3px;
    color: var(--erp-muted);
    font-size: 9px;
}

/* COMMON SECTIONS */

.erp-page .erp-section {
    padding: 75px 0;
}

.erp-page .erp-intro-grid,
.erp-page .erp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 45px;
}

.erp-page .erp-heading-left {
    margin: 0;
}

.erp-page .erp-intro-content p,
.erp-page .erp-benefits-content > p {
    margin-bottom: 16px;
    color: var(--erp-muted);
    font-size: 14px;
    line-height: 1.9;
}

.erp-page .erp-intro-content p:last-child {
    margin-bottom: 0;
}

.erp-page .erp-section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
}

.erp-page .erp-heading-center {
    text-align: center;
}

.erp-page .erp-heading-center .erp-eyebrow {
    justify-content: center;
}

.erp-page .erp-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--erp-muted);
    font-size: 14px;
}

/* MODULES */

.erp-page .erp-modules-section,
.erp-page .erp-process-section {
    background: var(--erp-light);
}

.erp-page .erp-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 21px;
}

.erp-page .erp-module-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 240px;
    padding: 25px;
    border: 1px solid var(--erp-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(20, 49, 91, .035);
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}

.erp-page .erp-module-card:hover {
    transform: translateY(-5px);
    border-color: #b9d6ff;
    box-shadow: 0 16px 35px rgba(20, 49, 91, .09);
}

.erp-page .erp-module-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 12px;
    color: var(--erp-blue);
    background: #eaf3ff;
    font-size: 25px;
    font-weight: 700;
}

.erp-page .erp-icon-orange {
    color: #d87913;
    background: #fff2e4;
}

.erp-page .erp-icon-green {
    color: #11804b;
    background: #e6f8ee;
}

.erp-page .erp-icon-purple {
    color: #7853d7;
    background: #f0eaff;
}

.erp-page .erp-module-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.erp-page .erp-module-card p {
    margin-bottom: 20px;
    color: var(--erp-muted);
    font-size: 12px;
    line-height: 1.85;
}

.erp-page .erp-module-card a {
    margin-top: auto;
    color: var(--erp-blue);
    font-size: 12px;
    font-weight: 750;
}

.erp-page .erp-module-card a:hover {
    color: var(--erp-orange);
}

/* BENEFITS */

.erp-page .erp-benefit-list {
    display: grid;
    gap: 18px;
    margin-top: 25px;
}

.erp-page .erp-benefit-list > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.erp-page .erp-benefit-list > div > span {
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #08794c;
    background: #e7f8ef;
    font-size: 14px;
    font-weight: 800;
}

.erp-page .erp-benefit-list strong {
    display: block;
    margin-bottom: 5px;
    color: var(--erp-navy);
    font-size: 14px;
}

.erp-page .erp-benefit-list p {
    margin-bottom: 0;
    color: var(--erp-muted);
    font-size: 12px;
}

.erp-page .erp-benefit-visual {
    min-width: 0;
}

.erp-page .erp-benefit-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 370px;
    padding: 35px 20px;
    overflow: hidden;
    border: 1px solid var(--erp-border);
    border-radius: 18px;
    background:
        radial-gradient(circle at center, #e1efff, transparent 55%),
        linear-gradient(135deg, #f6f9ff, #eaf4ff);
}

.erp-page .erp-benefit-panel-top {
    position: absolute;
    top: 18px;
    right: 20px;
    left: 20px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--erp-muted);
    font-size: 10px;
}

.erp-page .erp-benefit-panel-top > span:first-child {
    color: var(--erp-blue);
    font-weight: 800;
    letter-spacing: 1px;
}

.erp-page .erp-benefit-center {
    z-index: 1;
    width: min(230px, 90%);
    padding: 25px 15px;
    border: 1px solid #c9defb;
    border-radius: 15px;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 28px rgba(18, 104, 216, .1);
}

.erp-page .erp-center-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    margin: 0 auto 13px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--erp-blue), var(--erp-cyan));
    font-size: 22px;
}

.erp-page .erp-benefit-center h3 {
    margin-bottom: 8px;
    font-size: 17px;
}

.erp-page .erp-benefit-center p {
    margin-bottom: 0;
    color: var(--erp-muted);
    font-size: 11px;
}

.erp-page .erp-orbit-item {
    position: absolute;
    padding: 9px 14px;
    border: 1px solid #d7e5fa;
    border-radius: 9px;
    color: var(--erp-navy);
    background: #fff;
    box-shadow: 0 5px 15px rgba(21, 53, 101, .07);
    font-size: 11px;
    font-weight: 700;
}

.erp-page .erp-orbit-one {
    top: 23%;
    left: 7%;
}

.erp-page .erp-orbit-two {
    top: 23%;
    right: 7%;
}

.erp-page .erp-orbit-three {
    bottom: 18%;
    left: 5%;
}

.erp-page .erp-orbit-four {
    right: 5%;
    bottom: 18%;
}

/* PROCESS */

.erp-page .erp-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.erp-page .erp-process-card {
    padding: 23px 20px;
    border: 1px solid var(--erp-border);
    border-radius: 13px;
    background: #fff;
    transition: transform .2s ease;
}

.erp-page .erp-process-card:hover {
    transform: translateY(-4px);
}

.erp-page .erp-process-number {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    margin-bottom: 22px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--erp-blue), var(--erp-cyan));
    font-size: 13px;
    font-weight: 800;
}

.erp-page .erp-process-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.erp-page .erp-process-card p {
    margin-bottom: 0;
    color: var(--erp-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* FINAL CTA */

.erp-page .erp-final-cta {
    padding: 60px 0;
    background:
        radial-gradient(circle at 90% 20%, rgba(16, 167, 229, .22), transparent 32%),
        linear-gradient(115deg, #0b1735, #123c79);
}

.erp-page .erp-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.erp-page .erp-eyebrow-light {
    color: #8edbff;
}

.erp-page .erp-final-cta h2 {
    margin-bottom: 15px;
    color: #fff;
}

.erp-page .erp-final-cta h2 span {
    color: #65d0ff;
}

.erp-page .erp-final-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #c6d7ef;
    font-size: 14px;
}

.erp-page .erp-btn-white {
    flex-shrink: 0;
    color: var(--erp-navy);
    background: #fff;
    box-shadow: none;
}

.erp-page .erp-btn-white:hover {
    color: var(--erp-blue);
    background: #f0f7ff;
}

/* TABLET */

@media (max-width: 1024px) {
    .erp-page .erp-hero-grid {
        gap: 24px;
    }

    .erp-page h1 {
        font-size: clamp(33px, 4vw, 43px);
    }

    .erp-page .erp-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-page .erp-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-page .erp-floating-card {
        max-width: 210px;
        padding: 10px;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .erp-container {
        width: calc(100% - 36px);
    }

    .erp-page .erp-hero {
        padding: 28px 0 45px;
    }

    .erp-page .erp-hero-grid,
    .erp-page .erp-intro-grid,
    .erp-page .erp-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .erp-page h1 {
        font-size: clamp(33px, 8vw, 44px);
        letter-spacing: -1px;
    }

    .erp-page h2 {
        font-size: clamp(28px, 7vw, 35px);
    }

    .erp-page .erp-breadcrumb {
        gap: 7px;
        margin-bottom: 22px;
        font-size: 11px;
    }

    .erp-page .erp-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .erp-page .erp-btn,
    .erp-page .erp-btn-outline {
        width: 100%;
    }

    .erp-page .erp-hero-visual {
        padding: 22px 0 28px;
    }

    .erp-page .erp-dashboard-body {
        padding: 18px 13px;
    }

    .erp-page .erp-dashboard-header {
        padding: 15px 13px;
    }

    .erp-page .erp-dashboard-header > span {
        font-size: 9px;
    }

    .erp-page .erp-stat-card {
        padding: 11px;
    }

    .erp-page .erp-stat-card strong {
        font-size: 12px;
    }

    .erp-page .erp-floating-card {
        max-width: 195px;
        padding: 9px 10px;
    }

    .erp-page .erp-float-top {
        right: 0;
    }

    .erp-page .erp-float-bottom {
        left: 0;
    }

    .erp-page .erp-section {
        padding: 52px 0;
    }

    .erp-page .erp-section-heading {
        margin-bottom: 30px;
    }

    .erp-page .erp-module-grid,
    .erp-page .erp-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .erp-page .erp-module-card {
        min-height: auto;
    }

    .erp-page .erp-benefit-panel {
        min-height: 330px;
    }

    .erp-page .erp-orbit-item {
        padding: 7px 9px;
        font-size: 9px;
    }

    .erp-page .erp-final-cta {
        padding: 45px 0;
    }

    .erp-page .erp-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 25px;
    }
}

/* ACCESSIBILITY */

.erp-page a:focus-visible {
    outline: 3px solid var(--erp-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .erp-page *,
    .erp-page *::before,
    .erp-page *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* ==========================================
   ERP HERO - SPACING & ALIGNMENT FIX
   ========================================== */

.erp-page .erp-hero {
    padding: 25px 0 50px !important;
    min-height: auto !important;
}

/* The container and grid are the same element */
.erp-page .erp-hero > .erp-container.erp-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 36px !important;

    width: 100% !important;
    max-width: 1700px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* Move left content up to eliminate excess white space */
.erp-page .erp-hero-content {
    align-self: start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 35px 0 0 !important;
    transform: none !important;
}

/* Reduce gap above breadcrumb */
.erp-page .erp-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

/* Keep right dashboard next to left content */
.erp-page .erp-hero-visual {
    position: relative !important;
    align-self: start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 0 30px !important;
    transform: none !important;
}

.erp-page .erp-dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Prevent content from pushing into the other column */
.erp-page .erp-hero-content h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 3.2vw, 50px) !important;
    line-height: 1.16 !important;
}

/* Large screens */
@media (min-width: 1500px) {
    .erp-page .erp-hero > .erp-container.erp-hero-grid {
        padding-right: 55px !important;
        padding-left: 55px !important;
        gap: 45px !important;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .erp-page .erp-hero > .erp-container.erp-hero-grid {
        padding: 0 24px !important;
        gap: 24px !important;
    }

    .erp-page .erp-hero-content {
        padding-top: 20px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .erp-page .erp-hero {
        padding: 20px 0 40px !important;
    }

    .erp-page .erp-hero > .erp-container.erp-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 25px !important;
        padding: 0 18px !important;
    }

    .erp-page .erp-hero-content {
        padding-top: 0 !important;
    }

    .erp-page .erp-hero-content h1 {
        font-size: clamp(32px, 8vw, 44px) !important;
    }

    .erp-page .erp-hero-visual {
        padding: 15px 0 28px !important;
    }
}


/* ======================================================
   UniVerse360 - CRM Development Page
   All styles scoped under .crm-page
   ====================================================== */

.crm-page {
    --crm-navy: #0b1735;
    --crm-blue: #1268d8;
    --crm-cyan: #10a7e5;
    --crm-orange: #f28b1b;
    --crm-green: #13834d;
    --crm-purple: #7853d7;
    --crm-text: #172746;
    --crm-muted: #687993;
    --crm-light: #f3f7ff;
    --crm-border: #e1eaf6;

    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--crm-text);
    background: #fff;
    font-family: inherit;
    line-height: 1.7;
    overflow: clip;
}

.crm-page *,
.crm-page *::before,
.crm-page *::after {
    box-sizing: border-box;
}

.crm-page a {
    text-decoration: none;
}

.crm-page h1,
.crm-page h2,
.crm-page h3,
.crm-page p {
    margin-top: 0;
}

.crm-page h1,
.crm-page h2,
.crm-page h3 {
    color: var(--crm-navy);
    line-height: 1.2;
}

.crm-page h1 {
    margin-bottom: 22px;
    font-size: clamp(35px, 3.4vw, 52px);
    font-weight: 800;
    letter-spacing: -1.5px;
}

.crm-page h1 span,
.crm-page h2 span {
    display: block;
    color: var(--crm-blue);
}

.crm-page h2 {
    margin-bottom: 20px;
    font-size: clamp(29px, 2.8vw, 40px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.crm-page h3 {
    font-size: 18px;
    font-weight: 750;
}

.crm-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* ======================================================
   HERO SECTION
   ====================================================== */

.crm-page .crm-hero {
    position: relative;
    padding: 25px 0 55px;
    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(16, 167, 229, 0.15),
            transparent 35%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--crm-border);
}

.crm-page .crm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 36px;
}

.crm-page .crm-hero-content {
    min-width: 0;
    width: 100%;
}

.crm-page .crm-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    color: var(--crm-muted);
    font-size: 13px;
}

.crm-page .crm-breadcrumb a {
    color: var(--crm-blue);
}

.crm-page .crm-breadcrumb a:hover {
    color: var(--crm-orange);
}

.crm-page .crm-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--crm-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.crm-page .crm-eyebrow > span {
    flex: 0 0 25px;
    width: 25px;
    height: 3px;
    background: var(--crm-orange);
}

.crm-page .crm-hero-description {
    margin-bottom: 25px;
    color: var(--crm-muted);
    font-size: 15px;
    line-height: 1.9;
}

.crm-page .crm-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 23px;
}

.crm-page .crm-btn,
.crm-page .crm-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 750;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.crm-page .crm-btn {
    color: #fff;
    background: linear-gradient(
        110deg,
        var(--crm-blue),
        var(--crm-cyan)
    );
    box-shadow: 0 8px 20px rgba(18, 104, 216, .18);
}

.crm-page .crm-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, .25);
}

.crm-page .crm-btn-outline {
    color: var(--crm-navy);
    background: #fff;
    border-color: #d8e4f5;
}

.crm-page .crm-btn-outline:hover {
    color: var(--crm-blue);
    border-color: var(--crm-blue);
}

.crm-page .crm-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 15px;
    color: #536580;
    font-size: 11px;
    font-weight: 650;
}

/* ======================================================
   CRM DASHBOARD
   ====================================================== */

.crm-page .crm-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 25px 5px 30px;
}

.crm-page .crm-dashboard {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 17px;
    color: #dce8ff;
    background: var(--crm-navy);
    box-shadow: 0 25px 55px rgba(11, 23, 53, .18);
}

.crm-page .crm-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: #101f43;
    color: #cad7ef;
    font-size: 11px;
}

.crm-page .crm-window-dots {
    display: flex;
    gap: 7px;
}

.crm-page .crm-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6962;
}

.crm-page .crm-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.crm-page .crm-window-dots i:nth-child(3) {
    background: #38c982;
}

.crm-page .crm-dashboard-body {
    padding: 23px 20px;
}

.crm-page .crm-dashboard-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 22px;
}

.crm-page .crm-dashboard-title small {
    color: #8ca4ca;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.crm-page .crm-dashboard-title h3 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 17px;
}

.crm-page .crm-status {
    flex-shrink: 0;
    padding: 5px 8px;
    border: 1px solid rgba(62, 219, 152, .2);
    border-radius: 20px;
    color: #68e4ad;
    background: rgba(62, 219, 152, .08);
    font-size: 9px;
}

.crm-page .crm-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #3edb98;
}

.crm-page .crm-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.crm-page .crm-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
}

.crm-page .crm-stat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 9px;
    color: #70baff;
    background: rgba(18, 104, 216, .18);
    font-size: 20px;
}

.crm-page .crm-stat-icon.crm-icon-orange {
    color: #ffbb69;
}

.crm-page .crm-stat-icon.crm-icon-green {
    color: #6ce3ad;
}

.crm-page .crm-stat-icon.crm-icon-purple {
    color: #c5a7ff;
}

.crm-page .crm-stat-card small {
    color: #9dafcc;
    font-size: 10px;
}

.crm-page .crm-stat-card strong {
    margin-top: 3px;
    color: #fff;
    font-size: 14px;
}

.crm-page .crm-stat-card > span:last-child {
    margin-top: 5px;
    color: #8196b7;
    font-size: 9px;
}

/* CUSTOMER ACTIVITY */

.crm-page .crm-activity {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.crm-page .crm-activity-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.crm-page .crm-activity-heading strong {
    color: #fff;
    font-size: 12px;
}

.crm-page .crm-activity-heading > span {
    color: #8ca4ca;
    font-size: 9px;
}

.crm-page .crm-activity-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.crm-page .crm-activity-number {
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #8ec7ff;
    background: rgba(18, 104, 216, .18);
    font-size: 10px;
}

.crm-page .crm-activity-item > div {
    flex: 1;
    min-width: 0;
}

.crm-page .crm-activity-item strong,
.crm-page .crm-activity-item small {
    display: block;
}

.crm-page .crm-activity-item strong {
    color: #eaf2ff;
    font-size: 11px;
}

.crm-page .crm-activity-item small {
    margin-top: 2px;
    color: #91a5c5;
    font-size: 9px;
}

.crm-page .crm-activity-item > b {
    color: #59bfff;
    font-size: 15px;
}

/* FLOATING CARDS */

.crm-page .crm-floating-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 240px;
    padding: 12px 14px;
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(21, 53, 101, .12);
}

.crm-page .crm-float-top {
    top: 0;
    right: -5px;
}

.crm-page .crm-float-bottom {
    bottom: 0;
    left: -5px;
}

.crm-page .crm-floating-icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--crm-blue);
    background: #eaf4ff;
    font-size: 20px;
}

.crm-page .crm-floating-orange {
    color: var(--crm-orange);
    background: #fff2e4;
}

.crm-page .crm-floating-card strong,
.crm-page .crm-floating-card small {
    display: block;
}

.crm-page .crm-floating-card strong {
    color: var(--crm-navy);
    font-size: 11px;
}

.crm-page .crm-floating-card small {
    margin-top: 3px;
    color: var(--crm-muted);
    font-size: 9px;
}

/* ======================================================
   INTRODUCTION
   ====================================================== */

.crm-page .crm-section {
    padding: 75px 0;
}

.crm-page .crm-intro-grid,
.crm-page .crm-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 45px;
}

.crm-page .crm-intro-content p,
.crm-page .crm-benefits-content > p {
    margin-bottom: 16px;
    color: var(--crm-muted);
    font-size: 14px;
    line-height: 1.9;
}

.crm-page .crm-intro-content p:last-child {
    margin-bottom: 0;
}

/* ======================================================
   FEATURES
   ====================================================== */

.crm-page .crm-features-section,
.crm-page .crm-process-section {
    background: var(--crm-light);
}

.crm-page .crm-section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.crm-page .crm-section-heading .crm-eyebrow {
    justify-content: center;
}

.crm-page .crm-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--crm-muted);
    font-size: 14px;
}

.crm-page .crm-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 21px;
}

.crm-page .crm-feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 245px;
    padding: 25px;
    border: 1px solid var(--crm-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(20, 49, 91, .035);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.crm-page .crm-feature-card:hover {
    transform: translateY(-5px);
    border-color: #b9d6ff;
    box-shadow: 0 16px 35px rgba(20, 49, 91, .09);
}

.crm-page .crm-feature-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 12px;
    color: var(--crm-blue);
    background: #eaf3ff;
    font-size: 25px;
    font-weight: 700;
}

.crm-page .crm-feature-icon.crm-orange {
    color: #d87913;
    background: #fff2e4;
}

.crm-page .crm-feature-icon.crm-green {
    color: #11804b;
    background: #e6f8ee;
}

.crm-page .crm-feature-icon.crm-purple {
    color: var(--crm-purple);
    background: #f0eaff;
}

.crm-page .crm-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.crm-page .crm-feature-card p {
    margin-bottom: 20px;
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.85;
}

.crm-page .crm-feature-card a {
    margin-top: auto;
    color: var(--crm-blue);
    font-size: 11px;
    font-weight: 750;
}

.crm-page .crm-feature-card a:hover {
    color: var(--crm-orange);
}

/* ======================================================
   BENEFITS
   ====================================================== */

.crm-page .crm-benefit-list {
    display: grid;
    gap: 18px;
    margin-top: 25px;
}

.crm-page .crm-benefit-list > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.crm-page .crm-benefit-list > div > span {
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #08794c;
    background: #e7f8ef;
    font-size: 14px;
    font-weight: 800;
}

.crm-page .crm-benefit-list strong {
    display: block;
    margin-bottom: 5px;
    color: var(--crm-navy);
    font-size: 14px;
}

.crm-page .crm-benefit-list p {
    margin-bottom: 0;
    color: var(--crm-muted);
    font-size: 12px;
}

.crm-page .crm-benefit-visual {
    min-width: 0;
}

.crm-page .crm-insight-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 340px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid var(--crm-border);
    border-radius: 17px;
    background:
        radial-gradient(circle at center, #e1efff, transparent 55%),
        linear-gradient(135deg, #f6f9ff, #eaf4ff);
}

.crm-page .crm-insight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 25px;
    color: var(--crm-muted);
    font-size: 10px;
}

.crm-page .crm-insight-header > span:first-child {
    color: var(--crm-blue);
    font-weight: 800;
    letter-spacing: 1.4px;
}

.crm-page .crm-insight-badge {
    padding: 5px 10px;
    border-radius: 20px;
    background: #fff;
}

.crm-page .crm-insight-main {
    padding: 25px 15px;
    border: 1px solid #c9defb;
    border-radius: 15px;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 28px rgba(18, 104, 216, .1);
}

.crm-page .crm-insight-symbol {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    margin: 0 auto 13px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--crm-blue), var(--crm-cyan));
    font-size: 22px;
}

.crm-page .crm-insight-main h3 {
    margin-bottom: 8px;
    font-size: 17px;
}

.crm-page .crm-insight-main p {
    margin-bottom: 0;
    color: var(--crm-muted);
    font-size: 11px;
}

.crm-page .crm-insight-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
}

.crm-page .crm-insight-pills span {
    padding: 7px 10px;
    border: 1px solid #d7e5fa;
    border-radius: 8px;
    color: var(--crm-navy);
    background: #fff;
    font-size: 10px;
    font-weight: 650;
}

.crm-page .crm-insight-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 22px;
    color: var(--crm-muted);
    font-size: 10px;
}

.crm-page .crm-insight-footer strong {
    color: var(--crm-blue);
}

/* ======================================================
   DEVELOPMENT PROCESS
   ====================================================== */

.crm-page .crm-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.crm-page .crm-process-card {
    padding: 23px 20px;
    border: 1px solid var(--crm-border);
    border-radius: 13px;
    background: #fff;
    transition: transform .2s ease;
}

.crm-page .crm-process-card:hover {
    transform: translateY(-4px);
}

.crm-page .crm-process-number {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    margin-bottom: 22px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--crm-blue), var(--crm-cyan));
    font-size: 13px;
    font-weight: 800;
}

.crm-page .crm-process-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.crm-page .crm-process-card p {
    margin-bottom: 0;
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* ======================================================
   FINAL CALL TO ACTION
   ====================================================== */

.crm-page .crm-final-cta {
    padding: 60px 0;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(16, 167, 229, .22),
            transparent 32%
        ),
        linear-gradient(115deg, #0b1735, #123c79);
}

.crm-page .crm-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.crm-page .crm-eyebrow-light {
    color: #8edbff;
}

.crm-page .crm-final-cta h2 {
    margin-bottom: 15px;
    color: #fff;
}

.crm-page .crm-final-cta h2 span {
    color: #65d0ff;
}

.crm-page .crm-final-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #c6d7ef;
    font-size: 14px;
}

.crm-page .crm-btn-white {
    flex-shrink: 0;
    color: var(--crm-navy);
    background: #fff;
    box-shadow: none;
}

.crm-page .crm-btn-white:hover {
    color: var(--crm-blue);
    background: #f0f7ff;
}

/* ======================================================
   TABLET
   ====================================================== */

@media (max-width: 1024px) {
    .crm-page .crm-hero-grid {
        gap: 24px;
    }

    .crm-page h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .crm-page .crm-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-page .crm-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-page .crm-floating-card {
        max-width: 210px;
        padding: 10px;
    }
}

/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 767px) {
    .crm-container {
        width: calc(100% - 36px);
    }

    .crm-page .crm-hero {
        padding: 22px 0 40px;
    }

    .crm-page .crm-hero-grid,
    .crm-page .crm-intro-grid,
    .crm-page .crm-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .crm-page h1 {
        font-size: clamp(32px, 8vw, 44px);
        letter-spacing: -1px;
    }

    .crm-page h2 {
        font-size: clamp(28px, 7vw, 35px);
    }

    .crm-page .crm-breadcrumb {
        gap: 7px;
        margin-bottom: 21px;
        font-size: 11px;
    }

    .crm-page .crm-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-page .crm-btn,
    .crm-page .crm-btn-outline {
        width: 100%;
    }

    .crm-page .crm-hero-visual {
        padding: 22px 0 28px;
    }

    .crm-page .crm-dashboard-header {
        padding: 15px 12px;
    }

    .crm-page .crm-dashboard-header > span {
        font-size: 9px;
    }

    .crm-page .crm-dashboard-body {
        padding: 17px 12px;
    }

    .crm-page .crm-stat-card {
        padding: 11px;
    }

    .crm-page .crm-stat-card strong {
        font-size: 12px;
    }

    .crm-page .crm-floating-card {
        max-width: 195px;
        padding: 9px 10px;
    }

    .crm-page .crm-float-top {
        right: 0;
    }

    .crm-page .crm-float-bottom {
        left: 0;
    }

    .crm-page .crm-section {
        padding: 52px 0;
    }

    .crm-page .crm-section-heading {
        margin-bottom: 30px;
    }

    .crm-page .crm-feature-grid,
    .crm-page .crm-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-page .crm-feature-card {
        min-height: auto;
    }

    .crm-page .crm-insight-panel {
        min-height: 300px;
        padding: 18px;
    }

    .crm-page .crm-final-cta {
        padding: 45px 0;
    }

    .crm-page .crm-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 25px;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .crm-page .crm-stats-grid {
        gap: 8px;
    }

    .crm-page .crm-stat-card {
        padding: 9px;
    }

    .crm-page .crm-activity {
        padding: 10px;
    }

    .crm-page .crm-activity-item {
        gap: 7px;
    }

    .crm-page .crm-activity-item small {
        font-size: 8px;
    }
}

/* ACCESSIBILITY */

.crm-page a:focus-visible {
    outline: 3px solid var(--crm-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .crm-page *,
    .crm-page *::before,
    .crm-page *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================
   CRM HERO - FINAL POSITION CORRECTION
   Top-align both columns and reduce whitespace
   ========================================== */

.crm-page .crm-hero {
    padding: 15px 0 40px !important;
    min-height: 0 !important;
}

.crm-page .crm-hero > .crm-container.crm-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 28px !important;

    width: 100% !important;
    max-width: 1700px !important;
    margin: 0 auto !important;
    padding: 0 35px !important;
}

/* LEFT: remove vertical centering that creates top whitespace */
.crm-page .crm-hero-content {
    align-self: start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 30px 0 0 !important;
    transform: none !important;
}

/* Breadcrumb spacing */
.crm-page .crm-breadcrumb {
    margin: 0 0 24px !important;
}

/* Heading */
.crm-page .crm-hero-content h1 {
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: clamp(34px, 3.1vw, 48px) !important;
    line-height: 1.15 !important;
    letter-spacing: -1.2px !important;
}

/* Right dashboard: same top alignment */
.crm-page .crm-hero-visual {
    align-self: start !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px 0 28px !important;
    transform: none !important;
}

.crm-page .crm-dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Keep dashboard contents compact */
.crm-page .crm-dashboard-body {
    padding: 18px 16px !important;
}

.crm-page .crm-dashboard-title {
    margin-bottom: 15px !important;
}

.crm-page .crm-stats-grid {
    gap: 10px !important;
}

.crm-page .crm-stat-card {
    padding: 12px !important;
}

.crm-page .crm-activity {
    margin-top: 15px !important;
    padding: 12px !important;
}

/* Keep floating cards inside dashboard column */
.crm-page .crm-float-top {
    top: 0 !important;
    right: 0 !important;
}

.crm-page .crm-float-bottom {
    bottom: 0 !important;
    left: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .crm-page .crm-hero > .crm-container.crm-hero-grid {
        padding: 0 24px !important;
        gap: 22px !important;
    }

    .crm-page .crm-hero-content {
        padding-top: 20px !important;
    }

    .crm-page .crm-hero-content h1 {
        font-size: clamp(30px, 3.8vw, 40px) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .crm-page .crm-hero {
        padding: 20px 0 35px !important;
    }

    .crm-page .crm-hero > .crm-container.crm-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 25px !important;
        padding: 0 18px !important;
    }

    .crm-page .crm-hero-content {
        padding-top: 0 !important;
    }

    .crm-page .crm-hero-content h1 {
        font-size: clamp(32px, 8vw, 43px) !important;
    }

    .crm-page .crm-hero-visual {
        padding: 20px 0 28px !important;
    }
}


/* =====================================================
   SOFTWARE MAINTENANCE PAGE
   Prefix: sm-
   Theme: Navy, Blue, Cyan and Orange
   ===================================================== */

.sm-page {
    --sm-navy: #0b1735;
    --sm-blue: #1268d8;
    --sm-cyan: #10a7e5;
    --sm-orange: #f28b1b;
    --sm-green: #13834d;
    --sm-purple: #7853d7;
    --sm-red: #db5265;
    --sm-text: #172746;
    --sm-muted: #687993;
    --sm-light: #f3f7ff;
    --sm-border: #e1eaf6;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
    color: var(--sm-text);
    background: #fff;
    line-height: 1.7;
}

.sm-page *,
.sm-page *::before,
.sm-page *::after {
    box-sizing: border-box;
}

.sm-page a {
    text-decoration: none;
}

.sm-page h1,
.sm-page h2,
.sm-page h3,
.sm-page p {
    margin-top: 0;
}

.sm-page h1,
.sm-page h2,
.sm-page h3 {
    color: var(--sm-navy);
    line-height: 1.2;
}

.sm-page h1 {
    margin-bottom: 20px;
    font-size: clamp(35px, 3.3vw, 49px);
    font-weight: 800;
    letter-spacing: -1.4px;
}

.sm-page h1 span,
.sm-page h2 span {
    display: block;
    color: var(--sm-blue);
}

.sm-page h2 {
    margin-bottom: 20px;
    font-size: clamp(29px, 2.8vw, 39px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.sm-page h3 {
    font-size: 17px;
    font-weight: 750;
}

.sm-container {
    width: min(1200px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
}

/* HERO */

.sm-page .sm-hero {
    padding: 20px 0 45px;
    background:
        radial-gradient(
            circle at 88% 35%,
            rgba(16, 167, 229, .16),
            transparent 35%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--sm-border);
}

.sm-page .sm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
}

.sm-page .sm-hero-content {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 15px 0 0;
}

.sm-page .sm-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 24px;
    color: var(--sm-muted);
    font-size: 13px;
}

.sm-page .sm-breadcrumb a {
    color: var(--sm-blue);
}

.sm-page .sm-breadcrumb a:hover {
    color: var(--sm-orange);
}

.sm-page .sm-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--sm-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.sm-page .sm-eyebrow > span {
    flex: 0 0 25px;
    width: 25px;
    height: 3px;
    background: var(--sm-orange);
}

.sm-page .sm-hero-description {
    margin-bottom: 24px;
    color: var(--sm-muted);
    font-size: 14px;
    line-height: 1.9;
}

.sm-page .sm-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 23px;
}

.sm-page .sm-btn,
.sm-page .sm-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    transition: .25s ease;
}

.sm-page .sm-btn {
    color: #fff;
    background: linear-gradient(110deg, var(--sm-blue), var(--sm-cyan));
    box-shadow: 0 8px 20px rgba(18, 104, 216, .16);
}

.sm-page .sm-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, .24);
}

.sm-page .sm-btn-outline {
    color: var(--sm-navy);
    background: #fff;
    border-color: #d6e3f5;
}

.sm-page .sm-btn-outline:hover {
    color: var(--sm-blue);
    border-color: var(--sm-blue);
}

.sm-page .sm-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 14px;
    color: #536580;
    font-size: 10px;
    font-weight: 650;
}

/* DASHBOARD */

.sm-page .sm-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 27px;
}

.sm-page .sm-dashboard {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    color: #dce8ff;
    background: var(--sm-navy);
    box-shadow: 0 24px 50px rgba(11, 23, 53, .17);
}

.sm-page .sm-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 55px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: #101f43;
}

.sm-page .sm-dashboard-header > span {
    color: #c5d5ef;
    font-size: 9px;
    letter-spacing: 1px;
}

.sm-page .sm-window-dots {
    display: flex;
    flex-shrink: 0;
    gap: 7px;
}

.sm-page .sm-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6962;
}

.sm-page .sm-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.sm-page .sm-window-dots i:nth-child(3) {
    background: #38c982;
}

.sm-page .sm-dashboard-body {
    padding: 21px 18px;
}

.sm-page .sm-dashboard-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 19px;
}

.sm-page .sm-dashboard-title small {
    color: #91a8cc;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.sm-page .sm-dashboard-title h3 {
    margin: 6px 0 0;
    color: #fff;
    font-size: 17px;
}

.sm-page .sm-status {
    flex-shrink: 0;
    padding: 5px 9px;
    border: 1px solid rgba(62, 219, 152, .2);
    border-radius: 20px;
    color: #68e4ad;
    background: rgba(62, 219, 152, .08);
    font-size: 9px;
}

.sm-page .sm-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #3edb98;
}

/* HEALTH CARD */

.sm-page .sm-health-card {
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
}

.sm-page .sm-health-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.sm-page .sm-health-top > span {
    color: #b4c5e1;
    font-size: 10px;
}

.sm-page .sm-health-top strong {
    color: #6de4b1;
    font-size: 20px;
}

.sm-page .sm-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 10px;
    background: #293a5b;
}

.sm-page .sm-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sm-blue), #46d9a1);
}

.sm-page .sm-health-card > small {
    display: block;
    margin-top: 8px;
    color: #879bbb;
    font-size: 9px;
}

/* STATS */

.sm-page .sm-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.sm-page .sm-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
}

.sm-page .sm-stat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border-radius: 9px;
    color: #70baff;
    background: rgba(18, 104, 216, .18);
    font-size: 19px;
}

.sm-page .sm-stat-icon.sm-orange {
    color: #ffbb69;
}

.sm-page .sm-stat-icon.sm-green {
    color: #6ce3ad;
}

.sm-page .sm-stat-icon.sm-purple {
    color: #c5a7ff;
}

.sm-page .sm-stat-card small {
    color: #a3b5d2;
    font-size: 9px;
}

.sm-page .sm-stat-card strong {
    margin-top: 4px;
    color: #fff;
    font-size: 12px;
}

.sm-page .sm-stat-card > span:last-child {
    margin-top: 5px;
    color: #8196b7;
    font-size: 9px;
}

/* ACTIVITY LIST */

.sm-page .sm-maintenance-activity {
    margin-top: 15px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
}

.sm-page .sm-activity-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.sm-page .sm-activity-heading strong {
    color: #fff;
    font-size: 11px;
}

.sm-page .sm-activity-heading > span {
    color: #91a5c5;
    font-size: 9px;
}

.sm-page .sm-activity-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.sm-page .sm-activity-check {
    display: grid;
    flex: 0 0 27px;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    color: #6ce3ad;
    background: rgba(62, 219, 152, .1);
    font-size: 11px;
}

.sm-page .sm-activity-row > div {
    flex: 1;
    min-width: 0;
}

.sm-page .sm-activity-row strong,
.sm-page .sm-activity-row small {
    display: block;
}

.sm-page .sm-activity-row strong {
    color: #eaf2ff;
    font-size: 10px;
}

.sm-page .sm-activity-row small {
    margin-top: 2px;
    color: #91a5c5;
    font-size: 9px;
}

.sm-page .sm-activity-tag {
    flex-shrink: 0;
    color: #71c6ff;
    font-size: 9px;
}

/* FLOATING CARDS */

.sm-page .sm-floating-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 225px;
    padding: 11px 13px;
    border: 1px solid var(--sm-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(21, 53, 101, .12);
}

.sm-page .sm-float-top {
    top: 0;
    right: 0;
}

.sm-page .sm-float-bottom {
    bottom: 0;
    left: 0;
}

.sm-page .sm-float-icon {
    display: grid;
    flex: 0 0 37px;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    color: var(--sm-blue);
    background: #eaf4ff;
    font-size: 19px;
}

.sm-page .sm-float-orange {
    color: var(--sm-orange);
    background: #fff2e4;
}

.sm-page .sm-floating-card strong,
.sm-page .sm-floating-card small {
    display: block;
}

.sm-page .sm-floating-card strong {
    color: var(--sm-navy);
    font-size: 10px;
}

.sm-page .sm-floating-card small {
    margin-top: 3px;
    color: var(--sm-muted);
    font-size: 9px;
}

/* SECTION LAYOUTS */

.sm-page .sm-section {
    padding: 72px 0;
}

.sm-page .sm-intro-grid,
.sm-page .sm-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 42px;
}

.sm-page .sm-intro-content > p,
.sm-page .sm-benefits-content > p {
    color: var(--sm-muted);
    font-size: 14px;
    line-height: 1.9;
}

.sm-page .sm-text-link {
    display: inline-block;
    margin-top: 9px;
    color: var(--sm-blue);
    font-size: 12px;
    font-weight: 750;
}

.sm-page .sm-text-link:hover {
    color: var(--sm-orange);
}

/* FRAMEWORK PANEL */

.sm-page .sm-intro-panel {
    padding: 24px;
    border: 1px solid var(--sm-border);
    border-radius: 16px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.sm-page .sm-panel-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--sm-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sm-page .sm-panel-badge {
    padding: 4px 8px;
    border-radius: 20px;
    color: var(--sm-green);
    background: #e5f8ed;
    font-size: 9px;
    letter-spacing: 0;
}

.sm-page .sm-framework-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 16px 0;
    border-top: 1px solid #dce8f7;
}

.sm-page .sm-framework-number {
    display: grid;
    flex: 0 0 39px;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--sm-blue), var(--sm-cyan));
    font-size: 11px;
    font-weight: 800;
}

.sm-page .sm-framework-item h3 {
    margin-bottom: 5px;
    font-size: 15px;
}

.sm-page .sm-framework-item p {
    margin-bottom: 0;
    color: var(--sm-muted);
    font-size: 11px;
}

/* FEATURE CARDS */

.sm-page .sm-services-section,
.sm-page .sm-process-section {
    background: var(--sm-light);
}

.sm-page .sm-section-heading {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.sm-page .sm-center-eyebrow {
    justify-content: center;
}

.sm-page .sm-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--sm-muted);
    font-size: 13px;
}

.sm-page .sm-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.sm-page .sm-feature-card {
    min-width: 0;
    min-height: 225px;
    padding: 24px;
    border: 1px solid var(--sm-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 49, 91, .035);
    transition: transform .25s ease, box-shadow .25s ease;
}

.sm-page .sm-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(20, 49, 91, .09);
}

.sm-page .sm-feature-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 17px;
    border-radius: 12px;
    color: var(--sm-blue);
    background: #eaf3ff;
    font-size: 22px;
}

.sm-page .sm-feature-icon.sm-orange {
    color: #d87913;
    background: #fff2e4;
}

.sm-page .sm-feature-icon.sm-green {
    color: #11804b;
    background: #e6f8ee;
}

.sm-page .sm-feature-icon.sm-purple {
    color: var(--sm-purple);
    background: #f0eaff;
}

.sm-page .sm-feature-icon.sm-cyan {
    color: #068dbd;
    background: #e4f8ff;
}

.sm-page .sm-feature-icon.sm-red {
    color: var(--sm-red);
    background: #fff0f2;
}

.sm-page .sm-feature-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.sm-page .sm-feature-card p {
    margin-bottom: 0;
    color: var(--sm-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* BENEFITS */

.sm-page .sm-benefit-list {
    display: grid;
    gap: 17px;
    margin-top: 25px;
}

.sm-page .sm-benefit-list > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sm-page .sm-benefit-list > div > span {
    display: grid;
    flex: 0 0 31px;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    color: var(--sm-green);
    background: #e7f8ef;
    font-size: 13px;
    font-weight: 800;
}

.sm-page .sm-benefit-list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--sm-navy);
    font-size: 13px;
}

.sm-page .sm-benefit-list p {
    margin-bottom: 0;
    color: var(--sm-muted);
    font-size: 11px;
}

.sm-page .sm-benefits-card {
    padding: 24px;
    border: 1px solid var(--sm-border);
    border-radius: 16px;
    background: linear-gradient(140deg, #f5f9ff, #eaf4ff);
}

.sm-page .sm-benefits-card-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--sm-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sm-page .sm-lifecycle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid #dce8f7;
}

.sm-page .sm-lifecycle-icon {
    display: grid;
    flex: 0 0 43px;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--sm-blue), var(--sm-cyan));
    font-size: 11px;
    font-weight: 800;
}

.sm-page .sm-lifecycle strong,
.sm-page .sm-lifecycle small {
    display: block;
}

.sm-page .sm-lifecycle strong {
    color: var(--sm-navy);
    font-size: 13px;
}

.sm-page .sm-lifecycle small {
    margin-top: 4px;
    color: var(--sm-muted);
    font-size: 11px;
}

/* PROCESS */

.sm-page .sm-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.sm-page .sm-process-card {
    padding: 22px 19px;
    border: 1px solid var(--sm-border);
    border-radius: 13px;
    background: #fff;
    transition: transform .25s ease;
}

.sm-page .sm-process-card:hover {
    transform: translateY(-4px);
}

.sm-page .sm-process-number {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 19px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--sm-blue), var(--sm-cyan));
    font-size: 12px;
    font-weight: 800;
}

.sm-page .sm-process-card h3 {
    margin-bottom: 9px;
    font-size: 15px;
}

.sm-page .sm-process-card p {
    margin-bottom: 0;
    color: var(--sm-muted);
    font-size: 11px;
    line-height: 1.85;
}

/* CTA */

.sm-page .sm-final-cta {
    padding: 55px 0;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(16, 167, 229, .22),
            transparent 32%
        ),
        linear-gradient(115deg, #0b1735, #123c79);
}

.sm-page .sm-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.sm-page .sm-eyebrow-light {
    color: #8edbff;
}

.sm-page .sm-final-cta h2 {
    margin-bottom: 14px;
    color: #fff;
}

.sm-page .sm-final-cta h2 span {
    color: #65d0ff;
}

.sm-page .sm-final-cta p {
    max-width: 680px;
    margin-bottom: 0;
    color: #c6d7ef;
    font-size: 13px;
}

.sm-page .sm-btn-white {
    flex-shrink: 0;
    color: var(--sm-navy);
    background: #fff;
    box-shadow: none;
}

.sm-page .sm-btn-white:hover {
    color: var(--sm-blue);
    background: #f0f7ff;
}

/* TABLET */

@media (max-width: 1024px) {
    .sm-page .sm-hero-grid {
        gap: 23px;
    }

    .sm-page h1 {
        font-size: clamp(32px, 4vw, 42px);
    }

    .sm-page .sm-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm-page .sm-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .sm-container {
        width: calc(100% - 36px);
    }

    .sm-page .sm-hero {
        padding: 20px 0 35px;
    }

    .sm-page .sm-hero-grid,
    .sm-page .sm-intro-grid,
    .sm-page .sm-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .sm-page .sm-hero-content {
        padding-top: 0;
    }

    .sm-page h1 {
        font-size: clamp(32px, 8vw, 43px);
        letter-spacing: -1px;
    }

    .sm-page h2 {
        font-size: clamp(28px, 7vw, 35px);
    }

    .sm-page .sm-breadcrumb {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .sm-page .sm-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .sm-page .sm-btn,
    .sm-page .sm-btn-outline {
        width: 100%;
    }

    .sm-page .sm-hero-visual {
        padding: 21px 0 28px;
    }

    .sm-page .sm-dashboard-body {
        padding: 15px 12px;
    }

    .sm-page .sm-stat-card {
        padding: 10px;
    }

    .sm-page .sm-stat-card strong {
        font-size: 11px;
    }

    .sm-page .sm-floating-card {
        max-width: 195px;
        padding: 9px 10px;
    }

    .sm-page .sm-float-top {
        right: 0;
    }

    .sm-page .sm-float-bottom {
        left: 0;
    }

    .sm-page .sm-section {
        padding: 50px 0;
    }

    .sm-page .sm-section-heading {
        margin-bottom: 28px;
    }

    .sm-page .sm-feature-grid,
    .sm-page .sm-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sm-page .sm-feature-card {
        min-height: auto;
    }

    .sm-page .sm-final-cta {
        padding: 42px 0;
    }

    .sm-page .sm-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
    }
}

/* ACCESSIBILITY */

.sm-page a:focus-visible {
    outline: 3px solid var(--sm-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .sm-page *,
    .sm-page *::before,
    .sm-page *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* ============================================
   SOFTWARE MAINTENANCE - HERO ALIGNMENT FIX
   ============================================ */

.sm-page .sm-hero {
    padding: 10px 0 35px !important;
    margin: 0 !important;
    min-height: auto !important;
}

.sm-page .sm-container.sm-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 28px !important;

    width: 100% !important;
    max-width: 1700px !important;
    margin: 0 auto !important;
    padding: 0 35px !important;
}

/* LEFT CONTENT */
.sm-page .sm-hero-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px 0 0 !important;
    align-self: start !important;
    transform: none !important;
}

.sm-page .sm-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

/* Heading uses available left-column width */
.sm-page .sm-hero-content h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: clamp(32px, 3.1vw, 47px) !important;
    line-height: 1.15 !important;
    letter-spacing: -1.2px !important;
}

/* RIGHT DASHBOARD */
.sm-page .sm-hero-visual {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px 0 25px !important;
    align-self: start !important;
    transform: none !important;
}

.sm-page .sm-dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Compact dashboard */
.sm-page .sm-dashboard-body {
    padding: 18px 16px !important;
}

.sm-page .sm-dashboard-title {
    margin-bottom: 15px !important;
}

.sm-page .sm-health-card {
    padding: 12px !important;
    margin-bottom: 10px !important;
}

.sm-page .sm-stats-grid {
    gap: 9px !important;
}

.sm-page .sm-stat-card {
    padding: 11px !important;
}

.sm-page .sm-maintenance-activity {
    margin-top: 12px !important;
    padding: 11px !important;
}

/* Keep floating cards within the right column */
.sm-page .sm-float-top {
    top: 0 !important;
    right: 0 !important;
}

.sm-page .sm-float-bottom {
    bottom: 0 !important;
    left: 0 !important;
}

/* TABLET */
@media (max-width: 1024px) {
    .sm-page .sm-container.sm-hero-grid {
        padding: 0 24px !important;
        gap: 20px !important;
    }

    .sm-page .sm-hero-content h1 {
        font-size: clamp(30px, 3.8vw, 39px) !important;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    .sm-page .sm-hero {
        padding: 20px 0 35px !important;
    }

    .sm-page .sm-container.sm-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 22px !important;
        padding: 0 18px !important;
    }

    .sm-page .sm-hero-content {
        padding-top: 0 !important;
    }

    .sm-page .sm-hero-content h1 {
        font-size: clamp(32px, 8vw, 43px) !important;
    }

    .sm-page .sm-hero-visual {
        padding: 20px 0 28px !important;
    }
}



/* =====================================================
   WEB DEVELOPMENT PAGE
   Prefix: wd-
   Theme: Navy, Blue, Cyan and Orange
   ===================================================== */

.wd-page {
    --wd-navy: #0b1735;
    --wd-blue: #1268d8;
    --wd-cyan: #10a7e5;
    --wd-orange: #f28b1b;
    --wd-green: #13834d;
    --wd-purple: #7853d7;
    --wd-red: #db5265;
    --wd-text: #172746;
    --wd-muted: #687993;
    --wd-light: #f3f7ff;
    --wd-border: #e1eaf6;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
    color: var(--wd-text);
    background: #fff;
    line-height: 1.7;
}

.wd-page *,
.wd-page *::before,
.wd-page *::after {
    box-sizing: border-box;
}

.wd-page a {
    text-decoration: none;
}

.wd-page h1,
.wd-page h2,
.wd-page h3,
.wd-page p {
    margin-top: 0;
}

.wd-page h1,
.wd-page h2,
.wd-page h3 {
    color: var(--wd-navy);
    line-height: 1.2;
}

.wd-page h1 {
    margin-bottom: 20px;
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 800;
    letter-spacing: -1.4px;
}

.wd-page h1 span,
.wd-page h2 span {
    display: block;
    color: var(--wd-blue);
}

.wd-page h2 {
    margin-bottom: 20px;
    font-size: clamp(28px, 2.8vw, 39px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.wd-page h3 {
    font-size: 17px;
    font-weight: 750;
}

.wd-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* =====================================================
   HERO SECTION
   ===================================================== */

.wd-page .wd-hero {
    padding: 15px 0 40px;
    background:
        radial-gradient(
            circle at 88% 35%,
            rgba(16, 167, 229, .15),
            transparent 35%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--wd-border);
}

.wd-page .wd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.wd-page .wd-hero-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 0;
}

.wd-page .wd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    color: var(--wd-muted);
    font-size: 13px;
}

.wd-page .wd-breadcrumb a {
    color: var(--wd-blue);
}

.wd-page .wd-breadcrumb a:hover {
    color: var(--wd-orange);
}

.wd-page .wd-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--wd-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.wd-page .wd-eyebrow > span {
    flex: 0 0 25px;
    width: 25px;
    height: 3px;
    background: var(--wd-orange);
}

.wd-page .wd-hero-description {
    margin-bottom: 23px;
    color: var(--wd-muted);
    font-size: 14px;
    line-height: 1.9;
}

.wd-page .wd-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.wd-page .wd-btn,
.wd-page .wd-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    transition: transform .25s ease, box-shadow .25s ease;
}

.wd-page .wd-btn {
    color: #fff;
    background: linear-gradient(110deg, var(--wd-blue), var(--wd-cyan));
    box-shadow: 0 8px 20px rgba(18, 104, 216, .17);
}

.wd-page .wd-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, .25);
}

.wd-page .wd-btn-outline {
    color: var(--wd-navy);
    background: #fff;
    border-color: #d6e3f5;
}

.wd-page .wd-btn-outline:hover {
    color: var(--wd-blue);
    border-color: var(--wd-blue);
}

.wd-page .wd-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    color: #536580;
    font-size: 10px;
    font-weight: 650;
}

/* =====================================================
   WEBSITE PREVIEW DASHBOARD
   ===================================================== */

.wd-page .wd-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 28px;
}

.wd-page .wd-dashboard {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    background: var(--wd-navy);
    box-shadow: 0 24px 50px rgba(11, 23, 53, .17);
}

.wd-page .wd-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 53px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: #101f43;
}

.wd-page .wd-window-dots {
    display: flex;
    flex-shrink: 0;
    gap: 7px;
}

.wd-page .wd-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6962;
}

.wd-page .wd-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.wd-page .wd-window-dots i:nth-child(3) {
    background: #38c982;
}

.wd-page .wd-dashboard-header > span {
    color: #a9bddb;
    font-size: 9px;
    letter-spacing: 1px;
}

.wd-page .wd-browser-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 13px 15px;
    padding: 8px 11px;
    border: 1px solid #dfe7f3;
    border-radius: 6px;
    color: #61718a;
    background: #fff;
    font-size: 9px;
}

.wd-page .wd-browser-bar > div {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wd-page .wd-preview {
    margin: 0 15px;
    overflow: hidden;
    border-radius: 9px;
    background: #f3f7ff;
}

.wd-page .wd-preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px;
    border-bottom: 1px solid #e1eaf6;
    background: #fff;
}

.wd-page .wd-preview-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--wd-navy);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .6px;
}

.wd-page .wd-preview-logo > span {
    width: 9px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--wd-cyan), var(--wd-blue));
}

.wd-page .wd-preview-links {
    display: flex;
    gap: 9px;
}

.wd-page .wd-preview-links i {
    width: 21px;
    height: 4px;
    border-radius: 4px;
    background: #d5e2f4;
}

.wd-page .wd-preview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    align-items: center;
    gap: 12px;
    padding: 24px 17px;
    background:
        radial-gradient(circle at 90% 30%, #d9eaff, transparent 50%),
        #f3f7ff;
}

.wd-page .wd-preview-copy {
    min-width: 0;
}

.wd-page .wd-preview-copy > small {
    color: var(--wd-blue);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}

.wd-page .wd-preview-copy h3 {
    margin: 10px 0;
    font-size: clamp(15px, 1.6vw, 22px);
    line-height: 1.3;
    letter-spacing: -.5px;
}

.wd-page .wd-preview-copy p {
    margin-bottom: 13px;
    color: var(--wd-muted);
    font-size: 9px;
    line-height: 1.7;
}

.wd-page .wd-preview-button {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 5px;
    color: #fff;
    background: var(--wd-blue);
    font-size: 8px;
    font-weight: 700;
}

.wd-page .wd-preview-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 150px;
}

.wd-page .wd-art-circle {
    width: min(125px, 100%);
    aspect-ratio: 1;
    border: 1px solid rgba(18, 104, 216, .17);
    border-radius: 50%;
    background: linear-gradient(145deg, #a8d9ff, #2476e5);
    box-shadow:
        0 0 0 12px rgba(18, 104, 216, .06),
        0 15px 30px rgba(18, 104, 216, .17);
}

.wd-page .wd-art-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid #e1eaf6;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(11, 23, 53, .1);
}

.wd-page .wd-art-card > span {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 6px;
    color: var(--wd-blue);
    background: #eaf3ff;
    font-size: 13px;
    font-weight: 800;
}

.wd-page .wd-art-card small {
    color: var(--wd-navy);
    font-size: 8px;
    font-weight: 750;
}

.wd-page .wd-art-card-one {
    top: 12px;
    right: 0;
}

.wd-page .wd-art-card-two {
    bottom: 10px;
    left: 0;
}

.wd-page .wd-art-card-two > span {
    color: var(--wd-green);
    background: #e6f8ee;
}

.wd-page .wd-preview-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 13px;
    background: #fff;
}

.wd-page .wd-preview-services > div {
    padding: 11px 8px;
    border: 1px solid #e1eaf6;
    border-radius: 7px;
    background: #f9fbff;
}

.wd-page .wd-preview-services span,
.wd-page .wd-preview-services strong {
    display: block;
}

.wd-page .wd-preview-services span {
    margin-bottom: 5px;
    color: var(--wd-orange);
    font-size: 9px;
    font-weight: 800;
}

.wd-page .wd-preview-services strong {
    color: var(--wd-navy);
    font-size: 10px;
}

.wd-page .wd-dashboard-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 17px;
    color: #a9bddb;
    font-size: 9px;
}

.wd-page .wd-dashboard-footer i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #45d9a0;
}

/* FLOATING CARDS */

.wd-page .wd-floating-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 220px;
    padding: 11px 13px;
    border: 1px solid var(--wd-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(21, 53, 101, .12);
}

.wd-page .wd-float-top {
    top: 0;
    right: 0;
}

.wd-page .wd-float-bottom {
    bottom: 0;
    left: 0;
}

.wd-page .wd-float-icon {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--wd-blue);
    background: #eaf4ff;
    font-size: 20px;
}

.wd-page .wd-float-orange {
    color: var(--wd-orange);
    background: #fff2e4;
}

.wd-page .wd-floating-card strong,
.wd-page .wd-floating-card small {
    display: block;
}

.wd-page .wd-floating-card strong {
    color: var(--wd-navy);
    font-size: 10px;
}

.wd-page .wd-floating-card small {
    margin-top: 3px;
    color: var(--wd-muted);
    font-size: 9px;
}

/* =====================================================
   INTRODUCTION
   ===================================================== */

.wd-page .wd-section {
    padding: 70px 0;
}

.wd-page .wd-intro-grid,
.wd-page .wd-tech-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 42px;
}

.wd-page .wd-intro-content > p,
.wd-page .wd-tech-content > p {
    color: var(--wd-muted);
    font-size: 14px;
    line-height: 1.9;
}

.wd-page .wd-text-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--wd-blue);
    font-size: 12px;
    font-weight: 750;
}

.wd-page .wd-text-link:hover {
    color: var(--wd-orange);
}

/* APPROACH PANEL */

.wd-page .wd-intro-panel {
    padding: 23px;
    border: 1px solid var(--wd-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.wd-page .wd-panel-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--wd-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.wd-page .wd-panel-badge {
    padding: 4px 8px;
    border-radius: 20px;
    color: var(--wd-green);
    background: #e5f8ed;
    font-size: 9px;
    letter-spacing: 0;
}

.wd-page .wd-approach-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.wd-page .wd-approach-item > span {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--wd-blue), var(--wd-cyan));
    font-size: 11px;
    font-weight: 800;
}

.wd-page .wd-approach-item h3 {
    margin-bottom: 5px;
    font-size: 15px;
}

.wd-page .wd-approach-item p {
    margin-bottom: 0;
    color: var(--wd-muted);
    font-size: 11px;
}

/* =====================================================
   SERVICES
   ===================================================== */

.wd-page .wd-services-section,
.wd-page .wd-benefits-section,
.wd-page .wd-process-section {
    background: var(--wd-light);
}

.wd-page .wd-section-heading {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.wd-page .wd-center-eyebrow {
    justify-content: center;
}

.wd-page .wd-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--wd-muted);
    font-size: 13px;
}

.wd-page .wd-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.wd-page .wd-feature-card {
    min-width: 0;
    min-height: 220px;
    padding: 23px;
    border: 1px solid var(--wd-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 49, 91, .035);
    transition: transform .25s ease, box-shadow .25s ease;
}

.wd-page .wd-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(20, 49, 91, .09);
}

.wd-page .wd-feature-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 17px;
    border-radius: 12px;
    color: var(--wd-blue);
    background: #eaf3ff;
    font-size: 22px;
}

.wd-page .wd-feature-icon.wd-orange {
    color: #d87913;
    background: #fff2e4;
}

.wd-page .wd-feature-icon.wd-green {
    color: #11804b;
    background: #e6f8ee;
}

.wd-page .wd-feature-icon.wd-purple {
    color: var(--wd-purple);
    background: #f0eaff;
}

.wd-page .wd-feature-icon.wd-cyan {
    color: #068dbd;
    background: #e4f8ff;
}

.wd-page .wd-feature-icon.wd-red {
    color: var(--wd-red);
    background: #fff0f2;
}

.wd-page .wd-feature-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.wd-page .wd-feature-card p {
    margin-bottom: 0;
    color: var(--wd-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* =====================================================
   TECHNOLOGY SECTION
   ===================================================== */

.wd-page .wd-tech-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 23px;
}

.wd-page .wd-tech-points span {
    padding: 8px 12px;
    border: 1px solid #dbe7f7;
    border-radius: 8px;
    color: var(--wd-navy);
    background: #f7faff;
    font-size: 11px;
    font-weight: 650;
}

.wd-page .wd-tech-window {
    overflow: hidden;
    border: 1px solid #26385c;
    border-radius: 15px;
    color: #dce8ff;
    background: var(--wd-navy);
    box-shadow: 0 20px 45px rgba(11, 23, 53, .14);
}

.wd-page .wd-tech-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #101f43;
}

.wd-page .wd-tech-window-header > span {
    color: #a9bddb;
    font-size: 10px;
}

.wd-page .wd-code-content {
    padding: 24px 20px;
    overflow-x: auto;
    color: #dce8ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 2.4;
    white-space: nowrap;
}

.wd-page .wd-code-content > div > span {
    display: inline-block;
    width: 27px;
    color: #7085aa;
}

.wd-page .wd-code-content b {
    color: #c5a0ff;
    font-weight: 600;
}

.wd-page .wd-code-content em {
    color: #54d3ff;
    font-style: normal;
}

.wd-page .wd-code-indent {
    padding-left: 19px;
}

.wd-page .wd-code-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 9px;
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #a9bddb;
    font-size: 9px;
}

/* =====================================================
   BENEFITS
   ===================================================== */

.wd-page .wd-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.wd-page .wd-benefit-card {
    padding: 22px 19px;
    border: 1px solid var(--wd-border);
    border-radius: 13px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.wd-page .wd-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(20, 49, 91, .07);
}

.wd-page .wd-benefit-card > span {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    margin-bottom: 18px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--wd-blue), var(--wd-cyan));
    font-size: 11px;
    font-weight: 800;
}

.wd-page .wd-benefit-card h3 {
    margin-bottom: 10px;
    font-size: 15px;
}

.wd-page .wd-benefit-card p {
    margin-bottom: 0;
    color: var(--wd-muted);
    font-size: 11px;
    line-height: 1.85;
}

/* =====================================================
   DEVELOPMENT PROCESS
   ===================================================== */

.wd-page .wd-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.wd-page .wd-process-card {
    padding: 22px 19px;
    border: 1px solid var(--wd-border);
    border-radius: 13px;
    background: #fff;
    transition: transform .25s ease;
}

.wd-page .wd-process-card:hover {
    transform: translateY(-4px);
}

.wd-page .wd-process-card > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--wd-blue), var(--wd-cyan));
    font-size: 12px;
    font-weight: 800;
}

.wd-page .wd-process-card h3 {
    margin-bottom: 9px;
    font-size: 15px;
}

.wd-page .wd-process-card p {
    margin-bottom: 0;
    color: var(--wd-muted);
    font-size: 11px;
    line-height: 1.85;
}

/* =====================================================
   CALL TO ACTION
   ===================================================== */

.wd-page .wd-final-cta {
    padding: 55px 0;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(16, 167, 229, .22),
            transparent 32%
        ),
        linear-gradient(115deg, #0b1735, #123c79);
}

.wd-page .wd-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.wd-page .wd-eyebrow-light {
    color: #8edbff;
}

.wd-page .wd-final-cta h2 {
    margin-bottom: 14px;
    color: #fff;
}

.wd-page .wd-final-cta h2 span {
    color: #65d0ff;
}

.wd-page .wd-final-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #c6d7ef;
    font-size: 13px;
}

.wd-page .wd-btn-white {
    flex-shrink: 0;
    color: var(--wd-navy);
    background: #fff;
    box-shadow: none;
}

.wd-page .wd-btn-white:hover {
    color: var(--wd-blue);
    background: #f0f7ff;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1024px) {
    .wd-container {
        width: calc(100% - 40px);
    }

    .wd-page .wd-hero-grid,
    .wd-page .wd-intro-grid,
    .wd-page .wd-tech-grid {
        gap: 22px;
    }

    .wd-page h1 {
        font-size: clamp(31px, 3.8vw, 41px);
    }

    .wd-page .wd-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wd-page .wd-benefit-grid,
    .wd-page .wd-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wd-page .wd-preview-hero {
        padding: 18px 12px;
    }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {
    .wd-container {
        width: calc(100% - 36px);
    }

    .wd-page .wd-hero {
        padding: 20px 0 35px;
    }

    .wd-page .wd-hero-grid,
    .wd-page .wd-intro-grid,
    .wd-page .wd-tech-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .wd-page .wd-hero-content {
        padding-top: 0;
    }

    .wd-page h1 {
        font-size: clamp(32px, 8vw, 43px);
        letter-spacing: -1px;
    }

    .wd-page h2 {
        font-size: clamp(28px, 7vw, 35px);
    }

    .wd-page .wd-breadcrumb {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .wd-page .wd-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .wd-page .wd-btn,
    .wd-page .wd-btn-outline {
        width: 100%;
    }

    .wd-page .wd-hero-visual {
        padding: 20px 0 27px;
    }

    .wd-page .wd-floating-card {
        max-width: 195px;
        padding: 9px 10px;
    }

    .wd-page .wd-float-top {
        right: 0;
    }

    .wd-page .wd-float-bottom {
        left: 0;
    }

    .wd-page .wd-preview-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
        padding: 18px 11px;
    }

    .wd-page .wd-preview-art {
        min-height: 125px;
    }

    .wd-page .wd-preview-services {
        padding: 9px;
        gap: 6px;
    }

    .wd-page .wd-preview-services > div {
        padding: 8px 6px;
    }

    .wd-page .wd-preview-services strong {
        font-size: 9px;
    }

    .wd-page .wd-section {
        padding: 48px 0;
    }

    .wd-page .wd-section-heading {
        margin-bottom: 28px;
    }

    .wd-page .wd-feature-grid,
    .wd-page .wd-benefit-grid,
    .wd-page .wd-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wd-page .wd-feature-card {
        min-height: auto;
    }

    .wd-page .wd-final-cta {
        padding: 42px 0;
    }

    .wd-page .wd-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 23px;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .wd-page .wd-preview-art {
        min-height: 110px;
    }

    .wd-page .wd-art-circle {
        width: 85px;
    }

    .wd-page .wd-art-card {
        gap: 4px;
        padding: 5px;
    }

    .wd-page .wd-art-card > span {
        width: 19px;
        height: 19px;
    }

    .wd-page .wd-art-card small {
        font-size: 7px;
    }

    .wd-page .wd-dashboard-footer {
        font-size: 8px;
    }
}

/* ACCESSIBILITY */

.wd-page a:focus-visible {
    outline: 3px solid var(--wd-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .wd-page *,
    .wd-page *::before,
    .wd-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================
   MOBILE APP DEVELOPMENT PAGE
   Prefix: mad-
   Theme: Navy + Blue + Cyan + Orange
   ===================================================== */

.mad-page {
    --mad-navy: #0b1735;
    --mad-blue: #1268d8;
    --mad-cyan: #10a7e5;
    --mad-orange: #f28b1b;
    --mad-green: #13834d;
    --mad-purple: #7853d7;
    --mad-red: #db5265;
    --mad-text: #172746;
    --mad-muted: #687993;
    --mad-light: #f3f7ff;
    --mad-border: #e1eaf6;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
    color: var(--mad-text);
    background: #fff;
    line-height: 1.7;
}

.mad-page *,
.mad-page *::before,
.mad-page *::after {
    box-sizing: border-box;
}

.mad-page a {
    text-decoration: none;
}

.mad-page h1,
.mad-page h2,
.mad-page h3,
.mad-page p {
    margin-top: 0;
}

.mad-page h1,
.mad-page h2,
.mad-page h3 {
    color: var(--mad-navy);
    line-height: 1.2;
}

.mad-page h1 {
    margin-bottom: 20px;
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 800;
    letter-spacing: -1.4px;
}

.mad-page h1 span,
.mad-page h2 span {
    display: block;
    color: var(--mad-blue);
}

.mad-page h2 {
    margin-bottom: 20px;
    font-size: clamp(28px, 2.8vw, 39px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.mad-page h3 {
    font-size: 16px;
    font-weight: 750;
}

.mad-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* =====================================================
   HERO
   ===================================================== */

.mad-page .mad-hero {
    padding: 15px 0 40px;
    background:
        radial-gradient(
            circle at 90% 35%,
            rgba(16, 167, 229, .15),
            transparent 35%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--mad-border);
}

.mad-page .mad-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.mad-page .mad-hero-content {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 22px 0 0;
}

.mad-page .mad-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    color: var(--mad-muted);
    font-size: 13px;
}

.mad-page .mad-breadcrumb a {
    color: var(--mad-blue);
}

.mad-page .mad-breadcrumb a:hover {
    color: var(--mad-orange);
}

.mad-page .mad-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--mad-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.mad-page .mad-eyebrow > span {
    flex: 0 0 25px;
    width: 25px;
    height: 3px;
    background: var(--mad-orange);
}

.mad-page .mad-hero-description {
    margin-bottom: 23px;
    color: var(--mad-muted);
    font-size: 14px;
    line-height: 1.9;
}

.mad-page .mad-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.mad-page .mad-btn,
.mad-page .mad-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    transition: transform .25s ease, box-shadow .25s ease;
}

.mad-page .mad-btn {
    color: #fff;
    background: linear-gradient(110deg, var(--mad-blue), var(--mad-cyan));
    box-shadow: 0 8px 20px rgba(18, 104, 216, .17);
}

.mad-page .mad-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, .25);
}

.mad-page .mad-btn-outline {
    color: var(--mad-navy);
    background: #fff;
    border-color: #d6e3f5;
}

.mad-page .mad-btn-outline:hover {
    color: var(--mad-blue);
    border-color: var(--mad-blue);
}

.mad-page .mad-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    color: #536580;
    font-size: 10px;
    font-weight: 650;
}

/* =====================================================
   DASHBOARD & PHONE MOCKUP
   ===================================================== */

.mad-page .mad-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 28px;
}

.mad-page .mad-dashboard {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    background: var(--mad-navy);
    box-shadow: 0 24px 50px rgba(11, 23, 53, .17);
}

.mad-page .mad-dashboard-header,
.mad-page .mad-capability-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 53px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #101f43;
}

.mad-page .mad-window-dots {
    display: flex;
    flex-shrink: 0;
    gap: 7px;
}

.mad-page .mad-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6962;
}

.mad-page .mad-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.mad-page .mad-window-dots i:nth-child(3) {
    background: #38c982;
}

.mad-page .mad-dashboard-header > span,
.mad-page .mad-capability-header > span {
    color: #a9bddb;
    font-size: 9px;
    letter-spacing: 1px;
}

.mad-page .mad-app-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 455px;
    padding: 30px 20px;
    background:
        radial-gradient(circle at 50% 45%, #18396b, transparent 48%),
        #0e1c3c;
}

.mad-page .mad-phone {
    position: relative;
    z-index: 1;
    width: 225px;
    max-width: 65%;
    padding: 7px;
    border: 2px solid #63789d;
    border-radius: 29px;
    background: #060d1e;
    box-shadow: 0 22px 45px rgba(0, 0, 0, .3);
}

.mad-page .mad-phone-notch {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 50%;
    width: 75px;
    height: 14px;
    border-radius: 20px;
    background: #060d1e;
    transform: translateX(-50%);
}

.mad-page .mad-phone-screen {
    overflow: hidden;
    border-radius: 22px;
    background: #f5f8ff;
}

.mad-page .mad-app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 28px 12px 13px;
    background: #fff;
}

.mad-page .mad-app-brand {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mad-page .mad-brand-symbol {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--mad-blue), var(--mad-cyan));
    font-size: 14px;
    font-weight: 850;
}

.mad-page .mad-app-brand strong,
.mad-page .mad-app-brand small {
    display: block;
}

.mad-page .mad-app-brand strong {
    color: var(--mad-navy);
    font-size: 10px;
}

.mad-page .mad-app-brand small {
    color: var(--mad-muted);
    font-size: 7px;
}

.mad-page .mad-notification {
    color: var(--mad-blue);
    font-size: 11px;
}

.mad-page .mad-app-welcome {
    padding: 19px 13px 17px;
    background: linear-gradient(140deg, #eaf3ff, #f6f8ff);
}

.mad-page .mad-app-welcome > small {
    color: var(--mad-blue);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}

.mad-page .mad-app-welcome h3 {
    margin: 8px 0;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.5px;
}

.mad-page .mad-app-welcome p {
    margin-bottom: 0;
    color: var(--mad-muted);
    font-size: 9px;
    line-height: 1.6;
}

.mad-page .mad-app-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 10px;
    padding: 12px;
    border: 1px solid #e3eaf6;
    border-radius: 10px;
    background: #fff;
}

.mad-page .mad-app-summary div span,
.mad-page .mad-app-summary div strong {
    display: block;
}

.mad-page .mad-app-summary div span {
    color: var(--mad-muted);
    font-size: 8px;
}

.mad-page .mad-app-summary div strong {
    color: var(--mad-navy);
    font-size: 11px;
}

.mad-page .mad-summary-icon {
    color: var(--mad-blue);
    font-size: 22px;
}

.mad-page .mad-app-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 0 10px 13px;
}

.mad-page .mad-app-tile {
    padding: 10px;
    border: 1px solid #e3eaf6;
    border-radius: 9px;
    background: #fff;
}

.mad-page .mad-app-tile > span {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #eaf3ff;
    color: var(--mad-blue);
    font-size: 15px;
    font-weight: 800;
}

.mad-page .mad-app-tile .mad-tile-orange {
    color: var(--mad-orange);
    background: #fff2e4;
}

.mad-page .mad-app-tile .mad-tile-green {
    color: var(--mad-green);
    background: #e5f8ed;
}

.mad-page .mad-app-tile .mad-tile-purple {
    color: var(--mad-purple);
    background: #f0eaff;
}

.mad-page .mad-app-tile small {
    color: var(--mad-navy);
    font-size: 9px;
    font-weight: 700;
}

.mad-page .mad-app-bottom {
    display: flex;
    justify-content: space-around;
    padding: 12px 7px;
    border-top: 1px solid #e3eaf6;
    color: #8b9bb5;
    background: #fff;
    font-size: 16px;
}

.mad-page .mad-app-bottom .mad-nav-active {
    color: var(--mad-blue);
}

.mad-page .mad-dashboard-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 17px;
    color: #a9bddb;
    font-size: 9px;
}

.mad-page .mad-dashboard-footer i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #45d9a0;
}

/* FLOATING CARDS */

.mad-page .mad-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 225px;
    padding: 11px 13px;
    border: 1px solid var(--mad-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(21, 53, 101, .12);
}

.mad-page .mad-float-top {
    top: 0;
    right: 0;
}

.mad-page .mad-float-bottom {
    bottom: 0;
    left: 0;
}

.mad-page .mad-float-icon {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--mad-blue);
    background: #eaf4ff;
    font-size: 20px;
}

.mad-page .mad-float-orange {
    color: var(--mad-orange);
    background: #fff2e4;
}

.mad-page .mad-floating-card strong,
.mad-page .mad-floating-card small {
    display: block;
}

.mad-page .mad-floating-card strong {
    color: var(--mad-navy);
    font-size: 10px;
}

.mad-page .mad-floating-card small {
    margin-top: 3px;
    color: var(--mad-muted);
    font-size: 9px;
}

.mad-page .mad-mini-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 180px;
    padding: 10px;
    border: 1px solid #e1eaf6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.mad-page .mad-mini-top {
    top: 105px;
    right: 0;
}

.mad-page .mad-mini-bottom {
    bottom: 105px;
    left: 0;
}

.mad-page .mad-mini-icon {
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--mad-blue);
    background: #eaf3ff;
    font-size: 17px;
}

.mad-page .mad-mini-icon.mad-mini-green {
    color: var(--mad-green);
    background: #e5f8ed;
}

.mad-page .mad-mini-card strong,
.mad-page .mad-mini-card small {
    display: block;
}

.mad-page .mad-mini-card strong {
    color: var(--mad-navy);
    font-size: 9px;
}

.mad-page .mad-mini-card small {
    color: var(--mad-muted);
    font-size: 8px;
}

/* =====================================================
   COMMON SECTION STYLES
   ===================================================== */

.mad-page .mad-section {
    padding: 70px 0;
}

.mad-page .mad-intro-grid,
.mad-page .mad-tech-grid,
.mad-page .mad-tech-stack-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 42px;
}

.mad-page .mad-intro-content > p,
.mad-page .mad-tech-content > p,
.mad-page .mad-stack-description {
    color: var(--mad-muted);
    font-size: 14px;
    line-height: 1.9;
}

.mad-page .mad-text-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--mad-blue);
    font-size: 12px;
    font-weight: 750;
}

.mad-page .mad-text-link:hover {
    color: var(--mad-orange);
}

/* INTRO PANEL */

.mad-page .mad-intro-panel {
    padding: 23px;
    border: 1px solid var(--mad-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.mad-page .mad-panel-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--mad-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.mad-page .mad-panel-badge {
    padding: 4px 8px;
    border-radius: 20px;
    color: var(--mad-green);
    background: #e5f8ed;
    font-size: 9px;
    letter-spacing: 0;
}

.mad-page .mad-approach-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.mad-page .mad-approach-item > span {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--mad-blue), var(--mad-cyan));
    font-size: 11px;
    font-weight: 800;
}

.mad-page .mad-approach-item h3 {
    margin-bottom: 5px;
    font-size: 15px;
}

.mad-page .mad-approach-item p {
    margin-bottom: 0;
    color: var(--mad-muted);
    font-size: 11px;
}

/* SECTION HEADINGS */

.mad-page .mad-services-section,
.mad-page .mad-process-section {
    background: var(--mad-light);
}

.mad-page .mad-section-heading {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.mad-page .mad-center-eyebrow {
    justify-content: center;
}

.mad-page .mad-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--mad-muted);
    font-size: 13px;
}

/* =====================================================
   SERVICE CARDS
   ===================================================== */

.mad-page .mad-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.mad-page .mad-feature-card {
    min-width: 0;
    min-height: 220px;
    padding: 23px;
    border: 1px solid var(--mad-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 49, 91, .035);
    transition: transform .25s ease, box-shadow .25s ease;
}

.mad-page .mad-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(20, 49, 91, .09);
}

.mad-page .mad-feature-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 17px;
    border-radius: 12px;
    color: var(--mad-blue);
    background: #eaf3ff;
    font-size: 21px;
    font-weight: 800;
}

.mad-page .mad-feature-icon.mad-orange {
    color: #d87913;
    background: #fff2e4;
}

.mad-page .mad-feature-icon.mad-purple {
    color: var(--mad-purple);
    background: #f0eaff;
}

.mad-page .mad-feature-icon.mad-green {
    color: var(--mad-green);
    background: #e5f8ed;
}

.mad-page .mad-feature-icon.mad-cyan {
    color: #068dbd;
    background: #e4f8ff;
}

.mad-page .mad-feature-icon.mad-red {
    color: var(--mad-red);
    background: #fff0f2;
}

.mad-page .mad-feature-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.mad-page .mad-feature-card p {
    margin-bottom: 0;
    color: var(--mad-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* =====================================================
   FEATURES & CAPABILITIES
   ===================================================== */

.mad-page .mad-capability-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 24px;
}

.mad-page .mad-capability-list > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--mad-text);
    font-size: 11px;
    line-height: 1.7;
}

.mad-page .mad-capability-list > div > span {
    display: grid;
    flex: 0 0 20px;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--mad-green);
    background: #e5f8ed;
    font-size: 11px;
    font-weight: 800;
}

.mad-page .mad-capability-dashboard {
    overflow: hidden;
    border: 1px solid #26385c;
    border-radius: 15px;
    color: #dce8ff;
    background: var(--mad-navy);
    box-shadow: 0 20px 45px rgba(11, 23, 53, .14);
}

.mad-page .mad-capability-body {
    padding: 22px;
}

.mad-page .mad-capability-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.mad-page .mad-capability-title small {
    color: #92a8cd;
    font-size: 9px;
    letter-spacing: 1px;
}

.mad-page .mad-capability-title h3 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 17px;
}

.mad-page .mad-status-pill {
    padding: 6px 9px;
    border: 1px solid rgba(69, 217, 160, .2);
    border-radius: 20px;
    color: #61e3ad;
    background: rgba(69, 217, 160, .08);
    font-size: 9px;
    white-space: nowrap;
}

.mad-page .mad-capability-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mad-page .mad-capability-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid #30415f;
    border-radius: 10px;
    background: #152342;
}

.mad-page .mad-capability-card > span,
.mad-page .mad-capability-card strong,
.mad-page .mad-capability-card small {
    display: block;
}

.mad-page .mad-capability-card > span {
    margin-bottom: 12px;
    color: #6bbaff;
    font-size: 10px;
    font-weight: 800;
}

.mad-page .mad-capability-card strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 12px;
}

.mad-page .mad-capability-card small {
    color: #a9bddb;
    font-size: 9px;
}

.mad-page .mad-progress {
    height: 4px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 10px;
    background: #293b5e;
}

.mad-page .mad-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mad-blue), var(--mad-cyan));
}

.mad-page .mad-capability-note {
    margin-top: 16px;
    color: #9bafcf;
    font-size: 9px;
}

/* =====================================================
   PROCESS
   ===================================================== */

.mad-page .mad-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.mad-page .mad-process-card {
    padding: 22px 19px;
    border: 1px solid var(--mad-border);
    border-radius: 13px;
    background: #fff;
    transition: transform .25s ease;
}

.mad-page .mad-process-card:hover {
    transform: translateY(-4px);
}

.mad-page .mad-process-card > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--mad-blue), var(--mad-cyan));
    font-size: 12px;
    font-weight: 800;
}

.mad-page .mad-process-card h3 {
    margin-bottom: 9px;
    font-size: 15px;
}

.mad-page .mad-process-card p {
    margin-bottom: 0;
    color: var(--mad-muted);
    font-size: 11px;
    line-height: 1.85;
}

/* =====================================================
   TECHNOLOGY STACK
   ===================================================== */

.mad-page .mad-tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mad-page .mad-tech-stack > span {
    padding: 10px 14px;
    border: 1px solid #dbe7f7;
    border-radius: 8px;
    color: var(--mad-navy);
    background: #f7faff;
    font-size: 11px;
    font-weight: 700;
    transition: color .2s ease, background .2s ease;
}

.mad-page .mad-tech-stack > span:hover {
    color: #fff;
    background: var(--mad-blue);
}

/* =====================================================
   CTA
   ===================================================== */

.mad-page .mad-final-cta {
    padding: 55px 0;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(16, 167, 229, .22),
            transparent 32%
        ),
        linear-gradient(115deg, #0b1735, #123c79);
}

.mad-page .mad-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.mad-page .mad-eyebrow-light {
    color: #8edbff;
}

.mad-page .mad-final-cta h2 {
    margin-bottom: 14px;
    color: #fff;
}

.mad-page .mad-final-cta h2 span {
    color: #65d0ff;
}

.mad-page .mad-final-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #c6d7ef;
    font-size: 13px;
}

.mad-page .mad-btn-white {
    flex-shrink: 0;
    color: var(--mad-navy);
    background: #fff;
    box-shadow: none;
}

.mad-page .mad-btn-white:hover {
    color: var(--mad-blue);
    background: #f0f7ff;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1024px) {
    .mad-container {
        width: calc(100% - 40px);
    }

    .mad-page .mad-hero-grid,
    .mad-page .mad-intro-grid,
    .mad-page .mad-tech-grid,
    .mad-page .mad-tech-stack-grid {
        gap: 22px;
    }

    .mad-page h1 {
        font-size: clamp(31px, 3.8vw, 41px);
    }

    .mad-page .mad-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mad-page .mad-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mad-page .mad-app-stage {
        min-height: 410px;
        padding: 28px 12px;
    }

    .mad-page .mad-phone {
        width: 210px;
    }

    .mad-page .mad-mini-card {
        max-width: 155px;
        padding: 8px;
    }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {
    .mad-container {
        width: calc(100% - 36px);
    }

    .mad-page .mad-hero {
        padding: 20px 0 35px;
    }

    .mad-page .mad-hero-grid,
    .mad-page .mad-intro-grid,
    .mad-page .mad-tech-grid,
    .mad-page .mad-tech-stack-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .mad-page .mad-hero-content {
        padding-top: 0;
    }

    .mad-page h1 {
        font-size: clamp(32px, 8vw, 43px);
        letter-spacing: -1px;
    }

    .mad-page h2 {
        font-size: clamp(28px, 7vw, 35px);
    }

    .mad-page .mad-breadcrumb {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .mad-page .mad-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .mad-page .mad-btn,
    .mad-page .mad-btn-outline {
        width: 100%;
    }

    .mad-page .mad-hero-visual {
        padding: 20px 0 27px;
    }

    .mad-page .mad-app-stage {
        min-height: 405px;
        padding: 30px 10px;
    }

    .mad-page .mad-phone {
        width: 220px;
        max-width: 65%;
    }

    .mad-page .mad-floating-card {
        max-width: 185px;
        padding: 9px 10px;
    }

    .mad-page .mad-float-top {
        right: 0;
    }

    .mad-page .mad-float-bottom {
        left: 0;
    }

    .mad-page .mad-mini-card {
        max-width: 145px;
    }

    .mad-page .mad-mini-top {
        top: 100px;
    }

    .mad-page .mad-mini-bottom {
        bottom: 100px;
    }

    .mad-page .mad-section {
        padding: 48px 0;
    }

    .mad-page .mad-section-heading {
        margin-bottom: 28px;
    }

    .mad-page .mad-feature-grid,
    .mad-page .mad-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mad-page .mad-feature-card {
        min-height: auto;
    }

    .mad-page .mad-capability-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mad-page .mad-capability-body {
        padding: 16px;
    }

    .mad-page .mad-capability-card {
        padding: 11px;
    }

    .mad-page .mad-final-cta {
        padding: 42px 0;
    }

    .mad-page .mad-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 23px;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .mad-page .mad-app-stage {
        min-height: 375px;
    }

    .mad-page .mad-phone {
        max-width: 68%;
    }

    .mad-page .mad-mini-card {
        max-width: 125px;
        gap: 6px;
        padding: 7px;
    }

    .mad-page .mad-mini-icon {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
    }

    .mad-page .mad-mini-card strong {
        font-size: 8px;
    }

    .mad-page .mad-mini-card small {
        font-size: 7px;
    }

    .mad-page .mad-floating-card {
        max-width: 165px;
    }

    .mad-page .mad-floating-card strong {
        font-size: 9px;
    }

    .mad-page .mad-floating-card small {
        font-size: 8px;
    }

    .mad-page .mad-capability-title {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ACCESSIBILITY */

.mad-page a:focus-visible {
    outline: 3px solid var(--mad-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .mad-page *,
    .mad-page *::before,
    .mad-page *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* =====================================================
   AI & AUTOMATION PAGE
   Prefix: aia-
   Theme: Navy, Blue, Cyan and Orange
   ===================================================== */

.aia-page {
    --aia-navy: #0b1735;
    --aia-blue: #1268d8;
    --aia-cyan: #10a7e5;
    --aia-orange: #f28b1b;
    --aia-green: #13834d;
    --aia-purple: #7853d7;
    --aia-red: #db5265;
    --aia-text: #172746;
    --aia-muted: #687993;
    --aia-light: #f3f7ff;
    --aia-border: #e1eaf6;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
    color: var(--aia-text);
    background: #fff;
    line-height: 1.7;
}

.aia-page *,
.aia-page *::before,
.aia-page *::after {
    box-sizing: border-box;
}

.aia-page a {
    text-decoration: none;
}

.aia-page h1,
.aia-page h2,
.aia-page h3,
.aia-page p {
    margin-top: 0;
}

.aia-page h1,
.aia-page h2,
.aia-page h3 {
    color: var(--aia-navy);
    line-height: 1.2;
}

.aia-page h1 {
    margin-bottom: 20px;
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 800;
    letter-spacing: -1.4px;
}

.aia-page h1 span,
.aia-page h2 span {
    display: block;
    color: var(--aia-blue);
}

.aia-page h2 {
    margin-bottom: 20px;
    font-size: clamp(28px, 2.8vw, 39px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.aia-page h3 {
    font-size: 16px;
    font-weight: 750;
}

.aia-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* =====================================================
   HERO SECTION
   Equal-width left and right columns
   ===================================================== */

.aia-page .aia-hero {
    padding: 15px 0 40px;
    background:
        radial-gradient(
            circle at 90% 35%,
            rgba(16, 167, 229, .16),
            transparent 35%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--aia-border);
}

.aia-page .aia-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.aia-page .aia-hero-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 0;
}

.aia-page .aia-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    color: var(--aia-muted);
    font-size: 13px;
}

.aia-page .aia-breadcrumb a {
    color: var(--aia-blue);
}

.aia-page .aia-breadcrumb a:hover {
    color: var(--aia-orange);
}

.aia-page .aia-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--aia-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.aia-page .aia-eyebrow > span {
    flex: 0 0 25px;
    width: 25px;
    height: 3px;
    background: var(--aia-orange);
}

.aia-page .aia-description,
.aia-page .aia-body-text {
    color: var(--aia-muted);
    font-size: 14px;
    line-height: 1.9;
}

.aia-page .aia-description {
    margin-bottom: 23px;
}

.aia-page .aia-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.aia-page .aia-btn,
.aia-page .aia-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.aia-page .aia-btn {
    color: #fff;
    background: linear-gradient(
        110deg,
        var(--aia-blue),
        var(--aia-cyan)
    );
    box-shadow: 0 8px 20px rgba(18, 104, 216, .17);
}

.aia-page .aia-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, .25);
}

.aia-page .aia-btn-outline {
    color: var(--aia-navy);
    background: #fff;
    border-color: #d6e3f5;
}

.aia-page .aia-btn-outline:hover {
    color: var(--aia-blue);
    border-color: var(--aia-blue);
}

.aia-page .aia-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    color: #536580;
    font-size: 10px;
    font-weight: 650;
}

.aia-page .aia-trust-points i {
    margin-right: 4px;
    color: var(--aia-green);
    font-style: normal;
}

/* =====================================================
   AI DASHBOARD
   ===================================================== */

.aia-page .aia-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 28px;
}

.aia-page .aia-dashboard,
.aia-page .aia-automation-panel {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    color: #dce8ff;
    background: var(--aia-navy);
    box-shadow: 0 24px 50px rgba(11, 23, 53, .17);
}

.aia-page .aia-dashboard-header,
.aia-page .aia-automation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 53px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #101f43;
}

.aia-page .aia-window-dots {
    display: flex;
    flex-shrink: 0;
    gap: 7px;
}

.aia-page .aia-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6962;
}

.aia-page .aia-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.aia-page .aia-window-dots i:nth-child(3) {
    background: #38c982;
}

.aia-page .aia-dashboard-header > span,
.aia-page .aia-automation-header > span {
    color: #a9bddb;
    font-size: 9px;
    letter-spacing: 1px;
}

.aia-page .aia-dashboard-body {
    padding: 22px;
}

.aia-page .aia-dashboard-title,
.aia-page .aia-automation-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.aia-page .aia-dashboard-title small,
.aia-page .aia-automation-title small {
    color: #92a8cd;
    font-size: 9px;
    letter-spacing: 1px;
}

.aia-page .aia-dashboard-title h2,
.aia-page .aia-automation-title h3 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 19px;
    letter-spacing: -.3px;
}

.aia-page .aia-status {
    padding: 6px 9px;
    border: 1px solid rgba(69, 217, 160, .2);
    border-radius: 20px;
    color: #61e3ad;
    background: rgba(69, 217, 160, .08);
    font-size: 9px;
    white-space: nowrap;
}

.aia-page .aia-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #45d9a0;
}

.aia-page .aia-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.aia-page .aia-metric-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid #30415f;
    border-radius: 11px;
    background: #152342;
}

.aia-page .aia-metric-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    margin-bottom: 12px;
    border-radius: 10px;
    color: #6bbaff;
    background: #19365f;
    font-size: 19px;
    font-weight: 800;
}

.aia-page .aia-metric-icon.aia-orange {
    color: #ffb85b;
    background: #392d29;
}

.aia-page .aia-metric-icon.aia-green {
    color: #61e3ad;
    background: #163a39;
}

.aia-page .aia-metric-icon.aia-purple {
    color: #c6a6ff;
    background: #302951;
}

.aia-page .aia-metric-card > small,
.aia-page .aia-metric-card > strong,
.aia-page .aia-metric-card > span:last-child {
    display: block;
}

.aia-page .aia-metric-card > small {
    margin-bottom: 5px;
    color: #a9bddb;
    font-size: 10px;
}

.aia-page .aia-metric-card > strong {
    margin-bottom: 6px;
    color: #fff;
    font-size: 13px;
}

.aia-page .aia-metric-note {
    color: #8fa6ca;
    font-size: 9px;
}

/* WORKFLOW */

.aia-page .aia-workflow {
    margin-top: 17px;
    padding: 17px;
    border: 1px solid #30415f;
    border-radius: 11px;
    background: #101f3e;
}

.aia-page .aia-workflow-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.aia-page .aia-workflow-heading small {
    color: #92a8cd;
    font-size: 9px;
    letter-spacing: .8px;
}

.aia-page .aia-workflow-heading h3 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 14px;
}

.aia-page .aia-workflow-heading > span {
    padding: 5px 7px;
    border-radius: 6px;
    color: #65d0ff;
    background: #17365e;
    font-size: 8px;
    font-weight: 750;
}

.aia-page .aia-flow-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
}

.aia-page .aia-flow-step {
    min-width: 0;
    padding: 10px 6px;
    border: 1px solid #30415f;
    border-radius: 8px;
    background: #152342;
}

.aia-page .aia-flow-step > span,
.aia-page .aia-flow-step > strong,
.aia-page .aia-flow-step > small {
    display: block;
}

.aia-page .aia-flow-step > span {
    margin-bottom: 7px;
    color: #65d0ff;
    font-size: 9px;
    font-weight: 800;
}

.aia-page .aia-flow-step > strong {
    margin-bottom: 3px;
    color: #fff;
    font-size: 10px;
}

.aia-page .aia-flow-step > small {
    color: #9eb2d2;
    font-size: 8px;
}

.aia-page .aia-flow-step.aia-flow-active {
    border-color: #247adf;
    background: #17365f;
}

.aia-page .aia-flow-arrow {
    color: #65d0ff;
    font-size: 15px;
    text-align: center;
}

.aia-page .aia-dashboard-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 17px;
    color: #a9bddb;
    font-size: 9px;
}

.aia-page .aia-dashboard-footer i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #45d9a0;
}

/* FLOATING CARDS */

.aia-page .aia-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 225px;
    padding: 11px 13px;
    border: 1px solid var(--aia-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(21, 53, 101, .12);
}

.aia-page .aia-float-top {
    top: 0;
    right: 0;
}

.aia-page .aia-float-bottom {
    bottom: 0;
    left: 0;
}

.aia-page .aia-float-icon {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--aia-blue);
    background: #eaf4ff;
    font-size: 20px;
}

.aia-page .aia-float-orange {
    color: var(--aia-orange);
    background: #fff2e4;
}

.aia-page .aia-floating-card strong,
.aia-page .aia-floating-card small {
    display: block;
}

.aia-page .aia-floating-card strong {
    color: var(--aia-navy);
    font-size: 10px;
}

.aia-page .aia-floating-card small {
    margin-top: 3px;
    color: var(--aia-muted);
    font-size: 9px;
}

/* =====================================================
   COMMON SECTIONS
   ===================================================== */

.aia-page .aia-section {
    padding: 70px 0;
}

.aia-page .aia-intro-grid,
.aia-page .aia-usecase-grid,
.aia-page .aia-tech-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 42px;
}

.aia-page .aia-text-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--aia-blue);
    font-size: 12px;
    font-weight: 750;
}

.aia-page .aia-text-link:hover {
    color: var(--aia-orange);
}

/* BENEFITS PANEL */

.aia-page .aia-benefits-panel {
    padding: 23px;
    border: 1px solid var(--aia-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.aia-page .aia-panel-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--aia-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.aia-page .aia-panel-badge {
    padding: 4px 8px;
    border-radius: 20px;
    color: var(--aia-green);
    background: #e5f8ed;
    font-size: 9px;
    letter-spacing: 0;
}

.aia-page .aia-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.aia-page .aia-benefit-item > span {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--aia-blue),
        var(--aia-cyan)
    );
    font-size: 11px;
    font-weight: 800;
}

.aia-page .aia-benefit-item h3 {
    margin-bottom: 5px;
    font-size: 15px;
}

.aia-page .aia-benefit-item p {
    margin-bottom: 0;
    color: var(--aia-muted);
    font-size: 11px;
}

/* SECTION HEADINGS */

.aia-page .aia-services-section,
.aia-page .aia-process-section {
    background: var(--aia-light);
}

.aia-page .aia-section-heading {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.aia-page .aia-center-eyebrow {
    justify-content: center;
}

.aia-page .aia-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--aia-muted);
    font-size: 13px;
}

/* =====================================================
   SERVICE CARDS
   ===================================================== */

.aia-page .aia-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.aia-page .aia-service-card {
    min-width: 0;
    min-height: 220px;
    padding: 23px;
    border: 1px solid var(--aia-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 49, 91, .035);
    transition: transform .25s ease, box-shadow .25s ease;
}

.aia-page .aia-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(20, 49, 91, .09);
}

.aia-page .aia-service-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 17px;
    border-radius: 12px;
    color: var(--aia-blue);
    background: #eaf3ff;
    font-size: 21px;
    font-weight: 800;
}

.aia-page .aia-service-icon.aia-icon-orange {
    color: #d87913;
    background: #fff2e4;
}

.aia-page .aia-service-icon.aia-icon-purple {
    color: var(--aia-purple);
    background: #f0eaff;
}

.aia-page .aia-service-icon.aia-icon-green {
    color: var(--aia-green);
    background: #e5f8ed;
}

.aia-page .aia-service-icon.aia-icon-cyan {
    color: #068dbd;
    background: #e4f8ff;
}

.aia-page .aia-service-icon.aia-icon-red {
    color: var(--aia-red);
    background: #fff0f2;
}

.aia-page .aia-service-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.aia-page .aia-service-card p {
    margin-bottom: 0;
    color: var(--aia-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* =====================================================
   AUTOMATION USE CASES
   ===================================================== */

.aia-page .aia-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 24px;
}

.aia-page .aia-check-list > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--aia-text);
    font-size: 11px;
    line-height: 1.7;
}

.aia-page .aia-check-list > div > span {
    display: grid;
    flex: 0 0 20px;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--aia-green);
    background: #e5f8ed;
    font-size: 11px;
    font-weight: 800;
}

.aia-page .aia-automation-body {
    padding: 22px;
}

.aia-page .aia-automation-title h3 {
    font-size: 17px;
}

.aia-page .aia-live-status {
    padding: 6px 8px;
    border: 1px solid #354d70;
    border-radius: 20px;
    color: #8edbff;
    background: #152c4c;
    font-size: 9px;
    white-space: nowrap;
}

.aia-page .aia-automation-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #30415f;
    border-radius: 10px;
    background: #152342;
}

.aia-page .aia-row-icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #6bbaff;
    background: #19365f;
    font-size: 18px;
}

.aia-page .aia-row-icon.aia-row-orange {
    color: #ffb85b;
    background: #392d29;
}

.aia-page .aia-row-icon.aia-row-green {
    color: #61e3ad;
    background: #163a39;
}

.aia-page .aia-row-icon.aia-row-purple {
    color: #c6a6ff;
    background: #302951;
}

.aia-page .aia-automation-row > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.aia-page .aia-automation-row strong,
.aia-page .aia-automation-row small {
    display: block;
}

.aia-page .aia-automation-row strong {
    color: #fff;
    font-size: 11px;
}

.aia-page .aia-automation-row small {
    margin-top: 4px;
    color: #9eb2d2;
    font-size: 9px;
}

.aia-page .aia-row-number {
    color: #8fa6ca;
    font-size: 10px;
    font-weight: 750;
}

.aia-page .aia-automation-connector {
    width: 2px;
    height: 15px;
    margin-left: 31px;
    background: #3c5d89;
}

.aia-page .aia-demo-note {
    margin: 17px 0 0;
    color: #9bafcf;
    font-size: 9px;
}

/* =====================================================
   IMPLEMENTATION PROCESS
   ===================================================== */

.aia-page .aia-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.aia-page .aia-process-card {
    padding: 22px 19px;
    border: 1px solid var(--aia-border);
    border-radius: 13px;
    background: #fff;
    transition: transform .25s ease;
}

.aia-page .aia-process-card:hover {
    transform: translateY(-4px);
}

.aia-page .aia-process-card > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--aia-blue),
        var(--aia-cyan)
    );
    font-size: 12px;
    font-weight: 800;
}

.aia-page .aia-process-card h3 {
    margin-bottom: 9px;
    font-size: 15px;
}

.aia-page .aia-process-card p {
    margin-bottom: 0;
    color: var(--aia-muted);
    font-size: 11px;
    line-height: 1.85;
}

/* =====================================================
   TECHNOLOGY STACK
   ===================================================== */

.aia-page .aia-tech-panel {
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--aia-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.aia-page .aia-tech-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--aia-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.aia-page .aia-tech-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.aia-page .aia-tech-item > span {
    display: grid;
    flex: 0 0 37px;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--aia-blue),
        var(--aia-cyan)
    );
    font-size: 10px;
    font-weight: 800;
}

.aia-page .aia-tech-item > div {
    flex: 1;
    min-width: 0;
}

.aia-page .aia-tech-item strong,
.aia-page .aia-tech-item small {
    display: block;
}

.aia-page .aia-tech-item strong {
    color: var(--aia-navy);
    font-size: 12px;
}

.aia-page .aia-tech-item small {
    margin-top: 4px;
    color: var(--aia-muted);
    font-size: 10px;
}

.aia-page .aia-tech-item > b {
    color: var(--aia-blue);
    font-size: 18px;
}

.aia-page .aia-responsible-note {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #d6e7fa;
    border-radius: 10px;
    background: #fff;
}

.aia-page .aia-responsible-note strong {
    color: var(--aia-navy);
    font-size: 12px;
}

.aia-page .aia-responsible-note p {
    margin: 6px 0 0;
    color: var(--aia-muted);
    font-size: 10px;
    line-height: 1.8;
}

/* =====================================================
   FINAL CTA
   ===================================================== */

.aia-page .aia-final-cta {
    padding: 55px 0;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(16, 167, 229, .22),
            transparent 32%
        ),
        linear-gradient(115deg, #0b1735, #123c79);
}

.aia-page .aia-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.aia-page .aia-eyebrow-light {
    color: #8edbff;
}

.aia-page .aia-final-cta h2 {
    margin-bottom: 14px;
    color: #fff;
}

.aia-page .aia-final-cta h2 span {
    color: #65d0ff;
}

.aia-page .aia-final-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #c6d7ef;
    font-size: 13px;
}

.aia-page .aia-btn-white {
    flex-shrink: 0;
    color: var(--aia-navy);
    background: #fff;
    box-shadow: none;
}

.aia-page .aia-btn-white:hover {
    color: var(--aia-blue);
    background: #f0f7ff;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1024px) {
    .aia-container {
        width: calc(100% - 40px);
    }

    .aia-page .aia-hero-grid,
    .aia-page .aia-intro-grid,
    .aia-page .aia-usecase-grid,
    .aia-page .aia-tech-grid {
        gap: 22px;
    }

    .aia-page h1 {
        font-size: clamp(31px, 3.8vw, 41px);
    }

    .aia-page .aia-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aia-page .aia-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aia-page .aia-dashboard-body,
    .aia-page .aia-automation-body {
        padding: 16px;
    }

    .aia-page .aia-metric-card {
        padding: 11px;
    }

    .aia-page .aia-workflow {
        padding: 12px;
    }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {
    .aia-container {
        width: calc(100% - 36px);
    }

    .aia-page .aia-hero {
        padding: 20px 0 35px;
    }

    .aia-page .aia-hero-grid,
    .aia-page .aia-intro-grid,
    .aia-page .aia-usecase-grid,
    .aia-page .aia-tech-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .aia-page .aia-hero-content {
        padding-top: 0;
    }

    .aia-page h1 {
        font-size: clamp(32px, 8vw, 43px);
        letter-spacing: -1px;
    }

    .aia-page h2 {
        font-size: clamp(28px, 7vw, 35px);
    }

    .aia-page .aia-breadcrumb {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .aia-page .aia-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .aia-page .aia-btn,
    .aia-page .aia-btn-outline {
        width: 100%;
    }

    .aia-page .aia-hero-visual {
        padding: 20px 0 27px;
    }

    .aia-page .aia-dashboard-body {
        padding: 15px;
    }

    .aia-page .aia-dashboard-title h2 {
        font-size: 16px;
    }

    .aia-page .aia-floating-card {
        max-width: 185px;
        padding: 9px 10px;
    }

    .aia-page .aia-float-top {
        right: 0;
    }

    .aia-page .aia-float-bottom {
        left: 0;
    }

    .aia-page .aia-section {
        padding: 48px 0;
    }

    .aia-page .aia-section-heading {
        margin-bottom: 28px;
    }

    .aia-page .aia-service-grid,
    .aia-page .aia-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aia-page .aia-service-card {
        min-height: auto;
    }

    .aia-page .aia-check-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .aia-page .aia-automation-body {
        padding: 13px;
    }

    .aia-page .aia-automation-row {
        gap: 9px;
        padding: 10px;
    }

    .aia-page .aia-automation-row strong {
        font-size: 10px;
    }

    .aia-page .aia-automation-row small {
        font-size: 8px;
    }

    .aia-page .aia-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 23px;
    }

    .aia-page .aia-final-cta {
        padding: 42px 0;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .aia-page .aia-flow-steps {
        grid-template-columns:
            minmax(0, 1fr) 12px
            minmax(0, 1fr) 12px
            minmax(0, 1fr);
        gap: 3px;
    }

    .aia-page .aia-flow-step {
        padding: 8px 4px;
    }

    .aia-page .aia-flow-step > strong {
        font-size: 9px;
    }

    .aia-page .aia-flow-step > small {
        font-size: 7px;
    }

    .aia-page .aia-floating-card {
        max-width: 165px;
    }

    .aia-page .aia-floating-card strong {
        font-size: 9px;
    }

    .aia-page .aia-floating-card small {
        font-size: 8px;
    }

    .aia-page .aia-dashboard-title,
    .aia-page .aia-automation-title {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ACCESSIBILITY */

.aia-page a:focus-visible {
    outline: 3px solid var(--aia-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .aia-page *,
    .aia-page *::before,
    .aia-page *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* =====================================================
   DATA ANALYTICS PAGE
   Prefix: da-
   Theme: Navy Blue, Bright Blue, Cyan and Orange
   ===================================================== */

.da-page {
    --da-navy: #0b1735;
    --da-blue: #1268d8;
    --da-cyan: #10a7e5;
    --da-orange: #f28b1b;
    --da-green: #13834d;
    --da-purple: #7853d7;
    --da-red: #db5265;
    --da-text: #172746;
    --da-muted: #687993;
    --da-light: #f3f7ff;
    --da-border: #e1eaf6;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
    background: #fff;
    color: var(--da-text);
    line-height: 1.7;
}

.da-page *,
.da-page *::before,
.da-page *::after {
    box-sizing: border-box;
}

.da-page a {
    text-decoration: none;
}

.da-page h1,
.da-page h2,
.da-page h3,
.da-page p {
    margin-top: 0;
}

.da-page h1,
.da-page h2,
.da-page h3 {
    color: var(--da-navy);
    line-height: 1.2;
}

.da-page h1 {
    margin-bottom: 20px;
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 800;
    letter-spacing: -1.4px;
}

.da-page h1 span,
.da-page h2 span {
    display: block;
    color: var(--da-blue);
}

.da-page h2 {
    margin-bottom: 20px;
    font-size: clamp(28px, 2.8vw, 39px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.da-page h3 {
    font-size: 16px;
    font-weight: 750;
}

.da-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* =====================================================
   HERO: EQUAL LEFT AND RIGHT COLUMNS
   ===================================================== */

.da-page .da-hero {
    padding: 15px 0 40px;
    background:
        radial-gradient(
            circle at 90% 35%,
            rgba(16, 167, 229, .16),
            transparent 35%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--da-border);
}

.da-page .da-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.da-page .da-hero-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 0;
}

.da-page .da-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    color: var(--da-muted);
    font-size: 13px;
}

.da-page .da-breadcrumb a {
    color: var(--da-blue);
}

.da-page .da-breadcrumb a:hover {
    color: var(--da-orange);
}

.da-page .da-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--da-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.da-page .da-eyebrow > span {
    flex: 0 0 25px;
    width: 25px;
    height: 3px;
    background: var(--da-orange);
}

.da-page .da-description,
.da-page .da-body-text {
    color: var(--da-muted);
    font-size: 14px;
    line-height: 1.9;
}

.da-page .da-description {
    margin-bottom: 23px;
}

.da-page .da-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.da-page .da-btn,
.da-page .da-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    transition: transform .25s ease, box-shadow .25s ease;
}

.da-page .da-btn {
    color: #fff;
    background: linear-gradient(
        110deg,
        var(--da-blue),
        var(--da-cyan)
    );
    box-shadow: 0 8px 20px rgba(18, 104, 216, .17);
}

.da-page .da-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, .25);
}

.da-page .da-btn-outline {
    color: var(--da-navy);
    background: #fff;
    border-color: #d6e3f5;
}

.da-page .da-btn-outline:hover {
    color: var(--da-blue);
    border-color: var(--da-blue);
}

.da-page .da-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    color: #536580;
    font-size: 10px;
    font-weight: 650;
}

.da-page .da-trust-points i {
    margin-right: 4px;
    color: var(--da-green);
    font-style: normal;
}

/* =====================================================
   DASHBOARD
   ===================================================== */

.da-page .da-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 28px;
}

.da-page .da-dashboard,
.da-page .da-workflow-panel {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    color: #dce8ff;
    background: var(--da-navy);
    box-shadow: 0 24px 50px rgba(11, 23, 53, .17);
}

.da-page .da-dashboard-header,
.da-page .da-workflow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 53px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #101f43;
}

.da-page .da-window-dots {
    display: flex;
    flex-shrink: 0;
    gap: 7px;
}

.da-page .da-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6962;
}

.da-page .da-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.da-page .da-window-dots i:nth-child(3) {
    background: #38c982;
}

.da-page .da-dashboard-header > span,
.da-page .da-workflow-header > span {
    color: #a9bddb;
    font-size: 9px;
    letter-spacing: 1px;
}

.da-page .da-dashboard-body {
    padding: 22px;
}

.da-page .da-dashboard-title,
.da-page .da-workflow-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.da-page .da-dashboard-title small,
.da-page .da-workflow-title small {
    color: #92a8cd;
    font-size: 9px;
    letter-spacing: 1px;
}

.da-page .da-dashboard-title h2,
.da-page .da-workflow-title h3 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 19px;
    letter-spacing: -.3px;
}

.da-page .da-status {
    padding: 6px 9px;
    border: 1px solid rgba(69, 217, 160, .2);
    border-radius: 20px;
    color: #61e3ad;
    background: rgba(69, 217, 160, .08);
    font-size: 9px;
    white-space: nowrap;
}

.da-page .da-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #45d9a0;
}

/* METRIC CARDS */

.da-page .da-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.da-page .da-metric-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid #30415f;
    border-radius: 11px;
    background: #152342;
}

.da-page .da-metric-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    margin-bottom: 12px;
    border-radius: 10px;
    color: #6bbaff;
    background: #19365f;
    font-size: 19px;
    font-weight: 800;
}

.da-page .da-metric-icon.da-orange {
    color: #ffb85b;
    background: #392d29;
}

.da-page .da-metric-icon.da-green {
    color: #61e3ad;
    background: #163a39;
}

.da-page .da-metric-icon.da-purple {
    color: #c6a6ff;
    background: #302951;
}

.da-page .da-metric-card > small,
.da-page .da-metric-card > strong,
.da-page .da-metric-note {
    display: block;
}

.da-page .da-metric-card > small {
    margin-bottom: 5px;
    color: #a9bddb;
    font-size: 10px;
}

.da-page .da-metric-card > strong {
    margin-bottom: 6px;
    color: #fff;
    font-size: 13px;
}

.da-page .da-metric-note {
    color: #8fa6ca;
    font-size: 9px;
}

/* CHART */

.da-page .da-chart-panel {
    margin-top: 17px;
    padding: 17px;
    border: 1px solid #30415f;
    border-radius: 11px;
    background: #101f3e;
}

.da-page .da-chart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.da-page .da-chart-heading small {
    color: #92a8cd;
    font-size: 9px;
    letter-spacing: .8px;
}

.da-page .da-chart-heading h3 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 14px;
}

.da-page .da-chart-label {
    padding: 5px 7px;
    border-radius: 6px;
    color: #65d0ff;
    background: #17365e;
    font-size: 8px;
    font-weight: 750;
}

.da-page .da-chart {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
}

.da-page .da-chart-y-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 0;
    color: #8fa6ca;
    font-size: 8px;
}

.da-page .da-chart-plot {
    position: relative;
    height: 135px;
    min-width: 0;
}

.da-page .da-chart-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.da-page .da-chart-grid i {
    width: 100%;
    height: 1px;
    background: rgba(161, 190, 230, .13);
}

.da-page .da-chart-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.da-page .da-chart-x-labels {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0 0 35px;
    color: #8fa6ca;
    font-size: 8px;
}

.da-page .da-dashboard-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 17px;
    color: #a9bddb;
    font-size: 9px;
}

.da-page .da-dashboard-footer i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #45d9a0;
}

/* FLOATING CARDS */

.da-page .da-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 225px;
    padding: 11px 13px;
    border: 1px solid var(--da-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(21, 53, 101, .12);
}

.da-page .da-float-top {
    top: 0;
    right: 0;
}

.da-page .da-float-bottom {
    bottom: 0;
    left: 0;
}

.da-page .da-float-icon {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--da-blue);
    background: #eaf4ff;
    font-size: 20px;
}

.da-page .da-float-orange {
    color: var(--da-orange);
    background: #fff2e4;
}

.da-page .da-floating-card strong,
.da-page .da-floating-card small {
    display: block;
}

.da-page .da-floating-card strong {
    color: var(--da-navy);
    font-size: 10px;
}

.da-page .da-floating-card small {
    margin-top: 3px;
    color: var(--da-muted);
    font-size: 9px;
}

/* =====================================================
   COMMON CONTENT SECTIONS
   ===================================================== */

.da-page .da-section {
    padding: 70px 0;
}

.da-page .da-intro-grid,
.da-page .da-usecase-grid,
.da-page .da-tech-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 42px;
}

.da-page .da-text-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--da-blue);
    font-size: 12px;
    font-weight: 750;
}

.da-page .da-text-link:hover {
    color: var(--da-orange);
}

/* BENEFITS */

.da-page .da-benefits-panel {
    padding: 23px;
    border: 1px solid var(--da-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.da-page .da-panel-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--da-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.da-page .da-panel-badge {
    padding: 4px 8px;
    border-radius: 20px;
    color: var(--da-green);
    background: #e5f8ed;
    font-size: 9px;
    letter-spacing: 0;
}

.da-page .da-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.da-page .da-benefit-item > span {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--da-blue), var(--da-cyan));
    font-size: 11px;
    font-weight: 800;
}

.da-page .da-benefit-item h3 {
    margin-bottom: 5px;
    font-size: 15px;
}

.da-page .da-benefit-item p {
    margin-bottom: 0;
    color: var(--da-muted);
    font-size: 11px;
}

/* SECTION HEADINGS */

.da-page .da-services-section,
.da-page .da-industries-section {
    background: var(--da-light);
}

.da-page .da-section-heading {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.da-page .da-center-eyebrow {
    justify-content: center;
}

.da-page .da-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--da-muted);
    font-size: 13px;
}

/* SERVICE CARDS */

.da-page .da-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.da-page .da-service-card {
    min-width: 0;
    min-height: 220px;
    padding: 23px;
    border: 1px solid var(--da-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 49, 91, .035);
    transition: transform .25s ease, box-shadow .25s ease;
}

.da-page .da-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(20, 49, 91, .09);
}

.da-page .da-service-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 17px;
    border-radius: 12px;
    color: var(--da-blue);
    background: #eaf3ff;
    font-size: 21px;
    font-weight: 800;
}

.da-page .da-service-icon.da-icon-orange {
    color: #d87913;
    background: #fff2e4;
}

.da-page .da-service-icon.da-icon-purple {
    color: var(--da-purple);
    background: #f0eaff;
}

.da-page .da-service-icon.da-icon-green {
    color: var(--da-green);
    background: #e5f8ed;
}

.da-page .da-service-icon.da-icon-cyan {
    color: #068dbd;
    background: #e4f8ff;
}

.da-page .da-service-icon.da-icon-red {
    color: var(--da-red);
    background: #fff0f2;
}

.da-page .da-service-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.da-page .da-service-card p {
    margin-bottom: 0;
    color: var(--da-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* CHECKLIST */

.da-page .da-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 24px;
}

.da-page .da-check-list > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--da-text);
    font-size: 11px;
    line-height: 1.7;
}

.da-page .da-check-list > div > span {
    display: grid;
    flex: 0 0 20px;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--da-green);
    background: #e5f8ed;
    font-size: 11px;
    font-weight: 800;
}

/* WORKFLOW PANEL */

.da-page .da-workflow-body {
    padding: 22px;
}

.da-page .da-workflow-title h3 {
    font-size: 17px;
}

.da-page .da-workflow-badge {
    padding: 6px 8px;
    border: 1px solid #354d70;
    border-radius: 20px;
    color: #8edbff;
    background: #152c4c;
    font-size: 9px;
    white-space: nowrap;
}

.da-page .da-workflow-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #30415f;
    border-radius: 10px;
    background: #152342;
}

.da-page .da-step-icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #6bbaff;
    background: #19365f;
    font-size: 11px;
    font-weight: 800;
}

.da-page .da-step-icon.da-step-orange {
    color: #ffb85b;
    background: #392d29;
}

.da-page .da-step-icon.da-step-purple {
    color: #c6a6ff;
    background: #302951;
}

.da-page .da-step-icon.da-step-green {
    color: #61e3ad;
    background: #163a39;
}

.da-page .da-workflow-step > div {
    flex: 1;
    min-width: 0;
}

.da-page .da-workflow-step strong,
.da-page .da-workflow-step small {
    display: block;
}

.da-page .da-workflow-step strong {
    color: #fff;
    font-size: 11px;
}

.da-page .da-workflow-step small {
    margin-top: 4px;
    color: #9eb2d2;
    font-size: 9px;
}

.da-page .da-workflow-step > b {
    color: #65d0ff;
    font-size: 15px;
}

.da-page .da-demo-note {
    margin: 17px 0 0;
    color: #9bafcf;
    font-size: 9px;
}

/* INDUSTRY CARDS */

.da-page .da-industry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.da-page .da-industry-card {
    padding: 22px 19px;
    border: 1px solid var(--da-border);
    border-radius: 13px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.da-page .da-industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(20, 49, 91, .08);
}

.da-page .da-industry-card > span {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    margin-bottom: 17px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--da-blue), var(--da-cyan));
    font-size: 11px;
    font-weight: 800;
}

.da-page .da-industry-card h3 {
    margin-bottom: 9px;
    font-size: 15px;
}

.da-page .da-industry-card p {
    margin-bottom: 0;
    color: var(--da-muted);
    font-size: 11px;
    line-height: 1.85;
}

/* TECHNOLOGY PANEL */

.da-page .da-tech-panel {
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--da-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.da-page .da-tech-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--da-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.da-page .da-tech-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.da-page .da-tech-item > span {
    display: grid;
    flex: 0 0 37px;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--da-blue), var(--da-cyan));
    font-size: 10px;
    font-weight: 800;
}

.da-page .da-tech-item > div {
    flex: 1;
    min-width: 0;
}

.da-page .da-tech-item strong,
.da-page .da-tech-item small {
    display: block;
}

.da-page .da-tech-item strong {
    color: var(--da-navy);
    font-size: 12px;
}

.da-page .da-tech-item small {
    margin-top: 4px;
    color: var(--da-muted);
    font-size: 10px;
}

.da-page .da-tech-item > b {
    color: var(--da-blue);
    font-size: 18px;
}

.da-page .da-governance-note {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #d6e7fa;
    border-radius: 10px;
    background: #fff;
}

.da-page .da-governance-note strong {
    color: var(--da-navy);
    font-size: 12px;
}

.da-page .da-governance-note p {
    margin: 6px 0 0;
    color: var(--da-muted);
    font-size: 10px;
    line-height: 1.8;
}

/* FINAL CTA */

.da-page .da-final-cta {
    padding: 55px 0;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(16, 167, 229, .22),
            transparent 32%
        ),
        linear-gradient(115deg, #0b1735, #123c79);
}

.da-page .da-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.da-page .da-eyebrow-light {
    color: #8edbff;
}

.da-page .da-final-cta h2 {
    margin-bottom: 14px;
    color: #fff;
}

.da-page .da-final-cta h2 span {
    color: #65d0ff;
}

.da-page .da-final-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #c6d7ef;
    font-size: 13px;
}

.da-page .da-btn-white {
    flex-shrink: 0;
    color: var(--da-navy);
    background: #fff;
    box-shadow: none;
}

.da-page .da-btn-white:hover {
    color: var(--da-blue);
    background: #f0f7ff;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1024px) {
    .da-container {
        width: calc(100% - 40px);
    }

    .da-page .da-hero-grid,
    .da-page .da-intro-grid,
    .da-page .da-usecase-grid,
    .da-page .da-tech-grid {
        gap: 22px;
    }

    .da-page h1 {
        font-size: clamp(31px, 3.8vw, 41px);
    }

    .da-page .da-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .da-page .da-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .da-page .da-dashboard-body,
    .da-page .da-workflow-body {
        padding: 16px;
    }

    .da-page .da-metric-card {
        padding: 11px;
    }

    .da-page .da-chart-panel {
        padding: 12px;
    }
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {
    .da-container {
        width: calc(100% - 36px);
    }

    .da-page .da-hero {
        padding: 20px 0 35px;
    }

    .da-page .da-hero-grid,
    .da-page .da-intro-grid,
    .da-page .da-usecase-grid,
    .da-page .da-tech-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .da-page .da-hero-content {
        padding-top: 0;
    }

    .da-page h1 {
        font-size: clamp(32px, 8vw, 43px);
        letter-spacing: -1px;
    }

    .da-page h2 {
        font-size: clamp(28px, 7vw, 35px);
    }

    .da-page .da-breadcrumb {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .da-page .da-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .da-page .da-btn,
    .da-page .da-btn-outline {
        width: 100%;
    }

    .da-page .da-hero-visual {
        padding: 20px 0 27px;
    }

    .da-page .da-dashboard-body {
        padding: 15px;
    }

    .da-page .da-dashboard-title h2 {
        font-size: 16px;
    }

    .da-page .da-floating-card {
        max-width: 185px;
        padding: 9px 10px;
    }

    .da-page .da-section {
        padding: 48px 0;
    }

    .da-page .da-section-heading {
        margin-bottom: 28px;
    }

    .da-page .da-service-grid,
    .da-page .da-industry-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .da-page .da-service-card {
        min-height: auto;
    }

    .da-page .da-check-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .da-page .da-workflow-body {
        padding: 13px;
    }

    .da-page .da-workflow-step {
        gap: 9px;
        padding: 10px;
    }

    .da-page .da-workflow-step strong {
        font-size: 10px;
    }

    .da-page .da-workflow-step small {
        font-size: 8px;
    }

    .da-page .da-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 23px;
    }

    .da-page .da-final-cta {
        padding: 42px 0;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .da-page .da-floating-card {
        max-width: 165px;
    }

    .da-page .da-floating-card strong {
        font-size: 9px;
    }

    .da-page .da-floating-card small {
        font-size: 8px;
    }

    .da-page .da-dashboard-title,
    .da-page .da-workflow-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .da-page .da-chart-panel {
        padding: 10px;
    }
}

/* ACCESSIBILITY */

.da-page a:focus-visible {
    outline: 3px solid var(--da-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .da-page *,
    .da-page *::before,
    .da-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================
   CLOUD SOLUTIONS PAGE
   Prefix: cld-
   Theme: Navy, Blue, Cyan and Orange
   ===================================================== */

.cld-page {
    --cld-navy: #0b1735;
    --cld-blue: #1268d8;
    --cld-cyan: #10a7e5;
    --cld-orange: #f28b1b;
    --cld-green: #13834d;
    --cld-purple: #7853d7;
    --cld-red: #db5265;
    --cld-text: #172746;
    --cld-muted: #687993;
    --cld-light: #f3f7ff;
    --cld-border: #e1eaf6;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
    background: #fff;
    color: var(--cld-text);
    line-height: 1.7;
}

.cld-page *,
.cld-page *::before,
.cld-page *::after {
    box-sizing: border-box;
}

.cld-page a {
    text-decoration: none;
}

.cld-page h1,
.cld-page h2,
.cld-page h3,
.cld-page p {
    margin-top: 0;
}

.cld-page h1,
.cld-page h2,
.cld-page h3 {
    color: var(--cld-navy);
    line-height: 1.2;
}

.cld-page h1 {
    margin-bottom: 20px;
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 800;
    letter-spacing: -1.4px;
}

.cld-page h1 span,
.cld-page h2 span {
    display: block;
    color: var(--cld-blue);
}

.cld-page h2 {
    margin-bottom: 20px;
    font-size: clamp(28px, 2.8vw, 39px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.cld-page h3 {
    font-size: 16px;
    font-weight: 750;
}

.cld-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* HERO */

.cld-page .cld-hero {
    padding: 15px 0 40px;
    background:
        radial-gradient(
            circle at 90% 35%,
            rgba(16, 167, 229, .16),
            transparent 35%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--cld-border);
}

.cld-page .cld-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.cld-page .cld-hero-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 0;
}

.cld-page .cld-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    color: var(--cld-muted);
    font-size: 13px;
}

.cld-page .cld-breadcrumb a {
    color: var(--cld-blue);
}

.cld-page .cld-breadcrumb a:hover {
    color: var(--cld-orange);
}

.cld-page .cld-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--cld-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.cld-page .cld-eyebrow > span {
    flex: 0 0 25px;
    width: 25px;
    height: 3px;
    background: var(--cld-orange);
}

.cld-page .cld-description,
.cld-page .cld-body-text {
    color: var(--cld-muted);
    font-size: 14px;
    line-height: 1.9;
}

.cld-page .cld-description {
    margin-bottom: 23px;
}

.cld-page .cld-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.cld-page .cld-btn,
.cld-page .cld-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    transition: transform .25s ease, box-shadow .25s ease;
}

.cld-page .cld-btn {
    color: #fff;
    background: linear-gradient(
        110deg,
        var(--cld-blue),
        var(--cld-cyan)
    );
    box-shadow: 0 8px 20px rgba(18, 104, 216, .17);
}

.cld-page .cld-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, .25);
}

.cld-page .cld-btn-outline {
    color: var(--cld-navy);
    background: #fff;
    border-color: #d6e3f5;
}

.cld-page .cld-btn-outline:hover {
    color: var(--cld-blue);
    border-color: var(--cld-blue);
}

.cld-page .cld-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    color: #536580;
    font-size: 10px;
    font-weight: 650;
}

.cld-page .cld-trust-points i {
    margin-right: 4px;
    color: var(--cld-green);
    font-style: normal;
}

/* CLOUD DASHBOARD */

.cld-page .cld-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 28px;
}

.cld-page .cld-dashboard,
.cld-page .cld-workflow-panel {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    color: #dce8ff;
    background: var(--cld-navy);
    box-shadow: 0 24px 50px rgba(11, 23, 53, .17);
}

.cld-page .cld-dashboard-header,
.cld-page .cld-workflow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 53px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #101f43;
}

.cld-page .cld-window-dots {
    display: flex;
    flex-shrink: 0;
    gap: 7px;
}

.cld-page .cld-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6962;
}

.cld-page .cld-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.cld-page .cld-window-dots i:nth-child(3) {
    background: #38c982;
}

.cld-page .cld-dashboard-header > span,
.cld-page .cld-workflow-header > span {
    color: #a9bddb;
    font-size: 9px;
    letter-spacing: 1px;
}

.cld-page .cld-dashboard-body {
    padding: 22px;
}

.cld-page .cld-dashboard-title,
.cld-page .cld-architecture-heading,
.cld-page .cld-workflow-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.cld-page .cld-dashboard-title small,
.cld-page .cld-architecture-heading small,
.cld-page .cld-workflow-title small {
    color: #92a8cd;
    font-size: 9px;
    letter-spacing: 1px;
}

.cld-page .cld-dashboard-title h2,
.cld-page .cld-architecture-heading h3,
.cld-page .cld-workflow-title h3 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 18px;
    letter-spacing: -.3px;
}

.cld-page .cld-status {
    padding: 6px 9px;
    border: 1px solid rgba(69, 217, 160, .2);
    border-radius: 20px;
    color: #61e3ad;
    background: rgba(69, 217, 160, .08);
    font-size: 9px;
    white-space: nowrap;
}

.cld-page .cld-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #45d9a0;
}

/* INFRASTRUCTURE METRICS */

.cld-page .cld-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cld-page .cld-metric-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid #30415f;
    border-radius: 11px;
    background: #152342;
}

.cld-page .cld-metric-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    margin-bottom: 12px;
    border-radius: 10px;
    color: #6bbaff;
    background: #19365f;
    font-size: 19px;
    font-weight: 800;
}

.cld-page .cld-metric-icon.cld-orange {
    color: #ffb85b;
    background: #392d29;
}

.cld-page .cld-metric-icon.cld-green {
    color: #61e3ad;
    background: #163a39;
}

.cld-page .cld-metric-icon.cld-purple {
    color: #c6a6ff;
    background: #302951;
}

.cld-page .cld-metric-card > small,
.cld-page .cld-metric-card > strong,
.cld-page .cld-metric-note {
    display: block;
}

.cld-page .cld-metric-card > small {
    margin-bottom: 5px;
    color: #a9bddb;
    font-size: 10px;
}

.cld-page .cld-metric-card > strong {
    margin-bottom: 6px;
    color: #fff;
    font-size: 13px;
}

.cld-page .cld-metric-note {
    color: #8fa6ca;
    font-size: 9px;
}

/* CLOUD ARCHITECTURE */

.cld-page .cld-architecture {
    margin-top: 17px;
    padding: 17px;
    border: 1px solid #30415f;
    border-radius: 11px;
    background: #101f3e;
}

.cld-page .cld-architecture-heading {
    margin-bottom: 17px;
}

.cld-page .cld-architecture-heading h3 {
    font-size: 14px;
}

.cld-page .cld-architecture-heading > span {
    padding: 5px 7px;
    border-radius: 6px;
    color: #65d0ff;
    background: #17365e;
    font-size: 8px;
    font-weight: 750;
}

.cld-page .cld-cloud-core {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 10px;
    border: 1px solid #2c619b;
    border-radius: 10px;
    background: linear-gradient(120deg, #17365f, #152746);
}

.cld-page .cld-cloud-symbol {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    color: #65d0ff;
    background: #214776;
    font-size: 25px;
}

.cld-page .cld-cloud-core strong,
.cld-page .cld-cloud-core small {
    display: block;
}

.cld-page .cld-cloud-core strong {
    color: #fff;
    font-size: 12px;
}

.cld-page .cld-cloud-core small {
    margin-top: 4px;
    color: #a9bddb;
    font-size: 9px;
}

.cld-page .cld-architecture-lines {
    display: flex;
    justify-content: space-around;
    height: 22px;
    padding: 0 17%;
}

.cld-page .cld-architecture-lines i {
    width: 1px;
    height: 100%;
    background: #4774a7;
}

.cld-page .cld-service-nodes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.cld-page .cld-service-nodes > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 5px;
    border: 1px solid #30415f;
    border-radius: 9px;
    background: #152342;
}

.cld-page .cld-service-nodes > div > span {
    color: #65d0ff;
    font-size: 20px;
}

.cld-page .cld-service-nodes small {
    color: #dce8ff;
    font-size: 9px;
}

.cld-page .cld-dashboard-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 17px;
    color: #a9bddb;
    font-size: 9px;
}

.cld-page .cld-dashboard-footer i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #45d9a0;
}

/* FLOATING CARDS */

.cld-page .cld-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 225px;
    padding: 11px 13px;
    border: 1px solid var(--cld-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(21, 53, 101, .12);
}

.cld-page .cld-float-top {
    top: 0;
    right: 0;
}

.cld-page .cld-float-bottom {
    bottom: 0;
    left: 0;
}

.cld-page .cld-float-icon {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--cld-blue);
    background: #eaf4ff;
    font-size: 20px;
}

.cld-page .cld-float-orange {
    color: var(--cld-orange);
    background: #fff2e4;
}

.cld-page .cld-floating-card strong,
.cld-page .cld-floating-card small {
    display: block;
}

.cld-page .cld-floating-card strong {
    color: var(--cld-navy);
    font-size: 10px;
}

.cld-page .cld-floating-card small {
    margin-top: 3px;
    color: var(--cld-muted);
    font-size: 9px;
}

/* COMMON SECTIONS */

.cld-page .cld-section {
    padding: 70px 0;
}

.cld-page .cld-intro-grid,
.cld-page .cld-usecase-grid,
.cld-page .cld-tech-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 42px;
}

.cld-page .cld-text-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--cld-blue);
    font-size: 12px;
    font-weight: 750;
}

.cld-page .cld-text-link:hover {
    color: var(--cld-orange);
}

/* BENEFITS PANEL */

.cld-page .cld-benefits-panel {
    padding: 23px;
    border: 1px solid var(--cld-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.cld-page .cld-panel-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--cld-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.cld-page .cld-panel-badge {
    padding: 4px 8px;
    border-radius: 20px;
    color: var(--cld-green);
    background: #e5f8ed;
    font-size: 9px;
    letter-spacing: 0;
}

.cld-page .cld-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.cld-page .cld-benefit-item > span {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--cld-blue), var(--cld-cyan));
    font-size: 11px;
    font-weight: 800;
}

.cld-page .cld-benefit-item h3 {
    margin-bottom: 5px;
    font-size: 15px;
}

.cld-page .cld-benefit-item p {
    margin-bottom: 0;
    color: var(--cld-muted);
    font-size: 11px;
}

/* SECTION HEADINGS */

.cld-page .cld-services-section,
.cld-page .cld-deployment-section {
    background: var(--cld-light);
}

.cld-page .cld-section-heading {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.cld-page .cld-center-eyebrow {
    justify-content: center;
}

.cld-page .cld-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--cld-muted);
    font-size: 13px;
}

/* SERVICE CARDS */

.cld-page .cld-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cld-page .cld-service-card {
    min-width: 0;
    min-height: 220px;
    padding: 23px;
    border: 1px solid var(--cld-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 49, 91, .035);
    transition: transform .25s ease, box-shadow .25s ease;
}

.cld-page .cld-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(20, 49, 91, .09);
}

.cld-page .cld-service-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 17px;
    border-radius: 12px;
    color: var(--cld-blue);
    background: #eaf3ff;
    font-size: 21px;
    font-weight: 800;
}

.cld-page .cld-service-icon.cld-icon-orange {
    color: #d87913;
    background: #fff2e4;
}

.cld-page .cld-service-icon.cld-icon-purple {
    color: var(--cld-purple);
    background: #f0eaff;
}

.cld-page .cld-service-icon.cld-icon-green {
    color: var(--cld-green);
    background: #e5f8ed;
}

.cld-page .cld-service-icon.cld-icon-cyan {
    color: #068dbd;
    background: #e4f8ff;
}

.cld-page .cld-service-icon.cld-icon-red {
    color: var(--cld-red);
    background: #fff0f2;
}

.cld-page .cld-service-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.cld-page .cld-service-card p {
    margin-bottom: 0;
    color: var(--cld-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* CHECKLIST */

.cld-page .cld-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 24px;
}

.cld-page .cld-check-list > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--cld-text);
    font-size: 11px;
    line-height: 1.7;
}

.cld-page .cld-check-list > div > span {
    display: grid;
    flex: 0 0 20px;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--cld-green);
    background: #e5f8ed;
    font-size: 11px;
    font-weight: 800;
}

/* WORKFLOW PANEL */

.cld-page .cld-workflow-body {
    padding: 22px;
}

.cld-page .cld-workflow-title h3 {
    font-size: 17px;
}

.cld-page .cld-workflow-badge {
    padding: 6px 8px;
    border: 1px solid #354d70;
    border-radius: 20px;
    color: #8edbff;
    background: #152c4c;
    font-size: 9px;
    white-space: nowrap;
}

.cld-page .cld-workflow-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #30415f;
    border-radius: 10px;
    background: #152342;
}

.cld-page .cld-step-icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #6bbaff;
    background: #19365f;
    font-size: 11px;
    font-weight: 800;
}

.cld-page .cld-step-icon.cld-step-orange {
    color: #ffb85b;
    background: #392d29;
}

.cld-page .cld-step-icon.cld-step-purple {
    color: #c6a6ff;
    background: #302951;
}

.cld-page .cld-step-icon.cld-step-green {
    color: #61e3ad;
    background: #163a39;
}

.cld-page .cld-workflow-step > div {
    flex: 1;
    min-width: 0;
}

.cld-page .cld-workflow-step strong,
.cld-page .cld-workflow-step small {
    display: block;
}

.cld-page .cld-workflow-step strong {
    color: #fff;
    font-size: 11px;
}

.cld-page .cld-workflow-step small {
    margin-top: 4px;
    color: #9eb2d2;
    font-size: 9px;
}

.cld-page .cld-workflow-step > b {
    color: #65d0ff;
    font-size: 15px;
}

.cld-page .cld-workflow-connector {
    width: 2px;
    height: 15px;
    margin-left: 31px;
    background: #3c5d89;
}

.cld-page .cld-demo-note {
    margin: 17px 0 0;
    color: #9bafcf;
    font-size: 9px;
}

/* DEPLOYMENT CARDS */

.cld-page .cld-deployment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cld-page .cld-deployment-card {
    min-width: 0;
    padding: 25px;
    border: 1px solid var(--cld-border);
    border-radius: 14px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.cld-page .cld-deployment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(20, 49, 91, .09);
}

.cld-page .cld-deployment-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    color: var(--cld-blue);
    background: #eaf3ff;
    font-size: 23px;
}

.cld-page .cld-deployment-icon.cld-icon-orange {
    color: #d87913;
    background: #fff2e4;
}

.cld-page .cld-deployment-icon.cld-icon-purple {
    color: var(--cld-purple);
    background: #f0eaff;
}

.cld-page .cld-deployment-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.cld-page .cld-deployment-card p {
    margin-bottom: 18px;
    color: var(--cld-muted);
    font-size: 12px;
    line-height: 1.85;
}

.cld-page .cld-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.cld-page .cld-tag-list span {
    padding: 5px 8px;
    border: 1px solid #dbe7f7;
    border-radius: 20px;
    color: var(--cld-blue);
    background: #f7faff;
    font-size: 9px;
    font-weight: 700;
}

/* TECHNOLOGY AND MANAGEMENT PANEL */

.cld-page .cld-tech-panel {
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--cld-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.cld-page .cld-tech-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--cld-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.cld-page .cld-tech-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.cld-page .cld-tech-item > span {
    display: grid;
    flex: 0 0 37px;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--cld-blue), var(--cld-cyan));
    font-size: 10px;
    font-weight: 800;
}

.cld-page .cld-tech-item > div {
    flex: 1;
    min-width: 0;
}

.cld-page .cld-tech-item strong,
.cld-page .cld-tech-item small {
    display: block;
}

.cld-page .cld-tech-item strong {
    color: var(--cld-navy);
    font-size: 12px;
}

.cld-page .cld-tech-item small {
    margin-top: 4px;
    color: var(--cld-muted);
    font-size: 10px;
}

.cld-page .cld-tech-item > b {
    color: var(--cld-blue);
    font-size: 18px;
}

.cld-page .cld-governance-note {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #d6e7fa;
    border-radius: 10px;
    background: #fff;
}

.cld-page .cld-governance-note strong {
    color: var(--cld-navy);
    font-size: 12px;
}

.cld-page .cld-governance-note p {
    margin: 6px 0 0;
    color: var(--cld-muted);
    font-size: 10px;
    line-height: 1.8;
}

/* FINAL CTA */

.cld-page .cld-final-cta {
    padding: 55px 0;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(16, 167, 229, .22),
            transparent 32%
        ),
        linear-gradient(115deg, #0b1735, #123c79);
}

.cld-page .cld-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.cld-page .cld-eyebrow-light {
    color: #8edbff;
}

.cld-page .cld-final-cta h2 {
    margin-bottom: 14px;
    color: #fff;
}

.cld-page .cld-final-cta h2 span {
    color: #65d0ff;
}

.cld-page .cld-final-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #c6d7ef;
    font-size: 13px;
}

.cld-page .cld-btn-white {
    flex-shrink: 0;
    color: var(--cld-navy);
    background: #fff;
    box-shadow: none;
}

.cld-page .cld-btn-white:hover {
    color: var(--cld-blue);
    background: #f0f7ff;
}

/* TABLET */

@media (max-width: 1024px) {
    .cld-container {
        width: calc(100% - 40px);
    }

    .cld-page .cld-hero-grid,
    .cld-page .cld-intro-grid,
    .cld-page .cld-usecase-grid,
    .cld-page .cld-tech-grid {
        gap: 22px;
    }

    .cld-page h1 {
        font-size: clamp(31px, 3.8vw, 41px);
    }

    .cld-page .cld-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cld-page .cld-dashboard-body,
    .cld-page .cld-workflow-body {
        padding: 16px;
    }

    .cld-page .cld-metric-card {
        padding: 11px;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .cld-container {
        width: calc(100% - 36px);
    }

    .cld-page .cld-hero {
        padding: 20px 0 35px;
    }

    .cld-page .cld-hero-grid,
    .cld-page .cld-intro-grid,
    .cld-page .cld-usecase-grid,
    .cld-page .cld-tech-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .cld-page .cld-hero-content {
        padding-top: 0;
    }

    .cld-page h1 {
        font-size: clamp(32px, 8vw, 43px);
        letter-spacing: -1px;
    }

    .cld-page h2 {
        font-size: clamp(28px, 7vw, 35px);
    }

    .cld-page .cld-breadcrumb {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .cld-page .cld-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .cld-page .cld-btn,
    .cld-page .cld-btn-outline {
        width: 100%;
    }

    .cld-page .cld-hero-visual {
        padding: 20px 0 27px;
    }

    .cld-page .cld-dashboard-body {
        padding: 15px;
    }

    .cld-page .cld-dashboard-title h2 {
        font-size: 16px;
    }

    .cld-page .cld-floating-card {
        max-width: 185px;
        padding: 9px 10px;
    }

    .cld-page .cld-section {
        padding: 48px 0;
    }

    .cld-page .cld-section-heading {
        margin-bottom: 28px;
    }

    .cld-page .cld-service-grid,
    .cld-page .cld-deployment-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cld-page .cld-service-card {
        min-height: auto;
    }

    .cld-page .cld-check-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cld-page .cld-workflow-body {
        padding: 13px;
    }

    .cld-page .cld-workflow-step {
        gap: 9px;
        padding: 10px;
    }

    .cld-page .cld-workflow-step strong {
        font-size: 10px;
    }

    .cld-page .cld-workflow-step small {
        font-size: 8px;
    }

    .cld-page .cld-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 23px;
    }

    .cld-page .cld-final-cta {
        padding: 42px 0;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .cld-page .cld-floating-card {
        max-width: 165px;
    }

    .cld-page .cld-floating-card strong {
        font-size: 9px;
    }

    .cld-page .cld-floating-card small {
        font-size: 8px;
    }

    .cld-page .cld-dashboard-title,
    .cld-page .cld-architecture-heading,
    .cld-page .cld-workflow-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .cld-page .cld-architecture {
        padding: 12px;
    }
}

/* ACCESSIBILITY */

.cld-page a:focus-visible {
    outline: 3px solid var(--cld-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cld-page *,
    .cld-page *::before,
    .cld-page *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* =====================================================
   API INTEGRATION PAGE
   Prefix: api-
   Theme: Navy Blue, Bright Blue, Cyan and Orange
   ===================================================== */

.api-page {
    --api-navy: #0b1735;
    --api-blue: #1268d8;
    --api-cyan: #10a7e5;
    --api-orange: #f28b1b;
    --api-green: #13834d;
    --api-purple: #7853d7;
    --api-red: #db5265;
    --api-text: #172746;
    --api-muted: #687993;
    --api-light: #f3f7ff;
    --api-border: #e1eaf6;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
    background: #fff;
    color: var(--api-text);
    line-height: 1.7;
}

.api-page *,
.api-page *::before,
.api-page *::after {
    box-sizing: border-box;
}

.api-page a {
    text-decoration: none;
}

.api-page h1,
.api-page h2,
.api-page h3,
.api-page p {
    margin-top: 0;
}

.api-page h1,
.api-page h2,
.api-page h3 {
    color: var(--api-navy);
    line-height: 1.2;
}

.api-page h1 {
    margin-bottom: 20px;
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 800;
    letter-spacing: -1.4px;
}

.api-page h1 span,
.api-page h2 span {
    display: block;
    color: var(--api-blue);
}

.api-page h2 {
    margin-bottom: 20px;
    font-size: clamp(28px, 2.8vw, 39px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.api-page h3 {
    font-size: 16px;
    font-weight: 750;
}

.api-container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

/* =====================================================
   HERO SECTION
   Equal-width columns
   ===================================================== */

.api-page .api-hero {
    padding: 15px 0 40px;
    background:
        radial-gradient(
            circle at 90% 35%,
            rgba(16, 167, 229, .16),
            transparent 35%
        ),
        linear-gradient(120deg, #f8faff, #edf5ff);
    border-bottom: 1px solid var(--api-border);
}

.api-page .api-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.api-page .api-hero-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 0;
}

.api-page .api-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    color: var(--api-muted);
    font-size: 13px;
}

.api-page .api-breadcrumb a {
    color: var(--api-blue);
}

.api-page .api-breadcrumb a:hover {
    color: var(--api-orange);
}

.api-page .api-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--api-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.api-page .api-eyebrow > span {
    flex: 0 0 25px;
    width: 25px;
    height: 3px;
    background: var(--api-orange);
}

.api-page .api-description,
.api-page .api-body-text {
    color: var(--api-muted);
    font-size: 14px;
    line-height: 1.9;
}

.api-page .api-description {
    margin-bottom: 23px;
}

.api-page .api-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.api-page .api-btn,
.api-page .api-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    transition: transform .25s ease, box-shadow .25s ease;
}

.api-page .api-btn {
    color: #fff;
    background: linear-gradient(
        110deg,
        var(--api-blue),
        var(--api-cyan)
    );
    box-shadow: 0 8px 20px rgba(18, 104, 216, .17);
}

.api-page .api-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(18, 104, 216, .25);
}

.api-page .api-btn-outline {
    color: var(--api-navy);
    background: #fff;
    border-color: #d6e3f5;
}

.api-page .api-btn-outline:hover {
    color: var(--api-blue);
    border-color: var(--api-blue);
}

.api-page .api-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    color: #536580;
    font-size: 10px;
    font-weight: 650;
}

.api-page .api-trust-points i {
    margin-right: 4px;
    color: var(--api-green);
    font-style: normal;
}

/* =====================================================
   API DASHBOARD
   ===================================================== */

.api-page .api-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 22px 0 28px;
}

.api-page .api-dashboard,
.api-page .api-workflow-panel {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    color: #dce8ff;
    background: var(--api-navy);
    box-shadow: 0 24px 50px rgba(11, 23, 53, .17);
}

.api-page .api-dashboard-header,
.api-page .api-workflow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 53px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #101f43;
}

.api-page .api-window-dots {
    display: flex;
    flex-shrink: 0;
    gap: 7px;
}

.api-page .api-window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6962;
}

.api-page .api-window-dots i:nth-child(2) {
    background: #ffbd45;
}

.api-page .api-window-dots i:nth-child(3) {
    background: #38c982;
}

.api-page .api-dashboard-header > span,
.api-page .api-workflow-header > span {
    color: #a9bddb;
    font-size: 9px;
    letter-spacing: 1px;
}

.api-page .api-dashboard-body {
    padding: 22px;
}

.api-page .api-dashboard-title,
.api-page .api-flow-heading,
.api-page .api-workflow-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.api-page .api-dashboard-title small,
.api-page .api-flow-heading small,
.api-page .api-workflow-title small {
    color: #92a8cd;
    font-size: 9px;
    letter-spacing: 1px;
}

.api-page .api-dashboard-title h2,
.api-page .api-flow-heading h3,
.api-page .api-workflow-title h3 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 18px;
    letter-spacing: -.3px;
}

.api-page .api-status {
    padding: 6px 9px;
    border: 1px solid rgba(69, 217, 160, .2);
    border-radius: 20px;
    color: #61e3ad;
    background: rgba(69, 217, 160, .08);
    font-size: 9px;
    white-space: nowrap;
}

.api-page .api-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #45d9a0;
}

/* METRIC CARDS */

.api-page .api-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.api-page .api-metric-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid #30415f;
    border-radius: 11px;
    background: #152342;
}

.api-page .api-metric-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    margin-bottom: 12px;
    border-radius: 10px;
    color: #6bbaff;
    background: #19365f;
    font-size: 19px;
    font-weight: 800;
}

.api-page .api-metric-icon.api-orange {
    color: #ffb85b;
    background: #392d29;
}

.api-page .api-metric-icon.api-green {
    color: #61e3ad;
    background: #163a39;
}

.api-page .api-metric-icon.api-purple {
    color: #c6a6ff;
    background: #302951;
}

.api-page .api-metric-card > small,
.api-page .api-metric-card > strong,
.api-page .api-metric-note {
    display: block;
}

.api-page .api-metric-card > small {
    margin-bottom: 5px;
    color: #a9bddb;
    font-size: 10px;
}

.api-page .api-metric-card > strong {
    margin-bottom: 6px;
    color: #fff;
    font-size: 13px;
}

.api-page .api-metric-note {
    color: #8fa6ca;
    font-size: 9px;
}

/* API FLOW DIAGRAM */

.api-page .api-flow-panel {
    margin-top: 17px;
    padding: 17px;
    border: 1px solid #30415f;
    border-radius: 11px;
    background: #101f3e;
}

.api-page .api-flow-heading {
    margin-bottom: 20px;
}

.api-page .api-flow-heading h3 {
    font-size: 14px;
}

.api-page .api-flow-label {
    padding: 5px 7px;
    border-radius: 6px;
    color: #65d0ff;
    background: #17365e;
    font-size: 8px;
    font-weight: 750;
}

.api-page .api-flow-diagram {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
}

.api-page .api-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 12px 5px;
    border: 1px solid #30415f;
    border-radius: 9px;
    background: #152342;
    text-align: center;
}

.api-page .api-node-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 9px;
    border-radius: 9px;
    color: #65d0ff;
    background: #19365f;
    font-size: 19px;
}

.api-page .api-flow-node strong {
    color: #fff;
    font-size: 9px;
    line-height: 1.4;
}

.api-page .api-flow-node small {
    margin-top: 5px;
    color: #9eb2d2;
    font-size: 8px;
    line-height: 1.4;
}

.api-page .api-flow-node.api-node-active {
    border-color: #247adf;
    background: #17365f;
}

.api-page .api-flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #65d0ff;
}

.api-page .api-flow-connector > span {
    font-size: 18px;
}

.api-page .api-flow-connector > small {
    font-size: 8px;
}

.api-page .api-flow-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid #30415f;
    color: #a9bddb;
    font-size: 9px;
    line-height: 1.6;
}

.api-page .api-flow-note > span {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: #45d9a0;
}

.api-page .api-dashboard-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 17px;
    color: #a9bddb;
    font-size: 9px;
}

.api-page .api-dashboard-footer i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #45d9a0;
}

/* FLOATING CARDS */

.api-page .api-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 225px;
    padding: 11px 13px;
    border: 1px solid var(--api-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(21, 53, 101, .12);
}

.api-page .api-float-top {
    top: 0;
    right: 0;
}

.api-page .api-float-bottom {
    bottom: 0;
    left: 0;
}

.api-page .api-float-icon {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--api-blue);
    background: #eaf4ff;
    font-size: 20px;
}

.api-page .api-float-orange {
    color: var(--api-orange);
    background: #fff2e4;
}

.api-page .api-floating-card strong,
.api-page .api-floating-card small {
    display: block;
}

.api-page .api-floating-card strong {
    color: var(--api-navy);
    font-size: 10px;
}

.api-page .api-floating-card small {
    margin-top: 3px;
    color: var(--api-muted);
    font-size: 9px;
}

/* COMMON SECTIONS */

.api-page .api-section {
    padding: 70px 0;
}

.api-page .api-intro-grid,
.api-page .api-usecase-grid,
.api-page .api-tech-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 42px;
}

.api-page .api-text-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--api-blue);
    font-size: 12px;
    font-weight: 750;
}

.api-page .api-text-link:hover {
    color: var(--api-orange);
}

/* BENEFITS PANEL */

.api-page .api-benefits-panel {
    padding: 23px;
    border: 1px solid var(--api-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.api-page .api-panel-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--api-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.api-page .api-panel-badge {
    padding: 4px 8px;
    border-radius: 20px;
    color: var(--api-green);
    background: #e5f8ed;
    font-size: 9px;
    letter-spacing: 0;
}

.api-page .api-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.api-page .api-benefit-item > span {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--api-blue), var(--api-cyan));
    font-size: 11px;
    font-weight: 800;
}

.api-page .api-benefit-item h3 {
    margin-bottom: 5px;
    font-size: 15px;
}

.api-page .api-benefit-item p {
    margin-bottom: 0;
    color: var(--api-muted);
    font-size: 11px;
}

/* SECTION HEADINGS */

.api-page .api-services-section,
.api-page .api-usecases-section {
    background: var(--api-light);
}

.api-page .api-section-heading {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.api-page .api-center-eyebrow {
    justify-content: center;
}

.api-page .api-section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--api-muted);
    font-size: 13px;
}

/* SERVICE CARDS */

.api-page .api-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.api-page .api-service-card {
    min-width: 0;
    min-height: 220px;
    padding: 23px;
    border: 1px solid var(--api-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 49, 91, .035);
    transition: transform .25s ease, box-shadow .25s ease;
}

.api-page .api-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(20, 49, 91, .09);
}

.api-page .api-service-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 17px;
    border-radius: 12px;
    color: var(--api-blue);
    background: #eaf3ff;
    font-size: 21px;
    font-weight: 800;
}

.api-page .api-service-icon.api-icon-orange {
    color: #d87913;
    background: #fff2e4;
}

.api-page .api-service-icon.api-icon-purple {
    color: var(--api-purple);
    background: #f0eaff;
}

.api-page .api-service-icon.api-icon-green {
    color: var(--api-green);
    background: #e5f8ed;
}

.api-page .api-service-icon.api-icon-cyan {
    color: #068dbd;
    background: #e4f8ff;
}

.api-page .api-service-icon.api-icon-red {
    color: var(--api-red);
    background: #fff0f2;
}

.api-page .api-service-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.api-page .api-service-card p {
    margin-bottom: 0;
    color: var(--api-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* CHECKLIST */

.api-page .api-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 24px;
}

.api-page .api-check-list > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--api-text);
    font-size: 11px;
    line-height: 1.7;
}

.api-page .api-check-list > div > span {
    display: grid;
    flex: 0 0 20px;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--api-green);
    background: #e5f8ed;
    font-size: 11px;
    font-weight: 800;
}

/* WORKFLOW PANEL */

.api-page .api-workflow-body {
    padding: 22px;
}

.api-page .api-workflow-title h3 {
    font-size: 17px;
}

.api-page .api-workflow-badge {
    padding: 6px 8px;
    border: 1px solid #354d70;
    border-radius: 20px;
    color: #8edbff;
    background: #152c4c;
    font-size: 9px;
    white-space: nowrap;
}

.api-page .api-workflow-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #30415f;
    border-radius: 10px;
    background: #152342;
}

.api-page .api-step-icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #6bbaff;
    background: #19365f;
    font-size: 11px;
    font-weight: 800;
}

.api-page .api-step-icon.api-step-orange {
    color: #ffb85b;
    background: #392d29;
}

.api-page .api-step-icon.api-step-purple {
    color: #c6a6ff;
    background: #302951;
}

.api-page .api-step-icon.api-step-green {
    color: #61e3ad;
    background: #163a39;
}

.api-page .api-workflow-step > div {
    flex: 1;
    min-width: 0;
}

.api-page .api-workflow-step strong,
.api-page .api-workflow-step small {
    display: block;
}

.api-page .api-workflow-step strong {
    color: #fff;
    font-size: 11px;
}

.api-page .api-workflow-step small {
    margin-top: 4px;
    color: #9eb2d2;
    font-size: 9px;
}

.api-page .api-workflow-step > b {
    color: #65d0ff;
    font-size: 15px;
}

.api-page .api-workflow-connector {
    width: 2px;
    height: 15px;
    margin-left: 31px;
    background: #3c5d89;
}

.api-page .api-demo-note {
    margin: 17px 0 0;
    color: #9bafcf;
    font-size: 9px;
}

/* USE CASE CARDS */

.api-page .api-usecase-grid-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.api-page .api-usecase-card {
    min-width: 0;
    padding: 22px 19px;
    border: 1px solid var(--api-border);
    border-radius: 13px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.api-page .api-usecase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(20, 49, 91, .08);
}

.api-page .api-usecase-card > span {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    margin-bottom: 17px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--api-blue), var(--api-cyan));
    font-size: 11px;
    font-weight: 800;
}

.api-page .api-usecase-card h3 {
    margin-bottom: 9px;
    font-size: 15px;
}

.api-page .api-usecase-card p {
    margin-bottom: 0;
    color: var(--api-muted);
    font-size: 11px;
    line-height: 1.85;
}

/* TECHNOLOGY PANEL */

.api-page .api-tech-panel {
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--api-border);
    border-radius: 15px;
    background: linear-gradient(140deg, #f7faff, #edf5ff);
}

.api-page .api-tech-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--api-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.api-page .api-tech-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-top: 1px solid #dce8f7;
}

.api-page .api-tech-item > span {
    display: grid;
    flex: 0 0 37px;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--api-blue), var(--api-cyan));
    font-size: 10px;
    font-weight: 800;
}

.api-page .api-tech-item > div {
    flex: 1;
    min-width: 0;
}

.api-page .api-tech-item strong,
.api-page .api-tech-item small {
    display: block;
}

.api-page .api-tech-item strong {
    color: var(--api-navy);
    font-size: 12px;
}

.api-page .api-tech-item small {
    margin-top: 4px;
    color: var(--api-muted);
    font-size: 10px;
}

.api-page .api-tech-item > b {
    color: var(--api-blue);
    font-size: 18px;
}

.api-page .api-governance-note {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #d6e7fa;
    border-radius: 10px;
    background: #fff;
}

.api-page .api-governance-note strong {
    color: var(--api-navy);
    font-size: 12px;
}

.api-page .api-governance-note p {
    margin: 6px 0 0;
    color: var(--api-muted);
    font-size: 10px;
    line-height: 1.8;
}

/* FINAL CTA */

.api-page .api-final-cta {
    padding: 55px 0;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(16, 167, 229, .22),
            transparent 32%
        ),
        linear-gradient(115deg, #0b1735, #123c79);
}

.api-page .api-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.api-page .api-eyebrow-light {
    color: #8edbff;
}

.api-page .api-final-cta h2 {
    margin-bottom: 14px;
    color: #fff;
}

.api-page .api-final-cta h2 span {
    color: #65d0ff;
}

.api-page .api-final-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #c6d7ef;
    font-size: 13px;
}

.api-page .api-btn-white {
    flex-shrink: 0;
    color: var(--api-navy);
    background: #fff;
    box-shadow: none;
}

.api-page .api-btn-white:hover {
    color: var(--api-blue);
    background: #f0f7ff;
}

/* TABLET */

@media (max-width: 1024px) {
    .api-container {
        width: calc(100% - 40px);
    }

    .api-page .api-hero-grid,
    .api-page .api-intro-grid,
    .api-page .api-usecase-grid,
    .api-page .api-tech-grid {
        gap: 22px;
    }

    .api-page h1 {
        font-size: clamp(31px, 3.8vw, 41px);
    }

    .api-page .api-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .api-page .api-usecase-grid-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .api-page .api-dashboard-body,
    .api-page .api-workflow-body {
        padding: 16px;
    }

    .api-page .api-metric-card {
        padding: 11px;
    }

    .api-page .api-flow-panel {
        padding: 12px;
    }

    .api-page .api-flow-diagram {
        grid-template-columns:
            minmax(0, 1fr) 22px
            minmax(0, 1fr) 22px
            minmax(0, 1fr);
        gap: 3px;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .api-container {
        width: calc(100% - 36px);
    }

    .api-page .api-hero {
        padding: 20px 0 35px;
    }

    .api-page .api-hero-grid,
    .api-page .api-intro-grid,
    .api-page .api-usecase-grid,
    .api-page .api-tech-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .api-page .api-hero-content {
        padding-top: 0;
    }

    .api-page h1 {
        font-size: clamp(32px, 8vw, 43px);
        letter-spacing: -1px;
    }

    .api-page h2 {
        font-size: clamp(28px, 7vw, 35px);
    }

    .api-page .api-breadcrumb {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .api-page .api-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .api-page .api-btn,
    .api-page .api-btn-outline {
        width: 100%;
    }

    .api-page .api-hero-visual {
        padding: 20px 0 27px;
    }

    .api-page .api-dashboard-body {
        padding: 15px;
    }

    .api-page .api-dashboard-title h2 {
        font-size: 16px;
    }

    .api-page .api-floating-card {
        max-width: 185px;
        padding: 9px 10px;
    }

    .api-page .api-section {
        padding: 48px 0;
    }

    .api-page .api-section-heading {
        margin-bottom: 28px;
    }

    .api-page .api-service-grid,
    .api-page .api-usecase-grid-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .api-page .api-service-card {
        min-height: auto;
    }

    .api-page .api-check-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .api-page .api-workflow-body {
        padding: 13px;
    }

    .api-page .api-workflow-step {
        gap: 9px;
        padding: 10px;
    }

    .api-page .api-workflow-step strong {
        font-size: 10px;
    }

    .api-page .api-workflow-step small {
        font-size: 8px;
    }

    .api-page .api-cta-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 23px;
    }

    .api-page .api-final-cta {
        padding: 42px 0;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .api-page .api-floating-card {
        max-width: 165px;
    }

    .api-page .api-floating-card strong {
        font-size: 9px;
    }

    .api-page .api-floating-card small {
        font-size: 8px;
    }

    .api-page .api-dashboard-title,
    .api-page .api-flow-heading,
    .api-page .api-workflow-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .api-page .api-flow-panel {
        padding: 10px;
    }

    .api-page .api-flow-node {
        padding: 9px 3px;
    }

    .api-page .api-flow-node strong {
        font-size: 8px;
    }

    .api-page .api-flow-node small {
        font-size: 7px;
    }

    .api-page .api-flow-connector > small {
        font-size: 7px;
    }
}

/* ACCESSIBILITY */

.api-page a:focus-visible {
    outline: 3px solid var(--api-orange);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .api-page *,
    .api-page *::before,
    .api-page *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* ==========================================
   UI/UX DESIGN PAGE
   Prefix: uxd-
   ========================================== */

.uxd-page {
    --uxd-navy: #0b1735;
    --uxd-blue: #1268d8;
    --uxd-cyan: #10a7e5;
    --uxd-orange: #f28b1b;
    --uxd-text: #26334a;
    --uxd-muted: #68758a;
    --uxd-light: #f5f8fc;
    --uxd-border: #e3eaf3;
    color: var(--uxd-text);
    background: #fff;
    font-family: inherit;
    overflow: hidden;
}

.uxd-page *,
.uxd-page *::before,
.uxd-page *::after {
    box-sizing: border-box;
}

.uxd-page a {
    text-decoration: none;
}

.uxd-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* Breadcrumb */

.uxd-breadcrumb {
    padding: 16px 0 8px;
    font-size: 13px;
    color: var(--uxd-muted);
}

.uxd-breadcrumb .uxd-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.uxd-breadcrumb a {
    color: var(--uxd-blue);
}

.uxd-breadcrumb a:hover {
    color: var(--uxd-orange);
}

/* Shared labels */

.uxd-eyebrow,
.uxd-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--uxd-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.uxd-eyebrow {
    padding: 9px 13px;
    background: #eef6ff;
    border: 1px solid #dbeaff;
    border-radius: 30px;
    letter-spacing: 0.5px;
    text-transform: none;
    font-size: 12px;
}

.uxd-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--uxd-orange);
    flex-shrink: 0;
}

/* Hero */

.uxd-hero {
    padding: 15px 0 48px;
    background:
        radial-gradient(ellipse at 85% 20%, rgba(16, 167, 229, 0.09), transparent 38%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.uxd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 46px;
}

.uxd-hero-content {
    min-width: 0;
    padding: 10px 0;
}

.uxd-hero-content h1 {
    margin: 23px 0 18px;
    color: var(--uxd-navy);
    font-size: clamp(35px, 4vw, 51px);
    line-height: 1.13;
    font-weight: 800;
    letter-spacing: -1.6px;
}

.uxd-hero-content h1 span,
.uxd-intro-heading h2 span,
.uxd-section-heading h2 span,
.uxd-industries-content h2 span,
.uxd-principles-content h2 span {
    color: var(--uxd-blue);
}

.uxd-hero-content > p {
    max-width: 570px;
    margin: 0;
    color: var(--uxd-muted);
    font-size: 15px;
    line-height: 1.85;
}

.uxd-hero-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 18px;
    margin-top: 24px;
}

.uxd-hero-points > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--uxd-text);
    font-size: 13px;
    font-weight: 600;
}

.uxd-check {
    display: inline-flex;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    align-items: center;
    justify-content: center;
    color: #087b4b;
    background: #e4f8ed;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.uxd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.uxd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 48px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease;
}

.uxd-btn:hover {
    transform: translateY(-2px);
}

.uxd-btn-primary {
    color: #fff;
    background: var(--uxd-blue);
    box-shadow: 0 7px 20px rgba(18, 104, 216, 0.16);
}

.uxd-btn-primary:hover {
    color: #fff;
    background: var(--uxd-navy);
}

.uxd-btn-primary span,
.uxd-btn-white span {
    font-size: 18px;
    line-height: 1;
}

.uxd-btn-outline {
    color: var(--uxd-navy);
    background: #fff;
    border-color: #d7e1ef;
}

.uxd-btn-outline:hover {
    color: var(--uxd-blue);
    border-color: var(--uxd-blue);
}

.uxd-hero-note {
    margin-top: 19px;
    color: #7c899d;
    font-size: 12px;
}

/* Hero design board */

.uxd-hero-visual {
    position: relative;
    min-width: 0;
    padding: 23px 14px 12px;
}

.uxd-visual-glow {
    position: absolute;
    inset: 12% 3% 10%;
    background: rgba(16, 167, 229, 0.14);
    filter: blur(45px);
    border-radius: 50%;
    pointer-events: none;
}

.uxd-design-board {
    position: relative;
    z-index: 1;
    overflow: visible;
    background: #fff;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    box-shadow: 0 24px 65px rgba(22, 53, 93, 0.13);
}

.uxd-board-top {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 49px;
    padding: 0 15px;
    color: #65738a;
    border-bottom: 1px solid #edf1f7;
    font-size: 11px;
    font-weight: 700;
}

.uxd-window-dots {
    display: flex;
    gap: 5px;
}

.uxd-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5a6a3;
}

.uxd-window-dots span:nth-child(2) {
    background: #f4c36d;
}

.uxd-window-dots span:nth-child(3) {
    background: #80cba5;
}

.uxd-live-label {
    margin-left: auto;
    color: #168b5c;
    font-size: 9px;
    letter-spacing: 0.3px;
}

.uxd-board-content {
    display: grid;
    grid-template-columns: 53px minmax(0, 1fr);
    min-height: 350px;
}

.uxd-mini-sidebar {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 19px;
    padding: 17px 0;
    background: #f8faff;
    border-right: 1px solid #edf1f7;
    border-radius: 0 0 0 15px;
}

.uxd-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 5px;
    color: #fff;
    background: linear-gradient(135deg, var(--uxd-blue), var(--uxd-cyan));
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
}

.uxd-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #8391a7;
    border-radius: 8px;
    font-size: 16px;
}

.uxd-sidebar-active {
    color: var(--uxd-blue);
    background: #e8f2ff;
}

.uxd-artboard {
    min-width: 0;
    padding: 21px 18px 18px;
}

.uxd-artboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.uxd-artboard-heading small {
    display: block;
    margin-bottom: 5px;
    color: #8a97aa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.uxd-artboard-heading h3 {
    margin: 0;
    color: var(--uxd-navy);
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.uxd-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    color: #fff;
    background: linear-gradient(135deg, #f28b1b, #ffc56b);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

.uxd-artboard-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 145px;
    overflow: hidden;
    padding: 18px;
    color: #fff;
    background: linear-gradient(120deg, #0b1e4a 0%, #135dbb 68%, #12a6df 100%);
    border-radius: 10px;
}

.uxd-artboard-banner > div:first-child {
    position: relative;
    z-index: 2;
}

.uxd-artboard-banner > div:first-child > span {
    color: #bfe7ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.uxd-artboard-banner h4 {
    margin: 9px 0 0;
    color: #fff;
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.uxd-banner-line {
    width: 38px;
    height: 3px;
    margin-top: 13px;
    background: var(--uxd-orange);
    border-radius: 3px;
}

.uxd-banner-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 105px;
    flex: 0 0 105px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 32% 68% 63% 37% / 37% 37% 63% 63%;
    transform: rotate(-14deg);
    background: rgba(255, 255, 255, 0.08);
}

.uxd-shape-inner {
    width: 65px;
    height: 65px;
    border: 10px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12);
}

.uxd-artboard-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 12px;
    color: var(--uxd-navy);
    font-size: 10px;
    font-weight: 800;
}

.uxd-artboard-label span:last-child {
    color: var(--uxd-blue);
    font-size: 9px;
}

.uxd-component-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.uxd-component-card {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 3px 9px;
    padding: 11px 9px;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 8px;
}

.uxd-component-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: span 2;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.uxd-icon-blue {
    color: #1268d8;
    background: #e9f2ff;
}

.uxd-icon-orange {
    color: #d8730d;
    background: #fff1df;
}

.uxd-component-card strong {
    color: var(--uxd-navy);
    font-size: 10px;
}

.uxd-component-card > span {
    color: #8a96a9;
    font-size: 8px;
}

.uxd-floating-tag {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    color: var(--uxd-navy);
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 9px;
    box-shadow: 0 10px 30px rgba(20, 48, 82, 0.12);
    font-size: 10px;
    font-weight: 800;
}

.uxd-tag-top {
    top: 3px;
    right: -1px;
}

.uxd-tag-bottom {
    bottom: 28px;
    left: -2px;
}

.uxd-tag-icon {
    color: var(--uxd-orange);
    font-size: 17px;
}

.uxd-tag-success {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: #07814d;
    background: #e2f8ed;
    border-radius: 50%;
    font-size: 11px;
}

.uxd-visual-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    color: #748198;
    font-size: 11px;
    font-weight: 600;
}

.uxd-caption-line {
    width: 25px;
    height: 2px;
    background: var(--uxd-orange);
}

/* Introduction */

.uxd-intro {
    padding: 55px 0 65px;
    background: #fff;
}

.uxd-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 60px;
    align-items: start;
}

.uxd-intro-heading h2,
.uxd-section-heading h2,
.uxd-industries-content h2,
.uxd-principles-content h2 {
    margin: 15px 0 0;
    color: var(--uxd-navy);
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.25;
    letter-spacing: -0.9px;
    font-weight: 800;
}

.uxd-intro-text p {
    margin: 0 0 14px;
    color: var(--uxd-muted);
    font-size: 14px;
    line-height: 1.9;
}

.uxd-intro-text p:last-child {
    margin-bottom: 0;
}

.uxd-benefit-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
    padding: 24px 20px;
    background: #f7faff;
    border: 1px solid #e7eef8;
    border-radius: 12px;
}

.uxd-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.uxd-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--uxd-blue);
    background: #e6f1ff;
    border-radius: 10px;
    font-size: 22px;
}

.uxd-benefit:nth-child(even) .uxd-benefit-icon {
    color: #dc790d;
    background: #fff0dc;
}

.uxd-benefit > div {
    display: grid;
    gap: 5px;
}

.uxd-benefit strong {
    color: var(--uxd-navy);
    font-size: 12px;
}

.uxd-benefit > div > span {
    color: var(--uxd-muted);
    font-size: 10px;
    line-height: 1.5;
}

/* Services */

.uxd-services {
    padding: 72px 0 78px;
    background: var(--uxd-light);
}

.uxd-section-heading {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.uxd-section-heading h2 {
    margin-top: 14px;
}

.uxd-section-heading > p {
    max-width: 630px;
    margin: 13px auto 0;
    color: var(--uxd-muted);
    font-size: 14px;
    line-height: 1.8;
}

.uxd-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.uxd-service-card {
    min-width: 0;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.uxd-service-card:hover {
    transform: translateY(-5px);
    border-color: #c7ddfb;
    box-shadow: 0 16px 38px rgba(19, 55, 101, 0.08);
}

.uxd-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    margin-bottom: 19px;
    border-radius: 12px;
    font-size: 25px;
    font-weight: 700;
}

.uxd-service-blue {
    color: #1268d8;
    background: #e9f2ff;
}

.uxd-service-cyan {
    color: #068ebd;
    background: #e2f8ff;
}

.uxd-service-orange {
    color: #d8780d;
    background: #fff1df;
}

.uxd-service-purple {
    color: #7651c9;
    background: #f0eaff;
}

.uxd-service-green {
    color: #128054;
    background: #e1f7ed;
}

.uxd-service-pink {
    color: #c04477;
    background: #ffebf3;
}

.uxd-service-card h3 {
    margin: 0 0 11px;
    color: var(--uxd-navy);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
}

.uxd-service-card > p {
    margin: 0 0 17px;
    color: var(--uxd-muted);
    font-size: 13px;
    line-height: 1.8;
}

.uxd-service-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #edf1f7;
    list-style: none;
}

.uxd-service-card li {
    position: relative;
    padding-left: 18px;
    color: #4e5d73;
    font-size: 12px;
    line-height: 1.6;
}

.uxd-service-card li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--uxd-blue);
    content: "✓";
    font-weight: 800;
}

/* Process */

.uxd-process {
    padding: 72px 0 76px;
    background: #fff;
}

.uxd-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.uxd-process-card {
    position: relative;
    min-width: 0;
    padding: 25px 21px 24px;
    background: #fff;
    border: 1px solid var(--uxd-border);
    border-radius: 12px;
}

.uxd-process-number {
    position: absolute;
    top: 19px;
    right: 19px;
    color: #dfe8f5;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -1px;
}

.uxd-process-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 22px;
    color: var(--uxd-blue);
    background: #eaf3ff;
    border-radius: 10px;
    font-size: 24px;
}

.uxd-process-card:nth-child(even) .uxd-process-symbol {
    color: #db790e;
    background: #fff1df;
}

.uxd-process-card h3 {
    margin: 0 0 10px;
    color: var(--uxd-navy);
    font-size: 17px;
    font-weight: 800;
}

.uxd-process-card p {
    margin: 0;
    color: var(--uxd-muted);
    font-size: 13px;
    line-height: 1.8;
}

/* Industry section */

.uxd-industries {
    padding: 70px 0;
    background: #f6f9fd;
}

.uxd-industries-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 55px;
}

.uxd-industries-content h2 {
    margin-bottom: 17px;
}

.uxd-industries-content > p {
    margin: 0;
    color: var(--uxd-muted);
    font-size: 14px;
    line-height: 1.9;
}

.uxd-text-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    color: var(--uxd-blue);
    font-size: 13px;
    font-weight: 800;
}

.uxd-text-link span {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.uxd-text-link:hover span {
    transform: translateX(4px);
}

.uxd-industry-list {
    display: grid;
    gap: 12px;
}

.uxd-industry-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 15px;
    padding: 19px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 10px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.uxd-industry-item:hover {
    border-color: #b9d5fa;
    transform: translateX(3px);
}

.uxd-industry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--uxd-blue);
    background: #eaf3ff;
    border-radius: 10px;
    font-size: 23px;
}

.uxd-industry-item:nth-child(even) .uxd-industry-icon {
    color: #d9780c;
    background: #fff1df;
}

.uxd-industry-item h3 {
    margin: 0 0 5px;
    color: var(--uxd-navy);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.uxd-industry-item p {
    margin: 0;
    color: var(--uxd-muted);
    font-size: 12px;
    line-height: 1.7;
}

.uxd-industry-arrow {
    color: var(--uxd-blue);
    font-size: 18px;
}

/* Design principles */

.uxd-principles {
    padding: 65px 0;
    background: #fff;
}

.uxd-principles-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 50px;
    padding: 42px;
    background: #f5f9ff;
    border: 1px solid #e2ebf8;
    border-radius: 16px;
}

.uxd-principles-content h2 {
    margin-bottom: 16px;
}

.uxd-principles-content > p {
    margin: 0;
    color: var(--uxd-muted);
    font-size: 14px;
    line-height: 1.9;
}

.uxd-principles-list {
    display: grid;
    gap: 17px;
    align-content: center;
}

.uxd-principles-list > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.uxd-principles-list > div > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: var(--uxd-blue);
    background: #e5f0ff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}

.uxd-principles-list p {
    margin: 5px 0 0;
    color: var(--uxd-muted);
    font-size: 13px;
    line-height: 1.7;
}

.uxd-principles-list strong {
    color: var(--uxd-navy);
}

/* CTA */

.uxd-cta {
    padding: 12px 0 75px;
    background: #fff;
}

.uxd-cta-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    align-items: center;
    gap: 35px;
    overflow: hidden;
    padding: 43px 44px;
    color: #fff;
    background: linear-gradient(115deg, #0b1735 0%, #103e82 65%, #087bb4 100%);
    border-radius: 16px;
}

.uxd-cta-panel::after {
    position: absolute;
    top: -105px;
    right: 15%;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.035),
                0 0 0 70px rgba(255, 255, 255, 0.025);
    content: "";
    pointer-events: none;
}

.uxd-cta-content,
.uxd-cta-actions {
    position: relative;
    z-index: 1;
}

.uxd-cta-eyebrow {
    color: #8bdcff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.uxd-cta-content h2 {
    max-width: 590px;
    margin: 13px 0 12px;
    color: #fff;
    font-size: clamp(26px, 3vw, 35px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.uxd-cta-content p {
    max-width: 590px;
    margin: 0;
    color: #d4e2f5;
    font-size: 13px;
    line-height: 1.8;
}

.uxd-cta-actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
}

.uxd-btn-white {
    color: var(--uxd-navy);
    background: #fff;
}

.uxd-btn-white:hover {
    color: var(--uxd-blue);
    background: #eef6ff;
}

.uxd-cta-actions > span {
    color: #c1d8f3;
    font-size: 11px;
    line-height: 1.6;
}

/* Responsive: tablets */

@media (max-width: 1024px) {
    .uxd-hero-grid {
        gap: 28px;
    }

    .uxd-hero-content h1 {
        font-size: clamp(34px, 4.2vw, 43px);
    }

    .uxd-hero-visual {
        padding-right: 8px;
        padding-left: 8px;
    }

    .uxd-board-content {
        min-height: 320px;
    }

    .uxd-artboard {
        padding: 17px 13px;
    }

    .uxd-banner-shape {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .uxd-shape-inner {
        width: 49px;
        height: 49px;
        border-width: 8px;
    }

    .uxd-benefit-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .uxd-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .uxd-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .uxd-intro-grid,
    .uxd-industries-grid {
        gap: 35px;
    }

    .uxd-principles-panel {
        gap: 30px;
        padding: 32px;
    }

    .uxd-cta-panel {
        padding: 35px;
        gap: 25px;
    }
}

/* Responsive: mobile */

@media (max-width: 767px) {
    .uxd-container {
        width: min(100% - 32px, 560px);
    }

    .uxd-breadcrumb {
        padding: 13px 0 5px;
        font-size: 12px;
    }

    .uxd-hero {
        padding: 20px 0 35px;
    }

    .uxd-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .uxd-hero-content {
        padding: 0;
    }

    .uxd-eyebrow {
        font-size: 11px;
    }

    .uxd-hero-content h1 {
        margin: 18px 0 14px;
        font-size: clamp(34px, 8.5vw, 44px);
        letter-spacing: -1.1px;
    }

    .uxd-hero-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .uxd-hero-points {
        gap: 12px;
        margin-top: 20px;
    }

    .uxd-hero-points > div {
        align-items: flex-start;
        font-size: 12px;
        line-height: 1.55;
    }

    .uxd-check {
        margin-top: 1px;
    }

    .uxd-hero-actions {
        gap: 10px;
        margin-top: 23px;
    }

    .uxd-btn {
        min-height: 45px;
        padding: 12px 14px;
        font-size: 12px;
    }

    .uxd-hero-note {
        margin-top: 14px;
        line-height: 1.6;
    }

    .uxd-hero-visual {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 16px 7px 8px;
    }

    .uxd-board-content {
        grid-template-columns: 43px minmax(0, 1fr);
        min-height: 0;
    }

    .uxd-mini-sidebar {
        gap: 15px;
        padding-top: 15px;
    }

    .uxd-sidebar-item {
        width: 27px;
        height: 27px;
    }

    .uxd-artboard {
        padding: 16px 11px;
    }

    .uxd-artboard-heading {
        margin-bottom: 14px;
    }

    .uxd-artboard-heading h3 {
        font-size: 16px;
    }

    .uxd-artboard-banner {
        min-height: 120px;
        padding: 13px;
    }

    .uxd-artboard-banner h4 {
        font-size: 17px;
    }

    .uxd-banner-shape {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .uxd-shape-inner {
        width: 38px;
        height: 38px;
        border-width: 6px;
    }

    .uxd-component-card {
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 3px 6px;
        padding: 9px 6px;
    }

    .uxd-component-icon {
        width: 27px;
        height: 27px;
    }

    .uxd-component-card strong {
        font-size: 9px;
    }

    .uxd-component-card > span {
        font-size: 7px;
    }

    .uxd-floating-tag {
        padding: 9px 10px;
        font-size: 9px;
    }

    .uxd-tag-top {
        right: -3px;
    }

    .uxd-tag-bottom {
        bottom: 23px;
        left: -3px;
    }

    .uxd-visual-caption {
        margin-top: 14px;
        font-size: 10px;
    }

    .uxd-intro,
    .uxd-services,
    .uxd-process,
    .uxd-industries,
    .uxd-principles {
        padding: 48px 0;
    }

    .uxd-intro-grid,
    .uxd-industries-grid,
    .uxd-principles-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .uxd-intro-heading h2,
    .uxd-section-heading h2,
    .uxd-industries-content h2,
    .uxd-principles-content h2 {
        font-size: 29px;
    }

    .uxd-intro-text p,
    .uxd-industries-content > p,
    .uxd-principles-content > p {
        font-size: 13px;
        line-height: 1.85;
    }

    .uxd-benefit-strip {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
        margin-top: 26px;
        padding: 21px 17px;
    }

    .uxd-benefit strong {
        font-size: 12px;
    }

    .uxd-benefit > div > span {
        font-size: 11px;
    }

    .uxd-section-heading {
        margin-bottom: 27px;
        text-align: left;
    }

    .uxd-section-heading > p {
        margin-left: 0;
        font-size: 13px;
    }

    .uxd-services-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .uxd-service-card {
        padding: 22px 20px;
    }

    .uxd-service-card h3 {
        font-size: 17px;
    }

    .uxd-service-card > p {
        font-size: 13px;
    }

    .uxd-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .uxd-process-card {
        padding: 22px 20px;
    }

    .uxd-process-card p {
        font-size: 13px;
    }

    .uxd-industry-item {
        grid-template-columns: 40px minmax(0, 1fr) 15px;
        gap: 11px;
        padding: 15px 12px;
    }

    .uxd-industry-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .uxd-industry-item h3 {
        font-size: 13px;
    }

    .uxd-industry-item p {
        font-size: 11px;
    }

    .uxd-principles-panel {
        padding: 25px 20px;
    }

    .uxd-principles-list {
        gap: 15px;
    }

    .uxd-principles-list p {
        font-size: 12px;
    }

    .uxd-cta {
        padding: 0 0 48px;
    }

    .uxd-cta-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 23px;
        padding: 28px 22px;
        border-radius: 12px;
    }

    .uxd-cta-content h2 {
        font-size: 27px;
    }

    .uxd-cta-content p {
        font-size: 13px;
    }

    .uxd-cta-actions {
        gap: 11px;
    }
}

/* Small mobile screens */

@media (max-width: 380px) {
    .uxd-container {
        width: calc(100% - 26px);
    }

    .uxd-hero-content h1 {
        font-size: 32px;
    }

    .uxd-hero-points {
        grid-template-columns: minmax(0, 1fr);
    }

    .uxd-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .uxd-btn {
        width: 100%;
    }

    .uxd-board-top {
        gap: 8px;
        padding: 0 10px;
    }

    .uxd-live-label {
        font-size: 8px;
    }

    .uxd-artboard-banner {
        gap: 6px;
        padding: 10px;
    }

    .uxd-banner-shape {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .uxd-shape-inner {
        width: 29px;
        height: 29px;
        border-width: 5px;
    }

    .uxd-artboard-banner h4 {
        font-size: 15px;
    }

    .uxd-floating-tag {
        font-size: 8px;
    }

    .uxd-cta-panel {
        padding: 25px 17px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .uxd-page *,
    .uxd-page *::before,
    .uxd-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}



/* ==========================================
   IT CONSULTING PAGE
   Prefix: itc-
   ========================================== */

.itc-page {
    --itc-navy: #0b1735;
    --itc-blue: #1268d8;
    --itc-cyan: #10a7e5;
    --itc-orange: #f28b1b;
    --itc-text: #26334a;
    --itc-muted: #68758a;
    --itc-light: #f5f8fc;
    --itc-border: #e3eaf3;

    color: var(--itc-text);
    background: #fff;
    font-family: inherit;
    overflow: hidden;
}

.itc-page *,
.itc-page *::before,
.itc-page *::after {
    box-sizing: border-box;
}

.itc-page a {
    text-decoration: none;
}

.itc-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* Breadcrumb */

.itc-breadcrumb {
    padding: 16px 0 8px;
    color: var(--itc-muted);
    font-size: 13px;
}

.itc-breadcrumb .itc-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.itc-breadcrumb a {
    color: var(--itc-blue);
}

.itc-breadcrumb a:hover {
    color: var(--itc-orange);
}

/* Shared labels */

.itc-eyebrow,
.itc-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--itc-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.itc-eyebrow {
    padding: 9px 13px;
    background: #eef6ff;
    border: 1px solid #dbeaff;
    border-radius: 30px;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: none;
}

.itc-eyebrow-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: var(--itc-orange);
    border-radius: 50%;
}

/* Hero */

.itc-hero {
    padding: 15px 0 48px;
    background:
        radial-gradient(ellipse at 85% 20%, rgba(16, 167, 229, 0.09), transparent 38%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.itc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 46px;
}

.itc-hero-content {
    min-width: 0;
    padding: 10px 0;
}

.itc-hero-content h1 {
    margin: 23px 0 18px;
    color: var(--itc-navy);
    font-size: clamp(35px, 4vw, 51px);
    line-height: 1.13;
    font-weight: 800;
    letter-spacing: -1.6px;
}

.itc-hero-content h1 span,
.itc-intro-heading h2 span,
.itc-section-heading h2 span,
.itc-industries-content h2 span,
.itc-deliverables-content h2 span {
    color: var(--itc-blue);
}

.itc-hero-content > p {
    max-width: 570px;
    margin: 0;
    color: var(--itc-muted);
    font-size: 15px;
    line-height: 1.85;
}

.itc-hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 18px;
    margin-top: 24px;
}

.itc-hero-points > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--itc-text);
    font-size: 13px;
    font-weight: 600;
}

.itc-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    color: #087b4b;
    background: #e4f8ed;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.itc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.itc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 48px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease;
}

.itc-btn:hover {
    transform: translateY(-2px);
}

.itc-btn-primary {
    color: #fff;
    background: var(--itc-blue);
    box-shadow: 0 7px 20px rgba(18, 104, 216, 0.16);
}

.itc-btn-primary:hover {
    color: #fff;
    background: var(--itc-navy);
}

.itc-btn-primary span,
.itc-btn-white span {
    font-size: 18px;
    line-height: 1;
}

.itc-btn-outline {
    color: var(--itc-navy);
    background: #fff;
    border-color: #d7e1ef;
}

.itc-btn-outline:hover {
    color: var(--itc-blue);
    border-color: var(--itc-blue);
}

.itc-hero-note {
    margin-top: 19px;
    color: #7c899d;
    font-size: 12px;
    line-height: 1.6;
}

/* Hero dashboard */

.itc-hero-visual {
    position: relative;
    min-width: 0;
    padding: 23px 14px 12px;
}

.itc-visual-glow {
    position: absolute;
    inset: 12% 3% 10%;
    background: rgba(16, 167, 229, 0.14);
    filter: blur(45px);
    border-radius: 50%;
    pointer-events: none;
}

.itc-dashboard {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    box-shadow: 0 24px 65px rgba(22, 53, 93, 0.13);
}

.itc-dashboard-top {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 49px;
    padding: 0 15px;
    color: #65738a;
    border-bottom: 1px solid #edf1f7;
    font-size: 11px;
    font-weight: 700;
}

.itc-window-dots {
    display: flex;
    gap: 5px;
}

.itc-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5a6a3;
}

.itc-window-dots span:nth-child(2) {
    background: #f4c36d;
}

.itc-window-dots span:nth-child(3) {
    background: #80cba5;
}

.itc-status {
    margin-left: auto;
    color: #168b5c;
    font-size: 9px;
}

.itc-dashboard-body {
    padding: 22px 20px 21px;
}

.itc-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 19px;
}

.itc-dashboard-heading small {
    display: block;
    margin-bottom: 6px;
    color: #8a97aa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.itc-dashboard-heading h3 {
    margin: 0;
    color: var(--itc-navy);
    font-size: clamp(16px, 1.8vw, 21px);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.itc-heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: var(--itc-blue);
    background: #eaf3ff;
    border-radius: 10px;
    font-size: 21px;
}

.itc-health-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 154px;
    overflow: hidden;
    padding: 19px;
    color: #fff;
    background: linear-gradient(120deg, #0b1e4a 0%, #135dbb 68%, #12a6df 100%);
    border-radius: 11px;
}

.itc-health-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.itc-health-copy > span {
    display: block;
    margin-bottom: 10px;
    color: #bfe7ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.itc-health-copy > strong {
    display: block;
    color: #fff;
    font-size: clamp(16px, 2vw, 23px);
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.itc-health-copy p {
    margin: 11px 0 0;
    color: #d3eaff;
    font-size: 10px;
}

.itc-health-graphic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 115px;
    height: 115px;
    flex: 0 0 115px;
}

.itc-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
}

.itc-orbit-one {
    width: 100px;
    height: 100px;
}

.itc-orbit-two {
    width: 72px;
    height: 72px;
    border-style: dashed;
    transform: rotate(35deg);
}

.itc-orbit-core {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(255, 255, 255, 0.17);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
}

.itc-orbit-dot {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: var(--itc-orange);
    border: 2px solid #fff;
    border-radius: 50%;
}

.itc-metrics-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 19px 0 12px;
}

.itc-metrics-heading strong {
    color: var(--itc-navy);
    font-size: 11px;
}

.itc-metrics-heading span {
    color: #8a96a9;
    font-size: 9px;
}

.itc-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.itc-metric {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px;
    border: 1px solid #e8edf5;
    border-radius: 9px;
}

.itc-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 800;
}

.itc-metric-blue {
    color: #1268d8;
    background: #e9f2ff;
}

.itc-metric-orange {
    color: #d8730d;
    background: #fff1df;
}

.itc-metric-cyan {
    color: #068ebd;
    background: #e2f8ff;
}

.itc-metric-green {
    color: #128054;
    background: #e1f7ed;
}

.itc-metric > div:last-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.itc-metric strong {
    color: var(--itc-navy);
    font-size: 10px;
}

.itc-metric > div > span {
    color: #8a96a9;
    font-size: 8px;
}

.itc-roadmap {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 23px;
    padding: 0 3px;
}

.itc-roadmap-line {
    position: absolute;
    top: 13px;
    right: 11%;
    left: 11%;
    height: 2px;
    background: #e3ebf6;
}

.itc-roadmap-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
}

.itc-roadmap-step > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    color: var(--itc-blue);
    background: #e9f2ff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #dce8f8;
    font-size: 10px;
    font-weight: 800;
}

.itc-roadmap-step:nth-of-type(3) > span {
    color: #fff;
    background: var(--itc-blue);
}

.itc-roadmap-step small {
    color: #68758a;
    font-size: 9px;
    font-weight: 700;
}

.itc-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    color: var(--itc-navy);
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 9px;
    box-shadow: 0 10px 30px rgba(20, 48, 82, 0.12);
    font-size: 10px;
    font-weight: 800;
}

.itc-floating-top {
    top: 3px;
    right: -1px;
}

.itc-floating-bottom {
    bottom: 28px;
    left: -2px;
}

.itc-floating-icon {
    color: var(--itc-orange);
    font-size: 17px;
}

.itc-floating-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: #07814d;
    background: #e2f8ed;
    border-radius: 50%;
    font-size: 11px;
}

.itc-visual-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    color: #748198;
    font-size: 11px;
    font-weight: 600;
}

.itc-visual-caption > span {
    width: 25px;
    height: 2px;
    background: var(--itc-orange);
}

/* Introduction */

.itc-intro {
    padding: 55px 0 65px;
    background: #fff;
}

.itc-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 60px;
}

.itc-intro-heading h2,
.itc-section-heading h2,
.itc-industries-content h2,
.itc-deliverables-content h2 {
    margin: 15px 0 0;
    color: var(--itc-navy);
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.9px;
}

.itc-intro-copy p {
    margin: 0 0 14px;
    color: var(--itc-muted);
    font-size: 14px;
    line-height: 1.9;
}

.itc-intro-copy p:last-child {
    margin-bottom: 0;
}

.itc-benefit-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
    padding: 24px 20px;
    background: #f7faff;
    border: 1px solid #e7eef8;
    border-radius: 12px;
}

.itc-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.itc-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--itc-blue);
    background: #e6f1ff;
    border-radius: 10px;
    font-size: 22px;
}

.itc-benefit:nth-child(even) .itc-benefit-icon {
    color: #dc790d;
    background: #fff0dc;
}

.itc-benefit > div {
    display: grid;
    gap: 5px;
}

.itc-benefit strong {
    color: var(--itc-navy);
    font-size: 12px;
}

.itc-benefit > div > span {
    color: var(--itc-muted);
    font-size: 10px;
    line-height: 1.5;
}

/* Services */

.itc-services {
    padding: 72px 0 78px;
    background: var(--itc-light);
}

.itc-section-heading {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.itc-section-heading h2 {
    margin-top: 14px;
}

.itc-section-heading > p {
    max-width: 630px;
    margin: 13px auto 0;
    color: var(--itc-muted);
    font-size: 14px;
    line-height: 1.8;
}

.itc-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.itc-service-card {
    min-width: 0;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.itc-service-card:hover {
    transform: translateY(-5px);
    border-color: #c7ddfb;
    box-shadow: 0 16px 38px rgba(19, 55, 101, 0.08);
}

.itc-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    margin-bottom: 19px;
    border-radius: 12px;
    font-size: 25px;
    font-weight: 700;
}

.itc-icon-blue {
    color: #1268d8;
    background: #e9f2ff;
}

.itc-icon-cyan {
    color: #068ebd;
    background: #e2f8ff;
}

.itc-icon-orange {
    color: #d8780d;
    background: #fff1df;
}

.itc-icon-purple {
    color: #7651c9;
    background: #f0eaff;
}

.itc-icon-green {
    color: #128054;
    background: #e1f7ed;
}

.itc-icon-pink {
    color: #c04477;
    background: #ffebf3;
}

.itc-icon-indigo {
    color: #485cc5;
    background: #e9edff;
}

.itc-icon-teal {
    color: #087d80;
    background: #e0f7f5;
}

.itc-icon-red {
    color: #c64b4b;
    background: #ffebeb;
}

.itc-service-card h3 {
    margin: 0 0 11px;
    color: var(--itc-navy);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
}

.itc-service-card > p {
    margin: 0 0 17px;
    color: var(--itc-muted);
    font-size: 13px;
    line-height: 1.8;
}

.itc-service-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #edf1f7;
    list-style: none;
}

.itc-service-card li {
    position: relative;
    padding-left: 18px;
    color: #4e5d73;
    font-size: 12px;
    line-height: 1.6;
}

.itc-service-card li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--itc-blue);
    content: "✓";
    font-weight: 800;
}

/* Process */

.itc-process {
    padding: 72px 0 76px;
    background: #fff;
}

.itc-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.itc-process-card {
    position: relative;
    min-width: 0;
    padding: 25px 21px 24px;
    background: #fff;
    border: 1px solid var(--itc-border);
    border-radius: 12px;
}

.itc-process-number {
    position: absolute;
    top: 19px;
    right: 19px;
    color: #dfe8f5;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -1px;
}

.itc-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 22px;
    color: var(--itc-blue);
    background: #eaf3ff;
    border-radius: 10px;
    font-size: 24px;
}

.itc-process-card:nth-child(even) .itc-process-icon {
    color: #db790e;
    background: #fff1df;
}

.itc-process-card h3 {
    margin: 0 0 10px;
    color: var(--itc-navy);
    font-size: 17px;
    font-weight: 800;
}

.itc-process-card p {
    margin: 0;
    color: var(--itc-muted);
    font-size: 13px;
    line-height: 1.8;
}

/* Industries */

.itc-industries {
    padding: 70px 0;
    background: #f6f9fd;
}

.itc-industries-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 55px;
}

.itc-industries-content h2 {
    margin-bottom: 17px;
}

.itc-industries-content > p {
    margin: 0;
    color: var(--itc-muted);
    font-size: 14px;
    line-height: 1.9;
}

.itc-text-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    color: var(--itc-blue);
    font-size: 13px;
    font-weight: 800;
}

.itc-text-link span {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.itc-text-link:hover span {
    transform: translateX(4px);
}

.itc-industry-list {
    display: grid;
    gap: 12px;
}

.itc-industry-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 15px;
    padding: 19px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 10px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.itc-industry-item:hover {
    border-color: #b9d5fa;
    transform: translateX(3px);
}

.itc-industry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--itc-blue);
    background: #eaf3ff;
    border-radius: 10px;
    font-size: 23px;
}

.itc-industry-item:nth-child(even) .itc-industry-icon {
    color: #d9780c;
    background: #fff1df;
}

.itc-industry-item h3 {
    margin: 0 0 5px;
    color: var(--itc-navy);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.itc-industry-item p {
    margin: 0;
    color: var(--itc-muted);
    font-size: 12px;
    line-height: 1.7;
}

.itc-industry-arrow {
    color: var(--itc-blue);
    font-size: 18px;
}

/* Deliverables */

.itc-deliverables {
    padding: 65px 0;
    background: #fff;
}

.itc-deliverables-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 50px;
    padding: 42px;
    background: #f5f9ff;
    border: 1px solid #e2ebf8;
    border-radius: 16px;
}

.itc-deliverables-content h2 {
    margin-bottom: 16px;
}

.itc-deliverables-content > p {
    margin: 0;
    color: var(--itc-muted);
    font-size: 14px;
    line-height: 1.9;
}

.itc-deliverables-list {
    display: grid;
    gap: 17px;
    align-content: center;
}

.itc-deliverables-list > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.itc-deliverables-list > div > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: var(--itc-blue);
    background: #e5f0ff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}

.itc-deliverables-list p {
    margin: 5px 0 0;
    color: var(--itc-muted);
    font-size: 13px;
    line-height: 1.7;
}

.itc-deliverables-list strong {
    color: var(--itc-navy);
}

/* CTA */

.itc-cta {
    padding: 12px 0 75px;
    background: #fff;
}

.itc-cta-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    align-items: center;
    gap: 35px;
    overflow: hidden;
    padding: 43px 44px;
    color: #fff;
    background: linear-gradient(115deg, #0b1735 0%, #103e82 65%, #087bb4 100%);
    border-radius: 16px;
}

.itc-cta-panel::after {
    position: absolute;
    top: -105px;
    right: 15%;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.035),
                0 0 0 70px rgba(255, 255, 255, 0.025);
    content: "";
    pointer-events: none;
}

.itc-cta-content,
.itc-cta-actions {
    position: relative;
    z-index: 1;
}

.itc-cta-eyebrow {
    color: #8bdcff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.itc-cta-content h2 {
    max-width: 590px;
    margin: 13px 0 12px;
    color: #fff;
    font-size: clamp(26px, 3vw, 35px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.itc-cta-content p {
    max-width: 590px;
    margin: 0;
    color: #d4e2f5;
    font-size: 13px;
    line-height: 1.8;
}

.itc-cta-actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
}

.itc-btn-white {
    color: var(--itc-navy);
    background: #fff;
}

.itc-btn-white:hover {
    color: var(--itc-blue);
    background: #eef6ff;
}

.itc-cta-actions > span {
    color: #c1d8f3;
    font-size: 11px;
    line-height: 1.6;
}

/* Tablet */

@media (max-width: 1024px) {
    .itc-hero-grid {
        gap: 28px;
    }

    .itc-hero-content h1 {
        font-size: clamp(34px, 4.2vw, 43px);
    }

    .itc-hero-visual {
        padding-right: 8px;
        padding-left: 8px;
    }

    .itc-health-graphic {
        width: 85px;
        height: 85px;
        flex-basis: 85px;
    }

    .itc-orbit-one {
        width: 78px;
        height: 78px;
    }

    .itc-orbit-two {
        width: 56px;
        height: 56px;
    }

    .itc-orbit-core {
        width: 35px;
        height: 35px;
    }

    .itc-benefit-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .itc-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .itc-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .itc-intro-grid,
    .itc-industries-grid {
        gap: 35px;
    }

    .itc-deliverables-panel {
        gap: 30px;
        padding: 32px;
    }

    .itc-cta-panel {
        padding: 35px;
        gap: 25px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .itc-container {
        width: min(100% - 32px, 560px);
    }

    .itc-breadcrumb {
        padding: 13px 0 5px;
        font-size: 12px;
    }

    .itc-hero {
        padding: 20px 0 35px;
    }

    .itc-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .itc-hero-content {
        padding: 0;
    }

    .itc-eyebrow {
        font-size: 11px;
    }

    .itc-hero-content h1 {
        margin: 18px 0 14px;
        font-size: clamp(34px, 8.5vw, 44px);
        letter-spacing: -1.1px;
    }

    .itc-hero-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .itc-hero-points {
        gap: 12px;
        margin-top: 20px;
    }

    .itc-hero-points > div {
        align-items: flex-start;
        font-size: 12px;
        line-height: 1.55;
    }

    .itc-check {
        margin-top: 1px;
    }

    .itc-hero-actions {
        gap: 10px;
        margin-top: 23px;
    }

    .itc-btn {
        min-height: 45px;
        padding: 12px 14px;
        font-size: 12px;
    }

    .itc-hero-note {
        margin-top: 14px;
    }

    .itc-hero-visual {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 16px 7px 8px;
    }

    .itc-dashboard-body {
        padding: 16px 11px;
    }

    .itc-dashboard-heading {
        margin-bottom: 14px;
    }

    .itc-dashboard-heading h3 {
        font-size: 16px;
    }

    .itc-health-card {
        min-height: 130px;
        padding: 13px;
    }

    .itc-health-copy > strong {
        font-size: 17px;
    }

    .itc-health-graphic {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
    }

    .itc-orbit-one {
        width: 62px;
        height: 62px;
    }

    .itc-orbit-two {
        width: 45px;
        height: 45px;
    }

    .itc-orbit-core {
        width: 29px;
        height: 29px;
        font-size: 11px;
    }

    .itc-orbit-dot {
        top: 3px;
        right: 4px;
    }

    .itc-metric {
        gap: 7px;
        padding: 9px 7px;
    }

    .itc-metric-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 14px;
    }

    .itc-metric strong {
        font-size: 9px;
    }

    .itc-metric > div > span {
        font-size: 7px;
    }

    .itc-floating-card {
        padding: 9px 10px;
        font-size: 9px;
    }

    .itc-floating-top {
        right: -3px;
    }

    .itc-floating-bottom {
        bottom: 23px;
        left: -3px;
    }

    .itc-visual-caption {
        margin-top: 14px;
        font-size: 10px;
    }

    .itc-intro,
    .itc-services,
    .itc-process,
    .itc-industries,
    .itc-deliverables {
        padding: 48px 0;
    }

    .itc-intro-grid,
    .itc-industries-grid,
    .itc-deliverables-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .itc-intro-heading h2,
    .itc-section-heading h2,
    .itc-industries-content h2,
    .itc-deliverables-content h2 {
        font-size: 29px;
    }

    .itc-intro-copy p,
    .itc-industries-content > p,
    .itc-deliverables-content > p {
        font-size: 13px;
        line-height: 1.85;
    }

    .itc-benefit-strip {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
        margin-top: 26px;
        padding: 21px 17px;
    }

    .itc-benefit > div > span {
        font-size: 11px;
    }

    .itc-section-heading {
        margin-bottom: 27px;
        text-align: left;
    }

    .itc-section-heading > p {
        margin-left: 0;
        font-size: 13px;
    }

    .itc-services-grid,
    .itc-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .itc-service-card {
        padding: 22px 20px;
    }

    .itc-service-card h3 {
        font-size: 17px;
    }

    .itc-service-card > p,
    .itc-process-card p {
        font-size: 13px;
    }

    .itc-process-card {
        padding: 22px 20px;
    }

    .itc-industry-item {
        grid-template-columns: 40px minmax(0, 1fr) 15px;
        gap: 11px;
        padding: 15px 12px;
    }

    .itc-industry-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .itc-industry-item h3 {
        font-size: 13px;
    }

    .itc-industry-item p {
        font-size: 11px;
    }

    .itc-deliverables-panel {
        padding: 25px 20px;
    }

    .itc-deliverables-list {
        gap: 15px;
    }

    .itc-deliverables-list p {
        font-size: 12px;
    }

    .itc-cta {
        padding: 0 0 48px;
    }

    .itc-cta-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 23px;
        padding: 28px 22px;
        border-radius: 12px;
    }

    .itc-cta-content h2 {
        font-size: 27px;
    }

    .itc-cta-content p {
        font-size: 13px;
    }

    .itc-cta-actions {
        gap: 11px;
    }
}

/* Small mobile screens */

@media (max-width: 380px) {
    .itc-container {
        width: calc(100% - 26px);
    }

    .itc-hero-content h1 {
        font-size: 32px;
    }

    .itc-hero-points {
        grid-template-columns: minmax(0, 1fr);
    }

    .itc-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .itc-btn {
        width: 100%;
    }

    .itc-dashboard-top {
        gap: 8px;
        padding: 0 10px;
    }

    .itc-health-card {
        gap: 6px;
        padding: 10px;
    }

    .itc-health-copy > strong {
        font-size: 15px;
    }

    .itc-health-graphic {
        width: 53px;
        height: 53px;
        flex-basis: 53px;
    }

    .itc-orbit-one {
        width: 51px;
        height: 51px;
    }

    .itc-orbit-two {
        width: 37px;
        height: 37px;
    }

    .itc-orbit-core {
        width: 25px;
        height: 25px;
    }

    .itc-floating-card {
        font-size: 8px;
    }

    .itc-cta-panel {
        padding: 25px 17px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .itc-page *,
    .itc-page *::before,
    .itc-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}



/* ==========================================
   INTEGRATED UNIVERSITY MANAGEMENT SYSTEM
   Prefix: iums-
   ========================================== */

.iums-page {
    --iums-navy: #0b1735;
    --iums-blue: #1268d8;
    --iums-cyan: #10a7e5;
    --iums-orange: #f28b1b;
    --iums-text: #26334a;
    --iums-muted: #68758a;
    --iums-light: #f5f8fc;
    --iums-border: #e3eaf3;

    color: var(--iums-text);
    background: #fff;
    font-family: inherit;
    overflow: hidden;
}

.iums-page *,
.iums-page *::before,
.iums-page *::after {
    box-sizing: border-box;
}

.iums-page a {
    text-decoration: none;
}

.iums-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* Breadcrumb */

.iums-breadcrumb {
    padding: 16px 0 8px;
    color: var(--iums-muted);
    font-size: 13px;
}

.iums-breadcrumb .iums-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.iums-breadcrumb a {
    color: var(--iums-blue);
}

.iums-breadcrumb a:hover {
    color: var(--iums-orange);
}

/* Shared labels */

.iums-eyebrow,
.iums-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--iums-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.iums-eyebrow {
    padding: 9px 13px;
    background: #eef6ff;
    border: 1px solid #dbeaff;
    border-radius: 30px;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: none;
}

.iums-eyebrow-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: var(--iums-orange);
    border-radius: 50%;
}

/* Hero */

.iums-hero {
    padding: 15px 0 48px;
    background:
        radial-gradient(
            ellipse at 85% 20%,
            rgba(16, 167, 229, 0.09),
            transparent 38%
        ),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.iums-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 46px;
}

.iums-hero-content {
    min-width: 0;
    padding: 10px 0;
}

.iums-hero-content h1 {
    margin: 23px 0 18px;
    color: var(--iums-navy);
    font-size: clamp(35px, 4vw, 51px);
    line-height: 1.13;
    font-weight: 800;
    letter-spacing: -1.6px;
}

.iums-hero-content h1 span,
.iums-intro-heading h2 span,
.iums-section-heading h2 span,
.iums-benefits-content h2 span,
.iums-security-content h2 span {
    color: var(--iums-blue);
}

.iums-hero-content > p {
    max-width: 570px;
    margin: 0;
    color: var(--iums-muted);
    font-size: 15px;
    line-height: 1.85;
}

.iums-hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 18px;
    margin-top: 24px;
}

.iums-hero-points > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--iums-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
}

.iums-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    color: #087b4b;
    background: #e4f8ed;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.iums-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.iums-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 48px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.iums-btn:hover {
    transform: translateY(-2px);
}

.iums-btn-primary {
    color: #fff;
    background: var(--iums-blue);
    box-shadow: 0 7px 20px rgba(18, 104, 216, 0.16);
}

.iums-btn-primary:hover {
    color: #fff;
    background: var(--iums-navy);
}

.iums-btn-primary span,
.iums-btn-white span {
    font-size: 18px;
    line-height: 1;
}

.iums-btn-outline {
    color: var(--iums-navy);
    background: #fff;
    border-color: #d7e1ef;
}

.iums-btn-outline:hover {
    color: var(--iums-blue);
    border-color: var(--iums-blue);
}

.iums-hero-note {
    margin-top: 19px;
    color: #7c899d;
    font-size: 12px;
    line-height: 1.6;
}

/* Hero dashboard */

.iums-hero-visual {
    position: relative;
    min-width: 0;
    padding: 23px 14px 12px;
}

.iums-visual-glow {
    position: absolute;
    inset: 12% 3% 10%;
    background: rgba(16, 167, 229, 0.14);
    filter: blur(45px);
    border-radius: 50%;
    pointer-events: none;
}

.iums-dashboard {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    box-shadow: 0 24px 65px rgba(22, 53, 93, 0.13);
}

.iums-dashboard-top {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 49px;
    padding: 0 15px;
    color: #65738a;
    border-bottom: 1px solid #edf1f7;
    font-size: 11px;
    font-weight: 700;
}

.iums-window-dots {
    display: flex;
    gap: 5px;
}

.iums-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5a6a3;
}

.iums-window-dots span:nth-child(2) {
    background: #f4c36d;
}

.iums-window-dots span:nth-child(3) {
    background: #80cba5;
}

.iums-status {
    margin-left: auto;
    color: #168b5c;
    font-size: 9px;
}

.iums-dashboard-layout {
    display: grid;
    grid-template-columns: 53px minmax(0, 1fr);
}

.iums-sidebar {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 17px;
    padding: 17px 0;
    background: #f8faff;
    border-right: 1px solid #edf1f7;
    border-radius: 0 0 0 15px;
}

.iums-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    margin-bottom: 5px;
    color: #fff;
    background: linear-gradient(135deg, var(--iums-blue), var(--iums-cyan));
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
}

.iums-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #8391a7;
    border-radius: 8px;
    font-size: 16px;
}

.iums-sidebar-active {
    color: var(--iums-blue);
    background: #e8f2ff;
}

.iums-dashboard-content {
    min-width: 0;
    padding: 21px 18px 19px;
}

.iums-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px;
}

.iums-dashboard-heading small {
    display: block;
    margin-bottom: 5px;
    color: #8a97aa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.iums-dashboard-heading h3 {
    margin: 0;
    color: var(--iums-navy);
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.iums-admin-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    color: #fff;
    background: linear-gradient(135deg, #f28b1b, #ffc56b);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

.iums-welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 143px;
    overflow: hidden;
    padding: 17px;
    color: #fff;
    background: linear-gradient(
        120deg,
        #0b1e4a 0%,
        #135dbb 68%,
        #12a6df 100%
    );
    border-radius: 10px;
}

.iums-welcome-card > div:first-child {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.iums-welcome-card > div:first-child > span {
    color: #bfe7ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.iums-welcome-card h4 {
    margin: 9px 0;
    color: #fff;
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.iums-welcome-card p {
    margin: 0;
    color: #d3eaff;
    font-size: 9px;
    line-height: 1.6;
}

.iums-welcome-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
}

.iums-campus-building {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 68px;
    height: 52px;
    padding: 10px 8px;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 7px;
}

.iums-campus-building span {
    width: 10px;
    height: 23px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
}

.iums-campus-building span:nth-child(2) {
    height: 31px;
    background: #fff;
}

.iums-stats-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 12px;
}

.iums-stats-heading strong {
    color: var(--iums-navy);
    font-size: 11px;
}

.iums-stats-heading span {
    color: #8a96a9;
    font-size: 9px;
}

.iums-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.iums-stat-card {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #e8edf5;
    border-radius: 8px;
}

.iums-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
}

.iums-stat-blue {
    color: #1268d8;
    background: #e9f2ff;
}

.iums-stat-orange {
    color: #d8730d;
    background: #fff1df;
}

.iums-stat-cyan {
    color: #068ebd;
    background: #e2f8ff;
}

.iums-stat-green {
    color: #128054;
    background: #e1f7ed;
}

.iums-stat-card > div:last-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.iums-stat-card strong {
    color: var(--iums-navy);
    font-size: 10px;
}

.iums-stat-card > div > span {
    color: #8a96a9;
    font-size: 8px;
    line-height: 1.4;
}

.iums-workflow {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 23px;
    padding: 0 3px;
}

.iums-workflow-line {
    position: absolute;
    top: 13px;
    right: 10%;
    left: 10%;
    height: 2px;
    background: #e3ebf6;
}

.iums-workflow-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
}

.iums-workflow-step > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    color: var(--iums-blue);
    background: #e9f2ff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #dce8f8;
    font-size: 10px;
    font-weight: 800;
}

.iums-workflow-step:nth-child(3) > span {
    color: #fff;
    background: var(--iums-blue);
}

.iums-workflow-step small {
    color: #68758a;
    font-size: 9px;
    font-weight: 700;
}

.iums-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    color: var(--iums-navy);
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 9px;
    box-shadow: 0 10px 30px rgba(20, 48, 82, 0.12);
    font-size: 10px;
    font-weight: 800;
}

.iums-floating-top {
    top: 3px;
    right: -1px;
}

.iums-floating-bottom {
    bottom: 28px;
    left: -2px;
}

.iums-floating-icon {
    color: var(--iums-orange);
    font-size: 17px;
}

.iums-floating-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: #07814d;
    background: #e2f8ed;
    border-radius: 50%;
    font-size: 11px;
}

.iums-visual-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    color: #748198;
    font-size: 11px;
    font-weight: 600;
}

.iums-visual-caption > span {
    width: 25px;
    height: 2px;
    background: var(--iums-orange);
}

/* Introduction */

.iums-intro {
    padding: 55px 0 65px;
    background: #fff;
}

.iums-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 60px;
}

.iums-intro-heading h2,
.iums-section-heading h2,
.iums-benefits-content h2,
.iums-security-content h2 {
    margin: 15px 0 0;
    color: var(--iums-navy);
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.9px;
}

.iums-intro-copy p {
    margin: 0 0 14px;
    color: var(--iums-muted);
    font-size: 14px;
    line-height: 1.9;
}

.iums-intro-copy p:last-child {
    margin-bottom: 0;
}

.iums-benefit-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
    padding: 24px 20px;
    background: #f7faff;
    border: 1px solid #e7eef8;
    border-radius: 12px;
}

.iums-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.iums-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--iums-blue);
    background: #e6f1ff;
    border-radius: 10px;
    font-size: 22px;
}

.iums-benefit:nth-child(even) .iums-benefit-icon {
    color: #dc790d;
    background: #fff0dc;
}

.iums-benefit > div {
    display: grid;
    gap: 5px;
}

.iums-benefit strong {
    color: var(--iums-navy);
    font-size: 12px;
}

.iums-benefit > div > span {
    color: var(--iums-muted);
    font-size: 10px;
    line-height: 1.5;
}

/* Modules */

.iums-modules {
    padding: 72px 0 78px;
    background: var(--iums-light);
}

.iums-section-heading {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.iums-section-heading h2 {
    margin-top: 14px;
}

.iums-section-heading > p {
    max-width: 650px;
    margin: 13px auto 0;
    color: var(--iums-muted);
    font-size: 14px;
    line-height: 1.8;
}

.iums-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.iums-module-card {
    min-width: 0;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 12px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.iums-module-card:hover {
    transform: translateY(-5px);
    border-color: #c7ddfb;
    box-shadow: 0 16px 38px rgba(19, 55, 101, 0.08);
}

.iums-module-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    margin-bottom: 19px;
    border-radius: 12px;
    font-size: 25px;
    font-weight: 700;
}

.iums-icon-blue {
    color: #1268d8;
    background: #e9f2ff;
}

.iums-icon-cyan {
    color: #068ebd;
    background: #e2f8ff;
}

.iums-icon-orange {
    color: #d8780d;
    background: #fff1df;
}

.iums-icon-green {
    color: #128054;
    background: #e1f7ed;
}

.iums-icon-purple {
    color: #7651c9;
    background: #f0eaff;
}

.iums-icon-pink {
    color: #c04477;
    background: #ffebf3;
}

.iums-icon-indigo {
    color: #485cc5;
    background: #e9edff;
}

.iums-icon-teal {
    color: #087d80;
    background: #e0f7f5;
}

.iums-icon-red {
    color: #c64b4b;
    background: #ffebeb;
}

.iums-module-card h3 {
    margin: 0 0 11px;
    color: var(--iums-navy);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
}

.iums-module-card > p {
    margin: 0 0 17px;
    color: var(--iums-muted);
    font-size: 13px;
    line-height: 1.8;
}

.iums-module-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #edf1f7;
    list-style: none;
}

.iums-module-card li {
    position: relative;
    padding-left: 18px;
    color: #4e5d73;
    font-size: 12px;
    line-height: 1.6;
}

.iums-module-card li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--iums-blue);
    content: "✓";
    font-weight: 800;
}

.iums-modules-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 28px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #dce8f8;
    border-radius: 10px;
}

.iums-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    color: var(--iums-blue);
    background: #eaf3ff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}

.iums-modules-note p {
    margin: 2px 0 0;
    color: var(--iums-muted);
    font-size: 12px;
    line-height: 1.8;
}

.iums-modules-note strong {
    color: var(--iums-navy);
}

/* Student lifecycle */

.iums-lifecycle {
    padding: 72px 0 76px;
    background: #fff;
}

.iums-lifecycle-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.iums-lifecycle-step {
    position: relative;
    min-width: 0;
    padding: 24px 18px;
    background: #fff;
    border: 1px solid var(--iums-border);
    border-radius: 12px;
}

.iums-lifecycle-number {
    position: absolute;
    top: 17px;
    right: 16px;
    color: #dfe8f5;
    font-size: 24px;
    font-weight: 800;
}

.iums-lifecycle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 20px;
    color: var(--iums-blue);
    background: #eaf3ff;
    border-radius: 10px;
    font-size: 23px;
}

.iums-lifecycle-step:nth-child(even) .iums-lifecycle-icon {
    color: #d9780c;
    background: #fff1df;
}

.iums-lifecycle-step h3 {
    margin: 0 0 9px;
    color: var(--iums-navy);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
}

.iums-lifecycle-step p {
    margin: 0;
    color: var(--iums-muted);
    font-size: 12px;
    line-height: 1.8;
}

/* Institutional benefits */

.iums-benefits {
    padding: 70px 0;
    background: #f6f9fd;
}

.iums-benefits-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 55px;
}

.iums-benefits-content h2 {
    margin-bottom: 17px;
}

.iums-benefits-content > p {
    margin: 0;
    color: var(--iums-muted);
    font-size: 14px;
    line-height: 1.9;
}

.iums-text-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    color: var(--iums-blue);
    font-size: 13px;
    font-weight: 800;
}

.iums-text-link span {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.iums-text-link:hover span {
    transform: translateX(4px);
}

.iums-benefits-list {
    display: grid;
    gap: 13px;
}

.iums-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 10px;
}

.iums-benefit-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: #07814d;
    background: #e2f8ed;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}

.iums-benefit-item h3 {
    margin: 2px 0 6px;
    color: var(--iums-navy);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
}

.iums-benefit-item p {
    margin: 0;
    color: var(--iums-muted);
    font-size: 12px;
    line-height: 1.8;
}

/* Implementation */

.iums-implementation {
    padding: 72px 0 76px;
    background: #fff;
}

.iums-implementation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.iums-implementation-card {
    position: relative;
    min-width: 0;
    padding: 25px 21px;
    background: #fff;
    border: 1px solid var(--iums-border);
    border-radius: 12px;
}

.iums-implementation-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 21px;
    color: var(--iums-blue);
    background: #eaf3ff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

.iums-implementation-card:nth-child(even) .iums-implementation-number {
    color: #d9780c;
    background: #fff1df;
}

.iums-implementation-card h3 {
    margin: 0 0 10px;
    color: var(--iums-navy);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
}

.iums-implementation-card p {
    margin: 0;
    color: var(--iums-muted);
    font-size: 12px;
    line-height: 1.8;
}

/* Security and integration */

.iums-security {
    padding: 65px 0;
    background: #fff;
}

.iums-security-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 50px;
    padding: 42px;
    background: #f5f9ff;
    border: 1px solid #e2ebf8;
    border-radius: 16px;
}

.iums-security-content h2 {
    margin-bottom: 16px;
}

.iums-security-content > p {
    margin: 0;
    color: var(--iums-muted);
    font-size: 14px;
    line-height: 1.9;
}

.iums-security-points {
    display: grid;
    gap: 17px;
    align-content: center;
}

.iums-security-points > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.iums-security-points > div > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: var(--iums-blue);
    background: #e5f0ff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}

.iums-security-points p {
    margin: 5px 0 0;
    color: var(--iums-muted);
    font-size: 13px;
    line-height: 1.7;
}

.iums-security-points strong {
    color: var(--iums-navy);
}

/* CTA */

.iums-cta {
    padding: 12px 0 75px;
    background: #fff;
}

.iums-cta-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    align-items: center;
    gap: 35px;
    overflow: hidden;
    padding: 43px 44px;
    color: #fff;
    background: linear-gradient(
        115deg,
        #0b1735 0%,
        #103e82 65%,
        #087bb4 100%
    );
    border-radius: 16px;
}

.iums-cta-panel::after {
    position: absolute;
    top: -105px;
    right: 15%;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(255, 255, 255, 0.035),
        0 0 0 70px rgba(255, 255, 255, 0.025);
    content: "";
    pointer-events: none;
}

.iums-cta-content,
.iums-cta-actions {
    position: relative;
    z-index: 1;
}

.iums-cta-eyebrow {
    color: #8bdcff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.iums-cta-content h2 {
    max-width: 620px;
    margin: 13px 0 12px;
    color: #fff;
    font-size: clamp(26px, 3vw, 35px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.iums-cta-content p {
    max-width: 600px;
    margin: 0;
    color: #d4e2f5;
    font-size: 13px;
    line-height: 1.8;
}

.iums-cta-actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
}

.iums-btn-white {
    color: var(--iums-navy);
    background: #fff;
}

.iums-btn-white:hover {
    color: var(--iums-blue);
    background: #eef6ff;
}

.iums-cta-actions > span {
    color: #c1d8f3;
    font-size: 11px;
    line-height: 1.6;
}

/* Tablet */

@media (max-width: 1024px) {
    .iums-hero-grid {
        gap: 28px;
    }

    .iums-hero-content h1 {
        font-size: clamp(34px, 4.2vw, 43px);
    }

    .iums-hero-visual {
        padding-right: 8px;
        padding-left: 8px;
    }

    .iums-dashboard-content {
        padding: 17px 13px;
    }

    .iums-welcome-symbol {
        width: 75px;
        height: 75px;
        flex-basis: 75px;
    }

    .iums-campus-building {
        transform: scale(0.8);
    }

    .iums-benefit-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .iums-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .iums-lifecycle-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .iums-implementation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .iums-intro-grid,
    .iums-benefits-grid {
        gap: 35px;
    }

    .iums-security-panel {
        gap: 30px;
        padding: 32px;
    }

    .iums-cta-panel {
        padding: 35px;
        gap: 25px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .iums-container {
        width: min(100% - 32px, 560px);
    }

    .iums-breadcrumb {
        padding: 13px 0 5px;
        font-size: 12px;
    }

    .iums-hero {
        padding: 20px 0 35px;
    }

    .iums-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .iums-hero-content {
        padding: 0;
    }

    .iums-eyebrow {
        font-size: 11px;
    }

    .iums-hero-content h1 {
        margin: 18px 0 14px;
        font-size: clamp(34px, 8.5vw, 44px);
        letter-spacing: -1.1px;
    }

    .iums-hero-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .iums-hero-points {
        gap: 12px;
        margin-top: 20px;
    }

    .iums-hero-points > div {
        font-size: 12px;
    }

    .iums-hero-actions {
        gap: 10px;
        margin-top: 23px;
    }

    .iums-btn {
        min-height: 45px;
        padding: 12px 14px;
        font-size: 12px;
    }

    .iums-hero-note {
        margin-top: 14px;
    }

    .iums-hero-visual {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 16px 7px 8px;
    }

    .iums-dashboard-layout {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .iums-sidebar {
        gap: 15px;
        padding-top: 15px;
    }

    .iums-sidebar-item {
        width: 27px;
        height: 27px;
    }

    .iums-dashboard-content {
        padding: 16px 11px;
    }

    .iums-dashboard-heading {
        margin-bottom: 14px;
    }

    .iums-dashboard-heading h3 {
        font-size: 15px;
    }

    .iums-welcome-card {
        min-height: 125px;
        padding: 12px;
    }

    .iums-welcome-card h4 {
        font-size: 17px;
    }

    .iums-welcome-symbol {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .iums-campus-building {
        transform: scale(0.65);
    }

    .iums-stat-card {
        gap: 7px;
        padding: 8px 6px;
    }

    .iums-stat-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 14px;
    }

    .iums-stat-card strong {
        font-size: 9px;
    }

    .iums-stat-card > div > span {
        font-size: 7px;
    }

    .iums-floating-card {
        padding: 9px 10px;
        font-size: 9px;
    }

    .iums-floating-top {
        right: -3px;
    }

    .iums-floating-bottom {
        bottom: 23px;
        left: -3px;
    }

    .iums-visual-caption {
        margin-top: 14px;
        font-size: 10px;
    }

    .iums-intro,
    .iums-modules,
    .iums-lifecycle,
    .iums-benefits,
    .iums-implementation,
    .iums-security {
        padding: 48px 0;
    }

    .iums-intro-grid,
    .iums-benefits-grid,
    .iums-security-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .iums-intro-heading h2,
    .iums-section-heading h2,
    .iums-benefits-content h2,
    .iums-security-content h2 {
        font-size: 29px;
    }

    .iums-intro-copy p,
    .iums-benefits-content > p,
    .iums-security-content > p {
        font-size: 13px;
        line-height: 1.85;
    }

    .iums-benefit-strip {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
        margin-top: 26px;
        padding: 21px 17px;
    }

    .iums-benefit > div > span {
        font-size: 11px;
    }

    .iums-section-heading {
        margin-bottom: 27px;
        text-align: left;
    }

    .iums-section-heading > p {
        margin-left: 0;
        font-size: 13px;
    }

    .iums-modules-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .iums-module-card {
        padding: 22px 20px;
    }

    .iums-module-card h3 {
        font-size: 17px;
    }

    .iums-module-card > p {
        font-size: 13px;
    }

    .iums-modules-note {
        padding: 15px;
    }

    .iums-lifecycle-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .iums-lifecycle-step {
        padding: 20px 15px;
    }

    .iums-lifecycle-step h3 {
        font-size: 14px;
    }

    .iums-lifecycle-step p {
        font-size: 11px;
    }

    .iums-benefit-item {
        gap: 11px;
        padding: 15px;
    }

    .iums-benefit-item h3 {
        font-size: 13px;
    }

    .iums-benefit-item p {
        font-size: 12px;
    }

    .iums-implementation-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .iums-implementation-card {
        padding: 22px 20px;
    }

    .iums-implementation-card p {
        font-size: 13px;
    }

    .iums-security-panel {
        padding: 25px 20px;
    }

    .iums-security-points {
        gap: 15px;
    }

    .iums-security-points p {
        font-size: 12px;
    }

    .iums-cta {
        padding: 0 0 48px;
    }

    .iums-cta-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 23px;
        padding: 28px 22px;
        border-radius: 12px;
    }

    .iums-cta-content h2 {
        font-size: 27px;
    }

    .iums-cta-content p {
        font-size: 13px;
    }

    .iums-cta-actions {
        gap: 11px;
    }
}

/* Small mobile screens */

@media (max-width: 380px) {
    .iums-container {
        width: calc(100% - 26px);
    }

    .iums-hero-content h1 {
        font-size: 32px;
    }

    .iums-hero-points {
        grid-template-columns: minmax(0, 1fr);
    }

    .iums-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .iums-btn {
        width: 100%;
    }

    .iums-dashboard-top {
        gap: 8px;
        padding: 0 10px;
        font-size: 10px;
    }

    .iums-status {
        font-size: 8px;
    }

    .iums-welcome-card {
        gap: 5px;
        padding: 10px;
    }

    .iums-welcome-card h4 {
        font-size: 15px;
    }

    .iums-welcome-symbol {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

    .iums-campus-building {
        transform: scale(0.5);
    }

    .iums-floating-card {
        font-size: 8px;
    }

    .iums-lifecycle-track {
        grid-template-columns: minmax(0, 1fr);
    }

    .iums-lifecycle-step {
        padding: 20px;
    }

    .iums-cta-panel {
        padding: 25px 17px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .iums-page *,
    .iums-page *::before,
    .iums-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}



/* ==========================================
   SCHOOL MANAGEMENT SYSTEM PAGE
   Prefix: sms-
   ========================================== */

.sms-page {
    --sms-navy: #0b1735;
    --sms-blue: #1268d8;
    --sms-cyan: #10a7e5;
    --sms-orange: #f28b1b;
    --sms-text: #26334a;
    --sms-muted: #68758a;
    --sms-light: #f5f8fc;
    --sms-border: #e3eaf3;

    color: var(--sms-text);
    background: #fff;
    font-family: inherit;
    overflow: hidden;
}

.sms-page *,
.sms-page *::before,
.sms-page *::after {
    box-sizing: border-box;
}

.sms-page a {
    text-decoration: none;
}

.sms-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* Breadcrumb */

.sms-breadcrumb {
    padding: 16px 0 8px;
    color: var(--sms-muted);
    font-size: 13px;
}

.sms-breadcrumb .sms-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sms-breadcrumb a {
    color: var(--sms-blue);
}

.sms-breadcrumb a:hover {
    color: var(--sms-orange);
}

/* Shared labels */

.sms-eyebrow,
.sms-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--sms-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sms-eyebrow {
    padding: 9px 13px;
    background: #eef6ff;
    border: 1px solid #dbeaff;
    border-radius: 30px;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: none;
}

.sms-eyebrow-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: var(--sms-orange);
    border-radius: 50%;
}

/* Hero */

.sms-hero {
    padding: 15px 0 48px;
    background:
        radial-gradient(
            ellipse at 85% 20%,
            rgba(16, 167, 229, 0.09),
            transparent 38%
        ),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.sms-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 46px;
}

.sms-hero-content {
    min-width: 0;
    padding: 10px 0;
}

.sms-hero-content h1 {
    margin: 23px 0 18px;
    color: var(--sms-navy);
    font-size: clamp(35px, 4vw, 51px);
    line-height: 1.13;
    font-weight: 800;
    letter-spacing: -1.6px;
}

.sms-hero-content h1 span,
.sms-intro-heading h2 span,
.sms-section-heading h2 span,
.sms-stakeholders-content h2 span,
.sms-benefits-content h2 span,
.sms-security-content h2 span {
    color: var(--sms-blue);
}

.sms-hero-content > p {
    max-width: 570px;
    margin: 0;
    color: var(--sms-muted);
    font-size: 15px;
    line-height: 1.85;
}

.sms-hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 18px;
    margin-top: 24px;
}

.sms-hero-points > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--sms-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
}

.sms-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    color: #087b4b;
    background: #e4f8ed;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.sms-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.sms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 48px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.sms-btn:hover {
    transform: translateY(-2px);
}

.sms-btn-primary {
    color: #fff;
    background: var(--sms-blue);
    box-shadow: 0 7px 20px rgba(18, 104, 216, 0.16);
}

.sms-btn-primary:hover {
    color: #fff;
    background: var(--sms-navy);
}

.sms-btn-primary span,
.sms-btn-white span {
    font-size: 18px;
    line-height: 1;
}

.sms-btn-outline {
    color: var(--sms-navy);
    background: #fff;
    border-color: #d7e1ef;
}

.sms-btn-outline:hover {
    color: var(--sms-blue);
    border-color: var(--sms-blue);
}

.sms-hero-note {
    margin-top: 19px;
    color: #7c899d;
    font-size: 12px;
    line-height: 1.6;
}

/* Hero dashboard */

.sms-hero-visual {
    position: relative;
    min-width: 0;
    padding: 23px 14px 12px;
}

.sms-visual-glow {
    position: absolute;
    inset: 12% 3% 10%;
    background: rgba(16, 167, 229, 0.14);
    filter: blur(45px);
    border-radius: 50%;
    pointer-events: none;
}

.sms-dashboard {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    box-shadow: 0 24px 65px rgba(22, 53, 93, 0.13);
}

.sms-dashboard-top {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 49px;
    padding: 0 15px;
    color: #65738a;
    border-bottom: 1px solid #edf1f7;
    font-size: 11px;
    font-weight: 700;
}

.sms-window-dots {
    display: flex;
    gap: 5px;
}

.sms-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5a6a3;
}

.sms-window-dots span:nth-child(2) {
    background: #f4c36d;
}

.sms-window-dots span:nth-child(3) {
    background: #80cba5;
}

.sms-status {
    margin-left: auto;
    color: #168b5c;
    font-size: 9px;
}

.sms-dashboard-layout {
    display: grid;
    grid-template-columns: 53px minmax(0, 1fr);
}

.sms-sidebar {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 17px;
    padding: 17px 0;
    background: #f8faff;
    border-right: 1px solid #edf1f7;
    border-radius: 0 0 0 15px;
}

.sms-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    margin-bottom: 5px;
    color: #fff;
    background: linear-gradient(135deg, var(--sms-blue), var(--sms-cyan));
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
}

.sms-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #8391a7;
    border-radius: 8px;
    font-size: 16px;
}

.sms-sidebar-active {
    color: var(--sms-blue);
    background: #e8f2ff;
}

.sms-dashboard-content {
    min-width: 0;
    padding: 21px 18px 19px;
}

.sms-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px;
}

.sms-dashboard-heading small {
    display: block;
    margin-bottom: 5px;
    color: #8a97aa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sms-dashboard-heading h3 {
    margin: 0;
    color: var(--sms-navy);
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sms-admin-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    color: #fff;
    background: linear-gradient(135deg, #f28b1b, #ffc56b);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

/* Welcome card */

.sms-welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 143px;
    overflow: hidden;
    padding: 17px;
    color: #fff;
    background: linear-gradient(
        120deg,
        #0b1e4a 0%,
        #135dbb 68%,
        #12a6df 100%
    );
    border-radius: 10px;
}

.sms-welcome-card > div:first-child {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.sms-welcome-card > div:first-child > span {
    color: #bfe7ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.sms-welcome-card h4 {
    margin: 9px 0;
    color: #fff;
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sms-welcome-card p {
    margin: 0;
    color: #d3eaff;
    font-size: 9px;
    line-height: 1.6;
}

.sms-school-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
}

.sms-school-building {
    position: relative;
    width: 59px;
    padding-top: 9px;
}

.sms-school-roof {
    width: 0;
    height: 0;
    margin: 0 auto;
    border-right: 32px solid transparent;
    border-bottom: 17px solid rgba(255, 255, 255, 0.88);
    border-left: 32px solid transparent;
}

.sms-school-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 36px;
    padding: 7px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-top: 0;
}

.sms-school-body span {
    width: 9px;
    height: 17px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px 2px 0 0;
}

/* Dashboard statistics */

.sms-stats-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 12px;
}

.sms-stats-heading strong {
    color: var(--sms-navy);
    font-size: 11px;
}

.sms-stats-heading span {
    color: #8a96a9;
    font-size: 9px;
}

.sms-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sms-stat-card {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #e8edf5;
    border-radius: 8px;
}

.sms-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
}

.sms-stat-blue {
    color: #1268d8;
    background: #e9f2ff;
}

.sms-stat-orange {
    color: #d8730d;
    background: #fff1df;
}

.sms-stat-cyan {
    color: #068ebd;
    background: #e2f8ff;
}

.sms-stat-green {
    color: #128054;
    background: #e1f7ed;
}

.sms-stat-card > div:last-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.sms-stat-card strong {
    color: var(--sms-navy);
    font-size: 10px;
}

.sms-stat-card > div > span {
    color: #8a96a9;
    font-size: 8px;
    line-height: 1.4;
}

/* Workflow */

.sms-workflow {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 23px;
    padding: 0 3px;
}

.sms-workflow-line {
    position: absolute;
    top: 13px;
    right: 10%;
    left: 10%;
    height: 2px;
    background: #e3ebf6;
}

.sms-workflow-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
}

.sms-workflow-step > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    color: var(--sms-blue);
    background: #e9f2ff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #dce8f8;
    font-size: 10px;
    font-weight: 800;
}

.sms-workflow-step:nth-child(3) > span {
    color: #fff;
    background: var(--sms-blue);
}

.sms-workflow-step small {
    color: #68758a;
    font-size: 9px;
    font-weight: 700;
}

/* Floating dashboard cards */

.sms-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    color: var(--sms-navy);
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 9px;
    box-shadow: 0 10px 30px rgba(20, 48, 82, 0.12);
    font-size: 10px;
    font-weight: 800;
}

.sms-floating-top {
    top: 3px;
    right: -1px;
}

.sms-floating-bottom {
    bottom: 28px;
    left: -2px;
}

.sms-floating-icon {
    color: var(--sms-orange);
    font-size: 17px;
}

.sms-floating-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: #07814d;
    background: #e2f8ed;
    border-radius: 50%;
    font-size: 11px;
}

.sms-visual-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    color: #748198;
    font-size: 11px;
    font-weight: 600;
}

.sms-visual-caption > span {
    width: 25px;
    height: 2px;
    background: var(--sms-orange);
}

/* Introduction */

.sms-intro {
    padding: 55px 0 65px;
    background: #fff;
}

.sms-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 60px;
}

.sms-intro-heading h2,
.sms-section-heading h2,
.sms-benefits-content h2,
.sms-security-content h2 {
    margin: 15px 0 0;
    color: var(--sms-navy);
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.9px;
}

.sms-intro-copy p {
    margin: 0 0 14px;
    color: var(--sms-muted);
    font-size: 14px;
    line-height: 1.9;
}

.sms-intro-copy p:last-child {
    margin-bottom: 0;
}

/* Benefits strip */

.sms-benefit-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
    padding: 24px 20px;
    background: #f7faff;
    border: 1px solid #e7eef8;
    border-radius: 12px;
}

.sms-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sms-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--sms-blue);
    background: #e6f1ff;
    border-radius: 10px;
    font-size: 22px;
}

.sms-benefit:nth-child(even) .sms-benefit-icon {
    color: #dc790d;
    background: #fff0dc;
}

.sms-benefit > div {
    display: grid;
    gap: 5px;
}

.sms-benefit strong {
    color: var(--sms-navy);
    font-size: 12px;
}

.sms-benefit > div > span {
    color: var(--sms-muted);
    font-size: 10px;
    line-height: 1.5;
}

/* Modules */

.sms-modules {
    padding: 72px 0 78px;
    background: var(--sms-light);
}

.sms-section-heading {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.sms-section-heading h2 {
    margin-top: 14px;
}

.sms-section-heading > p {
    max-width: 650px;
    margin: 13px auto 0;
    color: var(--sms-muted);
    font-size: 14px;
    line-height: 1.8;
}

.sms-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.sms-module-card {
    min-width: 0;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 12px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.sms-module-card:hover {
    transform: translateY(-5px);
    border-color: #c7ddfb;
    box-shadow: 0 16px 38px rgba(19, 55, 101, 0.08);
}

.sms-module-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    margin-bottom: 19px;
    border-radius: 12px;
    font-size: 25px;
    font-weight: 700;
}

.sms-icon-blue {
    color: #1268d8;
    background: #e9f2ff;
}

.sms-icon-cyan {
    color: #068ebd;
    background: #e2f8ff;
}

.sms-icon-orange {
    color: #d8780d;
    background: #fff1df;
}

.sms-icon-green {
    color: #128054;
    background: #e1f7ed;
}

.sms-icon-purple {
    color: #7651c9;
    background: #f0eaff;
}

.sms-icon-pink {
    color: #c04477;
    background: #ffebf3;
}

.sms-icon-indigo {
    color: #485cc5;
    background: #e9edff;
}

.sms-icon-teal {
    color: #087d80;
    background: #e0f7f5;
}

.sms-icon-red {
    color: #c64b4b;
    background: #ffebeb;
}

.sms-module-card h3 {
    margin: 0 0 11px;
    color: var(--sms-navy);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
}

.sms-module-card > p {
    margin: 0 0 17px;
    color: var(--sms-muted);
    font-size: 13px;
    line-height: 1.8;
}

.sms-module-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #edf1f7;
    list-style: none;
}

.sms-module-card li {
    position: relative;
    padding-left: 18px;
    color: #4e5d73;
    font-size: 12px;
    line-height: 1.6;
}

.sms-module-card li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--sms-blue);
    content: "✓";
    font-weight: 800;
}

.sms-modules-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 28px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #dce8f8;
    border-radius: 10px;
}

.sms-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    color: var(--sms-blue);
    background: #eaf3ff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}

.sms-modules-note p {
    margin: 2px 0 0;
    color: var(--sms-muted);
    font-size: 12px;
    line-height: 1.8;
}

.sms-modules-note strong {
    color: var(--sms-navy);
}

/* Stakeholders */

.sms-stakeholders {
    padding: 72px 0 76px;
    background: #fff;
}

.sms-stakeholders-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.sms-stakeholder-card {
    min-width: 0;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid var(--sms-border);
    border-radius: 12px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.sms-stakeholder-card:hover {
    transform: translateY(-4px);
    border-color: #c7ddfb;
    box-shadow: 0 14px 30px rgba(19, 55, 101, 0.07);
}

.sms-stakeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-bottom: 18px;
    border-radius: 11px;
    font-size: 23px;
}

.sms-stakeholder-blue {
    color: #1268d8;
    background: #e9f2ff;
}

.sms-stakeholder-orange {
    color: #d8780d;
    background: #fff1df;
}

.sms-stakeholder-green {
    color: #128054;
    background: #e1f7ed;
}

.sms-stakeholder-purple {
    color: #7651c9;
    background: #f0eaff;
}

.sms-stakeholder-card h3 {
    margin: 0 0 10px;
    color: var(--sms-navy);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
}

.sms-stakeholder-card > p {
    margin: 0 0 16px;
    color: var(--sms-muted);
    font-size: 12px;
    line-height: 1.8;
}

.sms-stakeholder-card ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 15px 0 0;
    border-top: 1px solid #edf1f7;
    list-style: none;
}

.sms-stakeholder-card li {
    position: relative;
    padding-left: 16px;
    color: #4e5d73;
    font-size: 11px;
    line-height: 1.6;
}

.sms-stakeholder-card li::before {
    position: absolute;
    left: 0;
    color: var(--sms-blue);
    content: "✓";
    font-weight: 800;
}

/* Implementation */

.sms-implementation {
    padding: 72px 0 76px;
    background: #f6f9fd;
}

.sms-implementation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.sms-implementation-card {
    min-width: 0;
    padding: 25px 21px;
    background: #fff;
    border: 1px solid var(--sms-border);
    border-radius: 12px;
}

.sms-implementation-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 21px;
    color: var(--sms-blue);
    background: #eaf3ff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

.sms-implementation-card:nth-child(even) .sms-implementation-number {
    color: #d9780c;
    background: #fff1df;
}

.sms-implementation-card h3 {
    margin: 0 0 10px;
    color: var(--sms-navy);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
}

.sms-implementation-card p {
    margin: 0;
    color: var(--sms-muted);
    font-size: 12px;
    line-height: 1.8;
}

/* Security */

.sms-security {
    padding: 65px 0;
    background: #fff;
}

.sms-security-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 50px;
    padding: 42px;
    background: #f5f9ff;
    border: 1px solid #e2ebf8;
    border-radius: 16px;
}

.sms-security-content h2 {
    margin-bottom: 16px;
}

.sms-security-content > p {
    margin: 0;
    color: var(--sms-muted);
    font-size: 14px;
    line-height: 1.9;
}

.sms-security-points {
    display: grid;
    gap: 17px;
    align-content: center;
}

.sms-security-points > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.sms-security-points > div > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: var(--sms-blue);
    background: #e5f0ff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}

.sms-security-points p {
    margin: 5px 0 0;
    color: var(--sms-muted);
    font-size: 13px;
    line-height: 1.7;
}

.sms-security-points strong {
    color: var(--sms-navy);
}

/* CTA */

.sms-cta {
    padding: 12px 0 75px;
    background: #fff;
}

.sms-cta-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    align-items: center;
    gap: 35px;
    overflow: hidden;
    padding: 43px 44px;
    color: #fff;
    background: linear-gradient(
        115deg,
        #0b1735 0%,
        #103e82 65%,
        #087bb4 100%
    );
    border-radius: 16px;
}

.sms-cta-panel::after {
    position: absolute;
    top: -105px;
    right: 15%;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(255, 255, 255, 0.035),
        0 0 0 70px rgba(255, 255, 255, 0.025);
    content: "";
    pointer-events: none;
}

.sms-cta-content,
.sms-cta-actions {
    position: relative;
    z-index: 1;
}

.sms-cta-eyebrow {
    color: #8bdcff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.sms-cta-content h2 {
    max-width: 620px;
    margin: 13px 0 12px;
    color: #fff;
    font-size: clamp(26px, 3vw, 35px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.sms-cta-content p {
    max-width: 600px;
    margin: 0;
    color: #d4e2f5;
    font-size: 13px;
    line-height: 1.8;
}

.sms-cta-actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
}

.sms-btn-white {
    color: var(--sms-navy);
    background: #fff;
}

.sms-btn-white:hover {
    color: var(--sms-blue);
    background: #eef6ff;
}

.sms-cta-actions > span {
    color: #c1d8f3;
    font-size: 11px;
    line-height: 1.6;
}

/* Tablet */

@media (max-width: 1024px) {
    .sms-hero-grid {
        gap: 28px;
    }

    .sms-hero-content h1 {
        font-size: clamp(34px, 4.2vw, 43px);
    }

    .sms-hero-visual {
        padding-right: 8px;
        padding-left: 8px;
    }

    .sms-dashboard-content {
        padding: 17px 13px;
    }

    .sms-school-graphic {
        width: 75px;
        height: 75px;
        flex-basis: 75px;
    }

    .sms-benefit-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sms-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sms-stakeholders-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sms-implementation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sms-intro-grid {
        gap: 35px;
    }

    .sms-security-panel {
        gap: 30px;
        padding: 32px;
    }

    .sms-cta-panel {
        padding: 35px;
        gap: 25px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .sms-container {
        width: min(100% - 32px, 560px);
    }

    .sms-breadcrumb {
        padding: 13px 0 5px;
        font-size: 12px;
    }

    .sms-hero {
        padding: 20px 0 35px;
    }

    .sms-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .sms-hero-content {
        padding: 0;
    }

    .sms-eyebrow {
        font-size: 11px;
    }

    .sms-hero-content h1 {
        margin: 18px 0 14px;
        font-size: clamp(34px, 8.5vw, 44px);
        letter-spacing: -1.1px;
    }

    .sms-hero-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .sms-hero-points {
        gap: 12px;
        margin-top: 20px;
    }

    .sms-hero-points > div {
        font-size: 12px;
    }

    .sms-hero-actions {
        gap: 10px;
        margin-top: 23px;
    }

    .sms-btn {
        min-height: 45px;
        padding: 12px 14px;
        font-size: 12px;
    }

    .sms-hero-note {
        margin-top: 14px;
    }

    .sms-hero-visual {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 16px 7px 8px;
    }

    .sms-dashboard-layout {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .sms-sidebar {
        gap: 15px;
        padding-top: 15px;
    }

    .sms-sidebar-item {
        width: 27px;
        height: 27px;
    }

    .sms-dashboard-content {
        padding: 16px 11px;
    }

    .sms-dashboard-heading {
        margin-bottom: 14px;
    }

    .sms-dashboard-heading h3 {
        font-size: 15px;
    }

    .sms-welcome-card {
        min-height: 125px;
        padding: 12px;
    }

    .sms-welcome-card h4 {
        font-size: 17px;
    }

    .sms-school-graphic {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .sms-school-building {
        transform: scale(0.65);
    }

    .sms-stat-card {
        gap: 7px;
        padding: 8px 6px;
    }

    .sms-stat-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 14px;
    }

    .sms-stat-card strong {
        font-size: 9px;
    }

    .sms-stat-card > div > span {
        font-size: 7px;
    }

    .sms-floating-card {
        padding: 9px 10px;
        font-size: 9px;
    }

    .sms-floating-top {
        right: -3px;
    }

    .sms-floating-bottom {
        bottom: 23px;
        left: -3px;
    }

    .sms-visual-caption {
        margin-top: 14px;
        font-size: 10px;
    }

    .sms-intro,
    .sms-modules,
    .sms-stakeholders,
    .sms-implementation,
    .sms-security {
        padding: 48px 0;
    }

    .sms-intro-grid,
    .sms-security-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .sms-intro-heading h2,
    .sms-section-heading h2,
    .sms-benefits-content h2,
    .sms-security-content h2 {
        font-size: 29px;
    }

    .sms-intro-copy p,
    .sms-security-content > p {
        font-size: 13px;
        line-height: 1.85;
    }

    .sms-benefit-strip {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
        margin-top: 26px;
        padding: 21px 17px;
    }

    .sms-benefit > div > span {
        font-size: 11px;
    }

    .sms-section-heading {
        margin-bottom: 27px;
        text-align: left;
    }

    .sms-section-heading > p {
        margin-left: 0;
        font-size: 13px;
    }

    .sms-modules-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .sms-module-card {
        padding: 22px 20px;
    }

    .sms-module-card h3 {
        font-size: 17px;
    }

    .sms-module-card > p {
        font-size: 13px;
    }

    .sms-modules-note {
        padding: 15px;
    }

    .sms-stakeholders-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .sms-stakeholder-card {
        padding: 22px 20px;
    }

    .sms-stakeholder-card h3 {
        font-size: 16px;
    }

    .sms-stakeholder-card > p {
        font-size: 13px;
    }

    .sms-implementation-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .sms-implementation-card {
        padding: 22px 20px;
    }

    .sms-implementation-card p {
        font-size: 13px;
    }

    .sms-security-panel {
        padding: 25px 20px;
    }

    .sms-security-points {
        gap: 15px;
    }

    .sms-security-points p {
        font-size: 12px;
    }

    .sms-cta {
        padding: 0 0 48px;
    }

    .sms-cta-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 23px;
        padding: 28px 22px;
        border-radius: 12px;
    }

    .sms-cta-content h2 {
        font-size: 27px;
    }

    .sms-cta-content p {
        font-size: 13px;
    }

    .sms-cta-actions {
        gap: 11px;
    }
}

/* Small mobile screens */

@media (max-width: 380px) {
    .sms-container {
        width: calc(100% - 26px);
    }

    .sms-hero-content h1 {
        font-size: 32px;
    }

    .sms-hero-points {
        grid-template-columns: minmax(0, 1fr);
    }

    .sms-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sms-btn {
        width: 100%;
    }

    .sms-dashboard-top {
        gap: 8px;
        padding: 0 10px;
        font-size: 10px;
    }

    .sms-status {
        font-size: 8px;
    }

    .sms-welcome-card {
        gap: 5px;
        padding: 10px;
    }

    .sms-welcome-card h4 {
        font-size: 15px;
    }

    .sms-school-graphic {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

    .sms-school-building {
        transform: scale(0.5);
    }

    .sms-floating-card {
        font-size: 8px;
    }

    .sms-cta-panel {
        padding: 25px 17px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .sms-page *,
    .sms-page *::before,
    .sms-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}



/* =========================================
   College Management System Page
   Prefix: cms-
   ========================================= */

.cms-page {
    --cms-navy: #0b1735;
    --cms-blue: #1268d8;
    --cms-cyan: #10a7e5;
    --cms-orange: #f28b1b;
    --cms-text: #34425a;
    --cms-muted: #6d7b91;
    --cms-light: #f5f8fc;
    --cms-border: #e3eaf3;
    color: var(--cms-text);
    font-family: inherit;
    overflow: hidden;
}

.cms-page *,
.cms-page *::before,
.cms-page *::after {
    box-sizing: border-box;
}

.cms-page a {
    text-decoration: none;
}

.cms-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* Breadcrumb */

.cms-breadcrumb {
    padding: 13px 0;
    background: #f7f9fc;
    border-bottom: 1px solid #edf1f6;
    font-size: 13px;
}

.cms-breadcrumb .cms-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cms-breadcrumb a {
    color: var(--cms-blue);
}

.cms-breadcrumb span {
    color: #8490a2;
}

/* Common typography */

.cms-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--cms-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.7px;
    line-height: 1.5;
}

.cms-page h1,
.cms-page h2,
.cms-page h3,
.cms-page h4,
.cms-page p {
    margin-top: 0;
}

.cms-page h1,
.cms-page h2,
.cms-page h3,
.cms-page h4 {
    color: var(--cms-navy);
    line-height: 1.25;
}

.cms-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.cms-page p {
    color: var(--cms-muted);
    font-size: 15px;
    line-height: 1.85;
}

.cms-section {
    padding: 76px 0;
}

/* Buttons */

.cms-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.cms-btn:hover {
    transform: translateY(-2px);
}

.cms-btn-primary {
    color: #fff;
    background: var(--cms-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.cms-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.cms-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.cms-btn-outline {
    color: var(--cms-navy);
    background: #fff;
    border-color: #d9e2ee;
}

.cms-btn-outline:hover {
    color: var(--cms-blue);
    border-color: var(--cms-blue);
}

/* Hero */

.cms-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 86% 30%, rgba(16, 167, 229, 0.10), transparent 34%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.cms-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 38px;
}

.cms-hero-content {
    padding: 22px 0;
}

.cms-hero-content h1 {
    max-width: 600px;
    margin-bottom: 20px;
    color: var(--cms-navy);
    font-size: clamp(34px, 4vw, 51px);
    font-weight: 800;
    letter-spacing: -1.7px;
    line-height: 1.12;
}

.cms-hero-content h1 span {
    display: block;
    color: var(--cms-blue);
}

.cms-hero-description {
    max-width: 560px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.cms-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cms-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 19px;
    margin-top: 25px;
}

.cms-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

.cms-hero-points span::first-letter {
    color: #138c65;
}

/* Hero dashboard illustration */

.cms-hero-visual {
    position: relative;
    min-width: 0;
    padding: 10px 5px 30px 10px;
}

.cms-dashboard {
    position: relative;
    padding: 24px;
    border: 1px solid #e2eaf5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.cms-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 23px;
}

.cms-dashboard-label {
    display: block;
    margin-bottom: 6px;
    color: var(--cms-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.cms-dashboard-header h3 {
    margin-bottom: 0;
    font-size: 21px;
    font-weight: 800;
}

.cms-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 30px;
    background: #eaf9f2;
    color: #16865b;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.cms-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #19aa70;
}

.cms-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 17px;
}

.cms-stat-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 15px 12px;
    border: 1px solid #e9eef5;
    border-radius: 10px;
    background: #fcfdff;
}

.cms-stat-icon {
    display: flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
}

.cms-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.cms-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.cms-icon-orange {
    color: #c36c0d;
    background: #fff2df;
}

.cms-icon-purple {
    color: #7650cb;
    background: #f0eaff;
}

.cms-stat-card strong,
.cms-stat-card b {
    display: block;
    overflow-wrap: anywhere;
}

.cms-stat-card strong {
    margin-bottom: 4px;
    color: var(--cms-navy);
    font-size: 12px;
}

.cms-stat-card b {
    color: #8793a6;
    font-size: 10px;
    font-weight: 500;
}

.cms-dashboard-panel {
    padding: 17px;
    border: 1px solid #e8edf4;
    border-radius: 11px;
}

.cms-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

.cms-panel-heading h4 {
    margin-bottom: 5px;
    font-size: 14px;
}

.cms-panel-heading p {
    margin-bottom: 0;
    font-size: 11px;
    line-height: 1.5;
}

.cms-panel-dots {
    color: #8794a8;
    letter-spacing: 2px;
}

.cms-workflow-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid #edf1f6;
}

.cms-workflow-number {
    display: flex;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #edf4ff;
    color: var(--cms-blue);
    font-size: 10px;
    font-weight: 800;
}

.cms-workflow-item strong,
.cms-workflow-item small {
    display: block;
}

.cms-workflow-item strong {
    margin-bottom: 4px;
    color: var(--cms-navy);
    font-size: 12px;
}

.cms-workflow-item small {
    color: #8490a3;
    font-size: 10px;
}

.cms-workflow-check {
    margin-left: auto;
    color: #18a66c;
    font-size: 17px;
    font-weight: 800;
}

.cms-floating-card {
    position: absolute;
    right: -8px;
    bottom: 0;
    display: flex;
    max-width: 285px;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid #e4ebf5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(17, 44, 87, 0.12);
}

.cms-floating-icon {
    display: flex;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7f8ef;
    color: #15915d;
    font-weight: 800;
}

.cms-floating-card strong,
.cms-floating-card small {
    display: block;
}

.cms-floating-card strong {
    margin-bottom: 4px;
    color: var(--cms-navy);
    font-size: 11px;
}

.cms-floating-card small {
    color: var(--cms-muted);
    font-size: 10px;
}

/* Introduction */

.cms-intro {
    background: #fff;
}

.cms-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 65px;
    align-items: start;
}

.cms-section-heading h2 {
    max-width: 440px;
}

.cms-intro-content p {
    margin-bottom: 17px;
}

.cms-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--cms-blue);
    font-size: 14px;
    font-weight: 800;
}

.cms-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.cms-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits strip */

.cms-benefits {
    padding: 30px 0;
    background: #f5f8fc;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
}

.cms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.cms-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.cms-benefit-symbol {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--cms-blue);
    font-size: 12px;
    font-weight: 800;
}

.cms-benefit:nth-child(2) .cms-benefit-symbol {
    background: #e2f8ff;
    color: #0786b7;
}

.cms-benefit:nth-child(3) .cms-benefit-symbol {
    background: #fff0df;
    color: #c87514;
}

.cms-benefit:nth-child(4) .cms-benefit-symbol {
    background: #e5f7ed;
    color: #168757;
}

.cms-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.cms-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Modules */

.cms-modules {
    background: #fff;
}

.cms-centered-heading {
    max-width: 700px;
    margin: 0 auto 42px;
    text-align: center;
}

.cms-centered-heading h2 {
    margin-bottom: 13px;
}

.cms-centered-heading p {
    max-width: 620px;
    margin: 0 auto;
}

.cms-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cms-module-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--cms-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.cms-module-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.cms-module-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 19px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.cms-module-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.cms-module-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.cms-module-orange {
    color: #bd6b10;
    background: #fff1df;
}

.cms-module-purple {
    color: #7753c8;
    background: #f0eaff;
}

.cms-module-green {
    color: #168757;
    background: #e4f8ec;
}

.cms-module-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.cms-module-card p {
    flex: 1;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.8;
}

.cms-module-tag {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 4px;
    background: #f3f6fa;
    color: #66758a;
    font-size: 10px;
    font-weight: 700;
}

.cms-modules-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 30px;
    padding: 24px 27px;
    border: 1px solid #dfeafa;
    border-radius: 11px;
    background: #f5f9ff;
}

.cms-modules-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--cms-navy);
    font-size: 16px;
}

.cms-modules-note p {
    margin-bottom: 0;
    font-size: 13px;
}

/* Stakeholders */

.cms-stakeholders {
    background: #f6f9fd;
}

.cms-stakeholder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 75px;
}

.cms-stakeholder-content h2 {
    max-width: 500px;
}

.cms-stakeholder-content > p {
    max-width: 520px;
}

.cms-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.cms-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.cms-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

.cms-role-panel {
    padding: 26px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.cms-role-panel-header {
    margin-bottom: 15px;
    padding-bottom: 19px;
    border-bottom: 1px solid #edf1f6;
}

.cms-role-panel-header > span {
    display: block;
    margin-bottom: 8px;
    color: var(--cms-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.cms-role-panel-header h3 {
    margin-bottom: 0;
    font-size: 21px;
}

.cms-role-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f6;
}

.cms-role-row:last-child {
    border-bottom: 0;
}

.cms-role-avatar {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
}

.cms-avatar-navy {
    color: #fff;
    background: var(--cms-navy);
}

.cms-avatar-blue {
    color: var(--cms-blue);
    background: #e8f1ff;
}

.cms-avatar-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.cms-avatar-cyan {
    color: #0787b9;
    background: #e4f8ff;
}

.cms-role-row strong,
.cms-role-row small {
    display: block;
}

.cms-role-row strong {
    margin-bottom: 5px;
    color: var(--cms-navy);
    font-size: 13px;
}

.cms-role-row small {
    color: var(--cms-muted);
    font-size: 11px;
}

.cms-role-arrow {
    margin-left: auto;
    color: #8495ab;
    font-size: 19px;
}

/* Implementation steps */

.cms-implementation {
    background: #fff;
}

.cms-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.cms-step {
    position: relative;
    padding: 24px 22px;
    border: 1px solid var(--cms-border);
    border-radius: 10px;
    background: #fff;
}

.cms-step > span {
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #e9f2ff;
    color: var(--cms-blue);
    font-size: 13px;
    font-weight: 800;
}

.cms-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.cms-step:nth-child(3) > span {
    background: #fff1df;
    color: #c16d0d;
}

.cms-step:nth-child(4) > span {
    background: #e4f8ec;
    color: #168757;
}

.cms-step h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.cms-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Security section */

.cms-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--cms-navy);
}

.cms-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.cms-eyebrow-light {
    color: #70d7ff;
}

.cms-security h2 {
    max-width: 520px;
    margin-bottom: 17px;
    color: #fff;
}

.cms-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.cms-security-features {
    display: grid;
    gap: 17px;
}

.cms-security-features > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.cms-security-features > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.cms-security-features strong,
.cms-security-features small {
    display: block;
}

.cms-security-features strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.cms-security-features small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* Final CTA */

.cms-cta {
    padding: 65px 0;
    background: #f6f9fd;
}

.cms-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.cms-cta-inner > div:first-child {
    max-width: 690px;
}

.cms-cta h2 {
    margin-bottom: 12px;
}

.cms-cta p {
    margin-bottom: 0;
}

.cms-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .cms-hero-grid {
        gap: 25px;
    }

    .cms-hero-content h1 {
        font-size: clamp(32px, 4.2vw, 43px);
    }

    .cms-dashboard {
        padding: 18px;
    }

    .cms-stat-card {
        gap: 9px;
        padding: 12px 9px;
    }

    .cms-intro-grid,
    .cms-stakeholder-grid,
    .cms-security-grid {
        gap: 38px;
    }

    .cms-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .cms-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cms-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cms-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .cms-container {
        width: min(100% - 30px, 560px);
    }

    .cms-section {
        padding: 48px 0;
    }

    .cms-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .cms-breadcrumb .cms-container {
        gap: 7px;
    }

    .cms-hero {
        padding: 20px 0 35px;
    }

    .cms-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .cms-hero-content {
        padding: 0;
    }

    .cms-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .cms-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(32px, 8vw, 43px);
        letter-spacing: -1px;
        line-height: 1.15;
    }

    .cms-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .cms-hero-actions {
        align-items: stretch;
    }

    .cms-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .cms-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .cms-hero-points span {
        font-size: 10px;
    }

    .cms-hero-visual {
        padding: 0 3px 23px;
    }

    .cms-dashboard {
        padding: 16px;
        border-radius: 12px;
    }

    .cms-dashboard-header {
        align-items: flex-start;
        margin-bottom: 17px;
    }

    .cms-dashboard-header h3 {
        font-size: 18px;
    }

    .cms-status {
        padding: 6px 8px;
        font-size: 9px;
    }

    .cms-dashboard-stats {
        gap: 8px;
        margin-bottom: 12px;
    }

    .cms-stat-card {
        gap: 8px;
        padding: 11px 8px;
    }

    .cms-stat-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 8px;
        font-size: 13px;
    }

    .cms-stat-card strong {
        font-size: 10px;
    }

    .cms-stat-card b {
        font-size: 9px;
    }

    .cms-dashboard-panel {
        padding: 12px;
    }

    .cms-floating-card {
        right: 4px;
        max-width: 250px;
        padding: 10px 12px;
    }

    .cms-floating-card strong {
        font-size: 10px;
    }

    .cms-floating-card small {
        font-size: 9px;
    }

    .cms-intro-grid,
    .cms-stakeholder-grid,
    .cms-security-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .cms-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .cms-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .cms-benefits {
        padding: 25px 0;
    }

    .cms-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .cms-benefit h3 {
        font-size: 14px;
    }

    .cms-benefit p {
        font-size: 12px;
    }

    .cms-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .cms-centered-heading p {
        margin: 0;
    }

    .cms-module-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .cms-module-card {
        padding: 20px;
    }

    .cms-module-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .cms-module-card h3 {
        font-size: 17px;
    }

    .cms-module-card p {
        margin-bottom: 15px;
        font-size: 13px;
    }

    .cms-modules-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
        padding: 20px;
    }

    .cms-modules-note p {
        font-size: 12px;
    }

    .cms-role-panel {
        padding: 18px;
    }

    .cms-role-panel-header h3 {
        font-size: 19px;
    }

    .cms-role-row {
        gap: 10px;
    }

    .cms-role-row small {
        font-size: 10px;
    }

    .cms-steps-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .cms-step {
        padding: 20px;
    }

    .cms-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .cms-step h3 {
        font-size: 16px;
    }

    .cms-security {
        padding: 48px 0;
    }

    .cms-security-grid {
        gap: 28px;
    }

    .cms-security h2 {
        font-size: 27px;
    }

    .cms-security-grid > div:first-child p {
        font-size: 13px;
    }

    .cms-security-features {
        gap: 18px;
    }

    .cms-cta {
        padding: 45px 0;
    }

    .cms-cta-inner {
        gap: 23px;
    }

    .cms-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .cms-cta-actions .cms-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .cms-container {
        width: calc(100% - 24px);
    }

    .cms-dashboard {
        padding: 12px;
    }

    .cms-dashboard-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .cms-stat-card {
        padding: 10px;
    }

    .cms-hero-actions {
        flex-direction: column;
    }

    .cms-hero-actions .cms-btn {
        width: 100%;
    }

    .cms-floating-card {
        right: 0;
        max-width: 225px;
    }
}


/* ==========================================
   On-Screen Evaluation System
   Unique prefix: oes-
   ========================================== */

.oes-page {
    --oes-navy: #0b1735;
    --oes-blue: #1268d8;
    --oes-cyan: #10a7e5;
    --oes-orange: #f28b1b;
    --oes-text: #34425a;
    --oes-muted: #6d7b91;
    --oes-light: #f5f8fc;
    --oes-border: #e3eaf3;

    color: var(--oes-text);
    font-family: inherit;
    overflow: hidden;
}

.oes-page *,
.oes-page *::before,
.oes-page *::after {
    box-sizing: border-box;
}

.oes-page a {
    text-decoration: none;
}

.oes-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.oes-page h1,
.oes-page h2,
.oes-page h3,
.oes-page h4,
.oes-page p {
    margin-top: 0;
}

.oes-page h1,
.oes-page h2,
.oes-page h3,
.oes-page h4 {
    color: var(--oes-navy);
    line-height: 1.25;
}

.oes-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.oes-page p {
    color: var(--oes-muted);
    font-size: 15px;
    line-height: 1.85;
}

.oes-section {
    padding: 76px 0;
}

.oes-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--oes-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.5;
}

.oes-eyebrow-light {
    color: #70d7ff;
}

/* Breadcrumb */

.oes-breadcrumb {
    padding: 13px 0;
    background: #f7f9fc;
    border-bottom: 1px solid #edf1f6;
    font-size: 13px;
}

.oes-breadcrumb .oes-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.oes-breadcrumb a {
    color: var(--oes-blue);
}

.oes-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.oes-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.oes-btn:hover {
    transform: translateY(-2px);
}

.oes-btn-primary {
    color: #fff;
    background: var(--oes-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.oes-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.oes-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.oes-btn-outline {
    color: var(--oes-navy);
    background: #fff;
    border-color: #d9e2ee;
}

.oes-btn-outline:hover {
    color: var(--oes-blue);
    border-color: var(--oes-blue);
}

/* Hero */

.oes-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.oes-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 38px;
}

.oes-hero-content {
    padding: 22px 0;
}

.oes-hero-content h1 {
    max-width: 610px;
    margin-bottom: 20px;
    color: var(--oes-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1.13;
}

.oes-hero-content h1 span {
    display: block;
    color: var(--oes-blue);
}

.oes-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.oes-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.oes-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.oes-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

/* Dashboard */

.oes-hero-visual {
    position: relative;
    min-width: 0;
    padding: 10px 4px 18px 10px;
}

.oes-dashboard {
    padding: 23px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.oes-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 21px;
}

.oes-dashboard-label {
    display: block;
    margin-bottom: 6px;
    color: var(--oes-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.oes-dashboard-header h3 {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 800;
}

.oes-live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border-radius: 30px;
    background: #eaf9f2;
    color: #16865b;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.oes-live-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #19aa70;
}

.oes-dashboard-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 16px;
}

.oes-summary-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 14px 11px;
    border: 1px solid #e7edf5;
    border-radius: 9px;
    background: #fcfdff;
}

.oes-summary-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

.oes-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.oes-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.oes-orange {
    color: #bd6b10;
    background: #fff1df;
}

.oes-purple {
    color: #7753c8;
    background: #f0eaff;
}

.oes-green {
    color: #168757;
    background: #e4f8ec;
}

.oes-summary-card small,
.oes-summary-card strong {
    display: block;
    overflow-wrap: anywhere;
}

.oes-summary-card small {
    margin-bottom: 5px;
    color: #8793a6;
    font-size: 10px;
}

.oes-summary-card strong {
    color: var(--oes-navy);
    font-size: 11px;
}

.oes-script-window {
    overflow: hidden;
    border: 1px solid #e4eaf3;
    border-radius: 10px;
    background: #fff;
}

.oes-script-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid #e8edf4;
    background: #fbfcfe;
}

.oes-script-toolbar strong,
.oes-script-toolbar small {
    display: block;
}

.oes-script-toolbar strong {
    margin-bottom: 5px;
    color: var(--oes-navy);
    font-size: 12px;
}

.oes-script-toolbar small {
    color: var(--oes-muted);
    font-size: 9px;
}

.oes-page-count {
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--oes-blue);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.oes-script-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 12px;
    padding: 13px;
    background: #f3f6fa;
}

.oes-script-paper {
    min-width: 0;
    min-height: 250px;
    padding: 17px 13px;
    border: 1px solid #e5e9ef;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(20, 45, 80, 0.04);
}

.oes-paper-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 19px;
}

.oes-paper-heading span {
    display: block;
    width: 42%;
    height: 6px;
    border-radius: 3px;
    background: #d8e1ee;
}

.oes-paper-heading span:last-child {
    width: 23%;
}

.oes-paper-line {
    width: 85%;
    height: 4px;
    margin-bottom: 9px;
    border-radius: 3px;
    background: #e6ebf2;
}

.oes-line-wide {
    width: 100%;
}

.oes-line-medium {
    width: 69%;
}

.oes-line-short {
    width: 48%;
}

.oes-paper-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin: 19px 0 13px;
    padding: 7px;
    border-left: 3px solid var(--oes-blue);
    background: #eef5ff;
}

.oes-paper-question strong {
    color: var(--oes-navy);
    font-size: 9px;
}

.oes-paper-question span {
    color: var(--oes-blue);
    font-size: 8px;
}

.oes-marking-panel {
    min-width: 0;
    padding: 10px;
    border: 1px solid #e5eaf2;
    border-radius: 7px;
    background: #fff;
}

.oes-marking-label {
    display: block;
    margin-bottom: 11px;
    color: var(--oes-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.oes-question-mark {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid #e8edf4;
    border-radius: 6px;
}

.oes-question-mark > span {
    color: #8592a5;
    font-size: 9px;
    font-weight: 700;
}

.oes-question-mark strong {
    color: var(--oes-navy);
    font-size: 11px;
}

.oes-question-mark small {
    color: var(--oes-muted);
    font-size: 8px;
    line-height: 1.5;
}

.oes-selected-mark {
    border-color: #bcd6ff;
    background: #f0f6ff;
}

.oes-marking-footer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e9eef5;
}

.oes-marking-footer span {
    color: var(--oes-muted);
    font-size: 8px;
}

.oes-marking-footer b {
    color: #16865b;
    font-size: 10px;
}

.oes-dashboard-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: #fff;
}

.oes-footer-check {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f8ee;
    color: #16865b;
    font-size: 14px;
    font-weight: 800;
}

.oes-dashboard-footer strong,
.oes-dashboard-footer small {
    display: block;
}

.oes-dashboard-footer strong {
    margin-bottom: 4px;
    color: var(--oes-navy);
    font-size: 11px;
}

.oes-dashboard-footer small {
    color: var(--oes-muted);
    font-size: 10px;
}

/* Introduction */

.oes-intro {
    background: #fff;
}

.oes-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.oes-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.oes-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.oes-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--oes-blue);
    font-size: 14px;
    font-weight: 800;
}

.oes-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.oes-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits */

.oes-benefits {
    padding: 30px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    background: #f5f8fc;
}

.oes-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.oes-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.oes-benefit-number {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--oes-blue);
    font-size: 12px;
    font-weight: 800;
}

.oes-benefit:nth-child(2) .oes-benefit-number {
    background: #e2f8ff;
    color: #0786b7;
}

.oes-benefit:nth-child(3) .oes-benefit-number {
    background: #fff0df;
    color: #c87514;
}

.oes-benefit:nth-child(4) .oes-benefit-number {
    background: #e5f7ed;
    color: #168757;
}

.oes-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.oes-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Feature cards */

.oes-features {
    background: #fff;
}

.oes-centered-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.oes-centered-heading h2 {
    margin-bottom: 13px;
}

.oes-centered-heading p {
    max-width: 650px;
    margin: 0 auto;
}

.oes-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.oes-feature-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--oes-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.oes-feature-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.oes-feature-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.oes-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.oes-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.oes-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.oes-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.oes-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.oes-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.oes-feature-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Workflow */

.oes-workflow-section {
    background: #f6f9fd;
}

.oes-workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.oes-workflow-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    background: #fff;
}

.oes-step-number {
    display: flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e8f1ff;
    color: var(--oes-blue);
    font-size: 11px;
    font-weight: 800;
}

.oes-workflow-step:nth-child(2) .oes-step-number {
    background: #e3f8ff;
    color: #0786b7;
}

.oes-workflow-step:nth-child(3) .oes-step-number {
    background: #fff0df;
    color: #bd6b10;
}

.oes-workflow-step:nth-child(4) .oes-step-number {
    background: #f0eaff;
    color: #7753c8;
}

.oes-workflow-step:nth-child(5) .oes-step-number {
    background: #e4f8ec;
    color: #168757;
}

.oes-workflow-step h3 {
    margin-bottom: 8px;
    font-size: 15px;
}

.oes-workflow-step p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.75;
}

/* Stakeholders */

.oes-stakeholders {
    background: #fff;
}

.oes-stakeholder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 70px;
}

.oes-stakeholder-content h2 {
    max-width: 510px;
}

.oes-stakeholder-content > p {
    max-width: 540px;
}

.oes-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.oes-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.oes-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

.oes-role-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.oes-role-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.oes-role-header > span {
    display: block;
    margin-bottom: 8px;
    color: var(--oes-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.oes-role-header h3 {
    margin-bottom: 0;
    font-size: 21px;
}

.oes-role-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.oes-role-row:last-child {
    border-bottom: 0;
}

.oes-role-avatar {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
}

.oes-avatar-navy {
    color: #fff;
    background: var(--oes-navy);
}

.oes-avatar-blue {
    color: var(--oes-blue);
    background: #e8f1ff;
}

.oes-avatar-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.oes-avatar-cyan {
    color: #0787b9;
    background: #e4f8ff;
}

.oes-role-row strong,
.oes-role-row small {
    display: block;
}

.oes-role-row strong {
    margin-bottom: 5px;
    color: var(--oes-navy);
    font-size: 12px;
}

.oes-role-row small {
    color: var(--oes-muted);
    font-size: 10px;
    line-height: 1.6;
}

/* Security */

.oes-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--oes-navy);
}

.oes-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.oes-security h2 {
    max-width: 520px;
    margin-bottom: 17px;
    color: #fff;
}

.oes-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.oes-security-list {
    display: grid;
    gap: 18px;
}

.oes-security-list > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.oes-security-list > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.oes-security-list strong,
.oes-security-list small {
    display: block;
}

.oes-security-list strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.oes-security-list small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* Integration */

.oes-integration {
    background: #fff;
}

.oes-integration-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.oes-integration-grid > div:first-child h2 {
    max-width: 470px;
}

.oes-integration-grid > div:last-child p {
    margin-bottom: 17px;
}

.oes-integration-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0;
}

.oes-integration-tags span {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid #dce8f8;
    border-radius: 6px;
    background: #f4f8ff;
    color: #285b9d;
    font-size: 11px;
    font-weight: 700;
}

.oes-integration-note {
    padding-left: 13px;
    border-left: 3px solid var(--oes-orange);
    font-size: 12px !important;
}

/* Final CTA */

.oes-cta {
    padding: 65px 0;
    background: #f5f8fc;
}

.oes-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.oes-cta-inner > div:first-child {
    max-width: 700px;
}

.oes-cta h2 {
    margin-bottom: 12px;
}

.oes-cta p {
    margin-bottom: 0;
}

.oes-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .oes-hero-grid {
        gap: 25px;
    }

    .oes-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .oes-dashboard {
        padding: 17px;
    }

    .oes-summary-card {
        gap: 8px;
        padding: 11px 8px;
    }

    .oes-summary-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .oes-intro-grid,
    .oes-stakeholder-grid,
    .oes-security-grid,
    .oes-integration-grid {
        gap: 38px;
    }

    .oes-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .oes-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oes-workflow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oes-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .oes-container {
        width: min(100% - 30px, 560px);
    }

    .oes-section {
        padding: 48px 0;
    }

    .oes-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .oes-breadcrumb .oes-container {
        gap: 7px;
    }

    .oes-hero {
        padding: 20px 0 35px;
    }

    .oes-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .oes-hero-content {
        padding: 0;
    }

    .oes-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .oes-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .oes-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .oes-hero-actions {
        align-items: stretch;
    }

    .oes-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .oes-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .oes-hero-points span {
        font-size: 10px;
    }

    .oes-hero-visual {
        padding: 0;
    }

    .oes-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .oes-dashboard-header {
        align-items: flex-start;
        margin-bottom: 16px;
    }

    .oes-dashboard-header h3 {
        font-size: 17px;
    }

    .oes-live-status {
        padding: 6px 7px;
        font-size: 9px;
    }

    .oes-dashboard-summary {
        gap: 8px;
        margin-bottom: 11px;
    }

    .oes-summary-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .oes-summary-card small {
        font-size: 9px;
    }

    .oes-summary-card strong {
        font-size: 10px;
    }

    .oes-script-toolbar {
        align-items: flex-start;
        padding: 11px;
    }

    .oes-script-toolbar strong {
        font-size: 10px;
    }

    .oes-script-toolbar small {
        font-size: 8px;
    }

    .oes-page-count {
        padding: 5px;
        font-size: 8px;
    }

    .oes-script-body {
        gap: 7px;
        padding: 8px;
    }

    .oes-script-paper {
        min-height: 225px;
        padding: 12px 8px;
    }

    .oes-marking-panel {
        padding: 7px;
    }

    .oes-question-mark {
        padding: 7px 5px;
    }

    .oes-question-mark strong {
        font-size: 10px;
    }

    .oes-question-mark small {
        font-size: 7px;
    }

    .oes-dashboard-footer {
        padding: 10px;
    }

    .oes-dashboard-footer strong {
        font-size: 10px;
    }

    .oes-dashboard-footer small {
        font-size: 9px;
    }

    .oes-intro-grid,
    .oes-stakeholder-grid,
    .oes-security-grid,
    .oes-integration-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .oes-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .oes-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .oes-benefits {
        padding: 25px 0;
    }

    .oes-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .oes-benefit h3 {
        font-size: 14px;
    }

    .oes-benefit p {
        font-size: 12px;
    }

    .oes-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .oes-centered-heading p {
        margin: 0;
    }

    .oes-feature-grid,
    .oes-workflow-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .oes-feature-card {
        padding: 20px;
    }

    .oes-feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .oes-feature-card h3 {
        font-size: 16px;
    }

    .oes-feature-card p {
        font-size: 13px;
    }

    .oes-workflow-step {
        padding: 18px;
    }

    .oes-workflow-step h3 {
        font-size: 15px;
    }

    .oes-workflow-step p {
        font-size: 12px;
    }

    .oes-role-panel {
        padding: 18px;
    }

    .oes-role-header h3 {
        font-size: 19px;
    }

    .oes-role-row {
        gap: 10px;
    }

    .oes-role-row small {
        font-size: 9px;
    }

    .oes-security {
        padding: 48px 0;
    }

    .oes-security-grid {
        gap: 28px;
    }

    .oes-security h2 {
        font-size: 27px;
    }

    .oes-security-grid > div:first-child p {
        font-size: 13px;
    }

    .oes-security-list {
        gap: 18px;
    }

    .oes-integration-tags {
        gap: 8px;
        margin: 17px 0;
    }

    .oes-integration-tags span {
        padding: 8px 10px;
        font-size: 10px;
    }

    .oes-integration-note {
        font-size: 12px !important;
    }

    .oes-cta {
        padding: 45px 0;
    }

    .oes-cta-inner {
        gap: 23px;
    }

    .oes-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .oes-cta-actions .oes-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .oes-container {
        width: calc(100% - 24px);
    }

    .oes-dashboard {
        padding: 10px;
    }

    .oes-dashboard-header {
        flex-direction: column;
    }

    .oes-dashboard-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .oes-summary-card {
        flex-direction: row;
        align-items: center;
    }

    .oes-script-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .oes-script-paper {
        min-height: 190px;
    }

    .oes-marking-panel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .oes-marking-label,
    .oes-marking-footer {
        grid-column: 1 / -1;
    }

    .oes-question-mark {
        margin-bottom: 0;
    }

    .oes-hero-actions {
        flex-direction: column;
    }

    .oes-hero-actions .oes-btn {
        width: 100%;
    }
}


/* Align On-Screen Evaluation hero like the IUMS page */

.oes-hero {
    padding: 15px 0 42px;
}

.oes-hero-grid {
    align-items: start;
}

.oes-hero-content {
    padding: 105px 0 22px;
}

.oes-hero-visual {
    padding: 55px 4px 18px 10px;
}

/* Keep the layout responsive on tablets */
@media (max-width: 1024px) {
    .oes-hero-content {
        padding: 65px 0 22px;
    }

    .oes-hero-visual {
        padding: 30px 4px 18px 10px;
    }
}

/* Mobile: stack content and dashboard normally */
@media (max-width: 767px) {
    .oes-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 25px;
    }

    .oes-hero-content {
        padding: 0;
    }

    .oes-hero-visual {
        padding: 0;
    }
}


/* ==========================================
   E-Learning Suite
   Unique prefix: els-
   ========================================== */

.els-page {
    --els-navy: #0b1735;
    --els-blue: #1268d8;
    --els-cyan: #10a7e5;
    --els-orange: #f28b1b;
    --els-text: #34425a;
    --els-muted: #6d7b91;
    --els-light: #f5f8fc;
    --els-border: #e3eaf3;

    color: var(--els-text);
    font-family: inherit;
    overflow: hidden;
}

.els-page *,
.els-page *::before,
.els-page *::after {
    box-sizing: border-box;
}

.els-page a {
    text-decoration: none;
}

.els-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.els-page h1,
.els-page h2,
.els-page h3,
.els-page h4,
.els-page p {
    margin-top: 0;
}

.els-page h1,
.els-page h2,
.els-page h3,
.els-page h4 {
    color: var(--els-navy);
    line-height: 1.25;
}

.els-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.els-page p {
    color: var(--els-muted);
    font-size: 15px;
    line-height: 1.85;
}

.els-section {
    padding: 76px 0;
}

.els-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--els-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.5;
}

.els-eyebrow-light {
    color: #70d7ff;
}

/* Breadcrumb */

.els-breadcrumb {
    padding: 13px 0;
    background: #f7f9fc;
    border-bottom: 1px solid #edf1f6;
    font-size: 13px;
}

.els-breadcrumb .els-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.els-breadcrumb a {
    color: var(--els-blue);
}

.els-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.els-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.els-btn:hover {
    transform: translateY(-2px);
}

.els-btn-primary {
    color: #fff;
    background: var(--els-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.els-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.els-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.els-btn-outline {
    color: var(--els-navy);
    background: #fff;
    border-color: #d9e2ee;
}

.els-btn-outline:hover {
    color: var(--els-blue);
    border-color: var(--els-blue);
}

/* Hero */

.els-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.els-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.els-hero-content {
    padding: 105px 0 22px;
}

.els-hero-content h1 {
    max-width: 610px;
    margin-bottom: 20px;
    color: var(--els-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1.13;
}

.els-hero-content h1 span {
    display: block;
    color: var(--els-blue);
}

.els-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.els-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.els-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.els-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

/* Dashboard illustration */

.els-hero-visual {
    position: relative;
    min-width: 0;
    padding: 55px 4px 18px 10px;
}

.els-dashboard {
    padding: 23px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.els-dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.els-brand-mark {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--els-blue), var(--els-cyan));
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.els-dashboard-title {
    min-width: 0;
}

.els-dashboard-title strong,
.els-dashboard-title small {
    display: block;
}

.els-dashboard-title strong {
    margin-bottom: 5px;
    color: var(--els-navy);
    font-size: 13px;
}

.els-dashboard-title small {
    color: var(--els-muted);
    font-size: 10px;
}

.els-dashboard-menu {
    margin-left: auto;
    color: #8c9ab0;
    letter-spacing: 2px;
}

.els-dashboard-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding: 19px;
    border-radius: 10px;
    background: linear-gradient(125deg, #102957, #1268c9 72%, #159fda);
}

.els-dashboard-welcome > div {
    min-width: 0;
}

.els-mini-label {
    display: block;
    margin-bottom: 10px;
    color: #a9dcff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.els-dashboard-welcome h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

.els-dashboard-welcome p {
    margin-bottom: 0;
    color: #e0edff;
    font-size: 11px;
    line-height: 1.7;
}

.els-welcome-icon {
    display: flex;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 21px;
}

.els-learning-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 18px;
}

.els-stat-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 13px 11px;
    border: 1px solid #e5ecf5;
    border-radius: 9px;
    background: #fcfdff;
}

.els-stat-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
}

.els-stat-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.els-stat-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.els-stat-card small,
.els-stat-card strong {
    display: block;
    overflow-wrap: anywhere;
}

.els-stat-card small {
    margin-bottom: 5px;
    color: #8793a6;
    font-size: 10px;
}

.els-stat-card strong {
    color: var(--els-navy);
    font-size: 11px;
}

.els-course-panel {
    padding: 16px;
    border: 1px solid #e5ebf4;
    border-radius: 10px;
}

.els-course-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.els-course-heading h4 {
    margin-bottom: 5px;
    font-size: 13px;
}

.els-course-heading p {
    margin-bottom: 0;
    font-size: 10px;
}

.els-course-more {
    color: var(--els-blue);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.els-course-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    border-top: 1px solid #edf1f6;
}

.els-course-thumbnail {
    display: flex;
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
}

.els-thumb-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.els-thumb-orange {
    color: #bd6b10;
    background: #fff1df;
}

.els-thumb-green {
    color: #168757;
    background: #e4f8ec;
}

.els-course-info {
    min-width: 0;
    flex: 1;
}

.els-course-info strong,
.els-course-info small {
    display: block;
    overflow-wrap: anywhere;
}

.els-course-info strong {
    margin-bottom: 5px;
    color: var(--els-navy);
    font-size: 11px;
}

.els-course-info small {
    margin-bottom: 8px;
    color: var(--els-muted);
    font-size: 9px;
}

.els-progress-track {
    overflow: hidden;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: #edf1f6;
}

.els-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.els-progress-blue {
    width: 68%;
    background: var(--els-blue);
}

.els-progress-orange {
    width: 45%;
    background: var(--els-orange);
}

.els-progress-green {
    width: 82%;
    background: #1da879;
}

.els-course-arrow {
    color: #8292a8;
    font-size: 18px;
}

.els-dashboard-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: #fff;
}

.els-footer-check {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f8ee;
    color: #16865b;
    font-size: 14px;
    font-weight: 800;
}

.els-dashboard-footer strong,
.els-dashboard-footer small {
    display: block;
}

.els-dashboard-footer strong {
    margin-bottom: 4px;
    color: var(--els-navy);
    font-size: 11px;
}

.els-dashboard-footer small {
    color: var(--els-muted);
    font-size: 10px;
}

/* Introduction */

.els-intro {
    background: #fff;
}

.els-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.els-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.els-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.els-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--els-blue);
    font-size: 14px;
    font-weight: 800;
}

.els-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.els-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits */

.els-benefits {
    padding: 30px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    background: #f5f8fc;
}

.els-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.els-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.els-benefit-number {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--els-blue);
    font-size: 12px;
    font-weight: 800;
}

.els-benefit:nth-child(2) .els-benefit-number {
    background: #e2f8ff;
    color: #0786b7;
}

.els-benefit:nth-child(3) .els-benefit-number {
    background: #fff0df;
    color: #c87514;
}

.els-benefit:nth-child(4) .els-benefit-number {
    background: #e5f7ed;
    color: #168757;
}

.els-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.els-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Features */

.els-features {
    background: #fff;
}

.els-centered-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.els-centered-heading h2 {
    margin-bottom: 13px;
}

.els-centered-heading p {
    max-width: 650px;
    margin: 0 auto;
}

.els-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.els-feature-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--els-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.els-feature-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.els-feature-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.els-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.els-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.els-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.els-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.els-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.els-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.els-feature-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Learning models */

.els-learning-models {
    background: #f6f9fd;
}

.els-model-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.els-model-card {
    padding: 26px 24px;
    border: 1px solid #e2eaf4;
    border-radius: 11px;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.els-model-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(11, 40, 82, 0.07);
}

.els-model-symbol {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 19px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.els-model-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.els-model-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.els-model-orange {
    color: #bd6b10;
    background: #fff1df;
}

.els-model-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.els-model-card p {
    margin-bottom: 17px;
    font-size: 13px;
}

.els-model-card > span {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 5px;
    background: #f1f5fa;
    color: #5b6b83;
    font-size: 10px;
    font-weight: 700;
}

/* Stakeholders */

.els-stakeholders {
    background: #fff;
}

.els-stakeholder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 70px;
}

.els-stakeholder-content h2 {
    max-width: 510px;
}

.els-stakeholder-content > p {
    max-width: 540px;
}

.els-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.els-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.els-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

.els-role-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.els-role-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.els-role-header > span {
    display: block;
    margin-bottom: 8px;
    color: var(--els-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.els-role-header h3 {
    margin-bottom: 0;
    font-size: 21px;
}

.els-role-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.els-role-row:last-child {
    border-bottom: 0;
}

.els-role-avatar {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
}

.els-avatar-navy {
    color: #fff;
    background: var(--els-navy);
}

.els-avatar-blue {
    color: var(--els-blue);
    background: #e8f1ff;
}

.els-avatar-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.els-avatar-cyan {
    color: #0787b9;
    background: #e4f8ff;
}

.els-role-row strong,
.els-role-row small {
    display: block;
}

.els-role-row strong {
    margin-bottom: 5px;
    color: var(--els-navy);
    font-size: 12px;
}

.els-role-row small {
    color: var(--els-muted);
    font-size: 10px;
    line-height: 1.6;
}

.els-role-arrow {
    margin-left: auto;
    color: #8495ab;
    font-size: 19px;
}

/* Implementation */

.els-implementation {
    background: #fff;
}

.els-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.els-step {
    padding: 24px 22px;
    border: 1px solid var(--els-border);
    border-radius: 10px;
    background: #fff;
}

.els-step > span {
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #e9f2ff;
    color: var(--els-blue);
    font-size: 13px;
    font-weight: 800;
}

.els-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.els-step:nth-child(3) > span {
    background: #fff1df;
    color: #c16d0d;
}

.els-step:nth-child(4) > span {
    background: #e4f8ec;
    color: #168757;
}

.els-step h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.els-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Security and integration */

.els-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--els-navy);
}

.els-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.els-security h2 {
    max-width: 520px;
    margin-bottom: 17px;
    color: #fff;
}

.els-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.els-security-features {
    display: grid;
    gap: 18px;
}

.els-security-features > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.els-security-features > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.els-security-features strong,
.els-security-features small {
    display: block;
}

.els-security-features strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.els-security-features small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* CTA */

.els-cta {
    padding: 65px 0;
    background: #f5f8fc;
}

.els-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.els-cta-inner > div:first-child {
    max-width: 700px;
}

.els-cta h2 {
    margin-bottom: 12px;
}

.els-cta p {
    margin-bottom: 0;
}

.els-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .els-hero-grid {
        gap: 25px;
    }

    .els-hero-content {
        padding: 65px 0 22px;
    }

    .els-hero-visual {
        padding: 30px 4px 18px 10px;
    }

    .els-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .els-dashboard {
        padding: 17px;
    }

    .els-intro-grid,
    .els-stakeholder-grid,
    .els-security-grid {
        gap: 38px;
    }

    .els-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .els-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .els-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .els-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .els-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .els-container {
        width: min(100% - 30px, 560px);
    }

    .els-section {
        padding: 48px 0;
    }

    .els-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .els-breadcrumb .els-container {
        gap: 7px;
    }

    .els-hero {
        padding: 20px 0 35px;
    }

    .els-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 25px;
    }

    .els-hero-content {
        padding: 0;
    }

    .els-hero-visual {
        padding: 0;
    }

    .els-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .els-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .els-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .els-hero-actions {
        align-items: stretch;
    }

    .els-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .els-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .els-hero-points span {
        font-size: 10px;
    }

    .els-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .els-dashboard-header {
        margin-bottom: 16px;
    }

    .els-dashboard-title strong {
        font-size: 12px;
    }

    .els-dashboard-welcome {
        padding: 15px;
    }

    .els-dashboard-welcome h3 {
        font-size: 19px;
    }

    .els-dashboard-welcome p {
        font-size: 10px;
    }

    .els-learning-stats {
        gap: 8px;
    }

    .els-stat-card {
        gap: 8px;
        padding: 10px;
    }

    .els-stat-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .els-stat-card small {
        font-size: 9px;
    }

    .els-stat-card strong {
        font-size: 10px;
    }

    .els-course-panel {
        padding: 12px;
    }

    .els-course-thumbnail {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .els-course-info strong {
        font-size: 10px;
    }

    .els-course-info small {
        font-size: 8px;
    }

    .els-intro-grid,
    .els-stakeholder-grid,
    .els-security-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .els-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .els-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .els-benefits {
        padding: 25px 0;
    }

    .els-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .els-benefit h3 {
        font-size: 14px;
    }

    .els-benefit p {
        font-size: 12px;
    }

    .els-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .els-centered-heading p {
        margin: 0;
    }

    .els-feature-grid,
    .els-model-grid,
    .els-steps-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .els-feature-card,
    .els-model-card {
        padding: 20px;
    }

    .els-feature-icon,
    .els-model-symbol {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .els-feature-card h3,
    .els-model-card h3 {
        font-size: 16px;
    }

    .els-feature-card p,
    .els-model-card p {
        font-size: 13px;
    }

    .els-role-panel {
        padding: 18px;
    }

    .els-role-header h3 {
        font-size: 19px;
    }

    .els-role-row {
        gap: 10px;
    }

    .els-role-row small {
        font-size: 9px;
    }

    .els-step {
        padding: 20px;
    }

    .els-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .els-security {
        padding: 48px 0;
    }

    .els-security-grid {
        gap: 28px;
    }

    .els-security h2 {
        font-size: 27px;
    }

    .els-security-grid > div:first-child p {
        font-size: 13px;
    }

    .els-cta {
        padding: 45px 0;
    }

    .els-cta-inner {
        gap: 23px;
    }

    .els-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .els-cta-actions .els-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .els-container {
        width: calc(100% - 24px);
    }

    .els-dashboard {
        padding: 10px;
    }

    .els-dashboard-welcome {
        padding: 12px;
    }

    .els-welcome-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .els-learning-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .els-stat-card {
        flex-direction: row;
        align-items: center;
    }

    .els-course-item {
        gap: 8px;
    }

    .els-course-thumbnail {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .els-hero-actions {
        flex-direction: column;
    }

    .els-hero-actions .els-btn {
        width: 100%;
    }
}


/* ==========================================
   Digital Document Circulation
   Unique prefix: ddc-
   ========================================== */

.ddc-page {
    --ddc-navy: #0b1735;
    --ddc-blue: #1268d8;
    --ddc-cyan: #10a7e5;
    --ddc-orange: #f28b1b;
    --ddc-text: #34425a;
    --ddc-muted: #6d7b91;
    --ddc-light: #f5f8fc;
    --ddc-border: #e3eaf3;

    color: var(--ddc-text);
    font-family: inherit;
    overflow: hidden;
}

.ddc-page *,
.ddc-page *::before,
.ddc-page *::after {
    box-sizing: border-box;
}

.ddc-page a {
    text-decoration: none;
}

.ddc-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.ddc-page h1,
.ddc-page h2,
.ddc-page h3,
.ddc-page h4,
.ddc-page p {
    margin-top: 0;
}

.ddc-page h1,
.ddc-page h2,
.ddc-page h3,
.ddc-page h4 {
    color: var(--ddc-navy);
    line-height: 1.25;
}

.ddc-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.ddc-page p {
    color: var(--ddc-muted);
    font-size: 15px;
    line-height: 1.85;
}

.ddc-section {
    padding: 76px 0;
}

.ddc-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--ddc-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.5;
}

.ddc-eyebrow-light {
    color: #70d7ff;
}

/* Breadcrumb */

.ddc-breadcrumb {
    padding: 13px 0;
    background: #f7f9fc;
    border-bottom: 1px solid #edf1f6;
    font-size: 13px;
}

.ddc-breadcrumb .ddc-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ddc-breadcrumb a {
    color: var(--ddc-blue);
}

.ddc-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.ddc-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.ddc-btn:hover {
    transform: translateY(-2px);
}

.ddc-btn-primary {
    color: #fff;
    background: var(--ddc-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.ddc-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.ddc-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.ddc-btn-outline {
    color: var(--ddc-navy);
    background: #fff;
    border-color: #d9e2ee;
}

.ddc-btn-outline:hover {
    color: var(--ddc-blue);
    border-color: var(--ddc-blue);
}

/* Hero */

.ddc-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.ddc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.ddc-hero-content {
    padding: 105px 0 22px;
}

.ddc-hero-content h1 {
    max-width: 610px;
    margin-bottom: 20px;
    color: var(--ddc-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1.13;
}

.ddc-hero-content h1 span {
    display: block;
    color: var(--ddc-blue);
}

.ddc-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.ddc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ddc-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.ddc-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

/* Dashboard */

.ddc-hero-visual {
    position: relative;
    min-width: 0;
    padding: 55px 4px 18px 10px;
}

.ddc-dashboard {
    padding: 23px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.ddc-dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #edf1f6;
}

.ddc-brand-mark {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ddc-blue), var(--ddc-cyan));
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.ddc-dashboard-title {
    min-width: 0;
}

.ddc-dashboard-title strong,
.ddc-dashboard-title small {
    display: block;
}

.ddc-dashboard-title strong {
    margin-bottom: 5px;
    color: var(--ddc-navy);
    font-size: 13px;
}

.ddc-dashboard-title small {
    color: var(--ddc-muted);
    font-size: 10px;
}

.ddc-dashboard-menu {
    margin-left: auto;
    color: #8c9ab0;
    letter-spacing: 2px;
}

.ddc-dashboard-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
    padding: 19px;
    border-radius: 10px;
    background: linear-gradient(125deg, #102957, #1268c9 72%, #159fda);
}

.ddc-dashboard-welcome > div {
    min-width: 0;
}

.ddc-mini-label {
    display: block;
    margin-bottom: 10px;
    color: #a9dcff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ddc-dashboard-welcome h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.ddc-dashboard-welcome p {
    margin-bottom: 0;
    color: #e0edff;
    font-size: 11px;
    line-height: 1.7;
}

.ddc-welcome-icon {
    display: flex;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 23px;
}

.ddc-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 17px;
}

.ddc-summary-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 13px 11px;
    border: 1px solid #e5ecf5;
    border-radius: 9px;
    background: #fcfdff;
}

.ddc-summary-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

.ddc-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.ddc-orange {
    color: #bd6b10;
    background: #fff1df;
}

.ddc-summary-card small,
.ddc-summary-card strong {
    display: block;
    overflow-wrap: anywhere;
}

.ddc-summary-card small {
    margin-bottom: 5px;
    color: #8793a6;
    font-size: 10px;
}

.ddc-summary-card strong {
    color: var(--ddc-navy);
    font-size: 11px;
}

.ddc-workflow-panel {
    padding: 16px;
    border: 1px solid #e5ebf4;
    border-radius: 10px;
}

.ddc-workflow-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ddc-workflow-heading h4 {
    margin-bottom: 5px;
    font-size: 13px;
}

.ddc-workflow-heading p {
    margin-bottom: 0;
    font-size: 10px;
}

.ddc-workflow-label {
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--ddc-blue);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.ddc-timeline-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    border-top: 1px solid #edf1f6;
}

.ddc-timeline-dot {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

.ddc-dot-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.ddc-dot-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.ddc-dot-orange {
    color: #bd6b10;
    background: #fff1df;
}

.ddc-timeline-content {
    min-width: 0;
    flex: 1;
}

.ddc-timeline-content strong,
.ddc-timeline-content small {
    display: block;
}

.ddc-timeline-content strong {
    margin-bottom: 5px;
    color: var(--ddc-navy);
    font-size: 11px;
}

.ddc-timeline-content small {
    color: var(--ddc-muted);
    font-size: 9px;
    line-height: 1.5;
}

.ddc-stage-status {
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.ddc-status-done {
    color: #16865b;
    background: #eaf9f2;
}

.ddc-status-progress {
    color: #1268d8;
    background: #eaf2ff;
}

.ddc-status-pending {
    color: #bd6b10;
    background: #fff4e5;
}

.ddc-dashboard-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: #fff;
}

.ddc-footer-check {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f8ee;
    color: #16865b;
    font-size: 14px;
    font-weight: 800;
}

.ddc-dashboard-footer strong,
.ddc-dashboard-footer small {
    display: block;
}

.ddc-dashboard-footer strong {
    margin-bottom: 4px;
    color: var(--ddc-navy);
    font-size: 11px;
}

.ddc-dashboard-footer small {
    color: var(--ddc-muted);
    font-size: 10px;
}

/* Introduction */

.ddc-intro {
    background: #fff;
}

.ddc-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.ddc-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.ddc-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.ddc-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--ddc-blue);
    font-size: 14px;
    font-weight: 800;
}

.ddc-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.ddc-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits */

.ddc-benefits {
    padding: 30px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    background: #f5f8fc;
}

.ddc-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.ddc-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.ddc-benefit-number {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--ddc-blue);
    font-size: 12px;
    font-weight: 800;
}

.ddc-benefit:nth-child(2) .ddc-benefit-number {
    background: #e2f8ff;
    color: #0786b7;
}

.ddc-benefit:nth-child(3) .ddc-benefit-number {
    background: #fff0df;
    color: #c87514;
}

.ddc-benefit:nth-child(4) .ddc-benefit-number {
    background: #e5f7ed;
    color: #168757;
}

.ddc-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.ddc-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Feature cards */

.ddc-features {
    background: #fff;
}

.ddc-centered-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.ddc-centered-heading h2 {
    margin-bottom: 13px;
}

.ddc-centered-heading p {
    max-width: 650px;
    margin: 0 auto;
}

.ddc-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ddc-feature-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--ddc-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.ddc-feature-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.ddc-feature-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.ddc-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.ddc-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.ddc-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.ddc-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.ddc-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.ddc-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.ddc-feature-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Workflow */

.ddc-workflow-section {
    background: #f6f9fd;
}

.ddc-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ddc-process-step {
    padding: 23px;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    background: #fff;
}

.ddc-process-step > span {
    display: flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--ddc-blue);
    font-size: 12px;
    font-weight: 800;
}

.ddc-process-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.ddc-process-step:nth-child(3) > span {
    background: #fff0df;
    color: #bd6b10;
}

.ddc-process-step:nth-child(4) > span {
    background: #f0eaff;
    color: #7753c8;
}

.ddc-process-step:nth-child(5) > span {
    background: #e4f8ec;
    color: #168757;
}

.ddc-process-step h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.ddc-process-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Stakeholders */

.ddc-stakeholders {
    background: #fff;
}

.ddc-stakeholder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 70px;
}

.ddc-stakeholder-content h2 {
    max-width: 510px;
}

.ddc-stakeholder-content > p {
    max-width: 540px;
}

.ddc-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.ddc-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.ddc-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

.ddc-role-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.ddc-role-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.ddc-role-header > span {
    display: block;
    margin-bottom: 8px;
    color: var(--ddc-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.ddc-role-header h3 {
    margin-bottom: 0;
    font-size: 21px;
}

.ddc-role-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.ddc-role-row:last-child {
    border-bottom: 0;
}

.ddc-role-avatar {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
}

.ddc-avatar-navy {
    color: #fff;
    background: var(--ddc-navy);
}

.ddc-avatar-blue {
    color: var(--ddc-blue);
    background: #e8f1ff;
}

.ddc-avatar-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.ddc-avatar-cyan {
    color: #0787b9;
    background: #e4f8ff;
}

.ddc-role-row strong,
.ddc-role-row small {
    display: block;
}

.ddc-role-row strong {
    margin-bottom: 5px;
    color: var(--ddc-navy);
    font-size: 12px;
}

.ddc-role-row small {
    color: var(--ddc-muted);
    font-size: 10px;
    line-height: 1.6;
}

.ddc-role-arrow {
    margin-left: auto;
    color: #8495ab;
    font-size: 19px;
}

/* Security */

.ddc-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--ddc-navy);
}

.ddc-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.ddc-security h2 {
    max-width: 540px;
    margin-bottom: 17px;
    color: #fff;
}

.ddc-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.ddc-security-features {
    display: grid;
    gap: 18px;
}

.ddc-security-features > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.ddc-security-features > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.ddc-security-features strong,
.ddc-security-features small {
    display: block;
}

.ddc-security-features strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.ddc-security-features small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* Integration */

.ddc-integration {
    background: #fff;
}

.ddc-integration-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.ddc-integration-grid > div:first-child h2 {
    max-width: 470px;
}

.ddc-integration-grid > div:last-child p {
    margin-bottom: 17px;
}

.ddc-integration-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0;
}

.ddc-integration-tags span {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid #dce8f8;
    border-radius: 6px;
    background: #f4f8ff;
    color: #285b9d;
    font-size: 11px;
    font-weight: 700;
}

.ddc-integration-note {
    padding-left: 13px;
    border-left: 3px solid var(--ddc-orange);
    font-size: 12px !important;
}

/* CTA */

.ddc-cta {
    padding: 65px 0;
    background: #f5f8fc;
}

.ddc-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.ddc-cta-inner > div:first-child {
    max-width: 700px;
}

.ddc-cta h2 {
    margin-bottom: 12px;
}

.ddc-cta p {
    margin-bottom: 0;
}

.ddc-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .ddc-hero-grid {
        gap: 25px;
    }

    .ddc-hero-content {
        padding: 65px 0 22px;
    }

    .ddc-hero-visual {
        padding: 30px 4px 18px 10px;
    }

    .ddc-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .ddc-dashboard {
        padding: 17px;
    }

    .ddc-summary-card {
        gap: 8px;
        padding: 11px 8px;
    }

    .ddc-summary-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .ddc-intro-grid,
    .ddc-stakeholder-grid,
    .ddc-security-grid,
    .ddc-integration-grid {
        gap: 38px;
    }

    .ddc-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .ddc-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ddc-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ddc-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .ddc-container {
        width: min(100% - 30px, 560px);
    }

    .ddc-section {
        padding: 48px 0;
    }

    .ddc-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .ddc-breadcrumb .ddc-container {
        gap: 7px;
    }

    .ddc-hero {
        padding: 20px 0 35px;
    }

    .ddc-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 25px;
    }

    .ddc-hero-content {
        padding: 0;
    }

    .ddc-hero-visual {
        padding: 0;
    }

    .ddc-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .ddc-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .ddc-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .ddc-hero-actions {
        align-items: stretch;
    }

    .ddc-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .ddc-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .ddc-hero-points span {
        font-size: 10px;
    }

    .ddc-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .ddc-dashboard-header {
        margin-bottom: 16px;
    }

    .ddc-dashboard-title strong {
        font-size: 12px;
    }

    .ddc-dashboard-welcome {
        padding: 15px;
    }

    .ddc-dashboard-welcome h3 {
        font-size: 19px;
    }

    .ddc-dashboard-welcome p {
        font-size: 10px;
    }

    .ddc-summary-grid {
        gap: 8px;
    }

    .ddc-summary-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .ddc-summary-card small {
        font-size: 9px;
    }

    .ddc-summary-card strong {
        font-size: 10px;
    }

    .ddc-workflow-panel {
        padding: 11px;
    }

    .ddc-workflow-heading {
        align-items: flex-start;
    }

    .ddc-workflow-heading h4 {
        font-size: 12px;
    }

    .ddc-timeline-item {
        gap: 8px;
    }

    .ddc-timeline-dot {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

    .ddc-timeline-content strong {
        font-size: 10px;
    }

    .ddc-timeline-content small {
        font-size: 8px;
    }

    .ddc-stage-status {
        padding: 4px 5px;
        font-size: 8px;
    }

    .ddc-intro-grid,
    .ddc-stakeholder-grid,
    .ddc-security-grid,
    .ddc-integration-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .ddc-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .ddc-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .ddc-benefits {
        padding: 25px 0;
    }

    .ddc-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ddc-benefit h3 {
        font-size: 14px;
    }

    .ddc-benefit p {
        font-size: 12px;
    }

    .ddc-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .ddc-centered-heading p {
        margin: 0;
    }

    .ddc-feature-grid,
    .ddc-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .ddc-feature-card {
        padding: 20px;
    }

    .ddc-feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .ddc-feature-card h3 {
        font-size: 16px;
    }

    .ddc-feature-card p {
        font-size: 13px;
    }

    .ddc-process-step {
        padding: 20px;
    }

    .ddc-process-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .ddc-process-step h3 {
        font-size: 15px;
    }

    .ddc-role-panel {
        padding: 18px;
    }

    .ddc-role-header h3 {
        font-size: 19px;
    }

    .ddc-role-row {
        gap: 10px;
    }

    .ddc-role-row small {
        font-size: 9px;
    }

    .ddc-security {
        padding: 48px 0;
    }

    .ddc-security-grid {
        gap: 28px;
    }

    .ddc-security h2 {
        font-size: 27px;
    }

    .ddc-security-grid > div:first-child p {
        font-size: 13px;
    }

    .ddc-integration-tags {
        gap: 8px;
        margin: 17px 0;
    }

    .ddc-integration-tags span {
        padding: 8px 10px;
        font-size: 10px;
    }

    .ddc-integration-note {
        font-size: 12px !important;
    }

    .ddc-cta {
        padding: 45px 0;
    }

    .ddc-cta-inner {
        gap: 23px;
    }

    .ddc-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .ddc-cta-actions .ddc-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .ddc-container {
        width: calc(100% - 24px);
    }

    .ddc-dashboard {
        padding: 10px;
    }

    .ddc-dashboard-welcome {
        padding: 12px;
    }

    .ddc-welcome-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .ddc-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ddc-summary-card {
        flex-direction: row;
        align-items: center;
    }

    .ddc-timeline-item {
        flex-wrap: wrap;
    }

    .ddc-timeline-content {
        flex: 1 1 calc(100% - 50px);
    }

    .ddc-stage-status {
        margin-left: 37px;
    }

    .ddc-hero-actions {
        flex-direction: column;
    }

    .ddc-hero-actions .ddc-btn {
        width: 100%;
    }
}


/* ==========================================
   Transport Management System
   Unique prefix: tms-
   ========================================== */

.tms-page {
    --tms-navy: #0b1735;
    --tms-blue: #1268d8;
    --tms-cyan: #10a7e5;
    --tms-orange: #f28b1b;
    --tms-text: #34425a;
    --tms-muted: #6d7b91;
    --tms-light: #f5f8fc;
    --tms-border: #e3eaf3;

    color: var(--tms-text);
    font-family: inherit;
    overflow: hidden;
}

.tms-page *,
.tms-page *::before,
.tms-page *::after {
    box-sizing: border-box;
}

.tms-page a {
    text-decoration: none;
}

.tms-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.tms-page h1,
.tms-page h2,
.tms-page h3,
.tms-page h4,
.tms-page p {
    margin-top: 0;
}

.tms-page h1,
.tms-page h2,
.tms-page h3,
.tms-page h4 {
    color: var(--tms-navy);
    line-height: 1.25;
}

.tms-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.tms-page p {
    color: var(--tms-muted);
    font-size: 15px;
    line-height: 1.85;
}

.tms-section {
    padding: 76px 0;
}

.tms-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--tms-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.5;
}

.tms-eyebrow-light {
    color: #70d7ff;
}

/* Breadcrumb */

.tms-breadcrumb {
    padding: 13px 0;
    background: #f7f9fc;
    border-bottom: 1px solid #edf1f6;
    font-size: 13px;
}

.tms-breadcrumb .tms-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tms-breadcrumb a {
    color: var(--tms-blue);
}

.tms-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.tms-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.tms-btn:hover {
    transform: translateY(-2px);
}

.tms-btn-primary {
    color: #fff;
    background: var(--tms-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.tms-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.tms-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.tms-btn-outline {
    color: var(--tms-navy);
    background: #fff;
    border-color: #d9e2ee;
}

.tms-btn-outline:hover {
    color: var(--tms-blue);
    border-color: var(--tms-blue);
}

/* Hero */

.tms-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.tms-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.tms-hero-content {
    padding: 105px 0 22px;
}

.tms-hero-content h1 {
    max-width: 610px;
    margin-bottom: 20px;
    color: var(--tms-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1.13;
}

.tms-hero-content h1 span {
    display: block;
    color: var(--tms-blue);
}

.tms-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.tms-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tms-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.tms-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

/* Dashboard */

.tms-hero-visual {
    position: relative;
    min-width: 0;
    padding: 55px 4px 18px 10px;
}

.tms-dashboard {
    padding: 23px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.tms-dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #edf1f6;
}

.tms-brand-mark {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--tms-blue), var(--tms-cyan));
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.tms-dashboard-title {
    min-width: 0;
}

.tms-dashboard-title strong,
.tms-dashboard-title small {
    display: block;
}

.tms-dashboard-title strong {
    margin-bottom: 5px;
    color: var(--tms-navy);
    font-size: 13px;
}

.tms-dashboard-title small {
    color: var(--tms-muted);
    font-size: 10px;
}

.tms-dashboard-menu {
    margin-left: auto;
    color: #8c9ab0;
    letter-spacing: 2px;
}

.tms-dashboard-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
    padding: 19px;
    border-radius: 10px;
    background: linear-gradient(125deg, #102957, #1268c9 72%, #159fda);
}

.tms-dashboard-welcome > div {
    min-width: 0;
}

.tms-mini-label {
    display: block;
    margin-bottom: 10px;
    color: #a9dcff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.tms-dashboard-welcome h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.tms-dashboard-welcome p {
    margin-bottom: 0;
    color: #e0edff;
    font-size: 11px;
    line-height: 1.7;
}

.tms-welcome-icon {
    display: flex;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 23px;
}

.tms-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 17px;
}

.tms-summary-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 13px 11px;
    border: 1px solid #e5ecf5;
    border-radius: 9px;
    background: #fcfdff;
}

.tms-summary-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
}

.tms-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.tms-orange {
    color: #bd6b10;
    background: #fff1df;
}

.tms-summary-card small,
.tms-summary-card strong {
    display: block;
    overflow-wrap: anywhere;
}

.tms-summary-card small {
    margin-bottom: 5px;
    color: #8793a6;
    font-size: 10px;
}

.tms-summary-card strong {
    color: var(--tms-navy);
    font-size: 11px;
}

/* Route panel */

.tms-route-panel {
    padding: 16px;
    border: 1px solid #e5ebf4;
    border-radius: 10px;
}

.tms-route-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.tms-route-heading h4 {
    margin-bottom: 5px;
    font-size: 13px;
}

.tms-route-heading p {
    margin-bottom: 0;
    font-size: 10px;
}

.tms-route-label {
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--tms-blue);
    font-size: 9px;
    font-weight: 800;
}

/* Decorative map */

.tms-map {
    position: relative;
    overflow: hidden;
    height: 190px;
    margin-bottom: 12px;
    border: 1px solid #e4edf5;
    border-radius: 9px;
    background: #f1f6f8;
}

.tms-map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(172, 193, 202, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(172, 193, 202, 0.25) 1px, transparent 1px);
    background-size: 24px 24px;
}

.tms-map-road {
    position: absolute;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: #dce5eb;
}

.tms-road-one {
    top: 28%;
    left: -10%;
    width: 120%;
    transform: rotate(-13deg);
}

.tms-road-two {
    top: 63%;
    left: -8%;
    width: 120%;
    transform: rotate(17deg);
}

.tms-road-three {
    top: -5%;
    left: 50%;
    width: 125%;
    transform: rotate(70deg);
}

.tms-route-line {
    position: absolute;
    top: 23%;
    left: 18%;
    width: 62%;
    height: 58%;
    border: 3px dashed var(--tms-blue);
    border-right-color: transparent;
    border-bottom-color: var(--tms-cyan);
    border-radius: 50%;
    transform: rotate(-10deg);
}

.tms-map-pin {
    position: absolute;
    z-index: 2;
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 4px;
    box-shadow: 0 3px 10px rgba(11, 23, 53, 0.15);
    transform: rotate(-45deg);
}

.tms-map-pin span {
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    transform: rotate(45deg);
}

.tms-pin-start {
    top: 22%;
    left: 15%;
    background: var(--tms-blue);
}

.tms-pin-middle {
    top: 52%;
    left: 48%;
    background: var(--tms-orange);
}

.tms-pin-end {
    top: 27%;
    right: 13%;
    background: #1a9d73;
}

.tms-map-label {
    position: absolute;
    z-index: 3;
    padding: 5px 7px;
    border: 1px solid #e1e8ef;
    border-radius: 4px;
    background: #fff;
    color: #42536a;
    font-size: 9px;
    font-weight: 700;
}

.tms-map-label-one {
    top: 8%;
    left: 5%;
}

.tms-map-label-two {
    top: 68%;
    left: 43%;
}

.tms-map-label-three {
    top: 8%;
    right: 3%;
}

.tms-route-details {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid #edf1f6;
}

.tms-route-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e8f1ff;
    color: var(--tms-blue);
    font-size: 13px;
    font-weight: 800;
}

.tms-route-icon-orange {
    background: #fff1df;
    color: #bd6b10;
}

.tms-route-info {
    min-width: 0;
    flex: 1;
}

.tms-route-info strong,
.tms-route-info small {
    display: block;
}

.tms-route-info strong {
    margin-bottom: 5px;
    color: var(--tms-navy);
    font-size: 11px;
}

.tms-route-info small {
    color: var(--tms-muted);
    font-size: 9px;
    line-height: 1.5;
}

.tms-route-status {
    padding: 5px 7px;
    border-radius: 5px;
    background: #eaf9f2;
    color: #16865b;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.tms-status-blue {
    background: #eaf2ff;
    color: var(--tms-blue);
}

.tms-dashboard-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: #fff;
}

.tms-footer-check {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f8ee;
    color: #16865b;
    font-size: 14px;
    font-weight: 800;
}

.tms-dashboard-footer strong,
.tms-dashboard-footer small {
    display: block;
}

.tms-dashboard-footer strong {
    margin-bottom: 4px;
    color: var(--tms-navy);
    font-size: 11px;
}

.tms-dashboard-footer small {
    color: var(--tms-muted);
    font-size: 10px;
}

/* Introduction */

.tms-intro {
    background: #fff;
}

.tms-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.tms-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.tms-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.tms-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--tms-blue);
    font-size: 14px;
    font-weight: 800;
}

.tms-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.tms-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits */

.tms-benefits {
    padding: 30px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    background: #f5f8fc;
}

.tms-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.tms-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.tms-benefit-number {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--tms-blue);
    font-size: 12px;
    font-weight: 800;
}

.tms-benefit:nth-child(2) .tms-benefit-number {
    background: #e2f8ff;
    color: #0786b7;
}

.tms-benefit:nth-child(3) .tms-benefit-number {
    background: #fff0df;
    color: #c87514;
}

.tms-benefit:nth-child(4) .tms-benefit-number {
    background: #e5f7ed;
    color: #168757;
}

.tms-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.tms-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Feature cards */

.tms-features {
    background: #fff;
}

.tms-centered-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.tms-centered-heading h2 {
    margin-bottom: 13px;
}

.tms-centered-heading p {
    max-width: 650px;
    margin: 0 auto;
}

.tms-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.tms-feature-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--tms-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.tms-feature-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.tms-feature-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.tms-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.tms-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.tms-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.tms-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.tms-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.tms-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.tms-feature-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Institutional transport */

.tms-institutional {
    background: #f6f9fd;
}

.tms-institutional-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.tms-institutional-content h2 {
    max-width: 540px;
}

.tms-institutional-content > p {
    max-width: 550px;
}

.tms-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0;
    padding: 0;
    list-style: none;
}

.tms-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.tms-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

.tms-campus-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.tms-campus-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.tms-campus-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--tms-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.tms-campus-header h3 {
    margin-bottom: 6px;
    font-size: 21px;
}

.tms-campus-header p {
    margin-bottom: 0;
    font-size: 11px;
}

.tms-campus-route {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.tms-campus-stop {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
}

.tms-stop-blue {
    color: var(--tms-blue);
    background: #e8f1ff;
}

.tms-stop-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.tms-stop-green {
    color: #168757;
    background: #e4f8ec;
}

.tms-campus-route > div {
    min-width: 0;
    flex: 1;
}

.tms-campus-route strong,
.tms-campus-route small {
    display: block;
}

.tms-campus-route strong {
    margin-bottom: 5px;
    color: var(--tms-navy);
    font-size: 12px;
}

.tms-campus-route small {
    color: var(--tms-muted);
    font-size: 10px;
    line-height: 1.6;
}

.tms-campus-arrow {
    color: #8495ab;
    font-size: 19px;
}

.tms-campus-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    background: #effaf5;
}

.tms-campus-note > span {
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d9f4e6;
    color: #16865b;
    font-size: 12px;
    font-weight: 800;
}

.tms-campus-note p {
    margin-bottom: 0;
    color: #28664f;
    font-size: 11px;
    font-weight: 600;
}

/* Workflow */

.tms-workflow {
    background: #fff;
}

.tms-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.tms-process-step {
    padding: 23px;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    background: #fff;
}

.tms-process-step > span {
    display: flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--tms-blue);
    font-size: 12px;
    font-weight: 800;
}

.tms-process-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.tms-process-step:nth-child(3) > span {
    background: #fff0df;
    color: #bd6b10;
}

.tms-process-step:nth-child(4) > span {
    background: #f0eaff;
    color: #7753c8;
}

.tms-process-step:nth-child(5) > span {
    background: #e4f8ec;
    color: #168757;
}

.tms-process-step h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.tms-process-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Security and integration */

.tms-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--tms-navy);
}

.tms-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.tms-security h2 {
    max-width: 540px;
    margin-bottom: 17px;
    color: #fff;
}

.tms-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.tms-security-features {
    display: grid;
    gap: 18px;
}

.tms-security-features > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.tms-security-features > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.tms-security-features strong,
.tms-security-features small {
    display: block;
}

.tms-security-features strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.tms-security-features small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* CTA */

.tms-cta {
    padding: 65px 0;
    background: #f5f8fc;
}

.tms-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.tms-cta-inner > div:first-child {
    max-width: 700px;
}

.tms-cta h2 {
    margin-bottom: 12px;
}

.tms-cta p {
    margin-bottom: 0;
}

.tms-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .tms-hero-grid {
        gap: 25px;
    }

    .tms-hero-content {
        padding: 65px 0 22px;
    }

    .tms-hero-visual {
        padding: 30px 4px 18px 10px;
    }

    .tms-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .tms-dashboard {
        padding: 17px;
    }

    .tms-summary-card {
        gap: 8px;
        padding: 11px 8px;
    }

    .tms-summary-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .tms-intro-grid,
    .tms-institutional-grid,
    .tms-security-grid {
        gap: 38px;
    }

    .tms-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .tms-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tms-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tms-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .tms-container {
        width: min(100% - 30px, 560px);
    }

    .tms-section {
        padding: 48px 0;
    }

    .tms-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .tms-breadcrumb .tms-container {
        gap: 7px;
    }

    .tms-hero {
        padding: 20px 0 35px;
    }

    .tms-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 25px;
    }

    .tms-hero-content {
        padding: 0;
    }

    .tms-hero-visual {
        padding: 0;
    }

    .tms-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .tms-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .tms-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .tms-hero-actions {
        align-items: stretch;
    }

    .tms-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .tms-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .tms-hero-points span {
        font-size: 10px;
    }

    .tms-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .tms-dashboard-header {
        margin-bottom: 16px;
    }

    .tms-dashboard-title strong {
        font-size: 12px;
    }

    .tms-dashboard-welcome {
        padding: 15px;
    }

    .tms-dashboard-welcome h3 {
        font-size: 19px;
    }

    .tms-dashboard-welcome p {
        font-size: 10px;
    }

    .tms-summary-grid {
        gap: 8px;
    }

    .tms-summary-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .tms-summary-card small {
        font-size: 9px;
    }

    .tms-summary-card strong {
        font-size: 10px;
    }

    .tms-route-panel {
        padding: 11px;
    }

    .tms-route-heading h4 {
        font-size: 12px;
    }

    .tms-map {
        height: 165px;
    }

    .tms-route-details {
        gap: 8px;
    }

    .tms-route-info strong {
        font-size: 10px;
    }

    .tms-route-info small {
        font-size: 8px;
    }

    .tms-route-status {
        padding: 4px 5px;
        font-size: 8px;
    }

    .tms-intro-grid,
    .tms-institutional-grid,
    .tms-security-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .tms-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .tms-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .tms-benefits {
        padding: 25px 0;
    }

    .tms-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .tms-benefit h3 {
        font-size: 14px;
    }

    .tms-benefit p {
        font-size: 12px;
    }

    .tms-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .tms-centered-heading p {
        margin: 0;
    }

    .tms-feature-grid,
    .tms-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .tms-feature-card {
        padding: 20px;
    }

    .tms-feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .tms-feature-card h3 {
        font-size: 16px;
    }

    .tms-feature-card p {
        font-size: 13px;
    }

    .tms-check-list li {
        font-size: 13px;
    }

    .tms-campus-panel {
        padding: 18px;
    }

    .tms-campus-header h3 {
        font-size: 19px;
    }

    .tms-campus-route {
        gap: 10px;
    }

    .tms-campus-route small {
        font-size: 9px;
    }

    .tms-process-step {
        padding: 20px;
    }

    .tms-process-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .tms-process-step h3 {
        font-size: 15px;
    }

    .tms-security {
        padding: 48px 0;
    }

    .tms-security-grid {
        gap: 28px;
    }

    .tms-security h2 {
        font-size: 27px;
    }

    .tms-security-grid > div:first-child p {
        font-size: 13px;
    }

    .tms-cta {
        padding: 45px 0;
    }

    .tms-cta-inner {
        gap: 23px;
    }

    .tms-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .tms-cta-actions .tms-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .tms-container {
        width: calc(100% - 24px);
    }

    .tms-dashboard {
        padding: 10px;
    }

    .tms-dashboard-welcome {
        padding: 12px;
    }

    .tms-welcome-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .tms-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tms-summary-card {
        flex-direction: row;
        align-items: center;
    }

    .tms-map {
        height: 145px;
    }

    .tms-route-details {
        flex-wrap: wrap;
    }

    .tms-route-info {
        flex: 1 1 calc(100% - 55px);
    }

    .tms-route-status {
        margin-left: 46px;
    }

    .tms-campus-route {
        gap: 8px;
    }

    .tms-campus-stop {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }

    .tms-hero-actions {
        flex-direction: column;
    }

    .tms-hero-actions .tms-btn {
        width: 100%;
    }
}


/* ==========================================
   Biometric Smart Card
   Unique prefix: bsc-
   ========================================== */

.bsc-page {
    --bsc-navy: #0b1735;
    --bsc-blue: #1268d8;
    --bsc-cyan: #10a7e5;
    --bsc-orange: #f28b1b;
    --bsc-text: #34425a;
    --bsc-muted: #6d7b91;
    --bsc-light: #f5f8fc;
    --bsc-border: #e3eaf3;

    color: var(--bsc-text);
    font-family: inherit;
    overflow: hidden;
}

.bsc-page *,
.bsc-page *::before,
.bsc-page *::after {
    box-sizing: border-box;
}

.bsc-page a {
    text-decoration: none;
}

.bsc-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.bsc-page h1,
.bsc-page h2,
.bsc-page h3,
.bsc-page h4,
.bsc-page p {
    margin-top: 0;
}

.bsc-page h1,
.bsc-page h2,
.bsc-page h3,
.bsc-page h4 {
    color: var(--bsc-navy);
    line-height: 1.25;
}

.bsc-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.bsc-page p {
    color: var(--bsc-muted);
    font-size: 15px;
    line-height: 1.85;
}

.bsc-section {
    padding: 76px 0;
}

.bsc-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--bsc-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.5;
}

.bsc-eyebrow-light {
    color: #70d7ff;
}

/* Breadcrumb */

.bsc-breadcrumb {
    padding: 13px 0;
    background: #f7f9fc;
    border-bottom: 1px solid #edf1f6;
    font-size: 13px;
}

.bsc-breadcrumb .bsc-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.bsc-breadcrumb a {
    color: var(--bsc-blue);
}

.bsc-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.bsc-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.bsc-btn:hover {
    transform: translateY(-2px);
}

.bsc-btn-primary {
    color: #fff;
    background: var(--bsc-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.bsc-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.bsc-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.bsc-btn-outline {
    color: var(--bsc-navy);
    background: #fff;
    border-color: #d9e2ee;
}

.bsc-btn-outline:hover {
    color: var(--bsc-blue);
    border-color: var(--bsc-blue);
}

/* Hero */

.bsc-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.bsc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.bsc-hero-content {
    padding: 105px 0 22px;
}

.bsc-hero-content h1 {
    max-width: 610px;
    margin-bottom: 20px;
    color: var(--bsc-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1.13;
}

.bsc-hero-content h1 span {
    display: block;
    color: var(--bsc-blue);
}

.bsc-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.bsc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bsc-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.bsc-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

/* Dashboard */

.bsc-hero-visual {
    position: relative;
    min-width: 0;
    padding: 55px 4px 18px 10px;
}

.bsc-dashboard {
    padding: 23px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.bsc-dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #edf1f6;
}

.bsc-brand-mark {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--bsc-blue), var(--bsc-cyan));
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.bsc-dashboard-title {
    min-width: 0;
}

.bsc-dashboard-title strong,
.bsc-dashboard-title small {
    display: block;
}

.bsc-dashboard-title strong {
    margin-bottom: 5px;
    color: var(--bsc-navy);
    font-size: 13px;
}

.bsc-dashboard-title small {
    color: var(--bsc-muted);
    font-size: 10px;
}

.bsc-dashboard-menu {
    margin-left: auto;
    color: #8c9ab0;
    letter-spacing: 2px;
}

.bsc-dashboard-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
    padding: 19px;
    border-radius: 10px;
    background: linear-gradient(125deg, #102957, #1268c9 72%, #159fda);
}

.bsc-dashboard-welcome > div {
    min-width: 0;
}

.bsc-mini-label {
    display: block;
    margin-bottom: 10px;
    color: #a9dcff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.bsc-dashboard-welcome h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.bsc-dashboard-welcome p {
    margin-bottom: 0;
    color: #e0edff;
    font-size: 11px;
    line-height: 1.7;
}

.bsc-welcome-icon {
    display: flex;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 23px;
}

.bsc-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 17px;
}

.bsc-summary-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 13px 11px;
    border: 1px solid #e5ecf5;
    border-radius: 9px;
    background: #fcfdff;
}

.bsc-summary-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
}

.bsc-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.bsc-orange {
    color: #bd6b10;
    background: #fff1df;
}

.bsc-summary-card small,
.bsc-summary-card strong {
    display: block;
    overflow-wrap: anywhere;
}

.bsc-summary-card small {
    margin-bottom: 5px;
    color: #8793a6;
    font-size: 10px;
}

.bsc-summary-card strong {
    color: var(--bsc-navy);
    font-size: 11px;
}

/* Smart card illustration */

.bsc-card-preview {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 13px;
    background:
        radial-gradient(circle at 90% 20%, rgba(16, 167, 229, 0.45), transparent 30%),
        linear-gradient(135deg, #0d1c40, #154c93 70%, #087eaf);
    box-shadow: 0 12px 25px rgba(11, 37, 78, 0.16);
}

.bsc-card-top {
    display: flex;
    align-items: center;
    gap: 11px;
}

.bsc-card-logo {
    display: flex;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.bsc-card-top > div:nth-child(2) {
    min-width: 0;
}

.bsc-card-top strong,
.bsc-card-top small {
    display: block;
    color: #fff;
}

.bsc-card-top strong {
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 0.7px;
}

.bsc-card-top small {
    color: #b8d7f9;
    font-size: 8px;
    letter-spacing: 1px;
}

.bsc-card-chip {
    width: 27px;
    height: 21px;
    flex: 0 0 27px;
    margin-left: auto;
    border: 1px solid #d3c89d;
    border-radius: 5px;
    background:
        linear-gradient(90deg, transparent 47%, #d3c89d 48%, #d3c89d 52%, transparent 53%),
        linear-gradient(0deg, transparent 46%, #d3c89d 47%, #d3c89d 53%, transparent 54%),
        #b5a76c;
    opacity: 0.9;
}

.bsc-card-middle {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 23px 0 19px;
}

.bsc-card-avatar {
    display: flex;
    width: 55px;
    height: 65px;
    flex: 0 0 55px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.bsc-card-person {
    min-width: 0;
    flex: 1;
}

.bsc-card-person small,
.bsc-card-person strong,
.bsc-card-person span {
    display: block;
}

.bsc-card-person small {
    margin-bottom: 5px;
    color: #a9d4ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.bsc-card-person strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 15px;
}

.bsc-card-person span {
    margin-top: 3px;
    color: #d5e6fb;
    font-size: 9px;
}

.bsc-card-person .bsc-card-number {
    margin-top: 10px;
    font-size: 8px;
    letter-spacing: 0.8px;
}

.bsc-card-qr {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 5px;
    border-radius: 5px;
    background: #fff;
}

.bsc-card-qr span {
    border-radius: 1px;
    background: #153e73;
}

.bsc-card-qr span:nth-child(2),
.bsc-card-qr span:nth-child(4),
.bsc-card-qr span:nth-child(8) {
    background: #fff;
    border: 2px solid #153e73;
}

.bsc-card-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: #c4e1ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.bsc-card-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0;
    font-weight: 600;
}

.bsc-card-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #76e1b2;
}

.bsc-verification-panel {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #e4ebf5;
    border-radius: 9px;
    background: #fbfdff;
}

.bsc-verification-icon {
    display: flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e5f8ee;
    color: #16865b;
    font-size: 16px;
    font-weight: 800;
}

.bsc-verification-panel > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.bsc-verification-panel strong,
.bsc-verification-panel small {
    display: block;
}

.bsc-verification-panel strong {
    margin-bottom: 5px;
    color: var(--bsc-navy);
    font-size: 11px;
}

.bsc-verification-panel small {
    color: var(--bsc-muted);
    font-size: 9px;
    line-height: 1.5;
}

.bsc-verification-tag {
    padding: 5px 6px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--bsc-blue);
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.bsc-dashboard-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: #fff;
}

.bsc-footer-check {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f8ee;
    color: #16865b;
    font-size: 14px;
    font-weight: 800;
}

.bsc-dashboard-footer strong,
.bsc-dashboard-footer small {
    display: block;
}

.bsc-dashboard-footer strong {
    margin-bottom: 4px;
    color: var(--bsc-navy);
    font-size: 11px;
}

.bsc-dashboard-footer small {
    color: var(--bsc-muted);
    font-size: 10px;
}

/* Introduction */

.bsc-intro {
    background: #fff;
}

.bsc-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.bsc-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.bsc-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.bsc-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--bsc-blue);
    font-size: 14px;
    font-weight: 800;
}

.bsc-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.bsc-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits */

.bsc-benefits {
    padding: 30px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    background: #f5f8fc;
}

.bsc-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.bsc-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.bsc-benefit-number {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--bsc-blue);
    font-size: 12px;
    font-weight: 800;
}

.bsc-benefit:nth-child(2) .bsc-benefit-number {
    background: #e2f8ff;
    color: #0786b7;
}

.bsc-benefit:nth-child(3) .bsc-benefit-number {
    background: #fff0df;
    color: #c87514;
}

.bsc-benefit:nth-child(4) .bsc-benefit-number {
    background: #e5f7ed;
    color: #168757;
}

.bsc-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.bsc-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Features */

.bsc-features {
    background: #fff;
}

.bsc-centered-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.bsc-centered-heading h2 {
    margin-bottom: 13px;
}

.bsc-centered-heading p {
    max-width: 650px;
    margin: 0 auto;
}

.bsc-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.bsc-feature-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--bsc-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.bsc-feature-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.bsc-feature-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.bsc-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.bsc-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.bsc-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.bsc-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.bsc-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.bsc-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.bsc-feature-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Workflow */

.bsc-workflow {
    background: #f6f9fd;
}

.bsc-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.bsc-process-step {
    padding: 23px;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    background: #fff;
}

.bsc-process-step > span {
    display: flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--bsc-blue);
    font-size: 12px;
    font-weight: 800;
}

.bsc-process-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.bsc-process-step:nth-child(3) > span {
    background: #fff0df;
    color: #bd6b10;
}

.bsc-process-step:nth-child(4) > span {
    background: #f0eaff;
    color: #7753c8;
}

.bsc-process-step:nth-child(5) > span {
    background: #e4f8ec;
    color: #168757;
}

.bsc-process-step h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.bsc-process-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Institutional services */

.bsc-institutional {
    background: #fff;
}

.bsc-institutional-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.bsc-institutional-content h2 {
    max-width: 530px;
}

.bsc-institutional-content > p {
    max-width: 550px;
}

.bsc-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0;
    padding: 0;
    list-style: none;
}

.bsc-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.bsc-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

.bsc-campus-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.bsc-campus-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.bsc-campus-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--bsc-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.bsc-campus-header h3 {
    margin-bottom: 6px;
    font-size: 21px;
}

.bsc-campus-header p {
    margin-bottom: 0;
    font-size: 11px;
}

.bsc-campus-service {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.bsc-campus-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 800;
}

.bsc-campus-blue {
    color: var(--bsc-blue);
    background: #e8f1ff;
}

.bsc-campus-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.bsc-campus-green {
    color: #168757;
    background: #e4f8ec;
}

.bsc-campus-cyan {
    color: #0787b9;
    background: #e4f8ff;
}

.bsc-campus-service > div {
    min-width: 0;
    flex: 1;
}

.bsc-campus-service strong,
.bsc-campus-service small {
    display: block;
}

.bsc-campus-service strong {
    margin-bottom: 5px;
    color: var(--bsc-navy);
    font-size: 12px;
}

.bsc-campus-service small {
    color: var(--bsc-muted);
    font-size: 10px;
    line-height: 1.6;
}

.bsc-campus-arrow {
    color: #8495ab;
    font-size: 19px;
}

.bsc-campus-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    background: #effaf5;
}

.bsc-campus-note > span {
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d9f4e6;
    color: #16865b;
    font-size: 12px;
    font-weight: 800;
}

.bsc-campus-note p {
    margin-bottom: 0;
    color: #28664f;
    font-size: 11px;
    font-weight: 600;
}

/* Security */

.bsc-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--bsc-navy);
}

.bsc-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.bsc-security h2 {
    max-width: 540px;
    margin-bottom: 17px;
    color: #fff;
}

.bsc-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.bsc-security-features {
    display: grid;
    gap: 18px;
}

.bsc-security-features > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.bsc-security-features > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.bsc-security-features strong,
.bsc-security-features small {
    display: block;
}

.bsc-security-features strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.bsc-security-features small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* Integration */

.bsc-integration {
    background: #fff;
}

.bsc-integration-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.bsc-integration-grid > div:first-child h2 {
    max-width: 470px;
}

.bsc-integration-grid > div:last-child p {
    margin-bottom: 17px;
}

.bsc-integration-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0;
}

.bsc-integration-tags span {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid #dce8f8;
    border-radius: 6px;
    background: #f4f8ff;
    color: #285b9d;
    font-size: 11px;
    font-weight: 700;
}

.bsc-integration-note {
    padding-left: 13px;
    border-left: 3px solid var(--bsc-orange);
    font-size: 12px !important;
}

/* CTA */

.bsc-cta {
    padding: 65px 0;
    background: #f5f8fc;
}

.bsc-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.bsc-cta-inner > div:first-child {
    max-width: 700px;
}

.bsc-cta h2 {
    margin-bottom: 12px;
}

.bsc-cta p {
    margin-bottom: 0;
}

.bsc-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .bsc-hero-grid {
        gap: 25px;
    }

    .bsc-hero-content {
        padding: 65px 0 22px;
    }

    .bsc-hero-visual {
        padding: 30px 4px 18px 10px;
    }

    .bsc-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .bsc-dashboard {
        padding: 17px;
    }

    .bsc-summary-card {
        gap: 8px;
        padding: 11px 8px;
    }

    .bsc-summary-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .bsc-intro-grid,
    .bsc-institutional-grid,
    .bsc-security-grid,
    .bsc-integration-grid {
        gap: 38px;
    }

    .bsc-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .bsc-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bsc-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bsc-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .bsc-container {
        width: min(100% - 30px, 560px);
    }

    .bsc-section {
        padding: 48px 0;
    }

    .bsc-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .bsc-breadcrumb .bsc-container {
        gap: 7px;
    }

    .bsc-hero {
        padding: 20px 0 35px;
    }

    .bsc-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 25px;
    }

    .bsc-hero-content {
        padding: 0;
    }

    .bsc-hero-visual {
        padding: 0;
    }

    .bsc-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .bsc-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .bsc-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .bsc-hero-actions {
        align-items: stretch;
    }

    .bsc-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .bsc-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .bsc-hero-points span {
        font-size: 10px;
    }

    .bsc-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .bsc-dashboard-header {
        margin-bottom: 16px;
    }

    .bsc-dashboard-title strong {
        font-size: 12px;
    }

    .bsc-dashboard-welcome {
        padding: 15px;
    }

    .bsc-dashboard-welcome h3 {
        font-size: 19px;
    }

    .bsc-dashboard-welcome p {
        font-size: 10px;
    }

    .bsc-summary-grid {
        gap: 8px;
    }

    .bsc-summary-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .bsc-summary-card small {
        font-size: 9px;
    }

    .bsc-summary-card strong {
        font-size: 10px;
    }

    .bsc-card-preview {
        padding: 14px;
    }

    .bsc-card-middle {
        gap: 9px;
        margin: 18px 0 15px;
    }

    .bsc-card-avatar {
        width: 43px;
        height: 55px;
        flex-basis: 43px;
    }

    .bsc-card-person strong {
        font-size: 13px;
    }

    .bsc-card-qr {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        gap: 2px;
        padding: 4px;
    }

    .bsc-verification-panel {
        flex-wrap: wrap;
        padding: 10px;
    }

    .bsc-verification-panel > div:nth-child(2) {
        flex: 1;
    }

    .bsc-verification-tag {
        margin-left: 47px;
    }

    .bsc-intro-grid,
    .bsc-institutional-grid,
    .bsc-security-grid,
    .bsc-integration-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .bsc-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .bsc-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .bsc-benefits {
        padding: 25px 0;
    }

    .bsc-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .bsc-benefit h3 {
        font-size: 14px;
    }

    .bsc-benefit p {
        font-size: 12px;
    }

    .bsc-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .bsc-centered-heading p {
        margin: 0;
    }

    .bsc-feature-grid,
    .bsc-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .bsc-feature-card {
        padding: 20px;
    }

    .bsc-feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .bsc-feature-card h3 {
        font-size: 16px;
    }

    .bsc-feature-card p {
        font-size: 13px;
    }

    .bsc-check-list li {
        font-size: 13px;
    }

    .bsc-campus-panel {
        padding: 18px;
    }

    .bsc-campus-header h3 {
        font-size: 19px;
    }

    .bsc-campus-service {
        gap: 10px;
    }

    .bsc-campus-service small {
        font-size: 9px;
    }

    .bsc-process-step {
        padding: 20px;
    }

    .bsc-process-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .bsc-process-step h3 {
        font-size: 15px;
    }

    .bsc-security {
        padding: 48px 0;
    }

    .bsc-security-grid {
        gap: 28px;
    }

    .bsc-security h2 {
        font-size: 27px;
    }

    .bsc-security-grid > div:first-child p {
        font-size: 13px;
    }

    .bsc-integration-tags {
        gap: 8px;
        margin: 17px 0;
    }

    .bsc-integration-tags span {
        padding: 8px 10px;
        font-size: 10px;
    }

    .bsc-integration-note {
        font-size: 12px !important;
    }

    .bsc-cta {
        padding: 45px 0;
    }

    .bsc-cta-inner {
        gap: 23px;
    }

    .bsc-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .bsc-cta-actions .bsc-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .bsc-container {
        width: calc(100% - 24px);
    }

    .bsc-dashboard {
        padding: 10px;
    }

    .bsc-dashboard-welcome {
        padding: 12px;
    }

    .bsc-welcome-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .bsc-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bsc-summary-card {
        flex-direction: row;
        align-items: center;
    }

    .bsc-card-preview {
        padding: 11px;
    }

    .bsc-card-middle {
        flex-wrap: wrap;
    }

    .bsc-card-person {
        flex: 1 1 calc(100% - 70px);
    }

    .bsc-card-qr {
        margin-left: auto;
    }

    .bsc-card-bottom {
        font-size: 7px;
    }

    .bsc-campus-service {
        gap: 8px;
    }

    .bsc-campus-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }

    .bsc-hero-actions {
        flex-direction: column;
    }

    .bsc-hero-actions .bsc-btn {
        width: 100%;
    }
}


/* ==========================================
   RFID Library Automation
   Unique prefix: rla-
   ========================================== */

.rla-page {
    --rla-navy: #0b1735;
    --rla-blue: #1268d8;
    --rla-cyan: #10a7e5;
    --rla-orange: #f28b1b;
    --rla-text: #34425a;
    --rla-muted: #6d7b91;
    --rla-light: #f5f8fc;
    --rla-border: #e3eaf3;

    color: var(--rla-text);
    font-family: inherit;
    overflow: hidden;
}

.rla-page *,
.rla-page *::before,
.rla-page *::after {
    box-sizing: border-box;
}

.rla-page a {
    text-decoration: none;
}

.rla-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.rla-page h1,
.rla-page h2,
.rla-page h3,
.rla-page h4,
.rla-page p {
    margin-top: 0;
}

.rla-page h1,
.rla-page h2,
.rla-page h3,
.rla-page h4 {
    color: var(--rla-navy);
    line-height: 1.25;
}

.rla-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.rla-page p {
    color: var(--rla-muted);
    font-size: 15px;
    line-height: 1.85;
}

.rla-section {
    padding: 76px 0;
}

.rla-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--rla-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.5;
}

.rla-eyebrow-light {
    color: #70d7ff;
}

/* Breadcrumb */

.rla-breadcrumb {
    padding: 13px 0;
    background: #f7f9fc;
    border-bottom: 1px solid #edf1f6;
    font-size: 13px;
}

.rla-breadcrumb .rla-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.rla-breadcrumb a {
    color: var(--rla-blue);
}

.rla-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.rla-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.rla-btn:hover {
    transform: translateY(-2px);
}

.rla-btn-primary {
    color: #fff;
    background: var(--rla-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.rla-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.rla-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.rla-btn-outline {
    color: var(--rla-navy);
    background: #fff;
    border-color: #d9e2ee;
}

.rla-btn-outline:hover {
    color: var(--rla-blue);
    border-color: var(--rla-blue);
}

/* Hero */

.rla-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.rla-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.rla-hero-content {
    padding: 105px 0 22px;
}

.rla-hero-content h1 {
    max-width: 610px;
    margin-bottom: 20px;
    color: var(--rla-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1.13;
}

.rla-hero-content h1 span {
    display: block;
    color: var(--rla-blue);
}

.rla-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.rla-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rla-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.rla-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

/* Dashboard */

.rla-hero-visual {
    position: relative;
    min-width: 0;
    padding: 55px 4px 18px 10px;
}

.rla-dashboard {
    padding: 23px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.rla-dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #edf1f6;
}

.rla-brand-mark {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--rla-blue), var(--rla-cyan));
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.rla-dashboard-title {
    min-width: 0;
}

.rla-dashboard-title strong,
.rla-dashboard-title small {
    display: block;
}

.rla-dashboard-title strong {
    margin-bottom: 5px;
    color: var(--rla-navy);
    font-size: 13px;
}

.rla-dashboard-title small {
    color: var(--rla-muted);
    font-size: 10px;
}

.rla-dashboard-menu {
    margin-left: auto;
    color: #8c9ab0;
    letter-spacing: 2px;
}

.rla-dashboard-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
    padding: 19px;
    border-radius: 10px;
    background: linear-gradient(125deg, #102957, #1268c9 72%, #159fda);
}

.rla-dashboard-welcome > div {
    min-width: 0;
}

.rla-mini-label {
    display: block;
    margin-bottom: 10px;
    color: #a9dcff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.rla-dashboard-welcome h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.rla-dashboard-welcome p {
    margin-bottom: 0;
    color: #e0edff;
    font-size: 11px;
    line-height: 1.7;
}

.rla-welcome-icon {
    display: flex;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 23px;
}

.rla-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 17px;
}

.rla-summary-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 13px 11px;
    border: 1px solid #e5ecf5;
    border-radius: 9px;
    background: #fcfdff;
}

.rla-summary-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

.rla-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.rla-orange {
    color: #bd6b10;
    background: #fff1df;
}

.rla-summary-card small,
.rla-summary-card strong {
    display: block;
    overflow-wrap: anywhere;
}

.rla-summary-card small {
    margin-bottom: 5px;
    color: #8793a6;
    font-size: 10px;
}

.rla-summary-card strong {
    color: var(--rla-navy);
    font-size: 11px;
}

/* Bookshelf illustration */

.rla-book-panel {
    padding: 16px;
    border: 1px solid #e5ebf4;
    border-radius: 10px;
}

.rla-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.rla-panel-heading h4 {
    margin-bottom: 5px;
    font-size: 13px;
}

.rla-panel-heading p {
    margin-bottom: 0;
    font-size: 10px;
}

.rla-rfid-badge {
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--rla-blue);
    font-size: 9px;
    font-weight: 800;
}

.rla-bookshelf {
    position: relative;
    display: flex;
    height: 143px;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    padding: 15px 10px 13px;
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #f6f9fd, #eaf1f8);
}

.rla-book {
    position: relative;
    display: flex;
    min-width: 0;
    height: 100px;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 3px 5px 2px 2px;
    box-shadow: 2px 3px 5px rgba(11, 23, 53, 0.12);
    color: #fff;
    text-align: center;
}

.rla-book span {
    writing-mode: vertical-rl;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.rla-book small {
    font-size: 8px;
    font-weight: 700;
}

.rla-book-one {
    height: 84px;
    background: #1767b8;
}

.rla-book-two {
    height: 105px;
    background: #0f9eaa;
}

.rla-book-three {
    height: 91px;
    background: #e88a29;
}

.rla-book-four {
    height: 111px;
    background: #604eaa;
}

.rla-book-five {
    height: 97px;
    background: #27856a;
}

.rla-shelf-line {
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    height: 5px;
    border-radius: 2px;
    background: #c5d3e1;
}

.rla-scan-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid #edf1f6;
}

.rla-scan-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 9px;
    background: #e8f1ff;
}

.rla-scan-icon span {
    width: 3px;
    border-radius: 2px;
    background: var(--rla-blue);
}

.rla-scan-icon span:nth-child(1) {
    height: 11px;
}

.rla-scan-icon span:nth-child(2) {
    height: 21px;
}

.rla-scan-icon span:nth-child(3) {
    height: 15px;
}

.rla-scan-orange {
    background: #fff1df;
}

.rla-scan-orange span {
    background: #c87514;
}

.rla-scan-info {
    min-width: 0;
    flex: 1;
}

.rla-scan-info strong,
.rla-scan-info small {
    display: block;
}

.rla-scan-info strong {
    margin-bottom: 5px;
    color: var(--rla-navy);
    font-size: 11px;
}

.rla-scan-info small {
    color: var(--rla-muted);
    font-size: 9px;
    line-height: 1.5;
}

.rla-scan-status {
    padding: 5px 7px;
    border-radius: 5px;
    background: #eaf9f2;
    color: #16865b;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.rla-status-blue {
    background: #eaf2ff;
    color: var(--rla-blue);
}

.rla-dashboard-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: #fff;
}

.rla-footer-check {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f8ee;
    color: #16865b;
    font-size: 14px;
    font-weight: 800;
}

.rla-dashboard-footer strong,
.rla-dashboard-footer small {
    display: block;
}

.rla-dashboard-footer strong {
    margin-bottom: 4px;
    color: var(--rla-navy);
    font-size: 11px;
}

.rla-dashboard-footer small {
    color: var(--rla-muted);
    font-size: 10px;
}

/* Introduction */

.rla-intro {
    background: #fff;
}

.rla-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.rla-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.rla-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.rla-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--rla-blue);
    font-size: 14px;
    font-weight: 800;
}

.rla-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.rla-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits */

.rla-benefits {
    padding: 30px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    background: #f5f8fc;
}

.rla-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.rla-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.rla-benefit-number {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--rla-blue);
    font-size: 12px;
    font-weight: 800;
}

.rla-benefit:nth-child(2) .rla-benefit-number {
    background: #e2f8ff;
    color: #0786b7;
}

.rla-benefit:nth-child(3) .rla-benefit-number {
    background: #fff0df;
    color: #c87514;
}

.rla-benefit:nth-child(4) .rla-benefit-number {
    background: #e5f7ed;
    color: #168757;
}

.rla-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.rla-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Feature cards */

.rla-features {
    background: #fff;
}

.rla-centered-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.rla-centered-heading h2 {
    margin-bottom: 13px;
}

.rla-centered-heading p {
    max-width: 650px;
    margin: 0 auto;
}

.rla-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.rla-feature-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--rla-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.rla-feature-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.rla-feature-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.rla-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.rla-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.rla-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.rla-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.rla-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.rla-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.rla-feature-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Hardware */

.rla-hardware {
    background: #f6f9fd;
}

.rla-hardware-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.rla-hardware-content h2 {
    max-width: 540px;
}

.rla-hardware-content > p {
    max-width: 550px;
}

.rla-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0;
    padding: 0;
    list-style: none;
}

.rla-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.rla-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

.rla-hardware-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.rla-hardware-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.rla-hardware-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--rla-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.rla-hardware-header h3 {
    margin-bottom: 6px;
    font-size: 21px;
}

.rla-hardware-header p {
    margin-bottom: 0;
    font-size: 11px;
}

.rla-device-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.rla-device-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 9px;
    font-weight: 800;
}

.rla-device-blue {
    color: var(--rla-blue);
    background: #e8f1ff;
}

.rla-device-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.rla-device-green {
    color: #168757;
    background: #e4f8ec;
}

.rla-device-cyan {
    color: #0787b9;
    background: #e4f8ff;
}

.rla-device-row > div {
    min-width: 0;
    flex: 1;
}

.rla-device-row strong,
.rla-device-row small {
    display: block;
}

.rla-device-row strong {
    margin-bottom: 5px;
    color: var(--rla-navy);
    font-size: 12px;
}

.rla-device-row small {
    color: var(--rla-muted);
    font-size: 10px;
    line-height: 1.6;
}

.rla-device-arrow {
    color: #8495ab;
    font-size: 19px;
}

.rla-hardware-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    background: #effaf5;
}

.rla-hardware-note > span {
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d9f4e6;
    color: #16865b;
    font-size: 12px;
    font-weight: 800;
}

.rla-hardware-note p {
    margin-bottom: 0;
    color: #28664f;
    font-size: 11px;
    font-weight: 600;
}

/* Workflow */

.rla-workflow {
    background: #fff;
}

.rla-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.rla-process-step {
    padding: 23px;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    background: #fff;
}

.rla-process-step > span {
    display: flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--rla-blue);
    font-size: 12px;
    font-weight: 800;
}

.rla-process-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.rla-process-step:nth-child(3) > span {
    background: #fff0df;
    color: #bd6b10;
}

.rla-process-step:nth-child(4) > span {
    background: #f0eaff;
    color: #7753c8;
}

.rla-process-step:nth-child(5) > span {
    background: #e4f8ec;
    color: #168757;
}

.rla-process-step h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.rla-process-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Institutional services */

.rla-institutional {
    background: #f6f9fd;
}

.rla-institutional-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.rla-institutional-content h2 {
    max-width: 530px;
}

.rla-institutional-content > p {
    max-width: 550px;
}

.rla-campus-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.rla-campus-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.rla-campus-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--rla-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.rla-campus-header h3 {
    margin-bottom: 6px;
    font-size: 21px;
}

.rla-campus-header p {
    margin-bottom: 0;
    font-size: 11px;
}

.rla-campus-service {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.rla-campus-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 9px;
    font-weight: 800;
}

.rla-campus-blue {
    color: var(--rla-blue);
    background: #e8f1ff;
}

.rla-campus-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.rla-campus-green {
    color: #168757;
    background: #e4f8ec;
}

.rla-campus-cyan {
    color: #0787b9;
    background: #e4f8ff;
}

.rla-campus-service > div {
    min-width: 0;
    flex: 1;
}

.rla-campus-service strong,
.rla-campus-service small {
    display: block;
}

.rla-campus-service strong {
    margin-bottom: 5px;
    color: var(--rla-navy);
    font-size: 12px;
}

.rla-campus-service small {
    color: var(--rla-muted);
    font-size: 10px;
    line-height: 1.6;
}

.rla-campus-arrow {
    color: #8495ab;
    font-size: 19px;
}

.rla-campus-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    background: #effaf5;
}

.rla-campus-note > span {
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d9f4e6;
    color: #16865b;
    font-size: 12px;
    font-weight: 800;
}

.rla-campus-note p {
    margin-bottom: 0;
    color: #28664f;
    font-size: 11px;
    font-weight: 600;
}

/* Security */

.rla-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--rla-navy);
}

.rla-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.rla-security h2 {
    max-width: 540px;
    margin-bottom: 17px;
    color: #fff;
}

.rla-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.rla-security-features {
    display: grid;
    gap: 18px;
}

.rla-security-features > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.rla-security-features > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.rla-security-features strong,
.rla-security-features small {
    display: block;
}

.rla-security-features strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.rla-security-features small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* CTA */

.rla-cta {
    padding: 65px 0;
    background: #f5f8fc;
}

.rla-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.rla-cta-inner > div:first-child {
    max-width: 700px;
}

.rla-cta h2 {
    margin-bottom: 12px;
}

.rla-cta p {
    margin-bottom: 0;
}

.rla-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .rla-hero-grid {
        gap: 25px;
    }

    .rla-hero-content {
        padding: 65px 0 22px;
    }

    .rla-hero-visual {
        padding: 30px 4px 18px 10px;
    }

    .rla-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .rla-dashboard {
        padding: 17px;
    }

    .rla-summary-card {
        gap: 8px;
        padding: 11px 8px;
    }

    .rla-summary-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .rla-intro-grid,
    .rla-hardware-grid,
    .rla-institutional-grid,
    .rla-security-grid {
        gap: 38px;
    }

    .rla-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .rla-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rla-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rla-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .rla-container {
        width: min(100% - 30px, 560px);
    }

    .rla-section {
        padding: 48px 0;
    }

    .rla-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .rla-breadcrumb .rla-container {
        gap: 7px;
    }

    .rla-hero {
        padding: 20px 0 35px;
    }

    .rla-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 25px;
    }

    .rla-hero-content {
        padding: 0;
    }

    .rla-hero-visual {
        padding: 0;
    }

    .rla-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .rla-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .rla-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .rla-hero-actions {
        align-items: stretch;
    }

    .rla-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .rla-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .rla-hero-points span {
        font-size: 10px;
    }

    .rla-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .rla-dashboard-header {
        margin-bottom: 16px;
    }

    .rla-dashboard-title strong {
        font-size: 12px;
    }

    .rla-dashboard-welcome {
        padding: 15px;
    }

    .rla-dashboard-welcome h3 {
        font-size: 19px;
    }

    .rla-dashboard-welcome p {
        font-size: 10px;
    }

    .rla-summary-grid {
        gap: 8px;
    }

    .rla-summary-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .rla-summary-card small {
        font-size: 9px;
    }

    .rla-summary-card strong {
        font-size: 10px;
    }

    .rla-book-panel {
        padding: 11px;
    }

    .rla-bookshelf {
        height: 125px;
        gap: 4px;
        padding-right: 7px;
        padding-left: 7px;
    }

    .rla-book {
        padding: 8px 2px 6px;
    }

    .rla-book span {
        font-size: 7px;
    }

    .rla-scan-row {
        gap: 8px;
    }

    .rla-scan-info strong {
        font-size: 10px;
    }

    .rla-scan-info small {
        font-size: 8px;
    }

    .rla-scan-status {
        padding: 4px 5px;
        font-size: 7px;
    }

    .rla-intro-grid,
    .rla-hardware-grid,
    .rla-institutional-grid,
    .rla-security-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .rla-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .rla-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .rla-benefits {
        padding: 25px 0;
    }

    .rla-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .rla-benefit h3 {
        font-size: 14px;
    }

    .rla-benefit p {
        font-size: 12px;
    }

    .rla-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .rla-centered-heading p {
        margin: 0;
    }

    .rla-feature-grid,
    .rla-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .rla-feature-card {
        padding: 20px;
    }

    .rla-feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .rla-feature-card h3 {
        font-size: 16px;
    }

    .rla-feature-card p {
        font-size: 13px;
    }

    .rla-check-list li {
        font-size: 13px;
    }

    .rla-hardware-panel,
    .rla-campus-panel {
        padding: 18px;
    }

    .rla-hardware-header h3,
    .rla-campus-header h3 {
        font-size: 19px;
    }

    .rla-device-row,
    .rla-campus-service {
        gap: 10px;
    }

    .rla-device-row small,
    .rla-campus-service small {
        font-size: 9px;
    }

    .rla-process-step {
        padding: 20px;
    }

    .rla-process-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .rla-process-step h3 {
        font-size: 15px;
    }

    .rla-security {
        padding: 48px 0;
    }

    .rla-security-grid {
        gap: 28px;
    }

    .rla-security h2 {
        font-size: 27px;
    }

    .rla-security-grid > div:first-child p {
        font-size: 13px;
    }

    .rla-cta {
        padding: 45px 0;
    }

    .rla-cta-inner {
        gap: 23px;
    }

    .rla-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .rla-cta-actions .rla-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .rla-container {
        width: calc(100% - 24px);
    }

    .rla-dashboard {
        padding: 10px;
    }

    .rla-dashboard-welcome {
        padding: 12px;
    }

    .rla-welcome-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .rla-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rla-summary-card {
        flex-direction: row;
        align-items: center;
    }

    .rla-bookshelf {
        height: 115px;
        padding-right: 4px;
        padding-left: 4px;
    }

    .rla-book span {
        font-size: 6px;
    }

    .rla-scan-row {
        flex-wrap: wrap;
    }

    .rla-scan-info {
        flex: 1 1 calc(100% - 55px);
    }

    .rla-scan-status {
        margin-left: 46px;
    }

    .rla-device-row,
    .rla-campus-service {
        gap: 8px;
    }

    .rla-device-icon,
    .rla-campus-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }

    .rla-hero-actions {
        flex-direction: column;
    }

    .rla-hero-actions .rla-btn {
        width: 100%;
    }
}


/* ==========================================
   Smart Attendance System
   Unique prefix: sat-
   ========================================== */

.sat-page {
    --sat-navy: #0b1735;
    --sat-blue: #1268d8;
    --sat-cyan: #10a7e5;
    --sat-orange: #f28b1b;
    --sat-text: #34425a;
    --sat-muted: #6d7b91;
    --sat-light: #f5f8fc;
    --sat-border: #e3eaf3;

    color: var(--sat-text);
    font-family: inherit;
    overflow: hidden;
}

.sat-page *,
.sat-page *::before,
.sat-page *::after {
    box-sizing: border-box;
}

.sat-page a {
    text-decoration: none;
}

.sat-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.sat-page h1,
.sat-page h2,
.sat-page h3,
.sat-page h4,
.sat-page p {
    margin-top: 0;
}

.sat-page h1,
.sat-page h2,
.sat-page h3,
.sat-page h4 {
    color: var(--sat-navy);
    line-height: 1.25;
}

.sat-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.sat-page p {
    color: var(--sat-muted);
    font-size: 15px;
    line-height: 1.85;
}

.sat-section {
    padding: 76px 0;
}

.sat-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--sat-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.5;
}

.sat-eyebrow-light {
    color: #70d7ff;
}

/* Breadcrumb */

.sat-breadcrumb {
    padding: 13px 0;
    background: #f7f9fc;
    border-bottom: 1px solid #edf1f6;
    font-size: 13px;
}

.sat-breadcrumb .sat-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sat-breadcrumb a {
    color: var(--sat-blue);
}

.sat-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.sat-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.sat-btn:hover {
    transform: translateY(-2px);
}

.sat-btn-primary {
    color: #fff;
    background: var(--sat-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.sat-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.sat-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.sat-btn-outline {
    color: var(--sat-navy);
    background: #fff;
    border-color: #d9e2ee;
}

.sat-btn-outline:hover {
    color: var(--sat-blue);
    border-color: var(--sat-blue);
}

/* Hero */

.sat-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.sat-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.sat-hero-content {
    padding: 105px 0 22px;
}

.sat-hero-content h1 {
    max-width: 610px;
    margin-bottom: 20px;
    color: var(--sat-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1.13;
}

.sat-hero-content h1 span {
    display: block;
    color: var(--sat-blue);
}

.sat-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.sat-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sat-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.sat-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

.sat-hero-note {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 10px !important;
    line-height: 1.6 !important;
}

/* Dashboard */

.sat-hero-visual {
    position: relative;
    min-width: 0;
    padding: 55px 4px 18px 10px;
}

.sat-dashboard {
    padding: 23px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.sat-dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #edf1f6;
}

.sat-brand-mark {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--sat-blue), var(--sat-cyan));
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.sat-dashboard-title {
    min-width: 0;
}

.sat-dashboard-title strong,
.sat-dashboard-title small {
    display: block;
}

.sat-dashboard-title strong {
    margin-bottom: 5px;
    color: var(--sat-navy);
    font-size: 13px;
}

.sat-dashboard-title small {
    color: var(--sat-muted);
    font-size: 10px;
}

.sat-dashboard-menu {
    margin-left: auto;
    color: #8c9ab0;
    letter-spacing: 2px;
}

.sat-dashboard-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
    padding: 19px;
    border-radius: 10px;
    background: linear-gradient(125deg, #102957, #1268c9 72%, #159fda);
}

.sat-dashboard-welcome > div {
    min-width: 0;
}

.sat-mini-label {
    display: block;
    margin-bottom: 10px;
    color: #a9dcff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.sat-dashboard-welcome h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.sat-dashboard-welcome p {
    margin-bottom: 0;
    color: #e0edff;
    font-size: 11px;
    line-height: 1.7;
}

.sat-welcome-icon {
    display: flex;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 23px;
}

.sat-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 17px;
}

.sat-summary-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 13px 11px;
    border: 1px solid #e5ecf5;
    border-radius: 9px;
    background: #fcfdff;
}

.sat-summary-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
}

.sat-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.sat-orange {
    color: #bd6b10;
    background: #fff1df;
}

.sat-summary-card small,
.sat-summary-card strong {
    display: block;
    overflow-wrap: anywhere;
}

.sat-summary-card small {
    margin-bottom: 5px;
    color: #8793a6;
    font-size: 10px;
}

.sat-summary-card strong {
    color: var(--sat-navy);
    font-size: 11px;
}

/* Attendance chart */

.sat-analytics-panel {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid #e5ebf4;
    border-radius: 10px;
    background: #fff;
}

.sat-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.sat-panel-heading h4 {
    margin-bottom: 5px;
    font-size: 13px;
}

.sat-panel-heading p {
    margin-bottom: 0;
    font-size: 10px;
}

.sat-period-label {
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--sat-blue);
    font-size: 9px;
    font-weight: 800;
}

.sat-chart {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 8px;
    height: 145px;
}

.sat-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    color: #8490a2;
    font-size: 9px;
}

.sat-chart-content {
    position: relative;
    min-width: 0;
}

.sat-chart-gridlines {
    position: absolute;
    inset: 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sat-chart-gridlines span {
    width: 100%;
    border-top: 1px dashed #e5ebf4;
}

.sat-chart-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 8px;
}

.sat-chart-column {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.sat-chart-bar {
    width: min(24px, 70%);
    min-height: 12px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #23b3e5, #1268d8);
}

.sat-bar-1 { height: 78%; }
.sat-bar-2 { height: 91%; }
.sat-bar-3 { height: 68%; }
.sat-bar-4 { height: 85%; }
.sat-bar-5 { height: 96%; }
.sat-bar-6 { height: 61%; }

.sat-chart-column small {
    color: #77869b;
    font-size: 9px;
}

.sat-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    color: #8793a6;
    font-size: 9px;
}

.sat-chart-legend span:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sat-chart-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--sat-blue);
}

/* Attendance methods in dashboard */

.sat-methods-panel {
    padding: 0 13px;
    border: 1px solid #e5ebf4;
    border-radius: 9px;
    background: #fcfdff;
}

.sat-method {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f6;
}

.sat-method:last-child {
    border-bottom: 0;
}

.sat-method-icon {
    display: flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 8px;
    font-weight: 800;
}

.sat-method-blue {
    color: var(--sat-blue);
    background: #e8f1ff;
}

.sat-method-orange {
    color: #bd6b10;
    background: #fff1df;
}

.sat-method-green {
    color: #168757;
    background: #e4f8ec;
}

.sat-method > div {
    min-width: 0;
    flex: 1;
}

.sat-method strong,
.sat-method small {
    display: block;
}

.sat-method strong {
    margin-bottom: 4px;
    color: var(--sat-navy);
    font-size: 11px;
}

.sat-method small {
    color: var(--sat-muted);
    font-size: 9px;
    line-height: 1.5;
}

.sat-method-arrow {
    color: #8495ab;
    font-size: 19px;
}

.sat-dashboard-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: #fff;
}

.sat-footer-check {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f8ee;
    color: #16865b;
    font-size: 14px;
    font-weight: 800;
}

.sat-dashboard-footer strong,
.sat-dashboard-footer small {
    display: block;
}

.sat-dashboard-footer strong {
    margin-bottom: 4px;
    color: var(--sat-navy);
    font-size: 11px;
}

.sat-dashboard-footer small {
    color: var(--sat-muted);
    font-size: 10px;
}

/* Introduction */

.sat-intro {
    background: #fff;
}

.sat-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.sat-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.sat-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.sat-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--sat-blue);
    font-size: 14px;
    font-weight: 800;
}

.sat-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.sat-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits */

.sat-benefits {
    padding: 30px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    background: #f5f8fc;
}

.sat-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.sat-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.sat-benefit-number {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--sat-blue);
    font-size: 12px;
    font-weight: 800;
}

.sat-benefit:nth-child(2) .sat-benefit-number {
    background: #e2f8ff;
    color: #0786b7;
}

.sat-benefit:nth-child(3) .sat-benefit-number {
    background: #fff0df;
    color: #c87514;
}

.sat-benefit:nth-child(4) .sat-benefit-number {
    background: #e5f7ed;
    color: #168757;
}

.sat-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.sat-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Features */

.sat-features {
    background: #fff;
}

.sat-centered-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.sat-centered-heading h2 {
    margin-bottom: 13px;
}

.sat-centered-heading p {
    max-width: 650px;
    margin: 0 auto;
}

.sat-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.sat-feature-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--sat-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.sat-feature-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.sat-feature-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.sat-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.sat-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.sat-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.sat-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.sat-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.sat-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.sat-feature-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Attendance methods */

.sat-methods {
    background: #f6f9fd;
}

.sat-method-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.sat-method-card {
    padding: 24px 20px;
    border: 1px solid #e2eaf4;
    border-radius: 11px;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sat-method-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(11, 40, 82, 0.07);
}

.sat-method-card-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
}

.sat-method-card-blue {
    color: var(--sat-blue);
    background: #e8f1ff;
}

.sat-method-card-orange {
    color: #bd6b10;
    background: #fff1df;
}

.sat-method-card-green {
    color: #168757;
    background: #e4f8ec;
}

.sat-method-card-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.sat-method-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.sat-method-card p {
    margin-bottom: 17px;
    font-size: 13px;
    line-height: 1.8;
}

.sat-method-card > span {
    display: inline-block;
    padding: 7px 9px;
    border-radius: 5px;
    background: #f1f5fa;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

/* Workflow */

.sat-workflow {
    background: #fff;
}

.sat-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sat-process-step {
    padding: 23px;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    background: #fff;
}

.sat-process-step > span {
    display: flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--sat-blue);
    font-size: 12px;
    font-weight: 800;
}

.sat-process-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.sat-process-step:nth-child(3) > span {
    background: #fff0df;
    color: #bd6b10;
}

.sat-process-step:nth-child(4) > span {
    background: #f0eaff;
    color: #7753c8;
}

.sat-process-step:nth-child(5) > span {
    background: #e4f8ec;
    color: #168757;
}

.sat-process-step h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.sat-process-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Institutional services */

.sat-institutional {
    background: #f6f9fd;
}

.sat-institutional-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.sat-institutional-content h2 {
    max-width: 530px;
}

.sat-institutional-content > p {
    max-width: 550px;
}

.sat-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0;
    padding: 0;
    list-style: none;
}

.sat-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.sat-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

.sat-campus-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.sat-campus-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.sat-campus-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--sat-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.sat-campus-header h3 {
    margin-bottom: 6px;
    font-size: 21px;
}

.sat-campus-header p {
    margin-bottom: 0;
    font-size: 11px;
}

.sat-campus-service {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.sat-campus-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 9px;
    font-weight: 800;
}

.sat-campus-blue {
    color: var(--sat-blue);
    background: #e8f1ff;
}

.sat-campus-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.sat-campus-green {
    color: #168757;
    background: #e4f8ec;
}

.sat-campus-cyan {
    color: #0787b9;
    background: #e4f8ff;
}

.sat-campus-service > div {
    min-width: 0;
    flex: 1;
}

.sat-campus-service strong,
.sat-campus-service small {
    display: block;
}

.sat-campus-service strong {
    margin-bottom: 5px;
    color: var(--sat-navy);
    font-size: 12px;
}

.sat-campus-service small {
    color: var(--sat-muted);
    font-size: 10px;
    line-height: 1.6;
}

.sat-campus-arrow {
    color: #8495ab;
    font-size: 19px;
}

.sat-campus-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    background: #effaf5;
}

.sat-campus-note > span {
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d9f4e6;
    color: #16865b;
    font-size: 12px;
    font-weight: 800;
}

.sat-campus-note p {
    margin-bottom: 0;
    color: #28664f;
    font-size: 11px;
    font-weight: 600;
}

/* Security */

.sat-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--sat-navy);
}

.sat-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.sat-security h2 {
    max-width: 540px;
    margin-bottom: 17px;
    color: #fff;
}

.sat-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.sat-security-features {
    display: grid;
    gap: 18px;
}

.sat-security-features > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.sat-security-features > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.sat-security-features strong,
.sat-security-features small {
    display: block;
}

.sat-security-features strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.sat-security-features small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* Integration */

.sat-integration {
    background: #fff;
}

.sat-integration-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.sat-integration-grid > div:first-child h2 {
    max-width: 470px;
}

.sat-integration-grid > div:last-child p {
    margin-bottom: 17px;
}

.sat-integration-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0;
}

.sat-integration-tags span {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid #dce8f8;
    border-radius: 6px;
    background: #f4f8ff;
    color: #285b9d;
    font-size: 11px;
    font-weight: 700;
}

.sat-integration-note {
    padding-left: 13px;
    border-left: 3px solid var(--sat-orange);
    font-size: 12px !important;
}

/* CTA */

.sat-cta {
    padding: 65px 0;
    background: #f5f8fc;
}

.sat-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.sat-cta-inner > div:first-child {
    max-width: 700px;
}

.sat-cta h2 {
    margin-bottom: 12px;
}

.sat-cta p {
    margin-bottom: 0;
}

.sat-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .sat-hero-grid {
        gap: 25px;
    }

    .sat-hero-content {
        padding: 65px 0 22px;
    }

    .sat-hero-visual {
        padding: 30px 4px 18px 10px;
    }

    .sat-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .sat-dashboard {
        padding: 17px;
    }

    .sat-summary-card {
        gap: 8px;
        padding: 11px 8px;
    }

    .sat-summary-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .sat-intro-grid,
    .sat-institutional-grid,
    .sat-security-grid,
    .sat-integration-grid {
        gap: 38px;
    }

    .sat-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .sat-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sat-method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sat-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sat-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .sat-container {
        width: min(100% - 30px, 560px);
    }

    .sat-section {
        padding: 48px 0;
    }

    .sat-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .sat-breadcrumb .sat-container {
        gap: 7px;
    }

    .sat-hero {
        padding: 20px 0 35px;
    }

    .sat-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 25px;
    }

    .sat-hero-content {
        padding: 0;
    }

    .sat-hero-visual {
        padding: 0;
    }

    .sat-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.3px;
    }

    .sat-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .sat-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .sat-hero-actions {
        align-items: stretch;
    }

    .sat-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .sat-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .sat-hero-points span {
        font-size: 10px;
    }

    .sat-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .sat-dashboard-header {
        margin-bottom: 16px;
    }

    .sat-dashboard-title strong {
        font-size: 12px;
    }

    .sat-dashboard-welcome {
        padding: 15px;
    }

    .sat-dashboard-welcome h3 {
        font-size: 19px;
    }

    .sat-dashboard-welcome p {
        font-size: 10px;
    }

    .sat-summary-grid {
        gap: 8px;
    }

    .sat-summary-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .sat-summary-card small {
        font-size: 9px;
    }

    .sat-summary-card strong {
        font-size: 10px;
    }

    .sat-analytics-panel {
        padding: 12px;
    }

    .sat-chart {
        height: 135px;
    }

    .sat-chart-bars {
        gap: 5px;
    }

    .sat-chart-bar {
        width: min(19px, 75%);
    }

    .sat-methods-panel {
        padding: 0 10px;
    }

    .sat-method {
        gap: 8px;
    }

    .sat-method strong {
        font-size: 10px;
    }

    .sat-method small {
        font-size: 8px;
    }

    .sat-intro-grid,
    .sat-institutional-grid,
    .sat-security-grid,
    .sat-integration-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .sat-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .sat-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .sat-benefits {
        padding: 25px 0;
    }

    .sat-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .sat-benefit h3 {
        font-size: 14px;
    }

    .sat-benefit p {
        font-size: 12px;
    }

    .sat-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .sat-centered-heading p {
        margin: 0;
    }

    .sat-feature-grid,
    .sat-method-grid,
    .sat-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .sat-feature-card,
    .sat-method-card {
        padding: 20px;
    }

    .sat-feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .sat-feature-card h3,
    .sat-method-card h3 {
        font-size: 16px;
    }

    .sat-feature-card p,
    .sat-method-card p {
        font-size: 13px;
    }

    .sat-check-list li {
        font-size: 13px;
    }

    .sat-campus-panel {
        padding: 18px;
    }

    .sat-campus-header h3 {
        font-size: 19px;
    }

    .sat-campus-service {
        gap: 10px;
    }

    .sat-campus-service small {
        font-size: 9px;
    }

    .sat-process-step {
        padding: 20px;
    }

    .sat-process-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .sat-process-step h3 {
        font-size: 15px;
    }

    .sat-security {
        padding: 48px 0;
    }

    .sat-security-grid {
        gap: 28px;
    }

    .sat-security h2 {
        font-size: 27px;
    }

    .sat-security-grid > div:first-child p {
        font-size: 13px;
    }

    .sat-integration-tags {
        gap: 8px;
        margin: 17px 0;
    }

    .sat-integration-tags span {
        padding: 8px 10px;
        font-size: 10px;
    }

    .sat-integration-note {
        font-size: 12px !important;
    }

    .sat-cta {
        padding: 45px 0;
    }

    .sat-cta-inner {
        gap: 23px;
    }

    .sat-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .sat-cta-actions .sat-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .sat-container {
        width: calc(100% - 24px);
    }

    .sat-dashboard {
        padding: 10px;
    }

    .sat-dashboard-welcome {
        padding: 12px;
    }

    .sat-welcome-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .sat-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sat-summary-card {
        flex-direction: row;
        align-items: center;
    }

    .sat-chart {
        grid-template-columns: 29px minmax(0, 1fr);
        gap: 5px;
    }

    .sat-chart-y {
        font-size: 8px;
    }

    .sat-chart-bars {
        gap: 3px;
    }

    .sat-chart-column small {
        font-size: 8px;
    }

    .sat-chart-bar {
        width: 14px;
    }

    .sat-method {
        flex-wrap: wrap;
    }

    .sat-method > div {
        flex: 1 1 calc(100% - 55px);
    }

    .sat-method-arrow {
        display: none;
    }

    .sat-hero-actions {
        flex-direction: column;
    }

    .sat-hero-actions .sat-btn {
        width: 100%;
    }

    .sat-campus-service {
        gap: 8px;
    }

    .sat-campus-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }
}


/* ==========================================
   Counterfeit Protection System
   Unique prefix: cpr-
   ========================================== */

.cpr-page {
    --cpr-navy: #0b1735;
    --cpr-blue: #1268d8;
    --cpr-cyan: #10a7e5;
    --cpr-orange: #f28b1b;
    --cpr-text: #34425a;
    --cpr-muted: #6d7b91;
    --cpr-light: #f5f8fc;
    --cpr-border: #e3eaf3;

    overflow: hidden;
    color: var(--cpr-text);
    font-family: inherit;
}

.cpr-page *,
.cpr-page *::before,
.cpr-page *::after {
    box-sizing: border-box;
}

.cpr-page a {
    text-decoration: none;
}

.cpr-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.cpr-page h1,
.cpr-page h2,
.cpr-page h3,
.cpr-page h4,
.cpr-page p {
    margin-top: 0;
}

.cpr-page h1,
.cpr-page h2,
.cpr-page h3,
.cpr-page h4 {
    color: var(--cpr-navy);
    line-height: 1.25;
}

.cpr-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.cpr-page p {
    color: var(--cpr-muted);
    font-size: 15px;
    line-height: 1.85;
}

.cpr-section {
    padding: 76px 0;
}

.cpr-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--cpr-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.5;
}

.cpr-eyebrow-light {
    color: #70d7ff;
}

/* Breadcrumb */

.cpr-breadcrumb {
    padding: 13px 0;
    border-bottom: 1px solid #edf1f6;
    background: #f7f9fc;
    font-size: 13px;
}

.cpr-breadcrumb .cpr-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cpr-breadcrumb a {
    color: var(--cpr-blue);
}

.cpr-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.cpr-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.cpr-btn:hover {
    transform: translateY(-2px);
}

.cpr-btn-primary {
    color: #fff;
    background: var(--cpr-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.cpr-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.cpr-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.cpr-btn-outline {
    color: var(--cpr-navy);
    border-color: #d9e2ee;
    background: #fff;
}

.cpr-btn-outline:hover {
    color: var(--cpr-blue);
    border-color: var(--cpr-blue);
}

/* Hero */

.cpr-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.cpr-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.cpr-hero-content {
    padding: 105px 0 22px;
}

.cpr-hero-content h1 {
    max-width: 610px;
    margin-bottom: 20px;
    color: var(--cpr-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.13;
}

.cpr-hero-content h1 span {
    display: block;
    color: var(--cpr-blue);
}

.cpr-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.cpr-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cpr-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.cpr-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

.cpr-hero-note {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 10px !important;
    line-height: 1.6 !important;
}

/* Dashboard illustration */

.cpr-hero-visual {
    min-width: 0;
    padding: 55px 4px 18px 10px;
}

.cpr-dashboard {
    padding: 23px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.cpr-dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #edf1f6;
}

.cpr-brand-logo {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--cpr-blue), var(--cpr-cyan));
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.cpr-brand-info {
    min-width: 0;
}

.cpr-brand-info strong,
.cpr-brand-info small {
    display: block;
}

.cpr-brand-info strong {
    margin-bottom: 5px;
    color: var(--cpr-navy);
    font-size: 13px;
}

.cpr-brand-info small {
    color: var(--cpr-muted);
    font-size: 10px;
}

.cpr-header-dots {
    margin-left: auto;
    color: #8c9ab0;
    letter-spacing: 2px;
}

/* Dashboard banner */

.cpr-dashboard-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(125deg, #102957, #1268c9 72%, #159fda);
}

.cpr-dashboard-banner > div:first-child {
    min-width: 0;
}

.cpr-banner-label {
    display: block;
    margin-bottom: 10px;
    color: #a9dcff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.cpr-dashboard-banner h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.cpr-dashboard-banner p {
    margin-bottom: 0;
    color: #e0edff;
    font-size: 11px;
    line-height: 1.7;
}

.cpr-shield {
    display: flex;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cpr-shield svg {
    display: block;
    width: 43px;
    height: 43px;
}

/* Product authentication card */

.cpr-product-card {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 16px;
    margin-bottom: 15px;
    padding: 16px;
    border: 1px solid #e5ebf4;
    border-radius: 10px;
    background: #fff;
}

.cpr-product-visual {
    display: flex;
    min-height: 195px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 35%, #fff 0, #f0f6ff 60%, #e4eefc 100%);
}

.cpr-product-box {
    position: relative;
    width: 108px;
    height: 143px;
    filter: drop-shadow(0 12px 8px rgba(14, 47, 95, 0.13));
}

.cpr-box-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 108px;
    height: 25px;
    transform: skewY(-18deg);
    transform-origin: bottom left;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(120deg, #4a9df4, #1268d8);
}

.cpr-box-front {
    position: absolute;
    top: 17px;
    left: 0;
    display: flex;
    width: 108px;
    height: 126px;
    flex-direction: column;
    align-items: center;
    padding: 19px 9px 9px;
    border: 1px solid #d8e6fa;
    border-radius: 3px;
    background: linear-gradient(145deg, #fff, #edf4ff);
}

.cpr-box-brand {
    color: var(--cpr-navy);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
}

.cpr-box-line {
    display: block;
    width: 54px;
    height: 3px;
    margin: 9px 0;
    border-radius: 5px;
    background: var(--cpr-cyan);
}

.cpr-box-small {
    color: #7788a0;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.cpr-box-qr {
    display: grid;
    width: 37px;
    height: 37px;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    margin-top: 14px;
    padding: 3px;
    border: 1px solid #cbd8e9;
    background: #fff;
}

.cpr-box-qr span {
    display: block;
    border: 3px solid var(--cpr-navy);
}

.cpr-box-qr span:nth-child(2) {
    border-color: #fff;
    background: var(--cpr-navy);
}

.cpr-box-qr span:nth-child(3) {
    border-color: #fff;
    background: var(--cpr-blue);
}

.cpr-product-details {
    min-width: 0;
    align-self: center;
}

.cpr-product-label {
    display: inline-block;
    margin-bottom: 9px;
    color: #8190a4;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.cpr-product-details h4 {
    margin-bottom: 14px;
    font-size: 14px;
}

.cpr-detail-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f6;
}

.cpr-detail-row:last-child {
    border-bottom: 0;
}

.cpr-detail-row > span {
    color: #8491a4;
    font-size: 9px;
}

.cpr-detail-row > strong {
    color: var(--cpr-navy);
    font-size: 9px;
    overflow-wrap: anywhere;
}

.cpr-detail-row .cpr-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #66758a;
}

.cpr-status i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cpr-orange);
}

/* Activity card */

.cpr-activity-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #e5ebf4;
    border-radius: 9px;
    background: #fcfdff;
}

.cpr-activity-icon {
    display: flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e6f8ee;
    color: #16865b;
    font-size: 16px;
    font-weight: 800;
}

.cpr-activity-card > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.cpr-activity-card strong,
.cpr-activity-card small {
    display: block;
}

.cpr-activity-card strong {
    margin-bottom: 4px;
    color: var(--cpr-navy);
    font-size: 11px;
}

.cpr-activity-card small {
    color: var(--cpr-muted);
    font-size: 9px;
    line-height: 1.5;
}

.cpr-activity-arrow {
    color: #8495ab;
    font-size: 19px;
}

.cpr-dashboard-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid #edf1f6;
}

.cpr-dashboard-bottom > div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #75849a;
    font-size: 9px;
    font-weight: 600;
}

.cpr-bottom-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cpr-orange);
}

.cpr-dot-blue {
    background: var(--cpr-blue);
}

/* Introduction */

.cpr-intro {
    background: #fff;
}

.cpr-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.cpr-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.cpr-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.cpr-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--cpr-blue);
    font-size: 14px;
    font-weight: 800;
}

.cpr-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.cpr-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits */

.cpr-benefits {
    padding: 30px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    background: #f5f8fc;
}

.cpr-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.cpr-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.cpr-benefit-number {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--cpr-blue);
    font-size: 12px;
    font-weight: 800;
}

.cpr-benefit:nth-child(2) .cpr-benefit-number {
    background: #e2f8ff;
    color: #0786b7;
}

.cpr-benefit:nth-child(3) .cpr-benefit-number {
    background: #fff0df;
    color: #c87514;
}

.cpr-benefit:nth-child(4) .cpr-benefit-number {
    background: #e5f7ed;
    color: #168757;
}

.cpr-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.cpr-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Feature cards */

.cpr-features {
    background: #fff;
}

.cpr-centered-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.cpr-centered-heading h2 {
    margin-bottom: 13px;
}

.cpr-centered-heading p {
    max-width: 650px;
    margin: 0 auto;
}

.cpr-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cpr-feature-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--cpr-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.cpr-feature-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.cpr-feature-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.cpr-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.cpr-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.cpr-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.cpr-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.cpr-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.cpr-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.cpr-feature-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Authentication methods */

.cpr-methods {
    background: #f6f9fd;
}

.cpr-method-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.cpr-method-card {
    padding: 20px;
    border: 1px solid #e2eaf4;
    border-radius: 11px;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cpr-method-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(11, 40, 82, 0.07);
}

.cpr-method-visual {
    display: flex;
    min-height: 140px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 9px;
    overflow: hidden;
}

.cpr-method-qr {
    background: linear-gradient(135deg, #eaf3ff, #f6faff);
}

.cpr-qr-pattern {
    display: grid;
    width: 82px;
    height: 82px;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 7px;
    border: 1px solid #d5e2f4;
    border-radius: 5px;
    background: #fff;
    transform: rotate(-5deg);
}

.cpr-qr-pattern span {
    border: 4px solid var(--cpr-navy);
    border-radius: 2px;
    background: #fff;
}

.cpr-qr-pattern span:nth-child(2),
.cpr-qr-pattern span:nth-child(4),
.cpr-qr-pattern span:nth-child(8) {
    border: 0;
    background: var(--cpr-blue);
}

.cpr-qr-pattern span:nth-child(5) {
    border: 0;
    background: #d7e8ff;
}

.cpr-method-serial {
    background: linear-gradient(135deg, #fff0df, #fff9f2);
}

.cpr-serial-label {
    display: flex;
    width: 80%;
    min-height: 74px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px dashed #e7a451;
    border-radius: 5px;
    background: #fff;
    transform: rotate(-3deg);
}

.cpr-serial-label small {
    margin-bottom: 9px;
    color: #a87537;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.cpr-serial-label strong {
    margin-bottom: 8px;
    color: var(--cpr-navy);
    font-size: 14px;
    letter-spacing: 0.5px;
}

.cpr-serial-label > span {
    color: #8793a6;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}

.cpr-method-rfid {
    background: linear-gradient(135deg, #e4f8ff, #f6fcff);
}

.cpr-rfid-symbol {
    display: flex;
    width: 90px;
    height: 90px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cpr-rfid-symbol span {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid transparent;
    border-top-color: var(--cpr-blue);
    border-right-color: var(--cpr-blue);
    border-radius: 50%;
    transform: rotate(45deg);
}

.cpr-rfid-symbol span:nth-child(1) {
    width: 38px;
    height: 38px;
}

.cpr-rfid-symbol span:nth-child(2) {
    width: 58px;
    height: 58px;
}

.cpr-rfid-symbol span:nth-child(3) {
    width: 78px;
    height: 78px;
}

.cpr-rfid-symbol i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cpr-orange);
    box-shadow: 0 0 0 6px rgba(242, 139, 27, 0.14);
}

.cpr-method-secure {
    background: linear-gradient(135deg, #e4f8ec, #f7fff9);
}

.cpr-secure-shield {
    display: flex;
    width: 75px;
    height: 85px;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0, 95% 18%, 89% 64%, 50% 100%, 11% 64%, 5% 18%);
    background: linear-gradient(135deg, #35b77c, #168757);
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    filter: drop-shadow(0 5px 8px rgba(22, 135, 87, 0.2));
}

.cpr-method-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.cpr-method-card p {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.8;
}

.cpr-method-tag {
    display: inline-block;
    padding: 7px 9px;
    border-radius: 5px;
    background: #f1f5fa;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
}

.cpr-method-disclaimer {
    margin: 22px auto 0;
    padding-left: 13px;
    border-left: 3px solid var(--cpr-orange);
    font-size: 12px !important;
}

/* Workflow */

.cpr-workflow {
    background: #fff;
}

.cpr-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cpr-process-step {
    padding: 23px;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    background: #fff;
}

.cpr-process-step > span {
    display: flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--cpr-blue);
    font-size: 12px;
    font-weight: 800;
}

.cpr-process-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.cpr-process-step:nth-child(3) > span {
    background: #fff0df;
    color: #bd6b10;
}

.cpr-process-step:nth-child(4) > span {
    background: #f0eaff;
    color: #7753c8;
}

.cpr-process-step:nth-child(5) > span {
    background: #e4f8ec;
    color: #168757;
}

.cpr-process-step h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.cpr-process-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Industries */

.cpr-industries {
    background: #f6f9fd;
}

.cpr-industries-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.cpr-industries-content h2 {
    max-width: 530px;
}

.cpr-industries-content > p {
    max-width: 550px;
}

.cpr-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0;
    padding: 0;
    list-style: none;
}

.cpr-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.cpr-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

/* Industry dashboard */

.cpr-industry-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.cpr-industry-panel-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.cpr-industry-panel-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--cpr-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.cpr-industry-panel-header h3 {
    margin-bottom: 6px;
    font-size: 21px;
}

.cpr-industry-panel-header p {
    margin-bottom: 0;
    font-size: 11px;
}

.cpr-industry-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.cpr-industry-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 9px;
    font-weight: 800;
}

.cpr-industry-blue {
    color: var(--cpr-blue);
    background: #e8f1ff;
}

.cpr-industry-orange {
    color: #bc6a0d;
    background: #fff0dd;
}

.cpr-industry-green {
    color: #168757;
    background: #e4f8ec;
}

.cpr-industry-purple {
    color: #7753c8;
    background: #f0eaff;
}

.cpr-industry-item > div {
    min-width: 0;
    flex: 1;
}

.cpr-industry-item strong,
.cpr-industry-item small {
    display: block;
}

.cpr-industry-item strong {
    margin-bottom: 5px;
    color: var(--cpr-navy);
    font-size: 12px;
}

.cpr-industry-item small {
    color: var(--cpr-muted);
    font-size: 10px;
    line-height: 1.6;
}

.cpr-industry-arrow {
    color: #8495ab;
    font-size: 19px;
}

.cpr-industry-panel-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    background: #effaf5;
}

.cpr-industry-panel-footer > span {
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d9f4e6;
    color: #16865b;
    font-size: 12px;
    font-weight: 800;
}

.cpr-industry-panel-footer p {
    margin-bottom: 0;
    color: #28664f;
    font-size: 11px;
    font-weight: 600;
}

/* Security */

.cpr-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--cpr-navy);
}

.cpr-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.cpr-security h2 {
    max-width: 540px;
    margin-bottom: 17px;
    color: #fff;
}

.cpr-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.cpr-security-features {
    display: grid;
    gap: 18px;
}

.cpr-security-features > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.cpr-security-features > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.cpr-security-features strong,
.cpr-security-features small {
    display: block;
}

.cpr-security-features strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.cpr-security-features small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* Integration */

.cpr-integration {
    background: #fff;
}

.cpr-integration-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.cpr-integration-grid > div:first-child h2 {
    max-width: 470px;
}

.cpr-integration-grid > div:last-child p {
    margin-bottom: 17px;
}

.cpr-integration-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0;
}

.cpr-integration-tags span {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid #dce8f8;
    border-radius: 6px;
    background: #f4f8ff;
    color: #285b9d;
    font-size: 11px;
    font-weight: 700;
}

.cpr-integration-note {
    padding-left: 13px;
    border-left: 3px solid var(--cpr-orange);
    font-size: 12px !important;
}

/* Final CTA */

.cpr-cta {
    padding: 65px 0;
    background: #f5f8fc;
}

.cpr-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.cpr-cta-inner > div:first-child {
    max-width: 700px;
}

.cpr-cta h2 {
    margin-bottom: 12px;
}

.cpr-cta p {
    margin-bottom: 0;
}

.cpr-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .cpr-hero-grid {
        gap: 25px;
    }

    .cpr-hero-content {
        padding: 65px 0 22px;
    }

    .cpr-hero-visual {
        padding: 30px 4px 18px 10px;
    }

    .cpr-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .cpr-dashboard {
        padding: 17px;
    }

    .cpr-product-card {
        grid-template-columns: 0.7fr 1.3fr;
        gap: 11px;
        padding: 11px;
    }

    .cpr-product-visual {
        min-height: 175px;
    }

    .cpr-intro-grid,
    .cpr-industries-grid,
    .cpr-security-grid,
    .cpr-integration-grid {
        gap: 38px;
    }

    .cpr-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .cpr-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cpr-method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cpr-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cpr-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .cpr-container {
        width: min(100% - 30px, 560px);
    }

    .cpr-section {
        padding: 48px 0;
    }

    .cpr-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .cpr-breadcrumb .cpr-container {
        gap: 7px;
    }

    .cpr-hero {
        padding: 20px 0 35px;
    }

    .cpr-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 25px;
    }

    .cpr-hero-content {
        padding: 0;
    }

    .cpr-hero-visual {
        padding: 0;
    }

    .cpr-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .cpr-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .cpr-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .cpr-hero-actions {
        align-items: stretch;
    }

    .cpr-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .cpr-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .cpr-hero-points span {
        font-size: 10px;
    }

    .cpr-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .cpr-dashboard-header {
        margin-bottom: 16px;
    }

    .cpr-brand-info strong {
        font-size: 12px;
    }

    .cpr-dashboard-banner {
        padding: 15px;
    }

    .cpr-dashboard-banner h3 {
        font-size: 18px;
    }

    .cpr-dashboard-banner p {
        font-size: 10px;
    }

    .cpr-shield {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .cpr-shield svg {
        width: 32px;
        height: 32px;
    }

    .cpr-product-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
        padding: 12px;
    }

    .cpr-product-visual {
        min-height: 170px;
    }

    .cpr-product-box {
        transform: scale(0.9);
    }

    .cpr-product-details {
        padding: 3px;
    }

    .cpr-product-details h4 {
        font-size: 15px;
    }

    .cpr-detail-row {
        padding: 10px 0;
    }

    .cpr-detail-row > span,
    .cpr-detail-row > strong {
        font-size: 10px;
    }

    .cpr-intro-grid,
    .cpr-industries-grid,
    .cpr-security-grid,
    .cpr-integration-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .cpr-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .cpr-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .cpr-benefits {
        padding: 25px 0;
    }

    .cpr-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .cpr-benefit h3 {
        font-size: 14px;
    }

    .cpr-benefit p {
        font-size: 12px;
    }

    .cpr-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .cpr-centered-heading p {
        margin: 0;
    }

    .cpr-feature-grid,
    .cpr-method-grid,
    .cpr-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .cpr-feature-card,
    .cpr-method-card {
        padding: 20px;
    }

    .cpr-feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .cpr-feature-card h3,
    .cpr-method-card h3 {
        font-size: 16px;
    }

    .cpr-feature-card p,
    .cpr-method-card p {
        font-size: 13px;
    }

    .cpr-method-visual {
        min-height: 125px;
    }

    .cpr-check-list li {
        font-size: 13px;
    }

    .cpr-industry-panel {
        padding: 18px;
    }

    .cpr-industry-panel-header h3 {
        font-size: 19px;
    }

    .cpr-industry-item {
        gap: 10px;
    }

    .cpr-industry-item small {
        font-size: 9px;
    }

    .cpr-process-step {
        padding: 20px;
    }

    .cpr-process-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .cpr-process-step h3 {
        font-size: 15px;
    }

    .cpr-security {
        padding: 48px 0;
    }

    .cpr-security-grid {
        gap: 28px;
    }

    .cpr-security h2 {
        font-size: 27px;
    }

    .cpr-security-grid > div:first-child p {
        font-size: 13px;
    }

    .cpr-integration-tags {
        gap: 8px;
        margin: 17px 0;
    }

    .cpr-integration-tags span {
        padding: 8px 10px;
        font-size: 10px;
    }

    .cpr-integration-note {
        font-size: 12px !important;
    }

    .cpr-cta {
        padding: 45px 0;
    }

    .cpr-cta-inner {
        gap: 23px;
    }

    .cpr-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .cpr-cta-actions .cpr-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .cpr-container {
        width: calc(100% - 24px);
    }

    .cpr-dashboard {
        padding: 10px;
    }

    .cpr-dashboard-banner {
        padding: 12px;
    }

    .cpr-shield {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .cpr-shield svg {
        width: 26px;
        height: 26px;
    }

    .cpr-product-card {
        padding: 9px;
    }

    .cpr-product-visual {
        min-height: 150px;
    }

    .cpr-detail-row {
        gap: 6px;
    }

    .cpr-detail-row > span,
    .cpr-detail-row > strong {
        font-size: 9px;
    }

    .cpr-hero-actions {
        flex-direction: column;
    }

    .cpr-hero-actions .cpr-btn {
        width: 100%;
    }

    .cpr-activity-card strong {
        font-size: 10px;
    }

    .cpr-activity-card small {
        font-size: 8px;
    }

    .cpr-industry-item {
        gap: 8px;
    }

    .cpr-industry-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }
}


/* ==========================================
   Live Manufacturing Tracking
   Unique prefix: lmt-
   ========================================== */

.lmt-page {
    --lmt-navy: #0b1735;
    --lmt-blue: #1268d8;
    --lmt-cyan: #10a7e5;
    --lmt-orange: #f28b1b;
    --lmt-text: #34425a;
    --lmt-muted: #6d7b91;
    --lmt-light: #f5f8fc;
    --lmt-border: #e3eaf3;

    overflow: hidden;
    color: var(--lmt-text);
    font-family: inherit;
}

.lmt-page *,
.lmt-page *::before,
.lmt-page *::after {
    box-sizing: border-box;
}

.lmt-page a {
    text-decoration: none;
}

.lmt-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.lmt-page h1,
.lmt-page h2,
.lmt-page h3,
.lmt-page h4,
.lmt-page p {
    margin-top: 0;
}

.lmt-page h1,
.lmt-page h2,
.lmt-page h3,
.lmt-page h4 {
    color: var(--lmt-navy);
    line-height: 1.25;
}

.lmt-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.lmt-page p {
    color: var(--lmt-muted);
    font-size: 15px;
    line-height: 1.85;
}

.lmt-section {
    padding: 76px 0;
}

.lmt-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--lmt-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.5;
}

.lmt-eyebrow-light {
    color: #70d7ff;
}

/* Breadcrumb */

.lmt-breadcrumb {
    padding: 13px 0;
    border-bottom: 1px solid #edf1f6;
    background: #f7f9fc;
    font-size: 13px;
}

.lmt-breadcrumb .lmt-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.lmt-breadcrumb a {
    color: var(--lmt-blue);
}

.lmt-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.lmt-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.lmt-btn:hover {
    transform: translateY(-2px);
}

.lmt-btn-primary {
    color: #fff;
    background: var(--lmt-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.lmt-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.lmt-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.lmt-btn-outline {
    color: var(--lmt-navy);
    border-color: #d9e2ee;
    background: #fff;
}

.lmt-btn-outline:hover {
    color: var(--lmt-blue);
    border-color: var(--lmt-blue);
}

/* Hero */

.lmt-hero {
    padding: 15px 0 42px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.lmt-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.lmt-hero-content {
    padding: 105px 0 22px;
}

.lmt-hero-content h1 {
    max-width: 600px;
    margin-bottom: 20px;
    color: var(--lmt-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.13;
}

.lmt-hero-content h1 span {
    display: block;
    color: var(--lmt-blue);
}

.lmt-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.lmt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lmt-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.lmt-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

.lmt-hero-note {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 10px !important;
    line-height: 1.6 !important;
}

/* Dashboard */

.lmt-hero-visual {
    min-width: 0;
    padding: 42px 4px 18px 10px;
}

.lmt-dashboard {
    padding: 22px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.lmt-dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 23px;
    padding-bottom: 17px;
    border-bottom: 1px solid #edf1f6;
}

.lmt-logo-mark {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--lmt-blue), var(--lmt-cyan));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.lmt-brand-info {
    min-width: 0;
    flex: 1;
}

.lmt-brand-info strong,
.lmt-brand-info small {
    display: block;
}

.lmt-brand-info strong {
    margin-bottom: 5px;
    color: var(--lmt-navy);
    font-size: 12px;
}

.lmt-brand-info small {
    color: var(--lmt-muted);
    font-size: 9px;
}

.lmt-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 5px;
    background: #e7f8ef;
    color: #178654;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.lmt-live-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1ba96b;
}

.lmt-dashboard-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.lmt-panel-label {
    display: inline-block;
    margin-bottom: 7px;
    color: #7e8da4;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.lmt-dashboard-title h3 {
    margin-bottom: 0;
    font-size: 19px;
}

.lmt-shift-badge {
    padding: 7px 10px;
    border-radius: 5px;
    background: #eaf2ff;
    color: var(--lmt-blue);
    font-size: 9px;
    font-weight: 800;
}

/* KPI cards */

.lmt-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.lmt-kpi-card {
    position: relative;
    min-width: 0;
    padding: 13px 11px;
    border: 1px solid #e5ebf4;
    border-radius: 9px;
    background: #fff;
}

.lmt-kpi-label {
    display: block;
    margin-bottom: 10px;
    color: #77869b;
    font-size: 9px;
    line-height: 1.5;
}

.lmt-kpi-card > strong {
    display: block;
    margin-bottom: 5px;
    color: var(--lmt-navy);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.lmt-kpi-card > small {
    display: block;
    color: #8b98aa;
    font-size: 8px;
    line-height: 1.5;
}

.lmt-kpi-icon {
    display: flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
}

.lmt-kpi-blue {
    color: var(--lmt-blue);
    background: #e8f1ff;
}

.lmt-kpi-green {
    color: #168757;
    background: #e4f8ec;
}

.lmt-kpi-orange {
    color: #bd6b10;
    background: #fff0df;
}

/* Production progress */

.lmt-production-panel {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #e5ebf4;
    border-radius: 9px;
}

.lmt-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.lmt-panel-heading strong,
.lmt-panel-heading small {
    display: block;
}

.lmt-panel-heading strong {
    margin-bottom: 4px;
    color: var(--lmt-navy);
    font-size: 12px;
}

.lmt-panel-heading small {
    color: var(--lmt-muted);
    font-size: 9px;
}

.lmt-progress-percent {
    color: var(--lmt-blue);
    font-size: 19px;
    font-weight: 800;
}

.lmt-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 20px;
    background: #eaf0f8;
}

.lmt-progress-track span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lmt-blue), var(--lmt-cyan));
}

.lmt-progress-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
    margin-top: 8px;
}

.lmt-progress-meta span {
    color: #7d8ba0;
    font-size: 8px;
}

/* CSS production chart */

.lmt-chart {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 9px;
    height: 126px;
    margin-top: 19px;
}

.lmt-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 18px;
}

.lmt-chart-y span {
    color: #8a97aa;
    font-size: 8px;
    text-align: right;
}

.lmt-chart-main {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.lmt-chart-grid {
    position: absolute;
    inset: 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lmt-chart-grid span {
    width: 100%;
    border-top: 1px dashed #e5ebf3;
}

.lmt-chart-bars {
    position: absolute;
    inset: 0 3px 21px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 7px;
}

.lmt-chart-bars > div {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 23px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #42b9ed, #1268d8);
}

.lmt-chart-bars > div:nth-child(3n) {
    background: linear-gradient(180deg, #ffbf71, #f28b1b);
}

.lmt-chart-bars > div > i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 4px 4px 0 0;
    background: rgba(255, 255, 255, 0.4);
}

.lmt-chart-x {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    gap: 3px;
}

.lmt-chart-x span {
    color: #8a97aa;
    font-size: 7px;
}

/* Machine status */

.lmt-machine-panel {
    padding: 14px;
    border: 1px solid #e5ebf4;
    border-radius: 9px;
}

.lmt-machine-heading {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.lmt-machine-heading strong {
    color: var(--lmt-navy);
    font-size: 11px;
}

.lmt-machine-heading > span {
    color: #8b98aa;
    font-size: 8px;
}

.lmt-machine-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f6;
}

.lmt-machine-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lmt-machine-icon {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #e8f1ff;
    color: var(--lmt-blue);
    font-size: 9px;
    font-weight: 800;
}

.lmt-machine-info {
    min-width: 0;
    flex: 1;
}

.lmt-machine-info strong,
.lmt-machine-info small {
    display: block;
}

.lmt-machine-info strong {
    margin-bottom: 4px;
    color: var(--lmt-navy);
    font-size: 10px;
}

.lmt-machine-info small {
    color: var(--lmt-muted);
    font-size: 8px;
    line-height: 1.5;
}

.lmt-machine-status {
    display: inline-block;
    padding: 6px 7px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.lmt-status-running {
    background: #e4f8ec;
    color: #168757;
}

.lmt-status-maintenance {
    background: #fff0df;
    color: #b96a10;
}

.lmt-dashboard-footer {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: #8996a8;
    font-size: 8px;
    line-height: 1.5;
}

.lmt-footer-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--lmt-orange);
}

/* Introduction */

.lmt-intro {
    background: #fff;
}

.lmt-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.lmt-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.lmt-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.lmt-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--lmt-blue);
    font-size: 14px;
    font-weight: 800;
}

.lmt-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.lmt-text-link:hover span {
    transform: translateX(4px);
}

/* Benefits */

.lmt-benefits {
    padding: 30px 0;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
    background: #f5f8fc;
}

.lmt-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.lmt-benefit {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.lmt-benefit-number {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e7f0ff;
    color: var(--lmt-blue);
    font-size: 12px;
    font-weight: 800;
}

.lmt-benefit:nth-child(2) .lmt-benefit-number {
    background: #e2f8ff;
    color: #0786b7;
}

.lmt-benefit:nth-child(3) .lmt-benefit-number {
    background: #fff0df;
    color: #c87514;
}

.lmt-benefit:nth-child(4) .lmt-benefit-number {
    background: #e5f7ed;
    color: #168757;
}

.lmt-benefit h3 {
    margin: 2px 0 6px;
    font-size: 14px;
}

.lmt-benefit p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* Feature cards */

.lmt-features {
    background: #fff;
}

.lmt-centered-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.lmt-centered-heading h2 {
    margin-bottom: 13px;
}

.lmt-centered-heading p {
    max-width: 650px;
    margin: 0 auto;
}

.lmt-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.lmt-feature-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid var(--lmt-border);
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.lmt-feature-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.lmt-feature-icon {
    display: flex;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.lmt-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.lmt-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.lmt-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.lmt-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.lmt-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.lmt-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.lmt-feature-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Capabilities */

.lmt-capabilities {
    background: #f6f9fd;
}

.lmt-capabilities-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.lmt-capabilities-content h2 {
    max-width: 530px;
}

.lmt-capabilities-content > p {
    max-width: 560px;
}

.lmt-check-list {
    display: grid;
    gap: 13px;
    margin: 25px 0;
    padding: 0;
    list-style: none;
}

.lmt-check-list li {
    position: relative;
    padding-left: 28px;
    color: #46566d;
    font-size: 14px;
    line-height: 1.6;
}

.lmt-check-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f6eb;
    color: #138653;
    content: "✓";
    font-size: 11px;
    font-weight: 800;
}

/* Operations panel */

.lmt-operations-panel {
    padding: 24px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.lmt-operations-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.lmt-operations-header h3 {
    margin-bottom: 0;
    font-size: 21px;
}

.lmt-operations-menu {
    color: #8495ab;
    letter-spacing: 2px;
}

.lmt-line-card {
    margin-bottom: 13px;
    padding: 16px;
    border: 1px solid #e5ebf4;
    border-radius: 9px;
    background: #fff;
}

.lmt-line-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.lmt-line-top strong,
.lmt-line-top small {
    display: block;
}

.lmt-line-top strong {
    margin-bottom: 5px;
    color: var(--lmt-navy);
    font-size: 12px;
}

.lmt-line-top small {
    color: var(--lmt-muted);
    font-size: 9px;
}

.lmt-line-status {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.lmt-line-green {
    color: #168757;
    background: #e4f8ec;
}

.lmt-line-orange {
    color: #bd6b10;
    background: #fff0df;
}

.lmt-line-blue {
    color: var(--lmt-blue);
    background: #e8f1ff;
}

.lmt-line-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 20px;
    background: #eaf0f8;
}

.lmt-line-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1268d8, #10a7e5);
}

.lmt-line-progress > .lmt-progress-orange {
    background: linear-gradient(90deg, #f28b1b, #ffbd66);
}

.lmt-line-progress > .lmt-progress-blue {
    background: linear-gradient(90deg, #8b9ab2, #b9c5d5);
}

.lmt-line-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.lmt-line-meta span {
    color: #8491a4;
    font-size: 9px;
}

.lmt-line-meta strong {
    color: var(--lmt-navy);
    font-size: 10px;
}

.lmt-operations-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 17px;
    padding: 12px;
    border-radius: 8px;
    background: #f2f7ff;
}

.lmt-operations-note > span {
    display: flex;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dceaff;
    color: var(--lmt-blue);
    font-size: 11px;
    font-weight: 800;
}

.lmt-operations-note p {
    margin-bottom: 0;
    color: #536a89;
    font-size: 10px;
    line-height: 1.65;
}

/* Workflow */

.lmt-workflow {
    background: #fff;
}

.lmt-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.lmt-process-step {
    padding: 23px;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    background: #fff;
}

.lmt-process-step > span {
    display: flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--lmt-blue);
    font-size: 12px;
    font-weight: 800;
}

.lmt-process-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.lmt-process-step:nth-child(3) > span {
    background: #fff0df;
    color: #bd6b10;
}

.lmt-process-step:nth-child(4) > span {
    background: #f0eaff;
    color: #7753c8;
}

.lmt-process-step:nth-child(5) > span {
    background: #e4f8ec;
    color: #168757;
}

.lmt-process-step h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.lmt-process-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Industries */

.lmt-industries {
    background: #f6f9fd;
}

.lmt-industries-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.lmt-industries-content h2 {
    max-width: 530px;
}

.lmt-industries-content > p {
    max-width: 550px;
}

/* Industry panel */

.lmt-industry-panel {
    padding: 25px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(19, 48, 89, 0.06);
}

.lmt-industry-panel-header {
    margin-bottom: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f6;
}

.lmt-industry-panel-header h3 {
    margin-bottom: 6px;
    font-size: 21px;
}

.lmt-industry-panel-header p {
    margin-bottom: 0;
    font-size: 11px;
}

.lmt-industry-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1f6;
}

.lmt-industry-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 9px;
    font-weight: 800;
}

.lmt-industry-blue {
    color: var(--lmt-blue);
    background: #e8f1ff;
}

.lmt-industry-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.lmt-industry-orange {
    color: #bd6b10;
    background: #fff0df;
}

.lmt-industry-green {
    color: #168757;
    background: #e4f8ec;
}

.lmt-industry-item > div {
    min-width: 0;
    flex: 1;
}

.lmt-industry-item strong,
.lmt-industry-item small {
    display: block;
}

.lmt-industry-item strong {
    margin-bottom: 5px;
    color: var(--lmt-navy);
    font-size: 12px;
}

.lmt-industry-item small {
    color: var(--lmt-muted);
    font-size: 10px;
    line-height: 1.6;
}

.lmt-industry-arrow {
    color: #8495ab;
    font-size: 19px;
}

.lmt-industry-panel-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    background: #effaf5;
}

.lmt-industry-panel-footer > span {
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d9f4e6;
    color: #16865b;
    font-size: 12px;
    font-weight: 800;
}

.lmt-industry-panel-footer p {
    margin-bottom: 0;
    color: #28664f;
    font-size: 11px;
    font-weight: 600;
}

/* Security and integration */

.lmt-security {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(16, 167, 229, 0.2), transparent 35%),
        var(--lmt-navy);
}

.lmt-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 65px;
}

.lmt-security h2 {
    max-width: 540px;
    margin-bottom: 17px;
    color: #fff;
}

.lmt-security-grid > div:first-child p {
    max-width: 560px;
    margin-bottom: 0;
    color: #c0cee1;
}

.lmt-security-features {
    display: grid;
    gap: 18px;
}

.lmt-security-features > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.lmt-security-features > div > span {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(50, 198, 151, 0.15);
    color: #69e1b0;
    font-size: 14px;
    font-weight: 800;
}

.lmt-security-features strong,
.lmt-security-features small {
    display: block;
}

.lmt-security-features strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
}

.lmt-security-features small {
    color: #b7c7dc;
    font-size: 12px;
    line-height: 1.6;
}

/* Integration */

.lmt-integration {
    background: #fff;
}

.lmt-integration-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.lmt-integration-grid > div:first-child h2 {
    max-width: 470px;
}

.lmt-integration-grid > div:last-child p {
    margin-bottom: 17px;
}

.lmt-integration-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0;
}

.lmt-integration-tags span {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid #dce8f8;
    border-radius: 6px;
    background: #f4f8ff;
    color: #285b9d;
    font-size: 11px;
    font-weight: 700;
}

.lmt-integration-note {
    padding-left: 13px;
    border-left: 3px solid var(--lmt-orange);
    font-size: 12px !important;
}

/* Final CTA */

.lmt-cta {
    padding: 65px 0;
    background: #f5f8fc;
}

.lmt-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.lmt-cta-inner > div:first-child {
    max-width: 700px;
}

.lmt-cta h2 {
    margin-bottom: 12px;
}

.lmt-cta p {
    margin-bottom: 0;
}

.lmt-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .lmt-hero-grid {
        gap: 25px;
    }

    .lmt-hero-content {
        padding: 65px 0 22px;
    }

    .lmt-hero-visual {
        padding: 30px 4px 18px 10px;
    }

    .lmt-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .lmt-dashboard {
        padding: 16px;
    }

    .lmt-kpi-grid {
        gap: 7px;
    }

    .lmt-kpi-card {
        padding: 10px 8px;
    }

    .lmt-kpi-card > strong {
        font-size: 21px;
    }

    .lmt-intro-grid,
    .lmt-capabilities-grid,
    .lmt-industries-grid,
    .lmt-security-grid,
    .lmt-integration-grid {
        gap: 38px;
    }

    .lmt-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .lmt-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lmt-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lmt-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .lmt-container {
        width: min(100% - 30px, 560px);
    }

    .lmt-section {
        padding: 48px 0;
    }

    .lmt-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .lmt-breadcrumb .lmt-container {
        gap: 7px;
    }

    .lmt-hero {
        padding: 20px 0 35px;
    }

    .lmt-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 25px;
    }

    .lmt-hero-content {
        padding: 0;
    }

    .lmt-hero-visual {
        padding: 0;
    }

    .lmt-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .lmt-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .lmt-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .lmt-hero-actions {
        align-items: stretch;
    }

    .lmt-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .lmt-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .lmt-hero-points span {
        font-size: 10px;
    }

    .lmt-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .lmt-dashboard-header {
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 18px;
    }

    .lmt-brand-info strong {
        font-size: 11px;
    }

    .lmt-brand-info small {
        font-size: 8px;
    }

    .lmt-live-indicator {
        font-size: 7px;
    }

    .lmt-dashboard-title h3 {
        font-size: 17px;
    }

    .lmt-kpi-grid {
        gap: 7px;
    }

    .lmt-kpi-card {
        padding: 10px 8px;
    }

    .lmt-kpi-label {
        min-height: 25px;
        font-size: 8px;
    }

    .lmt-kpi-card > strong {
        font-size: 21px;
    }

    .lmt-kpi-card > small {
        font-size: 7px;
    }

    .lmt-kpi-icon {
        width: 22px;
        height: 22px;
        margin-top: 8px;
    }

    .lmt-production-panel {
        padding: 11px;
    }

    .lmt-chart {
        height: 115px;
    }

    .lmt-chart-bars {
        gap: 5px;
    }

    .lmt-chart-bars > div {
        max-width: 20px;
    }

    .lmt-machine-panel {
        padding: 11px;
    }

    .lmt-machine-row {
        gap: 7px;
    }

    .lmt-machine-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .lmt-machine-info strong {
        font-size: 9px;
    }

    .lmt-machine-info small {
        font-size: 7px;
    }

    .lmt-machine-status {
        padding: 5px 6px;
        font-size: 7px;
    }

    .lmt-intro-grid,
    .lmt-capabilities-grid,
    .lmt-industries-grid,
    .lmt-security-grid,
    .lmt-integration-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .lmt-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .lmt-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .lmt-benefits {
        padding: 25px 0;
    }

    .lmt-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .lmt-benefit h3 {
        font-size: 14px;
    }

    .lmt-benefit p {
        font-size: 12px;
    }

    .lmt-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .lmt-centered-heading p {
        margin: 0;
    }

    .lmt-feature-grid,
    .lmt-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .lmt-feature-card {
        padding: 20px;
    }

    .lmt-feature-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .lmt-feature-card h3 {
        font-size: 16px;
    }

    .lmt-feature-card p {
        font-size: 13px;
    }

    .lmt-check-list li {
        font-size: 13px;
    }

    .lmt-operations-panel,
    .lmt-industry-panel {
        padding: 18px;
    }

    .lmt-operations-header h3,
    .lmt-industry-panel-header h3 {
        font-size: 19px;
    }

    .lmt-line-card {
        padding: 12px;
    }

    .lmt-line-top {
        gap: 7px;
    }

    .lmt-line-top strong {
        font-size: 11px;
    }

    .lmt-line-top small {
        font-size: 8px;
    }

    .lmt-line-status {
        font-size: 7px;
    }

    .lmt-process-step {
        padding: 20px;
    }

    .lmt-process-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .lmt-process-step h3 {
        font-size: 15px;
    }

    .lmt-industry-item {
        gap: 10px;
    }

    .lmt-industry-item small {
        font-size: 9px;
    }

    .lmt-security {
        padding: 48px 0;
    }

    .lmt-security-grid {
        gap: 28px;
    }

    .lmt-security h2 {
        font-size: 27px;
    }

    .lmt-security-grid > div:first-child p {
        font-size: 13px;
    }

    .lmt-integration-tags {
        gap: 8px;
        margin: 17px 0;
    }

    .lmt-integration-tags span {
        padding: 8px 10px;
        font-size: 10px;
    }

    .lmt-integration-note {
        font-size: 12px !important;
    }

    .lmt-cta {
        padding: 45px 0;
    }

    .lmt-cta-inner {
        gap: 23px;
    }

    .lmt-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .lmt-cta-actions .lmt-btn {
        width: 100%;
    }
}

/* Small Mobile */

@media (max-width: 380px) {
    .lmt-container {
        width: calc(100% - 24px);
    }

    .lmt-dashboard {
        padding: 10px;
    }

    .lmt-kpi-grid {
        gap: 5px;
    }

    .lmt-kpi-card {
        padding: 9px 6px;
    }

    .lmt-kpi-card > strong {
        font-size: 18px;
    }

    .lmt-kpi-label {
        font-size: 7px;
    }

    .lmt-chart-bars {
        gap: 4px;
    }

    .lmt-chart-bars > div {
        max-width: 17px;
    }

    .lmt-hero-actions {
        flex-direction: column;
    }

    .lmt-hero-actions .lmt-btn {
        width: 100%;
    }

    .lmt-machine-info strong {
        font-size: 8px;
    }

    .lmt-machine-status {
        font-size: 6px;
    }

    .lmt-operations-panel,
    .lmt-industry-panel {
        padding: 13px;
    }

    .lmt-line-card {
        padding: 10px;
    }
}



/* ==========================================
   View All Solutions
   Unique prefix: vas-
   ========================================== */

.vas-page {
    --vas-navy: #0b1735;
    --vas-blue: #1268d8;
    --vas-cyan: #10a7e5;
    --vas-orange: #f28b1b;
    --vas-text: #34425a;
    --vas-muted: #6d7b91;
    --vas-light: #f5f8fc;
    --vas-border: #e3eaf3;

    overflow: hidden;
    color: var(--vas-text);
    font-family: inherit;
}

.vas-page *,
.vas-page *::before,
.vas-page *::after {
    box-sizing: border-box;
}

.vas-page a {
    text-decoration: none;
}

.vas-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.vas-page h1,
.vas-page h2,
.vas-page h3,
.vas-page h4,
.vas-page p {
    margin-top: 0;
}

.vas-page h1,
.vas-page h2,
.vas-page h3,
.vas-page h4 {
    color: var(--vas-navy);
    line-height: 1.25;
}

.vas-page h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.vas-page p {
    color: var(--vas-muted);
    font-size: 15px;
    line-height: 1.85;
}

.vas-section {
    padding: 76px 0;
}

.vas-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--vas-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.5;
}

/* Breadcrumb */

.vas-breadcrumb {
    padding: 13px 0;
    border-bottom: 1px solid #edf1f6;
    background: #f7f9fc;
    font-size: 13px;
}

.vas-breadcrumb .vas-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.vas-breadcrumb a {
    color: var(--vas-blue);
}

.vas-breadcrumb span {
    color: #8490a2;
}

/* Buttons */

.vas-btn {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.vas-btn:hover {
    transform: translateY(-2px);
}

.vas-btn-primary {
    color: #fff;
    background: var(--vas-blue);
    box-shadow: 0 8px 18px rgba(18, 104, 216, 0.16);
}

.vas-btn-primary:hover {
    color: #fff;
    background: #0b55b9;
    box-shadow: 0 10px 22px rgba(18, 104, 216, 0.22);
}

.vas-btn-primary span {
    font-size: 19px;
    line-height: 1;
}

.vas-btn-outline {
    color: var(--vas-navy);
    border-color: #d9e2ee;
    background: #fff;
}

.vas-btn-outline:hover {
    color: var(--vas-blue);
    border-color: var(--vas-blue);
}

/* Hero */

.vas-hero {
    padding: 15px 0 48px;
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 167, 229, 0.11), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.vas-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 38px;
}

.vas-hero-content {
    padding: 100px 0 22px;
}

.vas-hero-content h1 {
    max-width: 600px;
    margin-bottom: 20px;
    color: var(--vas-navy);
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.13;
}

.vas-hero-content h1 span {
    display: block;
    color: var(--vas-blue);
}

.vas-hero-description {
    max-width: 570px;
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.85;
}

.vas-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vas-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
    margin-top: 25px;
}

.vas-hero-points span {
    color: #53637a;
    font-size: 12px;
    font-weight: 600;
}

/* Hero dashboard */

.vas-hero-visual {
    position: relative;
    min-width: 0;
    padding: 48px 4px 30px 10px;
}

.vas-visual-glow {
    position: absolute;
    top: 12%;
    right: 5%;
    width: 75%;
    height: 70%;
    border-radius: 50%;
    background: rgba(16, 167, 229, 0.13);
    filter: blur(50px);
    pointer-events: none;
}

.vas-solution-dashboard {
    position: relative;
    z-index: 1;
    padding: 22px;
    border: 1px solid #e1e9f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(17, 44, 87, 0.12);
}

.vas-dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #edf1f6;
}

.vas-dashboard-logo {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--vas-blue), var(--vas-cyan));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.vas-dashboard-brand {
    min-width: 0;
    flex: 1;
}

.vas-dashboard-brand strong,
.vas-dashboard-brand small {
    display: block;
}

.vas-dashboard-brand strong {
    margin-bottom: 5px;
    color: var(--vas-navy);
    font-size: 12px;
}

.vas-dashboard-brand small {
    color: var(--vas-muted);
    font-size: 9px;
}

.vas-dashboard-menu {
    color: #8c9ab0;
    letter-spacing: 2px;
}

.vas-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 21px;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(125deg, #102957, #1268c9 72%, #159fda);
}

.vas-dashboard-welcome > div:first-child {
    min-width: 0;
}

.vas-mini-label {
    display: block;
    margin-bottom: 10px;
    color: #a9dcff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.vas-dashboard-welcome h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.vas-dashboard-welcome p {
    margin-bottom: 0;
    color: #e0edff;
    font-size: 11px;
}

.vas-welcome-icon {
    display: flex;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.vas-welcome-icon svg {
    display: block;
    width: 39px;
    height: 39px;
}

.vas-dashboard-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

.vas-dashboard-section-title strong {
    color: var(--vas-navy);
    font-size: 12px;
}

.vas-dashboard-section-title > span {
    color: #8b98aa;
    font-size: 9px;
}

.vas-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vas-dashboard-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    column-gap: 11px;
    padding: 14px 12px;
    border: 1px solid #e5ebf4;
    border-radius: 9px;
    background: #fff;
}

.vas-card-icon {
    display: flex;
    width: 42px;
    height: 42px;
    grid-row: span 2;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
}

.vas-card-blue {
    color: var(--vas-blue);
    background: #e8f1ff;
}

.vas-card-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.vas-card-orange {
    color: #bd6b10;
    background: #fff0df;
}

.vas-card-purple {
    color: #7753c8;
    background: #f0eaff;
}

.vas-dashboard-card strong {
    align-self: end;
    color: var(--vas-navy);
    font-size: 11px;
    line-height: 1.5;
}

.vas-dashboard-card small {
    align-self: start;
    margin-top: 4px;
    color: var(--vas-muted);
    font-size: 9px;
    line-height: 1.5;
}

.vas-dashboard-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 13px;
    border: 1px solid #e5ebf4;
    border-radius: 9px;
    background: #fcfdff;
}

.vas-bottom-symbol {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e4f8ec;
    color: #168757;
    font-size: 15px;
    font-weight: 800;
}

.vas-dashboard-bottom > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.vas-dashboard-bottom strong,
.vas-dashboard-bottom small {
    display: block;
}

.vas-dashboard-bottom strong {
    margin-bottom: 4px;
    color: var(--vas-navy);
    font-size: 11px;
}

.vas-dashboard-bottom small {
    color: var(--vas-muted);
    font-size: 9px;
    line-height: 1.5;
}

.vas-bottom-arrow {
    color: #8495ab;
    font-size: 19px;
}

/* Floating cards */

.vas-floating-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e1e9f4;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(17, 44, 87, 0.1);
}

.vas-floating-top {
    top: 20px;
    right: -12px;
}

.vas-floating-bottom {
    bottom: 6px;
    left: -12px;
}

.vas-floating-icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 17px;
    font-weight: 800;
}

.vas-float-blue {
    background: #e8f1ff;
    color: var(--vas-blue);
}

.vas-float-orange {
    background: #fff0df;
    color: #bd6b10;
}

.vas-floating-card strong,
.vas-floating-card small {
    display: block;
}

.vas-floating-card strong {
    margin-bottom: 4px;
    color: var(--vas-navy);
    font-size: 10px;
}

.vas-floating-card small {
    color: var(--vas-muted);
    font-size: 9px;
}

/* Introduction */

.vas-intro {
    background: #fff;
}

.vas-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 65px;
}

.vas-intro-grid > div:first-child h2 {
    max-width: 450px;
}

.vas-intro-grid > div:last-child p {
    margin-bottom: 17px;
}

.vas-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--vas-blue);
    font-size: 14px;
    font-weight: 800;
}

.vas-text-link span {
    font-size: 19px;
    transition: transform 0.2s ease;
}

.vas-text-link:hover span {
    transform: translateX(4px);
}

/* Centered section heading */

.vas-centered-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.vas-centered-heading h2 {
    margin-bottom: 13px;
}

.vas-centered-heading p {
    max-width: 680px;
    margin: 0 auto;
}

/* Solutions */

.vas-solutions {
    background: #f6f9fd;
}

.vas-solution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.vas-solution-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 24px 23px;
    border: 1px solid #e1e9f4;
    border-radius: 11px;
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.vas-solution-card:hover {
    transform: translateY(-4px);
    border-color: #c9dcf8;
    box-shadow: 0 15px 34px rgba(11, 40, 82, 0.08);
}

.vas-solution-card-top {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.vas-solution-icon {
    display: flex;
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
}

.vas-icon-blue {
    color: #1767d0;
    background: #e8f1ff;
}

.vas-icon-cyan {
    color: #0787b9;
    background: #e5f8ff;
}

.vas-icon-purple {
    color: #7753c8;
    background: #f0eaff;
}

.vas-icon-orange {
    color: #bd6b10;
    background: #fff1df;
}

.vas-icon-green {
    color: #168757;
    background: #e4f8ec;
}

.vas-solution-number {
    color: #b8c5d6;
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}

.vas-solution-category {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--vas-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.5;
}

.vas-solution-card h3 {
    margin-bottom: 11px;
    font-size: 19px;
    letter-spacing: -0.3px;
}

.vas-solution-card > p {
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.8;
}

.vas-solution-card ul {
    display: grid;
    width: 100%;
    gap: 9px;
    margin: 0 0 20px;
    padding: 15px 0 0;
    border-top: 1px solid #edf1f6;
    list-style: none;
}

.vas-solution-card ul li {
    position: relative;
    padding-left: 19px;
    color: #53637a;
    font-size: 12px;
    line-height: 1.6;
}

.vas-solution-card ul li::before {
    position: absolute;
    top: 5px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vas-cyan);
    content: "";
}

.vas-card-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: var(--vas-blue);
    font-size: 12px;
    font-weight: 800;
}

.vas-card-link span {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.vas-card-link:hover span {
    transform: translateX(4px);
}

/* Industries */

.vas-industries {
    background: #fff;
}

.vas-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.vas-industry-card {
    padding: 23px;
    border: 1px solid #e3eaf3;
    border-radius: 10px;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vas-industry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(11, 40, 82, 0.07);
}

.vas-industry-icon {
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--vas-blue);
    font-size: 11px;
    font-weight: 800;
}

.vas-industry-cyan {
    background: #e5f8ff;
    color: #0787b9;
}

.vas-industry-orange {
    background: #fff0df;
    color: #bd6b10;
}

.vas-industry-purple {
    background: #f0eaff;
    color: #7753c8;
}

.vas-industry-green {
    background: #e4f8ec;
    color: #168757;
}

.vas-industry-card h3 {
    margin-bottom: 8px;
    font-size: 17px;
}

.vas-industry-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Why choose us */

.vas-why {
    background: #f6f9fd;
}

.vas-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 65px;
}

.vas-why-grid > div:first-child h2 {
    max-width: 510px;
}

.vas-why-grid > div:first-child p {
    max-width: 540px;
    margin-bottom: 25px;
}

.vas-why-features {
    display: grid;
    gap: 18px;
}

.vas-why-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 17px;
    border: 1px solid #e3eaf3;
    border-radius: 9px;
    background: #fff;
}

.vas-why-item > span {
    display: flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e8f1ff;
    color: var(--vas-blue);
    font-size: 11px;
    font-weight: 800;
}

.vas-why-item:nth-child(2) > span {
    background: #e5f8ff;
    color: #0787b9;
}

.vas-why-item:nth-child(3) > span {
    background: #fff0df;
    color: #bd6b10;
}

.vas-why-item:nth-child(4) > span {
    background: #e4f8ec;
    color: #168757;
}

.vas-why-item h3 {
    margin-bottom: 6px;
    font-size: 15px;
}

.vas-why-item p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.7;
}

/* Engagement process */

.vas-process {
    background: #fff;
}

.vas-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.vas-process-step {
    padding: 23px;
    border: 1px solid #e2eaf4;
    border-radius: 10px;
    background: #fff;
}

.vas-process-step > span {
    display: flex;
    width: 41px;
    height: 41px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--vas-blue);
    font-size: 12px;
    font-weight: 800;
}

.vas-process-step:nth-child(2) > span {
    background: #e3f8ff;
    color: #0786b7;
}

.vas-process-step:nth-child(3) > span {
    background: #fff0df;
    color: #bd6b10;
}

.vas-process-step:nth-child(4) > span {
    background: #e4f8ec;
    color: #168757;
}

.vas-process-step h3 {
    margin-bottom: 9px;
    font-size: 16px;
}

.vas-process-step p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Final CTA */

.vas-cta {
    padding: 65px 0;
    background:
        radial-gradient(ellipse at 90% 15%, rgba(16, 167, 229, 0.12), transparent 35%),
        #f5f8fc;
}

.vas-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.vas-cta-inner > div:first-child {
    max-width: 700px;
}

.vas-cta h2 {
    margin-bottom: 12px;
}

.vas-cta p {
    margin-bottom: 0;
}

.vas-cta-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 11px;
}

/* Tablet */

@media (max-width: 1024px) {
    .vas-hero-grid {
        gap: 25px;
    }

    .vas-hero-content {
        padding: 65px 0 22px;
    }

    .vas-hero-visual {
        padding: 35px 4px 25px 10px;
    }

    .vas-hero-content h1 {
        font-size: clamp(32px, 4vw, 43px);
    }

    .vas-solution-dashboard {
        padding: 16px;
    }

    .vas-dashboard-card {
        grid-template-columns: 35px minmax(0, 1fr);
        column-gap: 8px;
        padding: 11px 9px;
    }

    .vas-card-icon {
        width: 35px;
        height: 35px;
    }

    .vas-dashboard-card strong {
        font-size: 10px;
    }

    .vas-floating-top {
        right: -5px;
    }

    .vas-floating-bottom {
        left: -5px;
    }

    .vas-intro-grid,
    .vas-why-grid {
        gap: 38px;
    }

    .vas-solution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vas-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vas-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vas-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .vas-container {
        width: min(100% - 30px, 560px);
    }

    .vas-section {
        padding: 48px 0;
    }

    .vas-breadcrumb {
        padding: 11px 0;
        font-size: 11px;
    }

    .vas-breadcrumb .vas-container {
        gap: 7px;
    }

    .vas-hero {
        padding: 20px 0 35px;
    }

    .vas-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 26px;
    }

    .vas-hero-content {
        padding: 0;
    }

    .vas-hero-visual {
        padding: 8px 0 22px;
    }

    .vas-eyebrow {
        margin-bottom: 11px;
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .vas-hero-content h1 {
        margin-bottom: 16px;
        font-size: clamp(31px, 8vw, 42px);
        letter-spacing: -0.9px;
        line-height: 1.15;
    }

    .vas-hero-description {
        margin-bottom: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    .vas-hero-actions {
        align-items: stretch;
    }

    .vas-btn {
        min-height: 46px;
        padding: 12px 15px;
        font-size: 12px;
    }

    .vas-hero-points {
        gap: 10px 14px;
        margin-top: 19px;
    }

    .vas-hero-points span {
        font-size: 10px;
    }

    .vas-solution-dashboard {
        padding: 13px;
        border-radius: 12px;
    }

    .vas-dashboard-header {
        gap: 9px;
        margin-bottom: 16px;
    }

    .vas-dashboard-brand strong {
        font-size: 11px;
    }

    .vas-dashboard-brand small {
        font-size: 8px;
    }

    .vas-dashboard-welcome {
        padding: 15px;
    }

    .vas-dashboard-welcome h3 {
        font-size: 18px;
    }

    .vas-dashboard-welcome p {
        font-size: 10px;
    }

    .vas-welcome-icon {
        width: 47px;
        height: 47px;
        flex-basis: 47px;
        border-radius: 12px;
    }

    .vas-welcome-icon svg {
        width: 30px;
        height: 30px;
    }

    .vas-dashboard-grid {
        gap: 8px;
    }

    .vas-dashboard-card {
        grid-template-columns: 33px minmax(0, 1fr);
        column-gap: 7px;
        padding: 10px 8px;
    }

    .vas-card-icon {
        width: 33px;
        height: 33px;
        border-radius: 8px;
        font-size: 8px;
    }

    .vas-dashboard-card strong {
        font-size: 9px;
    }

    .vas-dashboard-card small {
        font-size: 8px;
    }

    .vas-floating-card {
        padding: 9px 11px;
    }

    .vas-floating-top {
        top: -3px;
        right: -3px;
    }

    .vas-floating-bottom {
        bottom: -3px;
        left: -3px;
    }

    .vas-floating-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .vas-floating-card strong {
        font-size: 9px;
    }

    .vas-floating-card small {
        font-size: 8px;
    }

    .vas-intro-grid,
    .vas-why-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .vas-page h2 {
        margin-bottom: 14px;
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .vas-page p {
        font-size: 14px;
        line-height: 1.8;
    }

    .vas-centered-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .vas-centered-heading p {
        margin: 0;
    }

    .vas-solution-grid,
    .vas-industry-grid,
    .vas-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .vas-solution-card {
        padding: 21px;
    }

    .vas-solution-card h3 {
        font-size: 18px;
    }

    .vas-solution-card > p {
        font-size: 13px;
    }

    .vas-solution-card ul li {
        font-size: 12px;
    }

    .vas-industry-card {
        padding: 20px;
    }

    .vas-industry-card h3 {
        font-size: 16px;
    }

    .vas-industry-card p {
        font-size: 13px;
    }

    .vas-why-grid > div:first-child p {
        font-size: 13px;
    }

    .vas-why-item {
        padding: 14px;
    }

    .vas-why-item h3 {
        font-size: 14px;
    }

    .vas-process-step {
        padding: 20px;
    }

    .vas-process-step > span {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }

    .vas-process-step h3 {
        font-size: 15px;
    }

    .vas-cta {
        padding: 45px 0;
    }

    .vas-cta-inner {
        gap: 23px;
    }

    .vas-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .vas-cta-actions .vas-btn {
        width: 100%;
    }
}

/* Small mobile */

@media (max-width: 380px) {
    .vas-container {
        width: calc(100% - 24px);
    }

    .vas-solution-dashboard {
        padding: 10px;
    }

    .vas-dashboard-welcome {
        padding: 12px;
    }

    .vas-dashboard-welcome h3 {
        font-size: 16px;
    }

    .vas-welcome-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .vas-welcome-icon svg {
        width: 25px;
        height: 25px;
    }

    .vas-dashboard-grid {
        gap: 6px;
    }

    .vas-dashboard-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .vas-card-icon {
        grid-row: auto;
    }

    .vas-dashboard-card strong {
        font-size: 9px;
    }

    .vas-dashboard-card small {
        font-size: 8px;
    }

    .vas-floating-card {
        gap: 7px;
        padding: 8px;
    }

    .vas-floating-card strong {
        font-size: 8px;
    }

    .vas-floating-card small {
        font-size: 7px;
    }

    .vas-hero-actions {
        flex-direction: column;
    }

    .vas-hero-actions .vas-btn {
        width: 100%;
    }

    .vas-solution-card {
        padding: 18px;
    }
}


/* ==========================================
   ABOUT PAGE - MY TECH PROFESSIONALS
   All classes use the abt- prefix
========================================== */

.abt-page {
    --abt-navy: #0b1735;
    --abt-blue: #1268d8;
    --abt-cyan: #10a7e5;
    --abt-orange: #f28b1b;
    --abt-text: #4c5a70;
    --abt-light: #f4f8fd;
    --abt-border: #e3eaf3;
    color: var(--abt-navy);
    font-family: inherit;
    overflow: hidden;
}

.abt-page *,
.abt-page *::before,
.abt-page *::after {
    box-sizing: border-box;
}

.abt-page a {
    text-decoration: none;
}

.abt-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* Breadcrumb */

.abt-breadcrumb {
    padding: 14px 0;
    background: #f7faff;
    border-bottom: 1px solid #eaf0f7;
    font-size: 13px;
    color: #77859a;
}

.abt-breadcrumb .abt-container {
    display: flex;
    align-items: center;
    gap: 11px;
}

.abt-breadcrumb a {
    color: var(--abt-blue);
}

.abt-breadcrumb a:hover {
    color: var(--abt-orange);
}

/* Common typography */

.abt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--abt-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.abt-eyebrow::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 3px;
    background: var(--abt-orange);
    border-radius: 5px;
}

.abt-page h1,
.abt-page h2,
.abt-page h3,
.abt-page p {
    margin-top: 0;
}

.abt-page h1,
.abt-page h2,
.abt-page h3 {
    color: var(--abt-navy);
}

.abt-page h2 {
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.25;
    letter-spacing: -0.8px;
}

.abt-page h2 span,
.abt-hero-content h1 span,
.abt-approach-content h2 span {
    color: var(--abt-blue);
}

/* Buttons */

.abt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 27px;
}

.abt-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 12px 20px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    transition: background .25s ease, color .25s ease,
                transform .25s ease, border-color .25s ease;
}

.abt-btn:hover {
    transform: translateY(-2px);
}

.abt-btn-primary {
    background: var(--abt-blue);
    color: #fff !important;
    border: 1px solid var(--abt-blue);
    box-shadow: 0 8px 20px rgba(18, 104, 216, .15);
}

.abt-btn-primary:hover {
    background: var(--abt-navy);
    border-color: var(--abt-navy);
}

.abt-btn-outline {
    color: var(--abt-navy) !important;
    border: 1px solid #d8e2ef;
    background: #fff;
}

.abt-btn-outline:hover {
    border-color: var(--abt-blue);
    color: var(--abt-blue) !important;
}

.abt-btn-light {
    color: var(--abt-navy) !important;
    background: #fff;
    border: 1px solid #fff;
    white-space: nowrap;
}

.abt-btn-light:hover {
    background: #eaf4ff;
}

/* Hero */

.abt-hero {
    position: relative;
    padding: 48px 0 58px;
    background:
        radial-gradient(ellipse at 82% 45%,
            rgba(16, 167, 229, .10), transparent 35%),
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.abt-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .96fr);
    align-items: center;
    gap: 38px;
}

.abt-hero-content {
    position: relative;
    z-index: 2;
}

.abt-hero-content h1 {
    max-width: 590px;
    margin: 17px 0 18px;
    font-size: clamp(35px, 4.2vw, 52px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.abt-hero-content h1 span {
    display: block;
    margin-top: 7px;
}

.abt-hero-content > p {
    max-width: 540px;
    margin-bottom: 0;
    color: var(--abt-text);
    font-size: 15px;
    line-height: 1.85;
}

.abt-trust-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    color: #68768b;
    font-size: 11px;
    line-height: 1.6;
}

.abt-trust-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: #1db981;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(29, 185, 129, .10);
}

/* Hero visual */

.abt-hero-visual {
    position: relative;
    min-width: 0;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.abt-visual-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(16, 167, 229, .12);
    border-radius: 50%;
    filter: blur(40px);
}

.abt-orbit {
    position: absolute;
    border: 1px solid rgba(18, 104, 216, .13);
    border-radius: 50%;
}

.abt-orbit-one {
    width: 390px;
    height: 390px;
}

.abt-orbit-two {
    width: 310px;
    height: 310px;
    border-style: dashed;
}

.abt-tech-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 445px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #e0e9f5;
    border-radius: 16px;
    box-shadow: 0 24px 65px rgba(16, 43, 83, .12);
}

.abt-tech-main {
    padding: 22px 21px 16px;
}

.abt-tech-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.abt-small-label {
    color: #8796ac;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.abt-tech-card-head h3 {
    margin: 6px 0 0;
    font-size: 17px;
    font-weight: 800;
}

.abt-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 5px;
    background: #edfaf5;
    color: #168c64;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.abt-status > span {
    width: 6px;
    height: 6px;
    background: #19b77c;
    border-radius: 50%;
}

.abt-tech-illustration {
    position: relative;
    height: 260px;
    margin-top: 9px;
}

.abt-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.abt-connectors path {
    fill: none;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

.abt-tech-node {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 91px;
    height: 61px;
    background: #fff;
    border: 1px solid #dce8f7;
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(16, 43, 83, .07);
    color: var(--abt-blue);
}

.abt-tech-node > span {
    font-size: 20px;
    line-height: 1;
}

.abt-tech-node small {
    color: #66758b;
    font-size: 9px;
    font-weight: 700;
}

.abt-node-center {
    top: 50%;
    left: 50%;
    width: 118px;
    height: 94px;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #f2f8ff, #fff);
    border-color: #bcd9fb;
}

.abt-node-center .abt-node-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--abt-blue);
    color: #fff;
    font-size: 19px;
}

.abt-node-center strong {
    color: var(--abt-navy);
    font-size: 11px;
}

.abt-node-center small {
    font-size: 8px;
    font-weight: 500;
}

.abt-node-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.abt-node-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.abt-node-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.abt-node-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.abt-tech-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 13px;
    border-top: 1px solid #edf1f7;
}

.abt-tech-footer span {
    color: #718098;
    font-size: 10px;
    font-weight: 600;
}

.abt-tech-footer i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--abt-cyan);
}

.abt-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e3ebf5;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16, 43, 83, .10);
}

.abt-float-top {
    top: 24px;
    right: -5px;
}

.abt-float-bottom {
    bottom: 20px;
    left: -8px;
}

.abt-float-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    background: #eaf4ff;
    color: var(--abt-blue);
    font-size: 20px;
}

.abt-float-orange {
    background: #fff2e4;
    color: var(--abt-orange);
}

.abt-floating-card strong,
.abt-floating-card small {
    display: block;
}

.abt-floating-card strong {
    margin-bottom: 4px;
    color: var(--abt-navy);
    font-size: 11px;
}

.abt-floating-card small {
    color: #8491a4;
    font-size: 9px;
}

/* Overview */

.abt-overview {
    padding: 76px 0;
    background: #fff;
}

.abt-overview-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 75px;
    align-items: start;
}

.abt-section-heading h2 {
    margin: 17px 0 0;
}

.abt-overview-content p {
    margin-bottom: 16px;
    color: var(--abt-text);
    font-size: 14px;
    line-height: 1.9;
}

.abt-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: var(--abt-blue);
    font-size: 13px;
    font-weight: 800;
}

.abt-text-link span {
    transition: transform .2s ease;
}

.abt-text-link:hover span {
    transform: translateX(4px);
}

/* Expertise */

.abt-expertise {
    padding: 75px 0 80px;
    background: var(--abt-light);
}

.abt-expertise-heading {
    max-width: 650px;
    margin-bottom: 34px;
}

.abt-expertise-heading h2 {
    margin: 15px 0 0;
}

.abt-expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.abt-expertise-item {
    padding: 25px 23px;
    background: #fff;
    border: 1px solid var(--abt-border);
    border-radius: 11px;
    transition: transform .25s ease, box-shadow .25s ease,
                border-color .25s ease;
}

.abt-expertise-item:hover {
    transform: translateY(-4px);
    border-color: #c8def8;
    box-shadow: 0 14px 30px rgba(17, 55, 104, .07);
}

.abt-expertise-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 19px;
    border-radius: 10px;
    background: #eaf4ff;
    color: var(--abt-blue);
    font-size: 23px;
}

.abt-expertise-item:nth-child(3n + 2) .abt-expertise-icon {
    background: #e8f9fc;
    color: #078eaf;
}

.abt-expertise-item:nth-child(3n) .abt-expertise-icon {
    background: #fff1e3;
    color: var(--abt-orange);
}

.abt-expertise-item h3 {
    margin-bottom: 9px;
    font-size: 17px;
}

.abt-expertise-item p {
    margin-bottom: 0;
    color: var(--abt-text);
    font-size: 13px;
    line-height: 1.8;
}

/* Mission and Vision */

.abt-mission {
    padding: 78px 0;
    background: #fff;
}

.abt-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.abt-mission-card {
    position: relative;
    overflow: hidden;
    padding: 35px;
    border-radius: 13px;
    border: 1px solid var(--abt-border);
}

.abt-mission-primary {
    background: linear-gradient(135deg, #0b1735, #123d76);
}

.abt-mission-primary h2,
.abt-mission-primary p {
    color: #fff;
}

.abt-mission-primary .abt-card-label {
    color: #9bc9ff;
}

.abt-vision-card {
    background: linear-gradient(135deg, #f5f9ff, #fff);
}

.abt-card-symbol {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 27px;
}

.abt-vision-card .abt-card-symbol {
    background: #e6f2ff;
    color: var(--abt-blue);
}

.abt-card-label {
    display: block;
    margin-bottom: 12px;
    color: var(--abt-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.abt-mission-card h2 {
    max-width: 450px;
    margin-bottom: 14px;
    font-size: 27px;
    line-height: 1.3;
}

.abt-mission-card p {
    max-width: 490px;
    margin-bottom: 20px;
    color: #d0dced;
    font-size: 13px;
    line-height: 1.9;
}

.abt-vision-card p {
    color: var(--abt-text);
}

.abt-card-line {
    width: 46px;
    height: 4px;
    border-radius: 5px;
    background: var(--abt-orange);
}

/* Core Values */

.abt-values {
    padding: 78px 0 84px;
    background: var(--abt-light);
}

.abt-centered-heading {
    max-width: 660px;
    margin: 0 auto 38px;
    text-align: center;
}

.abt-centered-heading .abt-eyebrow {
    justify-content: center;
}

.abt-centered-heading h2 {
    margin: 14px 0 12px;
}

.abt-centered-heading > p {
    margin-bottom: 0;
    color: var(--abt-text);
    font-size: 14px;
    line-height: 1.8;
}

.abt-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.abt-value-card {
    position: relative;
    padding: 26px 22px;
    background: #fff;
    border: 1px solid var(--abt-border);
    border-radius: 10px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.abt-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(16, 43, 83, .07);
}

.abt-value-number {
    position: absolute;
    top: 22px;
    right: 20px;
    color: #d9e4f2;
    font-size: 23px;
    font-weight: 800;
}

.abt-value-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #eaf4ff;
    color: var(--abt-blue);
    font-size: 23px;
}

.abt-value-card:nth-child(2) .abt-value-icon {
    background: #fff1e4;
    color: var(--abt-orange);
}

.abt-value-card:nth-child(3) .abt-value-icon {
    background: #e5f9f4;
    color: #159d7a;
}

.abt-value-card:nth-child(4) .abt-value-icon {
    background: #f0eaff;
    color: #7853c7;
}

.abt-value-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.4;
}

.abt-value-card p {
    margin-bottom: 0;
    color: var(--abt-text);
    font-size: 12px;
    line-height: 1.85;
}

/* Approach */

.abt-approach {
    padding: 80px 0;
    background: #fff;
}

.abt-approach-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: 75px;
}

.abt-approach-content h2 {
    margin: 16px 0;
}

.abt-approach-content > p {
    margin-bottom: 24px;
    color: var(--abt-text);
    font-size: 14px;
    line-height: 1.9;
}

.abt-process-list {
    padding: 10px 0;
}

.abt-process-item {
    display: flex;
    align-items: flex-start;
    gap: 19px;
    padding: 19px 0;
    border-bottom: 1px solid #e8eef6;
}

.abt-process-item:last-child {
    border-bottom: 0;
}

.abt-process-number {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    border: 1px solid #cfe2fb;
    border-radius: 10px;
    background: #f0f7ff;
    color: var(--abt-blue);
    font-size: 14px;
    font-weight: 800;
}

.abt-process-item h3 {
    margin: 2px 0 6px;
    font-size: 16px;
}

.abt-process-item p {
    margin-bottom: 0;
    color: var(--abt-text);
    font-size: 13px;
    line-height: 1.7;
}

/* CTA */

.abt-cta {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background: linear-gradient(115deg, #0b1735, #124e91);
}

.abt-cta::after {
    content: "";
    position: absolute;
    top: -110px;
    right: 13%;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, .025),
                0 0 0 70px rgba(255, 255, 255, .025);
    pointer-events: none;
}

.abt-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.abt-cta-label {
    display: block;
    margin-bottom: 11px;
    color: #9fcfff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.abt-cta h2 {
    margin-bottom: 11px;
    color: #fff;
    font-size: clamp(25px, 3vw, 34px);
}

.abt-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #d1deef;
    font-size: 13px;
    line-height: 1.8;
}

/* Tablet */

@media (max-width: 1024px) {
    .abt-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
        gap: 20px;
    }

    .abt-hero-content h1 {
        font-size: 42px;
    }

    .abt-hero-visual {
        min-height: 390px;
    }

    .abt-tech-main {
        padding: 17px 15px 14px;
    }

    .abt-tech-illustration {
        height: 235px;
    }

    .abt-orbit-one {
        width: 330px;
        height: 330px;
    }

    .abt-orbit-two {
        width: 270px;
        height: 270px;
    }

    .abt-float-top {
        right: -2px;
    }

    .abt-overview-grid,
    .abt-approach-grid {
        gap: 40px;
    }

    .abt-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .abt-mission-card {
        padding: 28px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .abt-container {
        width: min(100% - 32px, 560px);
    }

    .abt-breadcrumb {
        padding: 12px 0;
        font-size: 12px;
    }

    .abt-hero {
        padding: 28px 0 35px;
    }

    .abt-hero-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .abt-hero-content h1 {
        margin-top: 14px;
        font-size: clamp(33px, 8vw, 43px);
        letter-spacing: -1.2px;
    }

    .abt-hero-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .abt-hero-actions {
        gap: 10px;
        margin-top: 22px;
    }

    .abt-btn {
        min-height: 45px;
        padding: 11px 14px;
        font-size: 12px;
    }

    .abt-trust-note {
        align-items: flex-start;
        margin-top: 18px;
        font-size: 10px;
    }

    .abt-hero-visual {
        min-height: 365px;
        margin: 0 -5px;
    }

    .abt-tech-card {
        max-width: 410px;
    }

    .abt-tech-main {
        padding: 17px 13px 13px;
    }

    .abt-tech-card-head h3 {
        font-size: 15px;
    }

    .abt-tech-illustration {
        height: 225px;
    }

    .abt-tech-node {
        width: 77px;
        height: 55px;
    }

    .abt-node-center {
        width: 105px;
        height: 86px;
    }

    .abt-node-left {
        left: -1px;
    }

    .abt-node-right {
        right: -1px;
    }

    .abt-tech-footer span {
        font-size: 8px;
    }

    .abt-floating-card {
        padding: 9px 10px;
        gap: 7px;
    }

    .abt-float-top {
        top: 0;
        right: 0;
    }

    .abt-float-bottom {
        bottom: 0;
        left: 0;
    }

    .abt-float-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 17px;
    }

    .abt-floating-card strong {
        font-size: 9px;
    }

    .abt-floating-card small {
        font-size: 8px;
    }

    .abt-overview,
    .abt-expertise,
    .abt-mission,
    .abt-values,
    .abt-approach {
        padding: 53px 0;
    }

    .abt-overview-grid,
    .abt-approach-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .abt-page h2 {
        font-size: 29px;
        letter-spacing: -.5px;
    }

    .abt-overview-content p,
    .abt-approach-content > p {
        font-size: 13px;
    }

    .abt-expertise-heading {
        margin-bottom: 24px;
    }

    .abt-expertise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .abt-expertise-item {
        padding: 19px 15px;
    }

    .abt-expertise-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 14px;
        font-size: 20px;
    }

    .abt-expertise-item h3 {
        font-size: 14px;
        line-height: 1.45;
    }

    .abt-expertise-item p {
        font-size: 12px;
    }

    .abt-mission-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .abt-mission-card {
        padding: 26px 22px;
    }

    .abt-mission-card h2 {
        font-size: 24px;
    }

    .abt-mission-card p {
        font-size: 12px;
    }

    .abt-centered-heading {
        margin-bottom: 27px;
    }

    .abt-centered-heading > p {
        font-size: 13px;
    }

    .abt-values-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .abt-value-card {
        padding: 22px;
    }

    .abt-value-card p {
        font-size: 12px;
    }

    .abt-process-item {
        gap: 14px;
        padding: 16px 0;
    }

    .abt-process-number {
        width: 41px;
        height: 41px;
        flex-basis: 41px;
        font-size: 12px;
    }

    .abt-process-item h3 {
        font-size: 15px;
    }

    .abt-process-item p {
        font-size: 12px;
    }

    .abt-cta {
        padding: 38px 0;
    }

    .abt-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .abt-cta h2 {
        font-size: 27px;
    }

    .abt-cta p {
        font-size: 12px;
    }
}

/* Small Mobile */

@media (max-width: 380px) {
    .abt-container {
        width: calc(100% - 26px);
    }

    .abt-hero-content h1 {
        font-size: 32px;
    }

    .abt-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .abt-hero-actions .abt-btn {
        width: 100%;
    }

    .abt-hero-visual {
        min-height: 330px;
    }

    .abt-tech-illustration {
        height: 205px;
    }

    .abt-tech-footer {
        gap: 5px;
    }

    .abt-tech-footer span {
        font-size: 7px;
    }

    .abt-expertise-grid {
        grid-template-columns: 1fr;
    }
}


/* ======================================
   INDUSTRIES PAGE
   My Tech Professionals
   Prefix: ind-
====================================== */

.ind-page {
    --ind-navy: #0b1735;
    --ind-blue: #1268d8;
    --ind-cyan: #10a7e5;
    --ind-orange: #f28b1b;
    --ind-text: #536176;
    --ind-light: #f4f8fd;
    --ind-border: #e3eaf3;

    color: var(--ind-navy);
    font-family: inherit;
    overflow: hidden;
}

.ind-page *,
.ind-page *::before,
.ind-page *::after {
    box-sizing: border-box;
}

.ind-page a {
    text-decoration: none;
}

.ind-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.ind-page h1,
.ind-page h2,
.ind-page h3,
.ind-page p {
    margin-top: 0;
}

.ind-page h1,
.ind-page h2,
.ind-page h3 {
    color: var(--ind-navy);
}

.ind-page h2 {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.25;
    letter-spacing: -.8px;
}

.ind-page h2 span {
    color: var(--ind-blue);
}

/* BREADCRUMB */

.ind-breadcrumb {
    padding: 14px 0;
    background: #f7faff;
    border-bottom: 1px solid #eaf0f7;
    color: #77859a;
    font-size: 13px;
}

.ind-breadcrumb .ind-container {
    display: flex;
    align-items: center;
    gap: 11px;
}

.ind-breadcrumb a {
    color: var(--ind-blue);
}

/* COMMON */

.ind-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ind-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.ind-eyebrow::before {
    content: "";
    width: 23px;
    height: 3px;
    border-radius: 5px;
    background: var(--ind-orange);
}

.ind-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
}

.ind-btn:hover {
    transform: translateY(-2px);
}

.ind-btn-primary {
    color: #fff !important;
    background: var(--ind-blue);
    border: 1px solid var(--ind-blue);
    box-shadow: 0 8px 20px rgba(18, 104, 216, .13);
}

.ind-btn-primary:hover {
    background: var(--ind-navy);
    border-color: var(--ind-navy);
}

.ind-btn-outline {
    color: var(--ind-navy) !important;
    background: #fff;
    border: 1px solid #d8e2ef;
}

.ind-btn-outline:hover {
    color: var(--ind-blue) !important;
    border-color: var(--ind-blue);
}

/* HERO */

.ind-hero {
    padding: 42px 0 52px;
    background:
        radial-gradient(
            ellipse at 82% 50%,
            rgba(16, 167, 229, .10),
            transparent 38%
        ),
        linear-gradient(180deg, #fff, #f8fbff);
}

.ind-hero-grid {
    display: grid;
    grid-template-columns: 1fr .98fr;
    align-items: center;
    gap: 35px;
}

.ind-hero-content h1 {
    margin: 17px 0 18px;
    font-size: clamp(36px, 4.3vw, 53px);
    line-height: 1.12;
    letter-spacing: -1.7px;
    font-weight: 800;
}

.ind-hero-content h1 span {
    display: block;
    margin-top: 6px;
    color: var(--ind-blue);
}

.ind-hero-content > p {
    max-width: 545px;
    margin-bottom: 0;
    color: var(--ind-text);
    font-size: 15px;
    line-height: 1.85;
}

.ind-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.ind-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 19px;
    margin-top: 25px;
}

.ind-hero-points span {
    color: #5f6d81;
    font-size: 11px;
    font-weight: 600;
}

.ind-hero-points i {
    margin-right: 5px;
    color: #18a875;
    font-style: normal;
    font-weight: 800;
}

/* HERO DASHBOARD */

.ind-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 430px;
}

.ind-visual-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(18, 104, 216, .12);
}

.ind-circle-one {
    width: 405px;
    height: 405px;
}

.ind-circle-two {
    width: 330px;
    height: 330px;
    border-style: dashed;
}

.ind-dashboard {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 445px;
    padding: 19px;
    border: 1px solid #e0e9f5;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 25px 65px rgba(16, 43, 83, .13);
}

.ind-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #edf1f7;
}

.ind-dashboard-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ind-brand-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    color: #fff;
    background: var(--ind-blue);
    font-size: 21px;
}

.ind-dashboard-brand small {
    display: block;
    margin-bottom: 4px;
    color: #8794a7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ind-dashboard-brand h3 {
    margin-bottom: 0;
    font-size: 15px;
}

.ind-live-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 5px;
    background: #eaf9f2;
    color: #168b61;
    font-size: 9px;
    font-weight: 700;
}

.ind-live-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #19b77c;
}

.ind-dashboard-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    margin-top: 15px;
    border: 1px solid #dceafa;
    border-radius: 9px;
    background: #f1f7ff;
}

.ind-dashboard-summary small {
    display: block;
    margin-bottom: 6px;
    color: #6c7e95;
    font-size: 9px;
}

.ind-dashboard-summary strong {
    color: var(--ind-navy);
    font-size: 12px;
}

.ind-summary-icon {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border-radius: 8px;
    color: var(--ind-blue);
    background: #dfeeff;
    font-size: 20px;
}

.ind-industry-network {
    position: relative;
    height: 250px;
    margin-top: 10px;
}

.ind-network-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ind-network-lines path {
    fill: none;
    stroke: #9dc8f6;
    stroke-width: 1.6;
    stroke-dasharray: 5 5;
}

.ind-network-center {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 104px;
    height: 90px;
    transform: translate(-50%, -50%);
    border: 1px solid #bcd8f8;
    border-radius: 12px;
    background: #eaf4ff;
    box-shadow: 0 7px 19px rgba(18, 104, 216, .10);
}

.ind-network-center span {
    color: var(--ind-blue);
    font-size: 26px;
}

.ind-network-center strong {
    color: var(--ind-navy);
    font-size: 10px;
}

.ind-network-center small {
    color: #6c7c91;
    font-size: 9px;
}

.ind-network-item {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 94px;
    height: 65px;
    border: 1px solid #dce7f5;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(16, 43, 83, .06);
}

.ind-network-item span {
    color: var(--ind-blue);
    font-size: 22px;
    line-height: 1;
}

.ind-network-item small {
    color: #5c6c81;
    font-size: 9px;
    font-weight: 700;
}

.ind-net-one {
    top: 0;
    left: 8%;
}

.ind-net-two {
    top: 0;
    right: 8%;
}

.ind-net-three {
    bottom: 0;
    left: 8%;
}

.ind-net-four {
    bottom: 0;
    right: 8%;
}

.ind-dashboard-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #edf1f7;
    color: #6f7e93;
    font-size: 9px;
    font-weight: 600;
}

.ind-bottom-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--ind-cyan);
}

.ind-dot-orange {
    background: var(--ind-orange);
}

/* FLOATING LABELS */

.ind-floating-tag {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid #e4ebf5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 43, 83, .10);
}

.ind-floating-tag > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--ind-blue);
    background: #eaf4ff;
    font-size: 20px;
}

.ind-floating-tag strong,
.ind-floating-tag small {
    display: block;
}

.ind-floating-tag strong {
    margin-bottom: 4px;
    color: var(--ind-navy);
    font-size: 10px;
}

.ind-floating-tag small {
    color: #8794a7;
    font-size: 9px;
}

.ind-tag-top {
    top: 14px;
    right: -5px;
}

.ind-tag-bottom {
    bottom: 8px;
    left: -8px;
}

.ind-tag-bottom > span {
    color: var(--ind-orange);
    background: #fff1e2;
}

/* INTRODUCTION */

.ind-intro {
    padding: 75px 0;
    background: #fff;
}

.ind-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 75px;
}

.ind-intro h2 {
    margin: 17px 0 0;
}

.ind-intro-text p {
    margin-bottom: 15px;
    color: var(--ind-text);
    font-size: 14px;
    line-height: 1.9;
}

/* SECTION HEADING */

.ind-section-heading {
    max-width: 720px;
    margin-bottom: 34px;
}

.ind-section-heading h2 {
    margin: 15px 0 12px;
}

.ind-section-heading p {
    margin-bottom: 0;
    color: var(--ind-text);
    font-size: 14px;
    line-height: 1.8;
}

.ind-center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.ind-center .ind-eyebrow {
    justify-content: center;
}

/* INDUSTRY CARDS */

.ind-industries {
    padding: 76px 0 84px;
    background: var(--ind-light);
    scroll-margin-top: 90px;
}

.ind-industry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ind-industry-card {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    border: 1px solid var(--ind-border);
    border-radius: 12px;
    background: #fff;
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}

.ind-industry-card:hover {
    transform: translateY(-5px);
    border-color: #c5dcf7;
    box-shadow: 0 17px 35px rgba(16, 43, 83, .08);
}

.ind-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ind-card-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border-radius: 11px;
    background: #e9f3ff;
    color: var(--ind-blue);
    font-size: 25px;
}

.ind-icon-cyan {
    background: #e8f8fc;
    color: #0895b7;
}

.ind-icon-orange {
    background: #fff0df;
    color: var(--ind-orange);
}

.ind-icon-purple {
    background: #f0ebff;
    color: #8056ca;
}

.ind-icon-green {
    background: #e6f8ef;
    color: #159e70;
}

.ind-card-number {
    color: #d6e1ef;
    font-size: 25px;
    font-weight: 800;
}

.ind-industry-card h3 {
    margin-bottom: 11px;
    font-size: 17px;
    line-height: 1.4;
}

.ind-industry-card > p {
    margin-bottom: 15px;
    color: var(--ind-text);
    font-size: 12px;
    line-height: 1.8;
}

.ind-industry-card ul {
    margin: 0 0 21px;
    padding: 0;
    list-style: none;
}

.ind-industry-card li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 17px;
    color: #58677c;
    font-size: 11px;
    line-height: 1.6;
}

.ind-industry-card li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--ind-blue);
    font-weight: 800;
}

.ind-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #edf1f7;
    color: var(--ind-blue);
    font-size: 11px;
    font-weight: 800;
}

.ind-card-link span {
    transition: transform .2s ease;
}

.ind-card-link:hover span {
    transform: translateX(4px);
}

/* CAPABILITIES */

.ind-capabilities {
    padding: 82px 0;
    background: #fff;
}

.ind-capabilities-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: 80px;
}

.ind-capabilities-content h2 {
    margin: 16px 0;
}

.ind-capabilities-content > p {
    margin-bottom: 15px;
    color: var(--ind-text);
    font-size: 14px;
    line-height: 1.85;
}

.ind-capabilities-content .ind-btn {
    margin-top: 10px;
}

.ind-capabilities-list {
    padding: 10px 25px;
    border: 1px solid var(--ind-border);
    border-radius: 14px;
    background: #f8fbff;
}

.ind-capability-item {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 21px 0;
    border-bottom: 1px solid #e3eaf3;
}

.ind-capability-item:last-child {
    border-bottom: 0;
}

.ind-capability-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    border-radius: 10px;
    background: #e4f0ff;
    color: var(--ind-blue);
    font-size: 22px;
}

.ind-capability-item h3 {
    margin: 2px 0 7px;
    font-size: 16px;
}

.ind-capability-item p {
    margin-bottom: 0;
    color: var(--ind-text);
    font-size: 12px;
    line-height: 1.8;
}

/* BENEFITS */

.ind-benefits {
    padding: 76px 0 84px;
    background: var(--ind-light);
}

.ind-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ind-benefit-card {
    padding: 25px 21px;
    border: 1px solid var(--ind-border);
    border-radius: 11px;
    background: #fff;
}

.ind-benefit-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #eaf4ff;
    color: var(--ind-blue);
    font-size: 22px;
}

.ind-benefit-card:nth-child(2) .ind-benefit-icon {
    background: #fff1e2;
    color: var(--ind-orange);
}

.ind-benefit-card:nth-child(3) .ind-benefit-icon {
    background: #e8f9f5;
    color: #159e75;
}

.ind-benefit-card:nth-child(4) .ind-benefit-icon {
    background: #f0ebff;
    color: #8056ca;
}

.ind-benefit-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.ind-benefit-card p {
    margin-bottom: 0;
    color: var(--ind-text);
    font-size: 12px;
    line-height: 1.8;
}

/* PROCESS */

.ind-process {
    padding: 80px 0;
    background: #fff;
}

.ind-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.ind-process-step {
    position: relative;
    padding: 25px 21px;
    border: 1px solid #e4ebf5;
    border-radius: 11px;
    background: #fff;
}

.ind-process-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 21px;
    width: 43px;
    height: 3px;
    border-radius: 4px;
    background: var(--ind-orange);
}

.ind-step-number {
    display: block;
    margin-bottom: 19px;
    color: var(--ind-blue);
    font-size: 30px;
    font-weight: 800;
}

.ind-process-step h3 {
    margin-bottom: 10px;
    font-size: 17px;
}

.ind-process-step p {
    margin-bottom: 0;
    color: var(--ind-text);
    font-size: 12px;
    line-height: 1.8;
}

/* CTA */

.ind-cta {
    position: relative;
    overflow: hidden;
    padding: 53px 0;
    background: linear-gradient(115deg, #0b1735, #124e91);
}

.ind-cta::after {
    content: "";
    position: absolute;
    top: -100px;
    right: 10%;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(255, 255, 255, .025),
        0 0 0 70px rgba(255, 255, 255, .025);
}

.ind-cta-grid {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.ind-cta-eyebrow {
    display: block;
    margin-bottom: 12px;
    color: #9fcfff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.ind-cta h2 {
    max-width: 690px;
    margin-bottom: 12px;
    color: #fff;
    font-size: clamp(26px, 3vw, 35px);
}

.ind-cta p {
    max-width: 650px;
    margin-bottom: 0;
    color: #d1deef;
    font-size: 13px;
    line-height: 1.8;
}

.ind-btn-white {
    flex-shrink: 0;
    color: var(--ind-navy) !important;
    background: #fff;
    border: 1px solid #fff;
}

.ind-btn-white:hover {
    background: #eaf4ff;
}

/* TABLET */

@media (max-width: 1100px) {

    .ind-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ind-hero-grid {
        gap: 22px;
    }

    .ind-hero-content h1 {
        font-size: 43px;
    }

    .ind-capabilities-grid {
        gap: 45px;
    }

    .ind-benefits-grid,
    .ind-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* MOBILE */

@media (max-width: 767px) {

    .ind-container {
        width: min(100% - 32px, 560px);
    }

    .ind-breadcrumb {
        padding: 12px 0;
        font-size: 12px;
    }

    .ind-hero {
        padding: 27px 0 35px;
    }

    .ind-hero-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ind-hero-content h1 {
        margin: 14px 0 17px;
        font-size: clamp(33px, 8vw, 43px);
        letter-spacing: -1.1px;
    }

    .ind-hero-content > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .ind-hero-actions {
        margin-top: 22px;
        gap: 10px;
    }

    .ind-btn {
        min-height: 45px;
        padding: 11px 14px;
        font-size: 12px;
    }

    .ind-hero-points {
        gap: 9px 14px;
        margin-top: 20px;
    }

    .ind-hero-points span {
        font-size: 10px;
    }

    .ind-hero-visual {
        min-height: 405px;
        margin: 0 -4px;
    }

    .ind-dashboard {
        max-width: 415px;
        padding: 14px;
    }

    .ind-industry-network {
        height: 225px;
    }

    .ind-circle-one {
        width: 340px;
        height: 340px;
    }

    .ind-circle-two {
        width: 275px;
        height: 275px;
    }

    .ind-floating-tag {
        padding: 8px 9px;
        gap: 7px;
    }

    .ind-floating-tag > span {
        width: 28px;
        height: 28px;
        font-size: 17px;
    }

    .ind-floating-tag strong {
        font-size: 9px;
    }

    .ind-floating-tag small {
        font-size: 8px;
    }

    .ind-tag-top {
        top: 0;
        right: 0;
    }

    .ind-tag-bottom {
        bottom: 0;
        left: 0;
    }

    .ind-intro,
    .ind-industries,
    .ind-capabilities,
    .ind-benefits,
    .ind-process {
        padding: 54px 0;
    }

    .ind-page h2 {
        font-size: 29px;
    }

    .ind-intro-grid,
    .ind-capabilities-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ind-intro-text p,
    .ind-capabilities-content > p {
        font-size: 13px;
    }

    .ind-section-heading {
        margin-bottom: 26px;
    }

    .ind-section-heading p {
        font-size: 13px;
    }

    .ind-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ind-industry-card {
        padding: 19px 15px;
    }

    .ind-card-top {
        margin-bottom: 15px;
    }

    .ind-card-icon {
        width: 43px;
        height: 43px;
        font-size: 22px;
    }

    .ind-card-number {
        font-size: 21px;
    }

    .ind-industry-card h3 {
        font-size: 15px;
    }

    .ind-industry-card > p {
        font-size: 11px;
    }

    .ind-industry-card li {
        font-size: 10px;
    }

    .ind-card-link {
        font-size: 10px;
        line-height: 1.5;
    }

    .ind-capabilities-list {
        padding: 5px 18px;
    }

    .ind-capability-item {
        gap: 13px;
        padding: 18px 0;
    }

    .ind-capability-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .ind-capability-item h3 {
        font-size: 15px;
    }

    .ind-benefits-grid,
    .ind-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ind-benefit-card,
    .ind-process-step {
        padding: 20px 16px;
    }

    .ind-benefit-card h3,
    .ind-process-step h3 {
        font-size: 14px;
    }

    .ind-benefit-card p,
    .ind-process-step p {
        font-size: 11px;
    }

    .ind-process-grid {
        margin-top: 27px;
    }

    .ind-cta {
        padding: 40px 0;
    }

    .ind-cta-grid {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .ind-cta h2 {
        font-size: 27px;
    }

    .ind-cta p {
        font-size: 12px;
    }
}

/* SMALL MOBILE */

@media (max-width: 480px) {

    .ind-industry-grid,
    .ind-benefits-grid,
    .ind-process-grid {
        grid-template-columns: 1fr;
    }

    .ind-industry-card {
        padding: 23px 20px;
    }

    .ind-industry-card h3 {
        font-size: 17px;
    }

    .ind-industry-card > p {
        font-size: 12px;
    }

    .ind-industry-card li {
        font-size: 11px;
    }

    .ind-hero-visual {
        min-height: 375px;
    }

    .ind-network-item {
        width: 76px;
        height: 57px;
    }

    .ind-network-item small {
        font-size: 8px;
    }

    .ind-network-center {
        width: 90px;
        height: 80px;
    }

    .ind-industry-network {
        height: 205px;
    }

    .ind-dashboard-brand h3 {
        font-size: 13px;
    }

    .ind-dashboard-summary strong {
        font-size: 11px;
    }
}

@media (max-width: 370px) {

    .ind-container {
        width: calc(100% - 26px);
    }

    .ind-hero-actions {
        flex-direction: column;
    }

    .ind-hero-actions .ind-btn {
        width: 100%;
    }

    .ind-hero-content h1 {
        font-size: 32px;
    }

    .ind-dashboard {
        padding: 11px;
    }

    .ind-dashboard-bottom {
        font-size: 8px;
    }

    .ind-floating-tag strong {
        font-size: 8px;
    }
}


/* ==========================================
   CONTACT PAGE - MY TECH PROFESSIONALS
   Unique prefix: con-
========================================== */

.con-page {
    --con-navy: #0b1735;
    --con-blue: #1268d8;
    --con-cyan: #10a7e5;
    --con-orange: #f28b1b;
    --con-text: #4c5a70;
    --con-light: #f4f8fd;
    --con-border: #e1e9f3;
    color: var(--con-navy);
    overflow: hidden;
    font-family: inherit;
}

.con-page *,
.con-page *::before,
.con-page *::after {
    box-sizing: border-box;
}

.con-page a {
    text-decoration: none;
}

.con-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.con-page h1,
.con-page h2,
.con-page h3,
.con-page p {
    margin-top: 0;
}

.con-page h1,
.con-page h2,
.con-page h3 {
    color: var(--con-navy);
}

.con-page h2 {
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.25;
    letter-spacing: -.7px;
}

.con-page h1 span,
.con-page h2 span {
    color: var(--con-blue);
}

/* Breadcrumb */

.con-breadcrumb {
    padding: 14px 0;
    background: #f7faff;
    border-bottom: 1px solid #eaf0f7;
    color: #77859a;
    font-size: 13px;
}

.con-breadcrumb .con-container {
    display: flex;
    align-items: center;
    gap: 11px;
}

.con-breadcrumb a {
    color: var(--con-blue);
}

/* Shared components */

.con-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--con-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.con-eyebrow::before {
    content: "";
    width: 23px;
    height: 3px;
    border-radius: 5px;
    background: var(--con-orange);
}

.con-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 12px 20px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    transition: background .25s, transform .25s,
                border-color .25s;
}

.con-btn:hover {
    transform: translateY(-2px);
}

.con-btn-primary {
    background: var(--con-blue);
    border: 1px solid var(--con-blue);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(18, 104, 216, .15);
}

.con-btn-primary:hover {
    background: var(--con-navy);
    border-color: var(--con-navy);
}

.con-btn-white {
    background: #fff;
    border: 1px solid #fff;
    color: var(--con-navy) !important;
    white-space: nowrap;
}

.con-btn-white:hover {
    background: #eaf4ff;
}

/* Hero */

.con-hero {
    padding: 55px 0;
    background:
        radial-gradient(ellipse at 82% 35%,
            rgba(16, 167, 229, .12), transparent 39%),
        linear-gradient(180deg, #fff, #f8fbff);
}

.con-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr);
    align-items: center;
    gap: 70px;
}

.con-hero-content h1 {
    margin: 17px 0;
    font-size: clamp(36px, 4.1vw, 51px);
    line-height: 1.13;
    font-weight: 800;
    letter-spacing: -1.6px;
}

.con-hero-content h1 span {
    display: block;
    margin-top: 6px;
}

.con-hero-content > p {
    max-width: 570px;
    color: var(--con-text);
    font-size: 15px;
    line-height: 1.9;
}

.con-hero-points {
    display: grid;
    gap: 15px;
    margin-top: 26px;
}

.con-hero-points > div {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #536278;
    font-size: 13px;
}

.con-check {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border-radius: 50%;
    background: #e6f8f0;
    color: #159b70;
    font-size: 12px;
    font-weight: 800;
}

/* Hero contact card */

.con-hero-card {
    position: relative;
    overflow: hidden;
    padding: 36px;
    border: 1px solid #dfe8f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(16, 43, 83, .09);
}

.con-hero-card > *:not(.con-card-decoration) {
    position: relative;
    z-index: 1;
}

.con-hero-card-icon {
    display: grid;
    place-items: center;
    width: 59px;
    height: 59px;
    margin-bottom: 24px;
    border-radius: 13px;
    background: #eaf4ff;
    color: var(--con-blue);
    font-size: 28px;
}

.con-card-label {
    display: block;
    margin-bottom: 12px;
    color: var(--con-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.con-hero-card h2 {
    margin-bottom: 13px;
    font-size: 27px;
}

.con-hero-card p {
    margin-bottom: 24px;
    color: var(--con-text);
    font-size: 13px;
    line-height: 1.85;
}

.con-card-decoration {
    position: absolute;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(18, 104, 216, .09);
    border-radius: 50%;
    pointer-events: none;
}

.con-decoration-one {
    right: -90px;
    top: -75px;
}

.con-decoration-two {
    right: -45px;
    top: -30px;
}

/* Contact info */

.con-info {
    padding: 0 0 70px;
    background: #fff;
}

.con-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.con-info-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 23px 20px;
    border: 1px solid var(--con-border);
    border-radius: 10px;
    background: #fff;
    transition: border-color .25s, box-shadow .25s;
}

.con-info-card:hover {
    border-color: #c9def9;
    box-shadow: 0 10px 25px rgba(16, 43, 83, .06);
}

.con-info-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 9px;
    background: #eaf4ff;
    color: var(--con-blue);
    font-size: 21px;
}

.con-info-card:nth-child(2) .con-info-icon {
    background: #fff1e4;
    color: var(--con-orange);
}

.con-info-card:nth-child(3) .con-info-icon {
    background: #e6f8f3;
    color: #169b78;
}

.con-info-card h3 {
    margin: 2px 0 8px;
    font-size: 16px;
}

.con-info-card p {
    margin-bottom: 10px;
    color: var(--con-text);
    font-size: 12px;
    line-height: 1.7;
}

.con-info-card a {
    color: var(--con-blue);
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Form section */

.con-form-section {
    padding: 80px 0;
    background: var(--con-light);
    scroll-margin-top: 30px;
}

.con-form-grid {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 65px;
    align-items: start;
}

.con-form-sidebar {
    padding-top: 17px;
}

.con-form-sidebar h2 {
    margin: 17px 0;
}

.con-form-sidebar > p {
    margin-bottom: 30px;
    color: var(--con-text);
    font-size: 14px;
    line-height: 1.9;
}

.con-sidebar-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 21px;
}

.con-sidebar-note-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 9px;
    background: #e5f2ff;
    color: var(--con-blue);
    font-size: 19px;
}

.con-sidebar-note strong {
    display: block;
    margin: 1px 0 6px;
    color: var(--con-navy);
    font-size: 14px;
}

.con-sidebar-note p {
    margin-bottom: 0;
    color: var(--con-text);
    font-size: 12px;
    line-height: 1.7;
}

.con-sidebar-email {
    display: grid;
    gap: 7px;
    margin-top: 32px;
    padding-top: 23px;
    border-top: 1px solid #dce5f0;
}

.con-sidebar-email span {
    color: #748299;
    font-size: 12px;
}

.con-sidebar-email a {
    color: var(--con-blue);
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* Form card */

.con-form-card {
    padding: 34px;
    border: 1px solid #e0e8f2;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(16, 43, 83, .06);
}

.con-form-heading {
    margin-bottom: 25px;
}

.con-form-heading h2 {
    margin-bottom: 9px;
    font-size: 25px;
}

.con-form-heading p {
    margin-bottom: 0;
    color: #748299;
    font-size: 12px;
}

.con-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 17px;
}

.con-field {
    min-width: 0;
}

.con-field-full {
    grid-column: 1 / -1;
}

.con-field label {
    display: block;
    margin-bottom: 9px;
    color: var(--con-navy);
    font-size: 12px;
    font-weight: 700;
}

.con-field label > span {
    color: #e25c46;
}

.con-field input,
.con-field select,
.con-field textarea {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #dce5f0;
    border-radius: 7px;
    outline: none;
    background: #fff;
    color: var(--con-navy);
    font: inherit;
    font-size: 13px;
    transition: border-color .2s, box-shadow .2s;
}

.con-field input,
.con-field select {
    min-height: 46px;
}

.con-field textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.7;
}

.con-field input::placeholder,
.con-field textarea::placeholder {
    color: #a0acbc;
}

.con-field input:focus,
.con-field select:focus,
.con-field textarea:focus {
    border-color: var(--con-blue);
    box-shadow: 0 0 0 3px rgba(18, 104, 216, .10);
}

.con-field .con-invalid {
    border-color: #dc5147;
    box-shadow: 0 0 0 2px rgba(220, 81, 71, .08);
}

.con-field-error {
    display: block;
    min-height: 0;
    margin-top: 5px;
    color: #c23f37;
    font-size: 11px;
    line-height: 1.5;
}

.con-field-error:empty {
    display: none;
}

.con-textarea-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.con-character-count {
    margin-top: 5px;
    color: #8290a4;
    font-size: 10px;
    white-space: nowrap;
}

.con-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 23px 0;
    padding: 12px;
    border-radius: 7px;
    background: #f5f8fc;
    color: #66758a;
    font-size: 11px;
    line-height: 1.7;
}

.con-privacy-note > span {
    color: var(--con-blue);
    font-size: 15px;
}

.con-submit-btn {
    width: 100%;
    min-height: 50px;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
}

.con-submit-btn:disabled {
    cursor: wait;
    opacity: .75;
    transform: none;
}

.con-form-disclaimer {
    margin: 13px 0 0;
    color: #8793a5;
    font-size: 10px;
    line-height: 1.7;
    text-align: center;
}

/* Honeypot */

.con-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Success and error messages */

.con-alert {
    margin-bottom: 22px;
    padding: 14px 15px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.7;
}

.con-alert strong {
    display: block;
    margin-bottom: 3px;
}

.con-alert-success {
    background: #ecfaf3;
    border-color: #b7e8d0;
    color: #146c4d;
}

.con-alert-error {
    background: #fff1ef;
    border-color: #f4c5bf;
    color: #a42f28;
}

/* Bottom CTA */

.con-bottom-cta {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background: linear-gradient(115deg, #0b1735, #124e91);
}

.con-bottom-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.con-bottom-label {
    display: block;
    margin-bottom: 11px;
    color: #9ecfff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.con-bottom-cta h2 {
    margin-bottom: 10px;
    color: #fff;
    font-size: clamp(25px, 3vw, 34px);
}

.con-bottom-cta p {
    margin-bottom: 0;
    color: #d0deef;
    font-size: 13px;
    line-height: 1.8;
}

.con-bottom-cta::after {
    content: "";
    position: absolute;
    top: -100px;
    right: 12%;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(255,255,255,.025);
    pointer-events: none;
}

/* Tablet */

@media (max-width: 1024px) {
    .con-hero-grid {
        gap: 35px;
        grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
    }

    .con-hero-content h1 {
        font-size: 42px;
    }

    .con-hero-card {
        padding: 28px;
    }

    .con-info-grid {
        gap: 12px;
    }

    .con-info-card {
        padding: 18px 15px;
    }

    .con-form-grid {
        gap: 35px;
    }

    .con-form-card {
        padding: 27px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .con-container {
        width: min(100% - 32px, 560px);
    }

    .con-breadcrumb {
        padding: 12px 0;
        font-size: 12px;
    }

    .con-hero {
        padding: 32px 0 40px;
    }

    .con-hero-grid {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .con-hero-content h1 {
        margin: 14px 0;
        font-size: clamp(33px, 8vw, 43px);
        letter-spacing: -1.2px;
    }

    .con-hero-content > p {
        font-size: 13px;
        line-height: 1.85;
    }

    .con-hero-points {
        gap: 12px;
        margin-top: 22px;
    }

    .con-hero-points > div {
        font-size: 12px;
    }

    .con-hero-card {
        padding: 26px 23px;
    }

    .con-hero-card h2 {
        font-size: 25px;
    }

    .con-info {
        padding-bottom: 48px;
    }

    .con-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .con-info-card {
        padding: 19px;
    }

    .con-form-section {
        padding: 55px 0;
    }

    .con-form-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .con-form-sidebar {
        padding-top: 0;
    }

    .con-page h2 {
        font-size: 29px;
        letter-spacing: -.5px;
    }

    .con-form-sidebar > p {
        font-size: 13px;
    }

    .con-form-card {
        padding: 24px 19px;
    }

    .con-form-heading h2 {
        font-size: 23px;
    }

    .con-fields-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .con-field-full {
        grid-column: auto;
    }

    .con-field input,
    .con-field select {
        min-height: 46px;
    }

    .con-bottom-cta {
        padding: 38px 0;
    }

    .con-bottom-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .con-bottom-cta h2 {
        font-size: 27px;
    }

    .con-bottom-cta p {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .con-container {
        width: calc(100% - 26px);
    }

    .con-hero-content h1 {
        font-size: 32px;
    }

    .con-form-card {
        padding: 21px 15px;
    }

    .con-btn {
        padding: 11px 14px;
        font-size: 12px;
    }
}


/* ==================================================
   UniVerse360 - MOBILE MENU COLOR FIX
   Based on the actual header.php selectors
   Add at the END of css/style.css
================================================== */

@media (max-width: 800px) {

    /* Hamburger button */
    .mobile-toggle {
        display: block !important;
        color: #07142f !important;
        background: #ffffff !important;
        border: 1px solid #dce8f6 !important;
        border-radius: 8px;
        padding: 10px !important;
        cursor: pointer;
    }

    /* Hamburger lines: dark navy instead of white */
    .mobile-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        margin: 5px;
        background-color: #07142f !important;
        border-radius: 3px;
        opacity: 1 !important;
    }

    /* Expanded mobile menu */
    .main-nav,
    .main-nav.mobile-open {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #142746 !important;
        border-top: 1px solid #e3ebf6;
        box-shadow: 0 20px 30px rgba(15, 44, 89, 0.14) !important;
    }

    /* Home, About, Industries, Contact */
    .main-nav > a:not(.btn),
    .main-nav > a:not(.btn):visited {
        color: #142746 !important;
        background: transparent !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    /* Services and Solutions dropdown buttons */
    .main-nav .nav-trigger,
    .main-nav .nav-trigger:visited {
        color: #142746 !important;
        background: transparent !important;
        opacity: 1 !important;
    }

    /* Dropdown arrows */
    .main-nav .chevron {
        border-right-color: #142746 !important;
        border-bottom-color: #142746 !important;
    }

    /* Hover and keyboard focus */
    .main-nav > a:not(.btn):hover,
    .main-nav .nav-trigger:hover,
    .main-nav > a:not(.btn):focus-visible,
    .main-nav .nav-trigger:focus-visible {
        color: #1268df !important;
        background: #f0f6ff !important;
        outline-color: #1268df;
    }

    /* Services and Solutions expanded dropdown panels */
    .main-nav .mega-menu {
        background: #ffffff !important;
        color: #142746 !important;
        border: 1px solid #e3ebf6 !important;
        box-shadow: 0 8px 24px rgba(15, 44, 89, 0.08) !important;
    }

    .main-nav .mega-column h3 {
        color: #124a9c !important;
    }

    .main-nav .menu-link {
        color: #142746 !important;
        background: transparent;
    }

    .main-nav .menu-link b {
        color: #142746 !important;
    }

    .main-nav .menu-link small {
        color: #687995 !important;
    }

    .main-nav .menu-link:hover {
        background: #f0f6ff !important;
    }

    .main-nav .view-all {
        color: #145bbd !important;
        background: #f2f6ff !important;
    }

    .main-nav .mega-footer {
        background: #f6faff !important;
        color: #142746 !important;
    }

    .main-nav .mega-footer b {
        color: #142746 !important;
    }

    .main-nav .mega-footer small {
        color: #687995 !important;
    }

    /* Keep Let's Talk button text white */
    .main-nav > a.btn,
    .main-nav > a.btn:hover,
    .main-nav > a.btn:focus {
        color: #ffffff !important;
    }

    /* Ensure dropdown items remain readable */
    .main-nav .menu-icon {
        color: #176be2 !important;
        background: #eff5ff !important;
    }
}