/* ===== deep colors: flat, no gradients =====
   Deep blue is the base. Each section borrows one other deep tone:
   teal, indigo, plum, crimson, green. Dark mode uses the same hues, darker. */

/* ---------- base: deep blue ---------- */
:root{
  --blue:#1a2d8f;
  --accent:#1a2d8f;
  --soft:#e9edfb;
  --line:#cdd5f1;
  --shadow:rgba(26,45,143,.2);
  --deep:#1a2d8f;
  --term-a:#0d1b5c;
  --term-bar:rgba(0,0,12,.3);
  --marq-bg:#0c1648;
  --foot-bg:#0a1240;
  /* illustration: deeper blues */
  --sc-bld1:#8fa2dc;--sc-bld2:#b9c6ee;--sc-win-off:#6f84cc;
  --sc-ink:#10206b;--sc-ring:#10206b;--sc-rock:#6f82c0;
  --sc-hull:#1a2d8f;--sc-bird:#1a2d8f;--sc-balloon1:#1a2d8f;--sc-planet2:#1a2d8f;--sc-pine:#1a2d8f;
}
html[data-theme="dark"]{
  --blue:#2f4bc4;
  --accent:#9db3ff;
  --soft:#101c4d;
  --line:#22336f;
  --bg:#050a1c;
  --panel:rgba(9,16,44,.84);
  --panel-solid:#09102c;
  --header:rgba(5,10,28,.84);
  --shadow:rgba(47,75,196,.32);
  --deep:#0b1a55;
  --term-a:#060d2e;
  --marq-bg:#0a1440;
  --foot-bg:#030715;
  --sc-bld1:#101f5c;--sc-bld2:#0a1646;--sc-win-off:#18297a;
  --sc-rock:#16245e;--sc-hull:#2f4bc4;--sc-planet2:#2f4bc4;
}

/* ---------- tones ---------- */
/* teal */
#services,.quote-box[data-tone="1"]{
  --blue:#0b5c6b;--accent:#0b5c6b;--soft:#e2f1f3;--line:#bfdde2;--shadow:rgba(11,92,107,.22);--deep:#0b5c6b;
  --sc-hill1:#c2e3e7;--sc-hill2:#92cdd4;--sc-hill3:#5fb2bd;--sc-ink:#08414c;--sc-bird:#0b5c6b;
  --sc-balloon1:#0b5c6b;--sc-balloon2:#c2e3e7;--sc-cloud:#e6f4f6;
}
html[data-theme="dark"] #services,html[data-theme="dark"] .quote-box[data-tone="1"]{
  --blue:#137f90;--accent:#7fd6e3;--soft:#08262d;--line:#164a55;--shadow:rgba(19,127,144,.3);--deep:#08414c;
  --panel:rgba(5,28,34,.84);--panel-solid:#051c22;
  --sc-hill1:#0a3a44;--sc-hill2:#07303a;--sc-hill3:#052630;--sc-ink:#7fd6e3;--sc-bird:#7fd6e3;
  --sc-balloon1:#137f90;--sc-balloon2:#bff0f6;--sc-white:#dff6f9;--sc-cloud:rgba(20,80,92,.5);--sc-cloud-edge:rgba(127,214,227,.22);
}
/* indigo */
#why,.quote-box[data-tone="2"]{
  --blue:#43238f;--accent:#43238f;--soft:#eee9fa;--line:#d5cbf0;--shadow:rgba(67,35,143,.22);--deep:#43238f;
}
html[data-theme="dark"] #why,html[data-theme="dark"] .quote-box[data-tone="2"]{
  --blue:#6740c8;--accent:#c0a9ff;--soft:#1c1048;--line:#382272;--shadow:rgba(103,64,200,.3);--deep:#2b1670;
  --panel:rgba(17,10,45,.84);--panel-solid:#110a2d;
}
/* plum */
#path,.quote-box[data-tone="3"]{
  --blue:#7a1d5c;--accent:#7a1d5c;--soft:#f8e8f2;--line:#ecc8de;--shadow:rgba(122,29,92,.22);--deep:#7a1d5c;
}
html[data-theme="dark"] #path,html[data-theme="dark"] .quote-box[data-tone="3"]{
  --blue:#a3287c;--accent:#f0a0d4;--soft:#3a0f2c;--line:#5e1f48;--shadow:rgba(163,40,124,.3);--deep:#5a1443;
  --panel:rgba(36,10,27,.84);--panel-solid:#240a1b;
}
/* crimson (about: the planet turns deep red) */
#about,.quote-box[data-tone="4"]{
  --blue:#8a1c36;--accent:#8a1c36;--soft:#fbe8ec;--line:#efc7d0;--shadow:rgba(138,28,54,.22);--deep:#8a1c36;
  --sc-planet2:#8a1c36;--sc-ring:#5e1226;--sc-ink:#5e1226;
}
html[data-theme="dark"] #about,html[data-theme="dark"] .quote-box[data-tone="4"]{
  --blue:#b02a4a;--accent:#ff9fb3;--soft:#3d0e19;--line:#632030;--shadow:rgba(176,42,74,.3);--deep:#62142a;
  --panel:rgba(38,8,16,.84);--panel-solid:#260810;
  --sc-planet2:#b02a4a;--sc-ring:#ffc0cd;--sc-ink:#ff9fb3;--sc-white:#ffe6ec;
}
/* green (contact: the forest) */
#contact,.quote-box[data-tone="5"]{
  --blue:#0e5a36;--accent:#0e5a36;--soft:#e3f3ea;--line:#bfe0cd;--shadow:rgba(14,90,54,.22);--deep:#0e5a36;
  --sc-hill1:#b9dfc8;--sc-hill2:#8cc9a6;--sc-hill3:#5eae82;--sc-pine:#0e5a36;--sc-ink:#0b4528;
  --sc-sun:#8fd4aa;--sc-sun-glow:rgba(14,90,54,.14);
}
html[data-theme="dark"] #contact,html[data-theme="dark"] .quote-box[data-tone="5"]{
  --blue:#16844f;--accent:#86e0b0;--soft:#0a2c1b;--line:#175a38;--shadow:rgba(22,132,79,.3);--deep:#0a4a2b;
  --panel:rgba(6,29,18,.84);--panel-solid:#061d12;
  --sc-hill1:#0b3a24;--sc-hill2:#08301d;--sc-hill3:#052316;--sc-pine:#031610;--sc-ink:#86e0b0;--sc-sun-glow:rgba(134,224,176,.14);
}
#contact .fly{fill:#b6f2cf;filter:drop-shadow(0 0 5px #5fd49a)}

/* ---------- section bands: flat tint of each tone ---------- */
#services,#why,#process,#path,#about,#contact{background:color-mix(in srgb,var(--blue) 6%,transparent)}
html[data-theme="dark"] #services,html[data-theme="dark"] #why,html[data-theme="dark"] #process,
html[data-theme="dark"] #path,html[data-theme="dark"] #about,html[data-theme="dark"] #contact{
  background:color-mix(in srgb,var(--panel-solid) 72%,transparent)}

/* ---------- mac-style window buttons ---------- */
.mac{display:flex;align-items:center;gap:8px;flex:none}
.mac-b{position:relative;display:grid;place-items:center;width:13px;height:13px;padding:0;border:0;border-radius:50%;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);transition:filter .15s,transform .15s}
.mac-b::after{content:"";position:absolute;inset:-5px}
.mac-r{background:#ff5f57}
.mac-y{background:#febc2e}
.mac-g{background:#28c840}
.mac-b svg{width:9px;height:9px;fill:none;stroke:rgba(0,0,0,.62);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.mac:hover .mac-b svg,.mac-b:focus-visible svg{opacity:1}
.mac-b:hover{filter:brightness(1.08)}
.mac-b:active{transform:scale(.88)}
.mac-b:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (pointer:coarse){.mac{gap:12px}.mac-b{width:16px;height:16px}.mac-b svg{width:11px;height:11px}}

/* decorative bars (terminal, plan cards) get the same three colors */
.term-bar i,.pp-bar i{width:11px;height:11px;opacity:1}
.term-bar i:nth-child(1),.pp-bar i:nth-child(1){background:#ff5f57}
.term-bar i:nth-child(2),.pp-bar i:nth-child(2){background:#febc2e}
.term-bar i:nth-child(3),.pp-bar i:nth-child(3){background:#28c840}

/* ---------- law pop-up ---------- */
.scan-bar{background:var(--deep);gap:14px;padding:11px 16px}
.scan-bar span{margin-left:0}
.scan-box{display:flex;flex-direction:column}
.scan-bar{flex:none}
.scan-body{flex:1}

/* minimized: a small bar at the bottom, the page stays usable */
.scan.is-min{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;place-items:end center;animation:none}
.scan.is-min .scan-box{pointer-events:auto;width:min(300px,100%)}
.scan.is-min .scan-body{display:none}

/* full screen */
.scan.is-max{padding:0}
.scan.is-max .scan-box{width:100%;height:100%;max-height:none;border-radius:0;border-width:0;box-shadow:none}
.scan.is-max .scan-body{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:900px;margin:0 auto;padding:40px 24px}
.scan.is-max .q-text{font-size:clamp(1.7rem,5vw,3.1rem);min-height:0}
.scan.is-max .scan-act{margin-top:34px}

@media (prefers-reduced-motion:reduce){.scan.is-min .scan-box{animation:none}}