/* Portfolio demo foundation — original public-demo visual layer. No external assets, fonts, or trackers. */
:root {
  --bg: #f5f7fb; --ink: #172342; --sub: #71809a; --border: #e5eaf2;
  --navy: #111b33; --teal: #39bd96; --teal-dark: #117f6c;
  --violet: #596bf2; --shadow: 0 8px 32px rgba(36, 55, 91, .038);
  --font: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
html { scroll-behavior: smooth; }
body {font-family:var(--font);font-size:14px; color:var(--ink);background:var(--bg);letter-spacing:-.08px; }
button, input, select, textarea {font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline:3px solid #3ccaa6;outline-offset:3px}
::selection {background: #d7f5e8; color: #153a35}
.skip-link {position:fixed;z-index:100;top:-80px;left:12px;padding:14px 22px;background:#fff;color:#163223;border-radius:9px}
.skip-link:focus {top:12px}
.app-shell {min-height:100dvh}
.sidebar {width:260px;padding:30px 16px 23px;background:linear-gradient(172deg, #10192f, #152443 72%, #13213b);border-right:1px solid #2a3853;box-shadow:6px 0 30px rgba(18,29,61,.025)}
.sidebar:before {content:"";pointer-events:none;position:absolute;inset:0;background:radial-gradient(circle at 10% 95%, rgba(76,220,167,.09), transparent 42%)}
.brand {margin:0 0 56px;padding:0 12px;position:relative;z-index:1;font:800 24px/1.1 var(--font);letter-spacing:-1.55px}
.brand-logo {width:42px;height:42px;background:linear-gradient(135deg,#b0ffe0,#55d7bb);color:#073c36;border-radius:12px;box-shadow:0 8px 20px #51f0b429}
.brand-accent {color:#6ee6c4}
.brand small {font-size:8px;letter-spacing:1.8px;margin-top:6px;font-weight:750;color:#91a5c1}
.sidebar-caption {letter-spacing:2px;padding-left:16px;margin-bottom:16px;color:#657c9e;font-size:10px;font-weight:750}
.nav {display:grid;gap:6px;position:relative}
.nav-link {height:49px;border-radius:11px;padding:10px 15px;gap:14px;color:#a7b6d0;font-weight:600;font-size:13px}
.nav-link:hover {background:#22324e;color:#fff}
.nav-link.active {background:#eafdf1;color:#173941;box-shadow:0 7px 24px #020d1919;font-weight:750}
.nav-link.active .nav-glyph {color:#118b74}
.nav-glyph {font-size:18px;line-height:1;width:20px;text-align:center;color:#7690b5}
.nav-count {font-size:10px;background:#243d59;color:#c4ffdf;padding:3px 7px;min-width:22px;border-radius:7px;text-align:center}
.nav-link.active .nav-count {background:#d6f5e8;color:#067960}
.sidebar-tour {position:relative;isolation:isolate;overflow:hidden;display:grid;gap:10px;margin:34px 7px 22px;border:1px solid #405372;background:linear-gradient(135deg,#294161,#203450);border-radius:15px;padding:19px 17px;color:#fff}
.sidebar-tour:before {content:"";position:absolute;width:130px;height:130px;right:-60px;bottom:-75px;background:#6ee6c422;border-radius:50%;z-index:-1}
.sidebar-tour>span {font-size:9px;font-weight:800;letter-spacing:1.45px;color:#8bf1cf}
.sidebar-tour>strong {font-size:15px;line-height:1.3;letter-spacing:-.35px}
.sidebar-tour button {display:flex;align-items:center;justify-content:space-between;border:0;border-radius:9px;background:#e0fff1;color:#164b44;padding:11px 12px;font-size:11px;font-weight:800}
.sidebar-tour button:hover {background:#fff}
.sidebar-bottom {margin-top:auto;position:relative;border-top:1px solid #ffffff16;padding:19px 9px 0}
.sidebar-bottom p {color:#8ba1c1;font-size:10px;line-height:1.7;margin:9px 0 14px}
.side-note {color:#c4e7da;font-size:10px}
.sidebar-help {background:#ffffff08;border-color:#536985;font-size:11px}
.main-wrap {min-width:0}
.topbar {height:77px;padding:0 clamp(22px,3.5vw,52px);background:rgba(255,255,255,.94);border-bottom:1px solid #e7ebf3}
.topbar-left {gap:13px}
.topbar-left strong {color:#30405e;font-size:12px}
.crumb,.slash {color:#99a5b9;font-size:12px}
.top-demo-label {color:#488678;font-weight:800;letter-spacing:1.25px;font-size:9px}
.top-demo-dot {background:#19a885;box-shadow:0 0 0 4px #1ab89922}
.topbar-right {gap:16px}
.lang-btn {border-radius:9px;border:1px solid #dfe5f0;color:#465574;background:#fff;min-height:36px;padding:8px 12px;font-size:11px;font-weight:750;letter-spacing:0}
.lang-btn:hover {border-color:#54bfa0;color:#166f5b}
.avatar {background:linear-gradient(145deg,#e7e5ff,#ced5ff);color:#525dab;border:2px solid white;box-shadow:0 0 0 1px #edf0f6;font-weight:850;letter-spacing:.1px}
main {width:min(1440px,100%);padding:39px clamp(22px,3.6vw,54px) 74px}
.page-heading {align-items:center;margin-bottom:24px;gap:24px}
.page-heading h1 {font-family:var(--font);font-size:clamp(28px,3.1vw,39px);line-height:1.15;font-weight:800;letter-spacing:-1.65px;margin:0 0 10px;max-width:750px}
.page-heading p {font-size:13px;line-height:1.6;color:#7a879f}
.eyebrow {font-size:9.5px;color:#209178;letter-spacing:2.1px;margin-bottom:11px}
.heading-actions {display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.btn {min-height:42px;border-radius:9px;padding:11px 16px;font-size:12px;font-weight:750;border:1px solid transparent;transition:transform .13s,box-shadow .15s,background .15s}
.btn:active {transform:scale(.985)}
.btn-primary {background:#243655;color:#fff;box-shadow:0 3px 10px rgba(11,30,63,.08)}
.btn-primary:hover {background:#122846;box-shadow:0 8px 18px rgba(11,30,63,.12)}
.btn-ghost {background:#fff;border-color:#e1e7f0;color:#52627b}
.btn-ghost:hover {background:#f7fafc;border-color:#b9c9da}
.btn-teal {background:#138b74;color:#fff}
.btn-teal:hover {background:#096b5a}
.panel,.stat-card {box-shadow:var(--shadow);border:1px solid #e6eaf2;border-radius:16px}
.panel {background:#fff}
.notice {border-radius:11px;background:#f0fbf8;border-color:#d9f3e9;color:#527368;font-size:12px;margin-bottom:22px;padding:12px 15px}
.notice strong {color:#14745d}
.notice-ic {background:#d8f7e9;color:#1b957b}
/* The hero is the opening moment of the portfolio demo. */
.hero {position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr);gap:12px;min-height:309px;overflow:hidden;border-radius:22px;background:linear-gradient(112deg,#14223e 1%,#182e4b 56%,#173d52 100%);color:#fff;margin:0 0 22px;border:1px solid #243957;box-shadow:0 18px 47px rgba(18,44,78,.13)}
.hero:before {content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,#49dbaa23,transparent 68%);right:-8%;top:-70%;pointer-events:none}
.hero:after {content:"";pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(#ffffff24 .7px,transparent .7px);background-size:20px 20px;opacity:.2;mask-image:linear-gradient(to left,#000,transparent 58%)}
.hero-copy {position:relative;z-index:2;padding:clamp(26px,3.1vw,47px) 10px clamp(26px,3.1vw,40px) clamp(28px,3.4vw,49px);min-width:0}
.hero-eyebrow {display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.6px;font-weight:800;color:#8bedd0;margin-bottom:20px}
.hero-spark {width:7px;height:7px;border-radius:50%;background:#5ffcc7;box-shadow:0 0 0 4px #63dfb01c}
.hero h2 {font-size:clamp(33px,3.55vw,51px);line-height:1.04;letter-spacing:-2.3px;margin:0 0 17px;font-weight:820}
.hero h2 em {color:#8df0cb;font-style:normal}
.hero-copy>p {color:#bdd2e2;max-width:420px;font-size:12.4px;line-height:1.75;margin:0 0 21px}
.hero-actions {display:flex;flex-wrap:wrap;gap:11px;margin:0 0 22px}
.btn-hero {background:#b8f9dd;color:#114e42;min-height:44px;border:0;box-shadow:0 8px 22px #5effae1d}
.btn-hero:hover {background:#e4fff4}
.btn-hero-outline {background:#ffffff0a;border:1px solid #98b8c76b;color:#f0f8ff;min-height:44px}
.btn-hero-outline:hover {background:#ffffff1c}
.hero-proof {display:flex;align-items:center;gap:8px;color:#9bb7c6;font-size:10.5px}
.hero-proof-pip {width:6px;height:6px;border-radius:50%;background:#71e8ae}
.hero-scene {position:relative;z-index:1;min-height:300px;padding:31px 35px 24px 15px;display:flex;align-items:center;justify-content:center}
.scene-aura {position:absolute;inset:10% 10%;border-radius:50%;background:#68f6b915;filter:blur(36px)}
.scene-window {width:min(100%,390px);max-width:390px;border-radius:14px;background:#fdfefe;box-shadow:0 24px 55px #00000044;transform:perspective(850px) rotateY(-8deg) rotateX(3deg);border:1px solid #b8ddff7a;overflow:hidden}
.scene-window-top {height:34px;background:#edf3f8;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:7px;font-weight:750;letter-spacing:.9px;color:#7890a5;border-bottom:1px solid #e4ebf5}
.scene-dots {display:flex;gap:4px}.scene-dots i{width:6px;height:6px;border-radius:50%;background:#b5c3d4}.scene-dots i:first-child{background:#ffb4b5}.scene-dots i:nth-child(2){background:#ffdc99}.scene-dots i:nth-child(3){background:#96dcc0}
.scene-window-inner {padding:17px 19px 15px}
.scene-topline {display:flex;align-items:center;justify-content:space-between;gap:8px}
.scene-topline div{display:grid;gap:3px}.scene-topline small{font-size:7px;letter-spacing:1px;color:#8996a9;font-weight:800}.scene-topline strong{font-size:13px;letter-spacing:-.4px;color:#213450}.scene-pill{background:#e0f9ec;border-radius:6px;padding:5px 7px;font-size:7px;color:#07815c;font-weight:800;white-space:nowrap}
.scene-columns {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 13px}
.scene-metric {display:grid;gap:2px;background:#f4f7fc;padding:10px;border:1px solid #ebeff5;border-radius:8px;color:#24395a}
.scene-metric>span {font-size:12px;color:#5b7ccc}.scene-metric strong {font-size:20px;line-height:1.15}.scene-metric small {font-size:8px;color:#8092aa}
.scene-list {display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #eef2f6;padding:8px 1px;color:#40526f;font-size:9px}
.scene-list span{display:flex;align-items:center;gap:7px}.scene-list b {font-size:8px;color:#4e7391;font-weight:700}
.scene-dot {width:6px;height:6px;border-radius:50%;display:inline-block}.scene-dot.green{background:#16b58b}.scene-dot.yellow{background:#ffb448}
.scene-float {position:absolute;right:8%;bottom:27px;display:flex;align-items:center;gap:10px;padding:11px 16px;background:#fff;border:1px solid #edf0f5;border-radius:11px;box-shadow:0 10px 28px #06132133;transform:rotate(4deg);color:#142c41}
.scene-float>span {display:grid;place-items:center;border-radius:50%;width:27px;height:27px;background:#dbfaeb;color:#11966a;font-weight:800}.scene-float div{display:grid;gap:2px}.scene-float strong{font-size:10px}.scene-float small{font-size:9px;color:#8294a9}
/* Data-led overview */
.stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 19px}
.stat-card {padding:19px 19px 18px;transition:transform .2s,box-shadow .2s;background:#fff;position:relative;overflow:hidden}
.stat-card:hover {transform:translateY(-2px);box-shadow:0 14px 32px #1724430d}
.stat-top {gap:6px;align-items:center}
.stat-label {font-size:11px;font-weight:700;color:#6c7c95}
.stat-icon {width:33px;height:33px;border-radius:10px;display:grid;place-items:center;font-size:17px}
.stat-icon.blue {background:#edf0ff;color:#5361ee}
.stat-icon.amber {background:#fff5e5;color:#e89b1b}
.stat-icon.green {background:#e7fbf2;color:#16a276}
.stat-icon.purple {background:#f2eeff;color:#9172da}
.stat-value {font-family:var(--font);font-size:30px;letter-spacing:-1.4px;line-height:1.1;font-weight:830;margin:14px 0 8px;color:#1b2948}
.stat-note {font-size:10px;line-height:1.5;color:#98a2b3;margin:0}
.insights-grid {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);gap:18px;margin:0 0 18px}
.panel-head {padding:23px 25px;align-items:center}
.panel-title {font-size:16px;letter-spacing:-.45px;color:#23314f;font-weight:800}
.panel-sub {font-size:11px;color:#8795a9;margin-top:5px}
.panel-kicker {font-size:9px;font-weight:850;letter-spacing:1.55px;color:#298c79;margin-bottom:6px}
.insight-tag {font-size:9px;letter-spacing:1px;font-weight:800;color:#7185a5;background:#f3f6fb;border:1px solid #e6ecf4;padding:8px 10px;border-radius:8px;white-space:nowrap}
.usage-chart {height:208px;padding:12px 30px 24px;display:grid;grid-template-columns:repeat(7,1fr);gap:13px;align-items:end}
.chart-column {height:100%;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.chart-column strong {font-size:10px;color:#7e8ea8;font-weight:700}.chart-column>span {font-size:10px;color:#a5b1c3;font-weight:650}
.chart-track {height:calc(100% - 46px);width:min(31px,100%);background:#edf3f8;border-radius:8px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.chart-fill {width:100%;background:linear-gradient(180deg,#62deb8,#2d9ec1);border-radius:7px;min-height:8px;transition:height .35s}
.chart-column:first-child .chart-fill {background:linear-gradient(180deg,#7388ff,#426cdb)}
.mix-content {display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;padding:8px 28px 34px}
.donut {width:148px;aspect-ratio:1;position:relative;display:grid;place-items:center;background:conic-gradient(#5976e6 0 var(--a),#60c9c1 var(--a) var(--b),#f7b97d var(--b) 100%);border-radius:50%;transform:rotate(-90deg)}
.donut:before {content:"";width:108px;height:108px;border-radius:50%;background:#fff;position:absolute}
.donut>div{position:relative;z-index:1;display:grid;place-items:center;transform:rotate(90deg)}
.donut strong{font-size:29px;color:#1f3150;line-height:1.15;letter-spacing:-1px}.donut span{font-size:8px;font-weight:850;letter-spacing:1.2px;color:#a0aabc}
.mix-list {display:grid;gap:15px;min-width:0}
.mix-item {display:flex;gap:8px;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f3f7;padding-bottom:11px}
.mix-item:last-child{border:0}
.mix-item>span {display:flex;align-items:center;gap:8px;font-size:11px;color:#7a899f}
.mix-item strong{font-size:12px;color:#263b56}
.mix-dot {width:8px;height:8px;border-radius:3px;display:inline-block}.mix-dot.blue{background:#5976e6}.mix-dot.router{background:#60c9c1}.mix-dot.mobile{background:#f7b97d}
.recent-panel {margin-bottom:18px}
.recent-panel .panel-head {border-bottom:1px solid #f0f3f7}
.small-link {color:#177c67;font-size:11px;white-space:nowrap}
.small-link:hover {color:#0a5347;text-decoration:underline}
.data-table {min-width:650px}
.data-table th {color:#9ca9ba;font-size:9px;letter-spacing:1.2px;padding:14px 19px;background:#fbfcff}
.data-table td {padding:16px 19px;color:#5c6d85;font-size:11px;line-height:1.5}
.data-table tbody tr:hover {background:#f7fafb}
.item-primary {font-weight:750;color:#273956;font-size:11px}
.item-secondary {color:#99a9bc;font-size:10px;margin-top:3px}
.inline-action {font-weight:750;font-size:10px;color:#4968a9;min-height:29px;border-radius:7px;transition:background .15s}
.inline-action:hover {background:#edf4fb}
.inline-action.success {color:#078565}.inline-action.danger {color:#bf6872}
.status {font-size:9px;padding:6px 10px;letter-spacing:.15px}
.status.pending {background:#fff4e3;color:#ab781c}.status.approved {background:#e5faef;color:#15784c}
.card-footer-note {padding:15px 23px;border-top:1px solid #f0f3f7;color:#a0aebe;font-size:10px}
.bottom-callout {border:1px solid #d7eee4;background:linear-gradient(110deg,#edfbf4,#f8fffc);border-radius:16px;padding:21px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.bottom-callout>div{display:grid;gap:6px}.bottom-callout span{font-size:9px;letter-spacing:1.5px;color:#20856d;font-weight:800}.bottom-callout strong{font-size:16px;letter-spacing:-.4px;color:#193f38}.bottom-callout p{font-size:11px;color:#638f80;margin:0}.bottom-callout .btn{white-space:nowrap}
/* Other views */
.filters {padding:17px 21px;gap:12px}.field-search {position:relative}.field-search:before {content:"⌕";position:absolute;left:14px;top:3px;color:#a8b6c7;font-size:22px;pointer-events:none}.field-search input {padding-left:37px}
input,select,textarea {min-height:43px;border-radius:9px;border-color:#dfe7ef;font-size:12px;color:#344761;background:#fff}
input:focus,select:focus,textarea:focus {border-color:#53bc9d;box-shadow:0 0 0 3px #53bc9d22;outline:none}
input[readonly] {background:#f6f8fb;color:#8796a9}
.category-card {border-radius:13px;padding:22px 20px}
.category-card strong {font-size:26px;letter-spacing:-1px}
.asset-ic {border-radius:11px}
.form-panel {padding:28px 30px}.form-grid {gap:19px}.form-layout {gap:20px}.form-panel .section-heading {font-size:15px;color:#263754;letter-spacing:-.3px;margin-bottom:18px}
.step-mark {width:30px;height:30px;background:#e1f8ee;color:#14916f}
.step-steps {font-size:10px;gap:12px;margin-bottom:26px}.step-steps span:first-child {color:#129676}
.field {font-weight:700;color:#53647f;gap:8px}
.choice {border-radius:10px;color:#435576;font-size:11px}
.availability {border-radius:10px;background:#f0faf4;border-color:#d4f0df;color:#287c5c}
.availability.conflict {background:#fff4f0;border-color:#ffddd4;color:#b74e36}
.security-note {border-radius:10px;background:#f8fafc;border-color:#e7ecf2;color:#698096;font-size:11px}
.checkbox-row {line-height:1.5;color:#546781;font-size:11px}
.side-panel {padding:26px}.side-panel .panel-title {margin-bottom:12px}
.tip-list {font-size:12px}
.tracker-grid {gap:19px}
.result {border:1px solid #e6ebf2;border-radius:10px}
.tour-modal {max-height:min(82vh,730px);overflow-y:auto}
.tour-modal h2 {font-size:24px;line-height:1.24;letter-spacing:-.7px}
.tour-steps {list-style:none;margin:24px 0 6px;padding:0;display:grid;gap:0}
.tour-steps li {display:flex;gap:14px;padding:15px 0;border-top:1px solid #e8eef3}
.tour-steps li>span {display:grid;place-items:center;flex:none;width:33px;height:33px;border-radius:9px;background:#ebf8f2;color:#11846c;font-size:11px;font-weight:850}
.tour-steps strong{font-size:12px;color:#243754}.tour-steps p{font-size:11px;color:#8491a5;line-height:1.5;margin:5px 0 0}
.toast {background:#1e3452;border-radius:10px;font-weight:650;font-size:12px}
.dialog {border-radius:16px;box-shadow:0 30px 110px #09122955}
.dialog::backdrop{background:#0e1b34a0;backdrop-filter:blur(4px)}
.footer {font-size:10px;color:#98a6b7;background:#fff;line-height:1.6}
@media (max-width:1320px) {
  .hero h2 {font-size:41px}
  .hero-scene {padding:24px 22px 18px 6px}
  .mix-content {grid-template-columns:120px 1fr;gap:17px;padding:12px 22px 30px}
  .donut {width:120px}.donut:before{width:88px;height:88px}.donut strong {font-size:24px}
}
@media (max-width:1100px) {
  .insights-grid {grid-template-columns:1fr 1fr}
  .hero {grid-template-columns:minmax(0,1fr) minmax(270px,.9fr)}
  .hero h2 {font-size:37px;letter-spacing:-1.7px}
  .stats {grid-template-columns:repeat(2,minmax(0,1fr))}
  .mix-content {grid-template-columns:1fr;justify-items:center;gap:19px}
  .mix-list {width:100%}
  .mix-item {padding-bottom:7px}
}
@media (max-width:890px) {
  .sidebar {position:fixed;left:0;top:0;bottom:0;transform:translateX(-110%);width:270px;transition:transform .2s ease;z-index:7}
  .sidebar.open {transform:translateX(0)}
  .drawer-overlay:not([hidden]) {z-index:6}
  .topbar {height:66px}
  .hero {grid-template-columns:1fr}
  .hero-copy {padding:32px 32px 25px}
  .hero-scene {min-height:255px;padding:0 44px 24px}
  .scene-window{max-width:400px}
  .scene-float {right:18%;bottom:6px}
  .form-layout,.tracker-grid {grid-template-columns:1fr}
}
@media (max-width:680px) {
  main {padding:26px 17px 44px}
  .page-heading {align-items:flex-start;flex-direction:column;margin-bottom:21px;gap:17px}
  .page-heading h1 {font-size:29px;letter-spacing:-1.1px}
  .heading-actions{width:100%;justify-content:flex-start}
  .topbar{padding:0 17px;gap:7px}.top-demo-label{display:none}.top-demo-dot{display:none}.topbar-right{gap:8px}.avatar{width:30px;height:30px;font-size:10px}.lang-btn{padding:6px 8px;min-height:33px}
  .hero{border-radius:17px;gap:0}.hero-copy{padding:27px 23px 14px}.hero h2{font-size:38px;letter-spacing:-1.9px}.hero-actions{gap:9px}.hero-proof{font-size:9px}.hero-scene{padding:0 28px 28px;min-height:230px}.scene-window{max-width:345px}.scene-float{right:5%;bottom:9px}
  .stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:13px}
  .stat-card {padding:15px}.stat-value {font-size:28px}.stat-label{font-size:10px}.stat-note{font-size:9px}
  .insights-grid {grid-template-columns:1fr;gap:13px;margin-bottom:13px}.mix-content{grid-template-columns:130px 1fr;gap:22px;justify-items:stretch}.donut {width:130px}.donut:before{width:97px}
  .usage-chart {padding:8px 21px 21px;height:185px}
  .panel-head {padding:20px 19px}.panel-title{font-size:14px}.panel-sub{font-size:10px}
  .bottom-callout{align-items:flex-start;flex-direction:column;padding:21px}
  .recent-panel{margin-bottom:13px}
  .category-cards{grid-template-columns:1fr}
  .form-panel {padding:22px 17px}
  .form-grid {grid-template-columns:1fr}
  .form-grid .span2 {grid-column:auto}
  .form-actions{flex-wrap:wrap}
  .form-layout,.tracker-grid{gap:13px}
  .footer{padding:18px;font-size:9px}
}
@media (max-width:370px) {
  .mix-content{grid-template-columns:105px 1fr;gap:10px;padding:3px 16px 22px}.donut{width:105px}.donut:before{width:79px}.donut strong{font-size:21px}
  .hero h2{font-size:34px}.hero-actions .btn{width:100%}.stat-icon{display:none}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important}
}