/* Brice portfolio — content, hierarchy and accessible interactions. */
:root {
  color-scheme: dark;
  --bg: #15181c;
  --bg2: #1b1f24;
  --panel: #20252b;
  --panel2: #262c33;
  --text: #f2f4f6;
  --muted: #adb6c1;
  --line: #363e48;
  --line2: #657180;
  --accent: #a9d0ff;
  --action: #b9d9ff;
  --action-text: #132c49;
  --green: #9cddbc;
  --red: #ffb3bb;
  --violet: var(--accent);
  --purple: var(--accent);
  --cyan: var(--accent);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 8px 28px #00000014;
  --grad: linear-gradient(var(--accent), var(--accent));
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #fafbfc;
  --bg2: #f0f3f6;
  --panel: #ffffff;
  --panel2: #e9eef3;
  --text: #202831;
  --muted: #525f6e;
  --line: #d1d9e2;
  --line2: #8291a2;
  --accent: #185ca5;
  --action: #185ca5;
  --action-text: #ffffff;
  --green: #246c49;
  --red: #aa2638;
  --shadow: 0 8px 28px #142c4910;
}
html { scroll-padding-top: 6rem; }
body { font-size: 1rem; line-height: 1.65; overflow-x: clip; }
::selection { background: var(--action); color: var(--action-text); }
a, button, summary { cursor: pointer; }
:where(a,button,input,textarea,select,summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.skip-link {
  position: fixed; top: .75rem; left: 1rem; z-index: 3000;
  padding: .75rem 1rem; border-radius: 8px;
  background: var(--action); color: var(--action-text);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.ambient, .progress, .orbit, .motion-techs, .cursor { display: none !important; }
.automation-card, .availability i, .project-visual-large, .flow-line, .flow-line i::after, .faq details[open] p,
.mini-chart span, .mini-map i, .arch-node, .architecture-flow::before,
.v34-visual, .v34-visual *, .method-grid::before {
  animation: none !important;
}
.reveal, .v33-ready .deep-card, .v33-ready .case-proof,
.v33-ready .architecture-flow, .v33-ready .arch-node, .v34-visual, .arch-node {
  opacity: 1 !important; transform: none !important; transition-delay: 0s !important;
}
.automation-card::before, .automation-card::after, .project-hero::after,
.case-visual::before, .project-thumb::before, .project-visual-large::before,
.deep-card::after, .case-proof::after, .v34-ba-card::after,
.btn::before, .btn::after, .method-grid::before, .proof::after { display: none; }
.site-header, .site-header.scrolled {
  position: sticky; height: auto;
  background: var(--bg); border-bottom: 1px solid var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav { gap: 1rem; flex-wrap: wrap; height: auto; min-height: 74px; padding-block: .5rem; }
.brand > span {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  box-shadow: none; border-radius: 8px;
}
.brand b { font-weight: 650; }
.nav-links { gap: 1.25rem; flex-wrap: wrap; }
.nav-links a { font-size: .875rem; padding-block: .75rem; }
.lang-switch, .theme-btn, .menu-btn, .apps-link, .nav-cta {
  min-height: 44px; height: auto; border-radius: 8px;
}
.theme-btn, .menu-btn { min-width: 44px; }
.lang-switch, .apps-link { color: var(--text); font-size: .8125rem; }
.hero { padding: 4.5rem 0; min-height: auto; }
.hero-grid { grid-template-columns: 1.25fr 1fr; gap: 4rem; }
.hero h1, .page-hero h1, .project-hero h1 {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);
  line-height: 1.1; letter-spacing: -.035em; font-weight: 700;
  text-wrap: balance; overflow-wrap: anywhere;
}
.hero h1 span, .result-card strong {
  background: none; color: var(--accent); -webkit-text-fill-color: currentColor;
}
.hero-lead, .page-hero p, .project-hero p {
  font-size: 1.0625rem; line-height: 1.7; max-width: 58ch;
}
.hero-buttons { gap: .75rem; }
.availability {
  background: transparent; border: 0; padding: 0; color: var(--green);
  font-size: .8125rem; font-weight: 550; line-height: 1.5;
}
.availability i { box-shadow: none; flex-shrink: 0; }
.eyebrow, .code-pill, .case-index, .deep-kicker, .story-block > span,
.v34-meta small, .v34-ba-card > span, .method-card > b { color: var(--accent); }
.eyebrow { font-size: .75rem; letter-spacing: .065em; font-weight: 650; }
.eyebrow::before { display: none; }
.btn { min-height: 48px; padding: .75rem 1rem; border-radius: 8px; font-size: .875rem; font-weight: 650; }
.btn.primary, .filter.active {
  color: var(--action-text); background: var(--action); border-color: var(--action); box-shadow: none;
}
.btn.secondary { background: transparent; border-color: var(--line2); }
.btn:hover, .nav-cta:hover { transform: none; filter: brightness(.94); }
.trust-line { font-size: .8125rem; line-height: 1.6; align-items: flex-start; }
.trust-line svg { flex-shrink: 0; margin-top: .2rem; }
.hero-visual { min-height: 340px; perspective: none; }
.automation-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.5rem; box-shadow: none; transform: none !important;
}
.automation-card .code-pill, [data-theme] .automation-card .code-pill { color: var(--accent) !important; font-size: .75rem; }
.automation-card .flow-line {
  height: auto; min-height: 60px; padding: .875rem .75rem;
  grid-template-columns: 24px 1fr 48px; border-color: var(--line);
  background: transparent; border-radius: 8px;
}
[data-theme] .automation-card .flow-line b { color: var(--muted) !important; font-size: .75rem; }
[data-theme] .automation-card .flow-line span { color: var(--text) !important; font-size: .875rem; }
.automation-card .flow-line i { background: var(--line); }
.automation-card .flow-line i::after { background: var(--accent); transform: none; }
.automation-card .flow-line.done { grid-template-columns: 24px 1fr auto; }
.automation-card .flow-line.done strong { color: var(--green); }
section { padding: 5rem 0; }
.section-head { margin-bottom: 2rem; max-width: 48rem; }
.section-head h2, .cta-card h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.2; letter-spacing: -.025em; text-wrap: balance;
}
.proof-strip { padding: 0; background: var(--bg2); }
.proof { padding: 1.5rem; }
.proof strong { font-size: 1.5rem; font-weight: 650; }
.proof span { font-size: .875rem; line-height: 1.5; }
.cases { padding-top: 5rem; }
.case-stack { gap: 1.5rem; }
.case-card, .project-card, .problem-card, .service-card, .price-card,
.deep-card, .case-proof, .v34-ba-card, .profile-card, .form-card,
.result-card, .project-nav a, .story-block.lesson, .v34-meta {
  background: var(--panel); border-color: var(--line); border-radius: var(--radius); box-shadow: none;
}
.case-card:hover, .project-card:hover, .problem-card:hover, .service-card:hover,
.method-card:hover, .price-card:hover, .deep-card:hover, .case-proof:hover, .v34-ba-card:hover {
  transform: none !important; border-color: var(--line2);
}
.case-copy { padding: 2rem; }
.case-copy h3 { font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); line-height: 1.3; }
.case-copy > p, .project-content > p, .problem-card p, .service-card p,
.method-card p, .why-item p, .price-card p, .price-card li,
.faq details p, .deep-card p, .case-proof p { font-size: .9375rem; line-height: 1.7; }
.case-visual, .project-thumb, .project-visual-large { background: var(--bg2); }
.mini-dashboard, .mini-terminal, .mini-flow span, .mini-generic span {
  background: var(--panel); border-color: var(--line); color: var(--text); box-shadow: none;
}
.mini-kpis b { border-color: var(--line); background: var(--panel2); }
.mini-chart { background: var(--panel2); }
.mini-chart span { background: var(--accent); }
.mini-flow b, .mini-map em, .mini-generic b { color: var(--muted); }
.mini-map .island { background: var(--panel2); border-color: var(--line2); }
.mini-map i { background: var(--green); box-shadow: none; }
.mini-terminal .ok { color: var(--green); }
.result-row small, .result-card span { font-size: .8125rem; }
.text-link { color: var(--accent); font-size: .875rem; padding-block: .5rem; }
.icon-box { background: var(--panel2); border-color: var(--line); color: var(--accent); border-radius: 8px; }
.problem-card > strong, .why-item > svg, .price-card li svg { color: var(--green); }
.problem-card > strong { font-size: .8125rem; }
.method-card {
  background: transparent; border: 0; border-top: 1px solid var(--line2);
  border-radius: 0; padding: 1.5rem .5rem 0 0;
}
.method-card > b { margin-bottom: 1.25rem; font-size: .875rem; }
.why { background: var(--bg2); }
.price-card.featured { border-color: var(--line2); background: var(--panel); }
.faq summary { min-height: 44px; align-items: center; font-size: 1rem; }
.faq summary span { color: var(--accent); flex-shrink: 0; }
.cta-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); padding: 3rem 2rem; }
.filter { min-height: 44px; font-size: .8125rem; }
.tags span, .stack-line b { color: var(--muted); background: var(--bg2); font-size: .75rem; }
.project-content > p { min-height: 0; }
.arch-node { background: var(--panel); border-color: var(--line); }
.architecture-flow::before { background: var(--line2); }
.arch-node > span, .arch-node > b { color: var(--accent); font-size: .8125rem; }
.v34-meta small, .v34-ba-card > span { font-size: .75rem; }
.v34-meta strong { font-size: .875rem; }
.form-card input, .form-card textarea, .form-card select {
  font-size: 1rem; color: var(--text); background: var(--bg); border-color: var(--line2);
}
.form-card label { font-size: .875rem; }
.contact-form :is(input, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.contact-grid > *, .form-row > *, .hero-grid > *, .about-grid > * { min-width: 0; }
.contact-form input, .contact-form textarea { width: 100%; min-width: 0; }
.direct a, .profile-card a { color: var(--accent); overflow-wrap: anywhere; font-size: .875rem; }
.timeline time, .project-nav small { color: var(--accent); font-size: .8125rem; }
.timeline p, .timeline ul, .profile-card p, .contact-side li { font-size: .9375rem; }
.profile-monogram { background: var(--panel2); border-color: var(--line); border-radius: 12px; }
.timeline article::before { background: var(--accent); box-shadow: none; }
.alert.success { color: var(--green); }
.alert.error { color: var(--red); }
.footer, .foot-links a { font-size: .8125rem; }
.foot-links a { padding-block: .5rem; overflow-wrap: anywhere; }
@media (max-width: 1200px) and (min-width: 1021px) { .nav-links { gap: .75rem; } .apps-link span { display: none; } }
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero { padding-top: 3rem; }
  .nav { min-height: 68px; }
  .hero-visual { min-height: auto; }
  .nav-links.open { background: var(--panel); border-color: var(--line2); }
  .nav-links.open a { font-size: 1rem; min-height: 48px; }
}
@media (max-width: 760px) {
  :root { --radius: 12px; --radius-sm: 8px; }
  .wrap { width: calc(100% - 2.5rem); }
  .nav { gap: .5rem; }
  .brand { min-width: 0; gap: .5rem; }
  .brand b { font-size: .75rem; }
  .brand > span { width: 36px; height: 36px; flex-shrink: 0; }
  .nav-actions { gap: .375rem; flex-shrink: 0; }
  .hero { padding: 2.5rem 0 3rem; }
  .hero h1, .page-hero h1, .project-hero h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); line-height: 1.15; }
  .hero-lead { font-size: 1rem; }
  .availability { border-radius: 0; max-width: 100%; font-size: .75rem; }
  .hero-buttons .btn { width: 100%; }
  section { padding: 3.5rem 0; }
  .proof-strip { padding: 0; }
  .proof { padding: 1.25rem .75rem; }
  .proof span { font-size: .8125rem; }
  .cases { padding-top: 3.5rem; }
  .case-copy { padding: 1.5rem; }
  .case-visual { min-height: 200px; }
  .cta-card { padding: 2rem 1.25rem; }
  .page-hero, .project-hero { padding: 3rem 0 2.5rem; }
}
@media (max-width: 420px) {
  .brand b { display: none; }
  .lang-switch { padding-inline: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}