/* Scoped section artwork: the supplied page layout and contact panel remain intact. */
:root { --section-tint: 64, 101, 180; --section-glass: rgba(255,255,255,.64); --section-edge: rgba(255,255,255,.92); }
:root[data-theme="dark"] { --section-tint: 146,181,239; --section-glass: rgba(24,36,58,.65); --section-edge: rgba(203,222,255,.08); }
.hero-name, section > :is(.section-heading,.certificates-heading) .eyebrow, .contact-text > .eyebrow { display: flex; align-items: center; gap: 11px; }
.section-symbol { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid color-mix(in srgb,var(--accent) 15%,var(--line)); border-radius: 10px; color: var(--accent); background: linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--soft) 65%,transparent)); box-shadow: inset 0 1px 0 var(--section-edge),0 4px 10px -8px rgba(var(--section-tint),.25); transition: border-color .3s ease,box-shadow .3s ease,transform .3s ease; }
.section-symbol svg { width: 19px; height: 19px; display: block; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
section.is-open .section-symbol { border-color: color-mix(in srgb,var(--accent) 55%,var(--line)); box-shadow: inset 0 1px 0 var(--section-edge),0 0 0 3px rgba(var(--section-tint),.06); }
.contact-text > .eyebrow .section-symbol { color: #d4e5ff; border-color: #ffffff30; background: #ffffff0a; box-shadow: inset 0 1px 0 #ffffff0a; }
/* The contact eyebrow keeps its original line box and the panel keeps the supplied dimensions. */
.contact-text > .eyebrow { position:relative;display:block;padding-inline-start:31px; }
.contact-text > .eyebrow .section-symbol { position:absolute;left:0;top:50%;transform:translateY(-50%);width:23px;height:23px;border-radius:7px; }
.contact-text > .eyebrow .section-symbol svg { width:15px;height:15px; }
@media print { .contact-text > .eyebrow { padding-inline-start:0; } }

/* Rounded preview cards share the visual language of the project illustrations. */
.section-intro-action.support-theme-card { width:min(100%,420px);padding:0;gap:0;border-radius:23px;border:1px solid var(--line);background:var(--surface);box-shadow:inset 0 1px 0 var(--section-edge),0 20px 45px -32px #071b6340;isolation:isolate;transition:transform .35s ease,border-color .3s ease,box-shadow .3s ease; }
.section-intro-action.support-theme-card::before { display:none; }
.section-intro-action.support-theme-card::after { content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(200px circle at var(--card-pointer-x,50%) var(--card-pointer-y,20%),rgba(var(--section-tint),.08),transparent 75%);transition:opacity .3s; }
.section-intro-action.support-theme-card.is-motif-pointed::after { opacity:1; }
.support-theme-card > .section-intro { display:block;padding:23px 25px 22px;font-size:13.5px;line-height:1.8;color:var(--muted); }
.support-theme-card > .section-intro-cue { margin:0 25px 20px;width:calc(100% - 50px);padding-top:15px; }
.support-motif { position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:178px;overflow:hidden;pointer-events:none;background:linear-gradient(135deg,#eef2ff,#e2e9f7);color:#20366f;isolation:isolate; }
.section-preview-orbit { position:absolute;width:210px;height:210px;border:1px solid #bccbef66;border-radius:50%;background:#d7e1f530;box-shadow:0 0 0 30px #d5def226,0 0 0 60px #d5def212; }
.section-preview-window { position:relative;display:block;width:76%;max-width:300px;padding:0 16px 12px;border:1px solid #e2e8f6;border-radius:14px;background:#ffffffed;box-shadow:0 18px 30px -20px #162f7860;transform:translate(var(--motif-shift-x,0px),var(--motif-shift-y,0px)) rotate(-1deg);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s; }
.section-preview-chrome { display:flex;gap:4px;height:20px;align-items:center;border-bottom:1px solid #edf0f8;margin-bottom:10px; }
.section-preview-chrome i { width:3px;height:3px;border-radius:50%;background:#aebee1; }
.section-preview-heading { display:flex;align-items:center;gap:9px;margin-bottom:9px;text-align:left;font:650 11px/1.4 var(--font-site);color:#20366f; }
.section-preview-icon { display:grid;place-items:center;width:27px;height:27px;flex:none;background:#213779;color:#eef3ff;border-radius:8px; }
.section-preview-icon svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.section-preview-rows { display:grid;gap:4px; }
.section-preview-rows .motif-node { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 7px;border-radius:5px;color:#5d6e93;background:#f4f6fc;font:500 8px/1.35 var(--font-site);transition:background .25s,color .25s,transform .3s; }
.section-preview-rows .motif-node > i { width:4px;height:4px;border-radius:50%;background:#9aafd6; }
.section-preview-rows .motif-node.is-motif-node-active { color:#244b95;background:#e6edff;transform:translateX(2px); }
.is-motif-playing .section-preview-rows .motif-node { animation:preview-row-light 1.7s ease var(--node-delay,0ms) both; }
.is-motif-playing .section-preview-orbit { animation:preview-orbit 2.2s ease both; }
.support-theme-card[aria-expanded="true"] .section-preview-icon { background:#3867a3; }
:root[data-theme="dark"] .support-motif { background:linear-gradient(135deg,#202e4a,#17233c); }
:root[data-theme="dark"] .section-preview-orbit { border-color:#a5bce32b;background:#a3bee408;box-shadow:0 0 0 30px #a3bee406,0 0 0 60px #a3bee404; }
:root[data-theme="dark"] .section-preview-window { background:#23324c;border-color:#445574;box-shadow:0 18px 30px -20px #0009; }
:root[data-theme="dark"] .section-preview-heading { color:#d0ddf9; }
:root[data-theme="dark"] .section-preview-chrome { border-color:#41506b; }
:root[data-theme="dark"] .section-preview-rows .motif-node { background:#2b3b57;color:#c1cee7; }
:root[data-theme="dark"] .section-preview-rows .motif-node.is-motif-node-active { background:#3b5279;color:#eef5ff; }
@keyframes preview-row-light { 0%,100% { opacity:.8; } 40% { opacity:1;transform:translateX(3px); } }
@keyframes preview-orbit { 0%,100% { transform:scale(1);opacity:.7; } 50% { transform:scale(1.04);opacity:1; } }
@media(hover:hover) and (pointer:fine) {
 .section-intro-action.support-theme-card:hover { transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 24px 48px -30px rgba(var(--section-tint),.3); }
 .support-theme-card:hover .section-preview-window { transform:translate(var(--motif-shift-x,0px),-3px) rotate(0); }
}
@media(max-width:700px) { .section-intro-action.support-theme-card { width:100%;border-radius:20px; } .support-motif { height:166px; } .support-theme-card > .section-intro { padding:21px 22px; } .support-theme-card > .section-intro-cue { margin-inline:22px;width:calc(100% - 44px); } }
@media(prefers-reduced-motion:reduce) { .support-theme-card,.support-theme-card *, .support-theme-card::after { animation:none!important;transition:none!important; } .support-theme-card:hover,.support-theme-card .section-preview-window { transform:none!important; } }
@media print { .support-motif { display:none; } .section-intro-action.support-theme-card { box-shadow:none;background:none; } }
