:root {
  --ink: #14323a;
  --ink-soft: #466068;
  --paper: #edf3f5;
  --paper-2: #f8fbfb;
  --line: rgba(20, 50, 58, 0.13);
  --glass: rgba(255, 255, 255, 0.67);
  --lime: #dff36b;
  --lime-deep: #bed63f;
  --coral: #ff8d74;
  --blue: #87bfe2;
  --radius: 28px;
  --shadow: 0 22px 70px rgba(37, 72, 82, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.ambient { position: fixed; border-radius: 50%; filter: blur(4px); pointer-events: none; z-index: -1; }
.ambient-a { width: 540px; height: 540px; right: -180px; top: -190px; background: rgba(223, 243, 107, 0.32); }
.ambient-b { width: 420px; height: 420px; left: -250px; top: 42%; background: rgba(135, 191, 226, 0.2); }

.site-header {
  position: sticky; top: 14px; z-index: 20;
  width: min(1228px, calc(100% - 32px)); margin: 14px auto 0;
  padding: 10px 12px 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(248, 251, 251, 0.78); border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 30px rgba(35, 65, 74, 0.08); backdrop-filter: blur(18px); border-radius: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; letter-spacing: -0.025em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--ink); color: var(--lime); font-size: .72rem; letter-spacing: -.04em; }
.site-header nav { display: flex; align-items: center; gap: 6px; }
.site-header nav a { padding: 10px 14px; font-size: .91rem; border-radius: 12px; color: var(--ink-soft); transition: .2s ease; }
.site-header nav a:hover { color: var(--ink); background: rgba(20,50,58,.05); }
.site-header nav .nav-cta { background: var(--ink); color: white; padding-inline: 18px; }
.site-header nav .nav-cta:hover { background: #214954; color: white; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }

.hero { min-height: 765px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 64px; padding-block: 88px 70px; }
.eyebrow { margin: 0 0 18px; display: flex; align-items: center; gap: 9px; color: #527079; text-transform: uppercase; letter-spacing: .13em; font-size: .73rem; font-weight: 800; }
.eyebrow span { width: 24px; height: 1px; background: currentColor; }
.hero h1, .section-head h2, .approach h2, .contact h2, .dialog-copy h2 { margin: 0; font-weight: 680; line-height: .98; letter-spacing: -.058em; }
.hero h1 { max-width: 640px; font-size: clamp(3.25rem, 5.1vw, 5.4rem); }
.hero h1 em { color: #4d7079; font-style: normal; font-weight: 420; }
.hero-lead { max-width: 570px; margin: 27px 0 0; color: var(--ink-soft); font-size: 1.14rem; line-height: 1.68; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 0 20px; border: 1px solid transparent; border-radius: 15px; font-weight: 740; font-size: .93rem; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #fff; background: var(--ink); box-shadow: 0 12px 30px rgba(20, 50, 58, .18); }
.button.primary:hover { background: #214954; box-shadow: 0 16px 35px rgba(20, 50, 58, .24); }
.button.quiet { border-color: var(--line); background: rgba(255,255,255,.45); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .82rem; }
.hero-proof span { display: flex; align-items: center; gap: 7px; }
.hero-proof b { color: #8aa0a5; font-size: .7rem; }

.hero-stage { position: relative; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.58); border-radius: 34px; padding: 11px; box-shadow: var(--shadow); transform: rotate(1.2deg); }
.stage-toolbar { height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 10px; color: #688087; font-size: .67rem; }
.stage-toolbar i { width: 7px; height: 7px; background: #c9d4d6; border-radius: 50%; }
.stage-toolbar span { margin-left: 9px; }
.stage-toolbar b { margin-left: auto; font-weight: 650; color: var(--ink); }
.stage-body { height: 462px; display: grid; grid-template-columns: 55px 1fr; overflow: hidden; border-radius: 24px; background: #f7f9f9; border: 1px solid rgba(20,50,58,.08); }
.stage-body aside { background: #173942; display: flex; align-items: center; flex-direction: column; gap: 23px; padding-top: 15px; }
.tiny-logo { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--lime); color: var(--ink); font-size: .55rem; font-weight: 900; margin-bottom: 11px; }
.stage-body aside span { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; }
.stage-body aside span.active { background: rgba(223,243,107,.18); border-color: var(--lime); }
.stage-content { padding: 26px 24px; min-width: 0; }
.stage-title { display: flex; justify-content: space-between; align-items: center; }
.stage-title small { display: block; color: #829398; font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.stage-title strong { display: block; margin-top: 4px; font-size: 1.18rem; letter-spacing: -.03em; }
.stage-title button { border: 1px solid var(--line); background: white; border-radius: 9px; padding: 7px 10px; font-size: .62rem; }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 19px; }
.metric-row article { padding: 14px; border-radius: 13px; background: white; border: 1px solid rgba(20,50,58,.07); }
.metric-row small, .metric-row i { display: block; color: #83949a; font-size: .57rem; font-style: normal; }
.metric-row b { display: block; margin: 7px 0 3px; font-size: 1.35rem; letter-spacing: -.04em; }
.metric-row .up { color: #4c7561; }
.chart-card { height: 184px; margin-top: 10px; padding: 16px; border-radius: 15px; background: white; border: 1px solid rgba(20,50,58,.07); }
.chart-head { display: flex; justify-content: space-between; font-size: .64rem; }
.chart-head span { color: #819196; }
.chart-bars { height: 122px; margin-top: 11px; padding: 0 4px; display: flex; align-items: end; justify-content: space-around; gap: 12px; border-bottom: 1px solid #e1e7e8; background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, #edf1f2 30px); }
.chart-bars i { width: 9%; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(#dff36b, #c3de45); }
.task-strip { margin-top: 10px; padding: 12px; display: grid; grid-template-columns: auto 1fr 88px auto; align-items: center; gap: 10px; background: #e9f0f1; border-radius: 13px; font-size: .64rem; }
.task-strip > span { color: var(--lime-deep); }
.task-strip small { display: block; color: #7d9096; }
.task-strip > i { height: 5px; background: #d2dcde; border-radius: 9px; overflow: hidden; }
.task-strip > i b { display:block; width:73%; height:100%; background:#789da6; }
.task-strip em { font-style: normal; font-weight: 800; }
.stage-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.8); border-radius: 16px; background: rgba(255,255,255,.84); backdrop-filter: blur(13px); box-shadow: 0 12px 30px rgba(31,64,73,.13); }
.stage-float small { color:#6f868d; display:block; font-size:.6rem; }
.float-one { left: -38px; bottom: 82px; }
.float-one > span { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--lime); font-weight:900; }
.float-one b { display:block; font-size:.68rem; }
.float-two { right: -25px; top: 92px; transform: rotate(2deg); }
.float-two b { font-size:1.05rem; margin-left:7px; }

.statement { padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(255,255,255,.85); background: var(--glass); border-radius: var(--radius); box-shadow: 0 14px 45px rgba(37,72,82,.07); }
.statement > p { margin:0; max-width:500px; font-size:1.25rem; font-weight:650; letter-spacing:-.03em; }
.statement > div { display:flex; gap:10px; align-items:center; color:#71888e; font-size:.78rem; }
.statement i { color:#a2b0b3; font-style:normal; }

.projects { padding-block: 130px 80px; }
.section-head { display:grid; grid-template-columns:1fr 360px; gap:60px; align-items:end; }
.section-head h2, .approach h2, .contact h2 { font-size:clamp(2.65rem,4.5vw,4.6rem); }
.section-head > p { margin:0; color:var(--ink-soft); line-height:1.7; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:42px; }
.filter { border:1px solid var(--line); background:rgba(255,255,255,.4); border-radius:999px; padding:10px 15px; cursor:pointer; font-size:.83rem; transition:.2s ease; }
.filter:hover, .filter.active { color:white; background:var(--ink); border-color:var(--ink); }
.filter b { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:5px; padding:0 5px; border-radius:10px; background:rgba(255,255,255,.15); font-size:.65rem; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; }
.project-card { min-width:0; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.58); border-radius:28px; overflow:hidden; box-shadow:0 14px 50px rgba(34,67,76,.08); transition:.25s ease; }
.project-card:hover { transform:translateY(-5px); box-shadow:0 24px 60px rgba(34,67,76,.14); }
.project-card[hidden] { display:none; }
.project-visual { min-height:330px; padding:22px; display:grid; place-items:center; overflow:hidden; background:var(--visual-bg,#dfeaec); }
.project-info { padding:24px 26px 27px; }
.project-info-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.project-info h3 { margin:0; font-size:1.35rem; letter-spacing:-.035em; }
.project-info p { margin:9px 0 0; color:var(--ink-soft); font-size:.92rem; line-height:1.6; }
.project-info button { flex:0 0 auto; width:42px; height:42px; border:1px solid var(--line); border-radius:13px; background:white; cursor:pointer; font-size:1.05rem; transition:.2s ease; }
.project-card:hover .project-info button { color:white; background:var(--ink); transform:rotate(4deg); }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.project-tags span { padding:6px 9px; background:rgba(20,50,58,.055); border-radius:7px; color:#5d757b; font-size:.7rem; }

.mock-window { width:100%; height:270px; border-radius:17px; overflow:hidden; background:#fbfcfc; border:1px solid rgba(20,50,58,.1); box-shadow:0 18px 35px rgba(21,48,56,.16); transform:rotate(var(--tilt,-1deg)); }
.mock-bar { height:28px; display:flex; align-items:center; gap:4px; padding:0 10px; background:#fff; border-bottom:1px solid #e5ebec; }
.mock-bar i { width:5px; height:5px; border-radius:50%; background:#c4d0d2; }
.mock-bar small { margin-left:5px; font-size:.48rem; color:#789096; }
.mock-app { height:calc(100% - 28px); display:grid; grid-template-columns:48px 1fr; }
.mock-side { background:var(--mock-dark,#193c45); padding:11px 10px; display:flex; flex-direction:column; gap:10px; }
.mock-side b { height:19px; border-radius:6px; background:var(--mock-accent,#dff36b); margin-bottom:7px; }
.mock-side i { height:8px; border-radius:4px; background:rgba(255,255,255,.18); }
.mock-side i:first-of-type { background:rgba(255,255,255,.7); }
.mock-main { padding:15px; overflow:hidden; }
.mock-title { display:flex; justify-content:space-between; align-items:center; }
.mock-title b { width:36%; height:10px; border-radius:5px; background:#284952; }
.mock-title i { width:19%; height:17px; border-radius:6px; background:var(--mock-accent,#dff36b); }
.mock-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:13px; }
.mock-stats i { height:44px; border-radius:8px; background:#eef3f3; border:1px solid #e0e8e9; }
.mock-content { display:grid; grid-template-columns:1.4fr .8fr; gap:7px; margin-top:7px; }
.mock-list, .mock-chart { height:118px; padding:9px; border:1px solid #e0e8e9; border-radius:9px; background:white; }
.mock-list i { display:block; height:14px; margin-bottom:6px; border-radius:4px; background:#e9eff0; }
.mock-list i:nth-child(2) { background:#dfe9e7; }
.mock-chart { display:flex; align-items:end; justify-content:space-around; gap:4px; }
.mock-chart i { width:10%; height:var(--h); background:var(--mock-accent,#dff36b); border-radius:3px 3px 1px 1px; }
.mock-window.crm { --mock-dark:#22384d; --mock-accent:#8ad6e8; }
.mock-window.referral { --mock-dark:#41304f; --mock-accent:#d3a8ec; }
.mock-window.food { --mock-dark:#435143; --mock-accent:#ffd083; }
.mock-window.travel { --mock-dark:#173c4c; --mock-accent:#7acddd; }
.mock-window.coach { --mock-dark:#143e3e; --mock-accent:#82d5be; }

.approach { padding-block:70px 120px; }
.approach-panel { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; padding:70px; color:white; background:var(--ink); border-radius:34px; box-shadow:var(--shadow); }
.eyebrow.light { color:#a9c0c5; }
.approach-copy p:last-child { max-width:450px; margin:28px 0 0; color:#b5c6ca; line-height:1.75; }
.approach ol { margin:0; padding:0; list-style:none; }
.approach li { display:grid; grid-template-columns:42px 1fr; gap:20px; padding:20px 0; border-top:1px solid rgba(255,255,255,.14); }
.approach li:last-child { border-bottom:1px solid rgba(255,255,255,.14); }
.approach li > span { color:var(--lime); font-size:.72rem; font-weight:800; }
.approach li b { display:block; font-size:1.05rem; }
.approach li small { display:block; margin-top:5px; color:#9db3b9; font-size:.84rem; }

.contact { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding-block:40px 120px; }
.contact-copy > p:not(.eyebrow) { max-width:460px; color:var(--ink-soft); line-height:1.75; }
.privacy-note { display:flex; gap:14px; align-items:flex-start; margin-top:38px; padding-top:24px; border-top:1px solid var(--line); }
.privacy-note > span { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--lime); }
.privacy-note p { margin:0; }
.privacy-note b, .privacy-note small { display:block; }
.privacy-note small { max-width:330px; margin-top:5px; color:#71888e; line-height:1.5; }
.contact-form { padding:30px; background:rgba(255,255,255,.63); border:1px solid rgba(255,255,255,.95); border-radius:28px; box-shadow:var(--shadow); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contact-form label { display:block; margin-bottom:15px; color:#536f76; font-size:.76rem; font-weight:750; }
.contact-form input, .contact-form select, .contact-form textarea { width:100%; margin-top:7px; border:1px solid rgba(20,50,58,.13); border-radius:13px; background:rgba(247,250,250,.9); padding:13px 14px; color:var(--ink); outline:none; transition:.2s ease; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color:#71959d; box-shadow:0 0 0 4px rgba(113,149,157,.12); }
.contact-form textarea { resize:vertical; min-height:116px; }
.honeypot { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.form-footer { display:flex; gap:20px; align-items:center; justify-content:space-between; }
.form-footer p { margin:0; max-width:300px; color:#87999e; font-size:.69rem; line-height:1.5; }
.form-footer .button { border:0; min-width:190px; }
.form-status { min-height:24px; margin:13px 0 0; color:#4f7561; font-size:.8rem; }
.form-status.error { color:#9b4b42; }

.site-footer { min-height:100px; padding-block:28px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr auto; gap:30px; align-items:center; }
.site-footer p { margin:0; color:#758b91; font-size:.73rem; text-align:center; }
.site-footer > a:last-child { font-size:.8rem; color:#617a81; }

.case-dialog { width:min(1120px,calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:30px; background:#f2f6f6; color:var(--ink); box-shadow:0 30px 100px rgba(10,35,42,.32); overflow:auto; }
.case-dialog::backdrop { background:rgba(13,32,38,.58); backdrop-filter:blur(9px); }
.dialog-close { position:absolute; right:17px; top:17px; z-index:2; width:38px; height:38px; border:1px solid rgba(255,255,255,.65); border-radius:12px; background:rgba(255,255,255,.72); cursor:pointer; font-size:1.25rem; }
.dialog-layout { display:grid; grid-template-columns:1.18fr .82fr; min-height:650px; }
.dialog-gallery { padding:58px 34px 26px; background:#dce8e9; display:flex; flex-direction:column; justify-content:center; }
.dialog-screen { min-height:450px; display:grid; place-items:center; }
.dialog-screen .mock-window { height:410px; max-width:620px; transform:none; }
.dialog-screen .mock-app { grid-template-columns:70px 1fr; }
.dialog-screen .mock-main { padding:25px; }
.dialog-screen .mock-stats i { height:68px; }
.dialog-screen .mock-content > * { height:190px; }
.carousel-controls { display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center; margin-top:22px; }
.carousel-controls button { width:42px; height:42px; border:1px solid rgba(20,50,58,.13); border-radius:12px; background:rgba(255,255,255,.65); cursor:pointer; }
#carousel-dots { display:flex; justify-content:center; gap:6px; }
#carousel-dots i { width:7px; height:7px; border-radius:50%; background:#a7b9bd; }
#carousel-dots i.active { width:22px; border-radius:5px; background:var(--ink); }
#slide-count { color:#617a80; font-size:.76rem; }
.dialog-copy { padding:76px 50px 42px; }
.dialog-copy h2 { font-size:2.7rem; }
.dialog-copy > p { color:var(--ink-soft); line-height:1.7; }
.dialog-meta { margin-top:30px; }
.dialog-meta small { display:block; margin-top:20px; color:#7c9298; text-transform:uppercase; letter-spacing:.1em; font-weight:800; font-size:.65rem; }
.dialog-meta p { margin:6px 0 0; }
.dialog-meta ul { margin:8px 0 0; padding:0; list-style:none; }
.dialog-meta li { position:relative; padding:7px 0 7px 20px; border-bottom:1px solid var(--line); font-size:.88rem; }
.dialog-meta li::before { content:'↗'; position:absolute; left:0; color:#6e8b92; }
.fiction-note { padding:12px 14px; border-radius:12px; background:#e4ecec; font-size:.72rem; }
.dialog-copy .button { margin-top:12px; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; } * { animation:none!important; } }

@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:72px; }
  .hero-copy { max-width:680px; }
  .hero-stage { max-width:720px; width:100%; margin:auto; }
  .section-head, .contact { grid-template-columns:1fr; gap:30px; }
  .section-head > p { max-width:600px; }
  .approach-panel { grid-template-columns:1fr; gap:45px; padding:50px; }
  .dialog-layout { grid-template-columns:1fr; }
  .dialog-gallery { min-height:530px; }
  .dialog-copy { padding:45px; }
  .site-footer { grid-template-columns:1fr auto; }
  .site-footer p { grid-row:2; grid-column:1/-1; text-align:left; }
}

@media (max-width: 680px) {
  .shell { width:min(100% - 28px,1180px); }
  .site-header { width:calc(100% - 20px); top:10px; }
  .site-header nav { position:absolute; left:0; right:0; top:calc(100% + 8px); padding:10px; display:none; flex-direction:column; align-items:stretch; background:rgba(248,251,251,.96); border-radius:16px; box-shadow:var(--shadow); }
  .site-header nav.open { display:flex; }
  .menu-toggle { display:block; }
  .hero { gap:46px; padding-top:64px; }
  .hero h1 { font-size:clamp(3rem,15vw,4.2rem); }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-proof { gap:12px 18px; }
  .stage-body { height:365px; grid-template-columns:42px 1fr; }
  .stage-content { padding:18px 12px; }
  .metric-row { grid-template-columns:1fr 1fr; }
  .metric-row article:nth-child(3) { display:none; }
  .chart-card { height:145px; }
  .chart-bars { height:87px; }
  .task-strip { grid-template-columns:auto 1fr auto; }
  .task-strip > i { display:none; }
  .float-one { left:-7px; bottom:42px; }
  .float-two { right:-6px; top:72px; }
  .statement { padding:25px; display:block; }
  .statement > div { margin-top:22px; flex-wrap:wrap; }
  .projects { padding-top:90px; }
  .project-grid { grid-template-columns:1fr; }
  .project-visual { min-height:270px; padding:15px; }
  .mock-window { height:235px; }
  .approach-panel { padding:35px 25px; }
  .contact { padding-bottom:80px; }
  .contact-form { padding:22px; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .form-footer { display:block; }
  .form-footer .button { width:100%; margin-top:18px; }
  .dialog-gallery { padding:58px 14px 20px; min-height:420px; }
  .dialog-screen { min-height:320px; }
  .dialog-screen .mock-window { height:300px; }
  .dialog-screen .mock-content > * { height:120px; }
  .dialog-screen .mock-main { padding:15px; }
  .dialog-copy { padding:35px 24px; }
  .dialog-copy h2 { font-size:2.25rem; }
}

@media (max-width: 420px) {
  .brand > span:last-child { font-size:.83rem; }
  .stage-float { display:none; }
  .project-info-top { gap:10px; }
  .dialog-screen .mock-app { grid-template-columns:48px 1fr; }
  .carousel-controls { grid-template-columns:auto 1fr auto; }
  #slide-count { display:none; }
}

/* Detailed portfolio prototype */
.scroll-progress { position:fixed; inset:0 0 auto; height:3px; z-index:60; pointer-events:none; }
.scroll-progress i { display:block; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--lime-deep),#79bdc6); }
.theme-toggle { width:40px; height:40px; margin-left:auto; margin-right:4px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.55); cursor:pointer; font-size:1.1rem; }

.proof-strip { margin-top:20px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(255,255,255,.85); border-radius:24px; background:rgba(255,255,255,.54); box-shadow:0 12px 36px rgba(37,72,82,.06); overflow:hidden; }
.proof-strip article { padding:25px 28px; border-right:1px solid var(--line); }
.proof-strip article:last-child { border-right:0; }
.proof-strip b { display:block; font-size:2rem; line-height:1; letter-spacing:-.06em; }
.proof-strip span { display:block; margin-top:8px; color:var(--ink-soft); font-size:.76rem; line-height:1.4; }

.project-toolbar { margin-top:42px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.project-toolbar .filter-row { margin:0; }
.project-tools { display:flex; align-items:center; gap:8px; }
.project-search { height:42px; min-width:260px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.55); }
.project-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:.78rem; }
.project-tools select { height:42px; padding:0 34px 0 12px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.55); color:var(--ink); font-size:.76rem; }
.view-switch { display:flex; padding:3px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.55); }
.view-switch button { width:34px; height:34px; border:0; border-radius:9px; background:transparent; cursor:pointer; }
.view-switch button.active { color:white; background:var(--ink); }
.project-result-line { min-height:28px; margin:14px 3px 0; display:flex; align-items:center; justify-content:space-between; color:#71878d; font-size:.72rem; }
.project-result-line button { border:0; border-bottom:1px solid currentColor; padding:0; background:transparent; color:inherit; cursor:pointer; }
.project-kicker { margin-bottom:13px; display:flex; justify-content:space-between; gap:12px; color:#71878d; text-transform:uppercase; letter-spacing:.08em; font-size:.63rem; font-weight:800; }
.project-kicker em { color:#4b7862; font-style:normal; text-align:right; }
.project-visual { position:relative; cursor:pointer; }
.visual-hint { position:absolute; right:18px; bottom:18px; display:flex; align-items:center; gap:9px; padding:8px 10px 8px 13px; border:1px solid rgba(255,255,255,.85); border-radius:12px; background:rgba(255,255,255,.88); color:#21434b; box-shadow:0 8px 24px rgba(24,57,66,.12); opacity:0; transform:translateY(5px); transition:.2s ease; font-size:.68rem; font-weight:750; }
.project-card:hover .visual-hint { opacity:1; transform:none; }
.project-grid.list-view { grid-template-columns:1fr; }
.project-grid.list-view .project-card { display:grid; grid-template-columns:1.05fr .95fr; }
.project-grid.list-view .project-visual { min-height:300px; }
.project-grid.list-view .project-info { display:flex; flex-direction:column; justify-content:center; padding-inline:38px; }
.empty-state { grid-column:1/-1; padding:80px 30px; text-align:center; border:1px dashed var(--line); border-radius:28px; }
.empty-state b { font-size:1.5rem; }
.empty-state p { color:var(--ink-soft); }
.empty-state button { padding:10px 14px; border:0; border-radius:11px; color:white; background:var(--ink); cursor:pointer; }

/* Embedded product interfaces */
.product-ui { --ui-accent:#75a894; --ui-dark:#173d43; width:100%; min-width:0; height:100%; min-height:286px; overflow:hidden; border:1px solid rgba(18,49,58,.11); border-radius:16px; background:#f7f9f9; color:#18353d; box-shadow:0 18px 38px rgba(21,48,56,.15); font-size:8.4px; text-align:left; }
.theme-blue { --ui-accent:#77aede; --ui-dark:#243c55; }
.theme-violet { --ui-accent:#aa7fd1; --ui-dark:#453452; }
.theme-sand { --ui-accent:#d8a853; --ui-dark:#465045; }
.theme-cyan { --ui-accent:#65b9c8; --ui-dark:#173e4c; }
.theme-mint { --ui-accent:#68b99e; --ui-dark:#173f3e; }
.ui-top { height:27px; padding:0 10px; display:flex; align-items:center; gap:9px; border-bottom:1px solid #e2e8e9; background:#fff; color:#71878d; }
.ui-top > b { color:#38545b; font-size:.72em; }
.ui-dots { display:flex; gap:3px; }
.ui-dots i { width:5px; height:5px; border-radius:50%; background:#ccd6d8; }
.ui-user { margin-left:auto; display:flex; align-items:center; gap:5px; }
.ui-user i { width:17px; height:17px; display:grid; place-items:center; border-radius:6px; background:#e4eeee; color:var(--ui-dark); font-size:.65em; font-style:normal; font-weight:900; }
.ui-workspace { height:calc(100% - 27px); display:grid; grid-template-columns:35px 1fr; }
.ui-workspace > aside { padding:9px 7px; display:flex; align-items:center; flex-direction:column; gap:11px; background:var(--ui-dark); }
.ui-workspace > aside strong { width:21px; height:21px; margin-bottom:5px; display:grid; place-items:center; border-radius:6px; background:var(--ui-accent); color:#fff; font-size:.68em; }
.ui-workspace > aside > i { width:16px; height:5px; border-radius:4px; background:rgba(255,255,255,.19); }
.ui-workspace > aside > i.active { background:var(--ui-accent); }
.ui-workspace > aside small { margin-top:auto; width:16px; height:16px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:white; }
.ui-workspace > main { min-width:0; padding:12px 13px; overflow:hidden; }
.ui-heading { min-height:29px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ui-heading small { display:block; color:#819298; font-size:.77em; }
.ui-heading h4 { margin:2px 0 0; font-size:1.52em; line-height:1.05; letter-spacing:-.035em; }
.ui-heading button, .ui-actions button, .ui-card button, .profile-head button { padding:5px 8px; border:1px solid #d8e1e2; border-radius:6px; background:#fff; color:#3e5960; font-size:.76em; }
.ui-actions { display:flex; gap:5px; }
.ui-metrics { display:grid; gap:6px; margin-top:9px; }
.ui-metrics.four { grid-template-columns:repeat(4,1fr); }
.ui-metrics.three { grid-template-columns:repeat(3,1fr); }
.ui-metric { min-width:0; padding:8px; border:1px solid #e0e7e8; border-radius:8px; background:#fff; }
.ui-metric small, .ui-metric em { display:block; overflow:hidden; color:#819297; font-size:.68em; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.ui-metric b { display:block; margin:3px 0 1px; overflow:hidden; font-size:1.28em; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }
.ui-metric.good em { color:#438065; }
.ui-metric.danger em { color:#b25c51; }
.ui-metric.warn em { color:#a87a31; }
.ui-split { display:grid; grid-template-columns:1.12fr .88fr; gap:6px; margin-top:6px; }
.ui-split.client { grid-template-columns:1.2fr .8fr; }
.ui-card { min-width:0; padding:8px; border:1px solid #e0e7e8; border-radius:8px; background:#fff; }
.ui-card-head { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.ui-card-head a, .ui-card-head span { color:#71858b; font-size:.72em; }
.ui-bars { height:72px; margin-top:6px; padding:8px 3px 0; display:flex; align-items:end; justify-content:space-around; gap:5px; border-bottom:1px solid #dfe7e8; background:repeating-linear-gradient(to bottom,transparent 0,transparent 17px,#eef2f2 18px); }
.ui-bars > div { width:100%; height:100%; display:flex; align-items:center; justify-content:flex-end; flex-direction:column; }
.ui-bars i { width:65%; max-width:14px; height:var(--bar); border-radius:3px 3px 1px 1px; background:linear-gradient(to top,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 58%,white)); }
.ui-bars small { margin-top:2px; color:#91a0a4; font-size:.6em; }
.ui-legend { display:flex; gap:12px; margin-top:6px; color:#6e8288; font-size:.66em; }
.ui-legend i { display:inline-block; width:6px; height:6px; margin-right:3px; border-radius:2px; background:var(--ui-accent); }
.ui-legend span:last-child i { opacity:.35; }
.ui-pill { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:3px 5px; border-radius:4px; background:#eaf0f1; color:#60767c; font-size:.67em; font-weight:750; white-space:nowrap; }
.ui-pill.good { background:#e4f2e9; color:#3d785d; }
.ui-pill.warn { background:#fbf0d8; color:#8e692c; }
.ui-pill.danger { background:#f8e6e3; color:#a6534a; }
.risk-list p { margin:6px 0 0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; }
.risk-list p > i { width:16px; height:16px; display:grid; place-items:center; border-radius:5px; background:#f8e6e3; color:#a6534a; font-style:normal; font-weight:900; }
.risk-list p > i.med { background:#fbf0d8; color:#8e692c; }
.risk-list p > i.low { background:#e4f2e9; color:#3d785d; }
.risk-list span b, .risk-list span small { display:block; }
.risk-list span small { color:#839398; font-size:.68em; }
.ui-filterline { margin:8px 0 6px; display:flex; align-items:center; gap:4px; }
.ui-filterline button { padding:4px 6px; border:1px solid #dde5e6; border-radius:5px; background:white; color:#6d8186; font-size:.68em; }
.ui-filterline button.active { color:white; background:var(--ui-dark); }
.ui-filterline > span { margin-left:auto; min-width:120px; padding:5px 8px; border:1px solid #dde5e6; border-radius:5px; color:#96a3a6; background:white; font-size:.68em; }
.ui-table { overflow:hidden; border:1px solid #e0e7e8; border-radius:7px; background:#fff; }
.ui-tr { display:grid; grid-template-columns:1.25fr .75fr .75fr .8fr 1fr; align-items:center; min-height:34px; border-bottom:1px solid #edf1f1; }
.ui-tr:last-child { border-bottom:0; }
.ui-tr > span { min-width:0; padding:5px 7px; overflow:hidden; font-size:.72em; text-overflow:ellipsis; white-space:nowrap; }
.ui-tr > span b, .ui-tr > span small { display:block; }
.ui-tr > span small { color:#8b999d; font-size:.86em; }
.ui-tr.ui-th { min-height:25px; background:#edf2f2; color:#6d8186; font-weight:800; }
.ui-footerline { display:flex; justify-content:space-between; margin-top:6px; color:#7c8e93; font-size:.68em; }
.ui-footerline b { color:#39565d; }
.timeline { margin-top:5px; }
.timeline p { position:relative; margin:0; padding:5px 0 5px 18px; border-left:1px solid #dce5e5; }
.timeline p > i { position:absolute; left:-3px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--ui-accent); box-shadow:0 0 0 3px #fff; }
.timeline b, .timeline small { display:block; }
.timeline small { color:#809196; font-size:.7em; }
.contact-card > small, .contact-card > b, .contact-card > p { display:block; margin:0 0 3px; }
.contact-card hr { border:0; border-top:1px solid #e7ecec; margin:7px 0; }
.contact-card button { margin-top:5px; width:100%; background:var(--ui-dark); color:white; }
.forecast-layout { margin-top:8px; display:grid; grid-template-columns:1fr 130px; gap:7px; }
.forecast-layout .ui-card .ui-bars { height:125px; }
.forecast-aside { display:grid; gap:6px; }
.forecast-aside .ui-metric { display:flex; flex-direction:column; justify-content:center; }
.profile-head { display:flex; align-items:center; gap:7px; margin:8px 0; padding:8px; border:1px solid #e0e7e8; border-radius:8px; background:#fff; }
.profile-head > div:nth-child(2) { flex:1; }
.profile-head b, .profile-head p { display:block; margin:0; }
.profile-head p { color:#788c91; font-size:.72em; }
.avatar { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb,var(--ui-accent) 35%,white); color:var(--ui-dark); font-style:normal; font-weight:850; }
.avatar.tiny { width:17px; height:17px; font-size:.65em; }
.check-row { margin-top:5px; display:flex; align-items:center; gap:5px; padding:5px; border-radius:5px; background:#f5f8f8; font-size:.75em; }
.check-row input { accent-color:var(--ui-accent); }
.check-row small { margin-left:auto; color:#88999d; }
.kanban { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.kanban.four-col { grid-template-columns:repeat(4,1fr); }
.kanban section { padding:6px; border-radius:7px; background:#eaf0f1; }
.kanban section > header { display:flex; justify-content:space-between; padding:2px 2px 6px; }
.kanban section > header span { width:15px; height:15px; display:grid; place-items:center; border-radius:5px; background:#d6e0e1; font-size:.68em; }
.kanban article { margin-bottom:5px; padding:7px; border:1px solid #e0e7e8; border-radius:6px; background:white; box-shadow:0 2px 5px rgba(30,60,68,.05); }
.kanban article.done { opacity:.72; }
.kanban article small, .kanban article b, .kanban article p { display:block; margin:0 0 4px; }
.kanban article small, .kanban article p { color:#819297; font-size:.7em; }
.kanban article footer { margin-top:7px; display:flex; align-items:center; justify-content:space-between; }
.funnel { margin-top:6px; }
.funnel p { width:var(--w); margin:3px auto; padding:5px 8px; display:flex; justify-content:space-between; border-radius:4px; color:#fff; background:linear-gradient(90deg,var(--ui-dark),var(--ui-accent)); font-size:.73em; }
.donut-row { min-height:93px; display:flex; align-items:center; justify-content:center; gap:14px; }
.donut { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--ui-accent) calc(var(--value) * 1%),#e8eeee 0); position:relative; }
.donut::after { content:""; position:absolute; inset:8px; border-radius:50%; background:#fff; }
.donut b { position:relative; z-index:1; }
.donut-row p { margin:4px 0; }
.donut-row p b { margin-right:4px; }
.donut-row p small { color:#819297; }
.doc-layout { margin-top:8px; display:grid; grid-template-columns:1.2fr .8fr; gap:7px; }
.doc-row { display:grid; grid-template-columns:auto 1fr auto; gap:7px; align-items:center; padding:7px 0; border-bottom:1px solid #e8eded; }
.doc-row:last-child { border:0; }
.doc-row > i { width:18px; height:18px; display:grid; place-items:center; border-radius:6px; background:#fbf0d8; color:#8e692c; font-style:normal; }
.doc-row.good > i { background:#e4f2e9; color:#3d785d; }
.doc-row b, .doc-row small { display:block; }
.doc-row small { color:#829398; font-size:.7em; }
.audit > p { margin:8px 0 0; padding-top:7px; border-top:1px solid #e8eded; }
.audit p span { display:block; color:#819297; font-size:.7em; }
.meal-summary { margin:8px 0 6px; padding:7px 9px; display:flex; align-items:center; gap:8px; border-radius:7px; background:#fff; border:1px solid #e0e7e8; }
.meal-summary > div { margin-right:auto; }
.meal-summary span, .meal-summary b { display:block; }
.meal-summary span { color:#819297; font-size:.68em; }
.week-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.week-grid section { min-width:0; padding:5px; border-radius:6px; background:white; border:1px solid #e0e7e8; }
.week-grid header { margin-bottom:4px; font-weight:900; }
.week-grid p { margin:3px 0; display:flex; gap:4px; align-items:flex-start; }
.week-grid p > i { flex:0 0 auto; width:7px; height:7px; margin-top:2px; border-radius:3px; background:#f0c970; }
.week-grid p > i.lunch { background:#7dbba8; }
.week-grid p > i.dinner { background:#8aaed0; }
.week-grid p span { overflow:hidden; font-size:.67em; text-overflow:ellipsis; white-space:nowrap; }
.week-grid p small { display:block; color:#91a0a4; font-size:.83em; }
.recipe-layout { display:grid; grid-template-columns:.8fr 1.2fr 1fr; gap:7px; margin-top:8px; }
.recipe-hero { position:relative; min-height:150px; padding:9px; border-radius:9px; overflow:hidden; background:linear-gradient(145deg,#f1d28f,#d9965a); color:#fff; }
.recipe-hero::after { content:""; position:absolute; width:100px; height:100px; right:-25px; bottom:-30px; border-radius:50%; background:rgba(255,255,255,.22); }
.recipe-hero span, .recipe-hero b { display:block; }
.recipe-hero i { position:absolute; bottom:13px; left:14px; font-size:3.4em; font-style:normal; }
.ingredient { padding:6px 0; display:flex; justify-content:space-between; border-bottom:1px solid #edf1f1; font-size:.75em; }
.nutrition > div { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:5px; }
.nutrition .ui-metric { padding:6px; }
.nutrition button { width:100%; margin-top:6px; color:white; background:var(--ui-dark); }
.shopping-layout { display:grid; grid-template-columns:1fr 1fr .72fr; gap:7px; margin-top:8px; }
.shopping-layout section header { display:flex; justify-content:space-between; }
.shopping-layout section header span { color:#819297; }
.shopping-layout aside { padding:12px; display:flex; align-items:center; flex-direction:column; border-radius:8px; background:var(--ui-dark); color:white; text-align:center; }
.shopping-layout aside p { margin:5px 0; }
.shopping-layout aside small { display:block; color:rgba(255,255,255,.65); }
.shopping-layout aside hr { width:100%; border:0; border-top:1px solid rgba(255,255,255,.15); }
.inventory-banner { margin:8px 0; padding:9px; display:flex; align-items:center; justify-content:space-between; border-radius:8px; color:white; background:linear-gradient(110deg,var(--ui-dark),color-mix(in srgb,var(--ui-dark) 75%,var(--ui-accent))); }
.inventory-banner p { margin:2px 0 0; color:rgba(255,255,255,.7); font-size:.7em; }
.inventory-banner button { padding:5px 8px; border:0; border-radius:6px; background:var(--ui-accent); color:white; font-size:.72em; }
.inventory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.inventory-grid article { padding:8px; display:grid; grid-template-columns:auto 1fr; gap:6px; align-items:center; border:1px solid #e0e7e8; border-radius:7px; background:#fff; }
.inventory-grid article > i { font-size:1.5em; font-style:normal; }
.inventory-grid article b, .inventory-grid article small { display:block; }
.inventory-grid article small { color:#819297; }
.inventory-grid .ui-pill { grid-column:1/-1; }
.search-panel { margin:8px 0; padding:7px 9px; display:flex; align-items:center; gap:8px; border:1px solid #dce4e5; border-radius:7px; background:#fff; }
.search-panel > b { margin-right:auto; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.offer { overflow:hidden; border:1px solid #dfe7e8; border-radius:8px; background:#fff; }
.offer.selected { outline:2px solid var(--ui-accent); }
.offer-image { height:54px; padding:6px; display:flex; justify-content:space-between; background:linear-gradient(145deg,color-mix(in srgb,var(--ui-accent) 55%,white),#f6f1df); }
.offer-image > span { font-size:1.8em; font-weight:900; color:rgba(255,255,255,.8); }
.offer h5, .offer p, .offer footer { margin:5px 7px; }
.offer h5 { font-size:1.05em; }
.offer p { display:flex; gap:5px; flex-wrap:wrap; color:#74878c; font-size:.67em; }
.offer footer { display:flex; align-items:center; justify-content:space-between; }
.offer footer button { padding:4px; border:0; border-radius:4px; background:#edf2f2; font-size:.68em; }
.compare-table { margin-top:8px; overflow:hidden; border:1px solid #e0e7e8; border-radius:8px; background:white; }
.compare-table header, .compare-table p { margin:0; display:grid; grid-template-columns:.7fr repeat(3,1fr); }
.compare-table header > *, .compare-table p > * { padding:7px; border-right:1px solid #e8eded; }
.compare-table header { background:#eef2f2; }
.compare-table p { border-top:1px solid #e8eded; }
.compare-table p i { font-style:normal; }
.compare-table .winner { background:color-mix(in srgb,var(--ui-accent) 13%,white); }
.recommendation { margin-top:7px; padding:8px; display:flex; gap:7px; border-radius:7px; background:color-mix(in srgb,var(--ui-accent) 15%,white); }
.recommendation > i { font-size:1.4em; font-style:normal; color:var(--ui-accent); }
.recommendation p { margin:0; }
.recommendation b, .recommendation span { display:block; }
.recommendation span { color:#60757b; font-size:.72em; }
.proposal { margin:8px auto 0; width:82%; padding:14px; border-radius:8px; background:white; box-shadow:0 8px 24px rgba(26,54,62,.12); }
.proposal header { display:flex; justify-content:space-between; }
.proposal header h5 { margin:3px 0; font-size:1.5em; }
.proposal header p { margin:0; max-width:70%; color:#71868c; }
.proposal header > b { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:white; background:var(--ui-dark); }
.proposal-choice { margin:12px 0; padding:9px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; border-radius:7px; background:color-mix(in srgb,var(--ui-accent) 15%,white); }
.proposal-choice > span { padding:3px 5px; border-radius:4px; color:white; background:var(--ui-accent); font-size:.65em; }
.proposal-choice h5, .proposal-choice p { margin:0; }
.proposal-days { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.proposal-days p { margin:0; padding:5px; border:1px solid #e5ebec; border-radius:5px; }
.proposal-days i { margin-right:4px; color:var(--ui-accent); font-style:normal; }
.session-row { margin-top:5px; padding:6px; display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:center; border-radius:6px; background:#f2f6f6; }
.session-row > i { width:19px; height:19px; display:grid; place-items:center; border-radius:6px; color:white; background:var(--ui-accent); font-style:normal; }
.session-row b, .session-row small { display:block; }
.session-row small { color:#839398; }
.skill-note { margin:5px 0 0; color:#6f8389; font-size:.7em; }
.session-screen { height:100%; border-radius:8px; background:#f0f5f4; }
.session-screen > header { padding:8px 12px; display:flex; align-items:center; border-radius:8px 8px 0 0; color:white; background:var(--ui-dark); }
.session-screen > header b { margin-left:auto; margin-right:8px; }
.session-screen > header button { border:0; border-radius:5px; background:rgba(255,255,255,.15); color:white; font-size:.7em; }
.session-screen > main { max-width:450px; margin:auto; padding:14px; }
.session-screen h4 { margin:4px 0 9px; font-size:1.35em; }
.coach-message { padding:8px; display:flex; gap:8px; border-radius:7px; background:white; }
.coach-message > i { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; color:white; background:var(--ui-accent); font-style:normal; }
.coach-message p { margin:0; }
.coach-message b, .coach-message span { display:block; }
.coach-message span { margin-top:3px; color:#5f747a; }
.session-screen label { display:block; margin-top:8px; }
.session-screen textarea { width:100%; min-height:58px; margin-top:3px; padding:7px; border:1px solid #d9e2e3; border-radius:6px; resize:none; color:#28464d; font-size:.75em; }
.session-screen footer { display:flex; justify-content:flex-end; gap:5px; }
.session-screen footer button { padding:5px 8px; border:1px solid #d9e2e3; border-radius:5px; background:white; font-size:.7em; }
.session-screen footer .primary-mini { color:white; background:var(--ui-dark); }
.report-grid { margin-top:8px; display:grid; grid-template-columns:.8fr 1.2fr; gap:7px; }
.radar-card { display:grid; grid-template-columns:100px 1fr; align-items:center; }
.radar { position:relative; width:84px; height:84px; display:grid; place-items:center; background:conic-gradient(from 10deg,var(--ui-accent),#dcebea,var(--ui-accent)); clip-path:polygon(50% 0,100% 28%,90% 82%,50% 100%,10% 82%,0 28%); }
.radar::after { content:""; position:absolute; inset:17px; background:white; clip-path:inherit; }
.radar b { position:relative; z-index:1; }
.radar-card ul { margin:0; padding:0; list-style:none; }
.radar-card li { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid #e7ecec; }
.feedback > b { display:block; margin-bottom:4px; }
.feedback p { margin:4px 0 7px; padding:5px; border-radius:5px; background:#eaf4ee; color:#497360; }
.feedback p.negative { background:#fbf0df; color:#89692d; }
.builder { margin-top:8px; display:grid; grid-template-columns:100px 1fr; gap:7px; }
.builder > aside { padding:8px; border-radius:7px; background:var(--ui-dark); color:white; }
.builder > aside b { display:block; margin-bottom:7px; }
.builder > aside button { width:100%; margin-bottom:4px; padding:5px; border:1px solid rgba(255,255,255,.13); border-radius:4px; background:rgba(255,255,255,.08); color:white; text-align:left; font-size:.7em; }
.builder > main { padding:8px; border-radius:7px; background:#edf2f2; }
.builder-step { padding:7px; display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:center; border:1px solid #dce5e5; border-radius:6px; background:white; }
.builder-step.active { outline:2px solid var(--ui-accent); }
.builder-step > span { width:22px; height:22px; display:grid; place-items:center; border-radius:6px; color:white; background:var(--ui-accent); }
.builder-step p { margin:0; }
.builder-step b, .builder-step small { display:block; }
.builder-step small { color:#829398; }
.builder-step em { font-style:normal; }
.builder-link { width:1px; height:10px; margin:auto; background:#b8c9cc; }
.builder-link.split { width:50%; border-top:1px solid #b8c9cc; border-left:1px solid #b8c9cc; border-right:1px solid #b8c9cc; background:none; }
.builder-branch { display:grid; grid-template-columns:1fr 1fr; gap:7px; }

/* Results and richer case dialog */
.results { padding-block:70px 120px; }
.results-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px; }
.roi-panel, .before-after { padding:30px; border:1px solid rgba(255,255,255,.92); border-radius:28px; background:rgba(255,255,255,.62); box-shadow:var(--shadow); }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.panel-head small { color:#71878d; text-transform:uppercase; letter-spacing:.09em; font-size:.65rem; font-weight:800; }
.panel-head h3 { margin:5px 0 0; font-size:1.45rem; letter-spacing:-.04em; }
.panel-head > span { padding:6px 9px; border-radius:8px; color:#48666e; background:#e4eded; font-size:.68rem; }
.roi-panel label { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:22px; color:#526e75; font-size:.78rem; font-weight:700; }
.roi-panel output { color:var(--ink); }
.roi-panel input { grid-column:1/-1; width:100%; accent-color:#5f8992; }
.roi-result { margin-top:24px; padding:20px; border-radius:18px; color:white; background:var(--ink); }
.roi-result small { color:#acc0c5; }
.roi-result strong { display:block; margin-top:6px; color:var(--lime); font-size:2rem; letter-spacing:-.05em; }
.roi-result p { margin:7px 0 0; color:#c6d3d6; font-size:.78rem; }
.compare-track { height:7px; margin:48px 0 30px; border-radius:8px; background:linear-gradient(90deg,#d7a898 0 50%,#87b9a5 50%); position:relative; }
.compare-track button { position:absolute; left:50%; top:50%; width:42px; height:42px; transform:translate(-50%,-50%); border:5px solid white; border-radius:50%; background:var(--ink); box-shadow:0 5px 15px rgba(30,57,65,.24); cursor:pointer; transition:.35s ease; }
.before-after.after-focus .compare-track button { left:78%; }
.compare-track i::before { content:'↔'; color:white; font-style:normal; }
.compare-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compare-columns article { padding:18px; border-radius:16px; background:#f3eae7; opacity:.72; transition:.3s ease; }
.compare-columns article:last-child { background:#e4f0eb; opacity:1; }
.before-after.after-focus .compare-columns article:first-child { opacity:.42; }
.before-after.after-focus .compare-columns article:last-child { transform:translateY(-4px); box-shadow:0 12px 28px rgba(40,91,70,.12); }
.compare-columns em { color:#8b665d; font-size:.68rem; font-style:normal; text-transform:uppercase; letter-spacing:.09em; font-weight:850; }
.compare-columns article:last-child em { color:#4a7563; }
.compare-columns b { display:block; margin-top:8px; }
.compare-columns p { min-height:80px; color:#687c82; font-size:.78rem; line-height:1.55; }
.compare-columns span { display:inline-block; padding:5px 7px; border-radius:7px; background:rgba(255,255,255,.7); font-size:.7rem; font-weight:800; }

.case-dialog { width:min(1280px,calc(100% - 24px)); }
.dialog-layout { grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr); min-height:720px; }
.dialog-gallery { padding:28px 28px 22px; justify-content:flex-start; }
.dialog-gallery-head { min-height:30px; display:flex; justify-content:space-between; align-items:center; color:#506b72; font-size:.75rem; }
.dialog-gallery-head span { padding:6px 9px; border-radius:8px; background:rgba(255,255,255,.62); }
.dialog-screen { min-height:560px; padding-top:8px; }
.dialog-screen .product-ui { min-height:540px; border-radius:20px; font-size:12px; box-shadow:0 22px 55px rgba(23,54,62,.2); }
.dialog-screen .ui-top { height:38px; }
.dialog-screen .ui-workspace { height:calc(100% - 38px); grid-template-columns:50px 1fr; }
.dialog-screen .ui-workspace > main { padding:19px 21px; }
.dialog-screen .ui-workspace > aside { padding:14px 10px; gap:17px; }
.dialog-screen .ui-workspace > aside strong { width:29px; height:29px; }
.dialog-screen .ui-workspace > aside > i { width:23px; height:7px; }
.dialog-copy { padding:62px 38px 38px; }
.dialog-copy h2 { font-size:2.45rem; }
.dialog-impact { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:20px 0; }
.dialog-impact article { padding:10px; border-radius:10px; background:#e4ecec; }
.dialog-impact b, .dialog-impact span { display:block; }
.dialog-impact b { font-size:1.05rem; }
.dialog-impact span { margin-top:3px; color:#6f858b; font-size:.62rem; line-height:1.25; }
.case-tabs { display:flex; gap:4px; padding:4px; border-radius:11px; background:#e5eded; }
.case-tabs button { flex:1; padding:8px; border:0; border-radius:8px; background:transparent; color:#668087; cursor:pointer; font-size:.72rem; font-weight:750; }
.case-tabs button.active { color:var(--ink); background:#fff; box-shadow:0 3px 10px rgba(28,59,67,.08); }
.dialog-meta { min-height:210px; margin-top:10px; }
.dialog-meta[hidden] { display:none; }
.delivery-steps p { margin:0; padding:13px 0; display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--line); }
.delivery-steps i { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--ink); background:var(--lime); font-style:normal; font-size:.68rem; font-weight:900; }
#carousel-dots button { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#a7b9bd; cursor:pointer; transition:.2s ease; }
#carousel-dots button.active { width:22px; border-radius:5px; background:var(--ink); }

html[data-theme="dark"] { --ink:#eaf4f4; --ink-soft:#afc2c6; --paper:#10262d; --paper-2:#163038; --line:rgba(220,242,244,.14); --glass:rgba(25,51,58,.78); --shadow:0 22px 70px rgba(0,0,0,.25); }
html[data-theme="dark"] body { color:var(--ink); }
html[data-theme="dark"] .site-header, html[data-theme="dark"] .proof-strip, html[data-theme="dark"] .project-card, html[data-theme="dark"] .roi-panel, html[data-theme="dark"] .before-after, html[data-theme="dark"] .contact-form { border-color:rgba(255,255,255,.09); background:rgba(22,48,56,.82); }
html[data-theme="dark"] .brand-mark, html[data-theme="dark"] .button.primary, html[data-theme="dark"] .site-header nav .nav-cta { background:#dff36b; color:#17363e; }
html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .project-search, html[data-theme="dark"] .project-tools select, html[data-theme="dark"] .view-switch, html[data-theme="dark"] .filter { color:var(--ink); background:rgba(255,255,255,.05); }
html[data-theme="dark"] .project-info, html[data-theme="dark"] .dialog-copy { background:#19333b; }
html[data-theme="dark"] .case-dialog { background:#19333b; }

@media (max-width: 1080px) {
  .project-toolbar { align-items:stretch; flex-direction:column; }
  .project-tools { width:100%; }
  .project-search { flex:1; }
  .project-grid { grid-template-columns:1fr; }
  .project-visual { min-height:410px; }
  .product-ui { font-size:10.5px; }
  .dialog-layout { grid-template-columns:1fr; }
  .dialog-gallery { min-height:680px; }
}

@media (max-width: 760px) {
  .theme-toggle { margin-left:auto; }
  .proof-strip { grid-template-columns:1fr 1fr; }
  .proof-strip article:nth-child(2) { border-right:0; }
  .proof-strip article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .project-tools { align-items:stretch; flex-wrap:wrap; }
  .project-search { width:100%; flex-basis:100%; }
  .project-tools select { flex:1; }
  .project-grid.list-view .project-card { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:1fr; }
  .project-visual { min-height:310px; }
  .product-ui { font-size:7.3px; }
  .ui-workspace { grid-template-columns:29px 1fr; }
  .ui-workspace > main { padding:9px; }
  .ui-workspace > aside { padding:7px 5px; gap:8px; }
  .ui-workspace > aside strong { width:18px; height:18px; }
  .ui-metrics.four { grid-template-columns:1fr 1fr; }
  .ui-tr { grid-template-columns:1.2fr .8fr .8fr 1fr; }
  .ui-tr > span:last-child { display:none; }
  .kanban.four-col { grid-template-columns:1fr 1fr; }
  .week-grid { grid-template-columns:repeat(3,1fr); }
  .week-grid section:nth-child(n+4) { display:none; }
  .catalog-grid { grid-template-columns:1fr 1fr; }
  .catalog-grid .offer:last-child { display:none; }
  .dialog-gallery { min-height:auto; padding:50px 12px 18px; }
  .dialog-screen { min-height:390px; }
  .dialog-screen .product-ui { min-height:380px; font-size:7.8px; }
  .dialog-screen .ui-workspace { grid-template-columns:34px 1fr; }
  .dialog-screen .ui-workspace > main { padding:11px; }
  .dialog-copy { padding:34px 24px; }
}

@media (max-width: 480px) {
  .proof-strip article { padding:20px 17px; }
  .proof-strip b { font-size:1.55rem; }
  .project-visual { min-height:260px; padding:9px; }
  .product-ui { min-height:240px; font-size:5.8px; }
  .visual-hint { display:none; }
  .roi-panel, .before-after { padding:22px; }
  .compare-columns { grid-template-columns:1fr; }
  .compare-columns p { min-height:0; }
  .dialog-impact { grid-template-columns:1fr 1fr 1fr; }
  .dialog-screen .product-ui { font-size:6.2px; }
  .dialog-screen .ui-workspace > aside { display:none; }
  .dialog-screen .ui-workspace { grid-template-columns:1fr; }
}