.topic-visual { --topic-accent:#326fda; --topic-accent-soft:#eaf2ff; --topic-dark:#12233d; --topic-line:rgba(65,108,169,.18); }
.topic-breadcrumbs,.voice-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; color:#7086a1; font-size:.78rem; }
.topic-breadcrumbs a,.voice-breadcrumbs a { color:inherit; text-decoration:none; }.topic-breadcrumbs a:hover,.voice-breadcrumbs a:hover { color:var(--topic-accent, #326fda); }.topic-breadcrumbs i,.voice-breadcrumbs i { font-size:.65rem; opacity:.55; }.topic-breadcrumbs span,.voice-breadcrumbs span { color:var(--topic-accent, #326fda); font-weight:700; }
.topic-visual--legal { --topic-accent:#9a6a13; --topic-accent-soft:#fff3d8; --topic-dark:#30271a; --topic-line:rgba(155,112,35,.2); }
.topic-visual--web { --topic-accent:#5b55d6; --topic-accent-soft:#efefff; --topic-dark:#202247; --topic-line:rgba(91,85,214,.18); }
.topic-visual--cross { --topic-accent:#0b817b; --topic-accent-soft:#e8f8f5; --topic-dark:#123a43; --topic-line:rgba(11,129,123,.2); }
.topic-visual>section,.topic-visual>header { margin-bottom:clamp(58px,8vw,100px); }
.topic-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.65fr); gap:clamp(30px,6vw,80px); align-items:center; padding:clamp(30px,5vw,64px); overflow:hidden; border:1px solid var(--topic-line); border-radius:34px; background:radial-gradient(circle at 90% 5%,color-mix(in srgb,var(--topic-accent) 15%,transparent),transparent 31%),linear-gradient(135deg,#fff,#f2f7ff); box-shadow:0 25px 65px rgba(32,70,118,.1); }
.topic-visual--legal .topic-hero { background:radial-gradient(circle at 90% 5%,rgba(194,139,30,.16),transparent 31%),linear-gradient(135deg,#fff,#fff8e9); }.topic-visual--web .topic-hero { background:radial-gradient(circle at 90% 5%,rgba(91,85,214,.17),transparent 31%),linear-gradient(135deg,#fff,#f1f1ff); }
.topic-eyebrow,.topic-section-heading>span,.topic-related>div:first-child>span,.topic-cta span { display:inline-flex; align-items:center; gap:7px; color:var(--topic-accent); font-size:.74rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.topic-hero h1 { max-width:760px; margin:15px 0 20px; font-size:clamp(2.45rem,4.8vw,4.25rem); line-height:1.02; letter-spacing:-.03em; }.topic-hero>div>p { max-width:740px; margin:0; color:#536b8a; font-size:clamp(1.02rem,1.6vw,1.2rem); }.topic-hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; }
.topic-hero-visual { position:relative; min-height:330px; display:grid; place-items:center; }.topic-visual-core { position:relative; z-index:2; display:flex; width:170px; height:170px; flex-direction:column; align-items:center; justify-content:center; color:#fff; border:7px solid rgba(255,255,255,.85); border-radius:50%; background:linear-gradient(145deg,var(--topic-accent),var(--topic-dark)); box-shadow:0 22px 48px color-mix(in srgb,var(--topic-accent) 28%,transparent); }.topic-visual-core>i { margin-bottom:8px; font-size:2rem; }.topic-visual-core strong { font-family:var(--font-serif); font-size:1.4rem; }.topic-visual-core small { opacity:.74; font-size:.68rem; }.topic-orbit { position:absolute; border:1px dashed color-mix(in srgb,var(--topic-accent) 35%,transparent); border-radius:50%; }.topic-orbit-a { width:255px;height:255px; }.topic-orbit-b { width:330px;height:330px; }.topic-node { position:absolute; z-index:3; display:grid; width:52px; height:52px; place-items:center; color:var(--topic-accent); border:1px solid var(--topic-line); border-radius:17px; background:#fff; box-shadow:0 12px 28px rgba(30,62,103,.12); }.topic-node-a { top:20px;right:17%; }.topic-node-b { left:5%;bottom:75px; }.topic-node-c { right:2%;bottom:55px; }
.topic-web-preview { min-width:0; }.topic-web-preview>* { max-width:100%; }
.topic-section-heading { max-width:750px; margin:0 auto 34px; text-align:center; }.topic-section-heading h2,.topic-related h2,.topic-cta h2 { margin:10px 0 0; color:var(--topic-dark); font-family:var(--font-serif); font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.08; }
.topic-section-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.topic-section-card { position:relative; min-height:280px; padding:30px; overflow:hidden; border:1px solid var(--topic-line); border-radius:25px; background:#fff; box-shadow:0 14px 36px rgba(35,71,118,.07); }.topic-section-card:nth-child(3n+1) { background:linear-gradient(145deg,#fff,var(--topic-accent-soft)); }.topic-section-number { position:absolute; right:19px; top:7px; color:color-mix(in srgb,var(--topic-accent) 9%,transparent); font-family:var(--font-serif); font-size:5rem; font-weight:700; line-height:1; }.topic-section-icon { display:grid; width:49px;height:49px; margin-bottom:24px; place-items:center; color:var(--topic-accent); border-radius:16px; background:var(--topic-accent-soft); font-size:1.25rem; }.topic-section-card h2 { position:relative; margin:0 0 13px; color:var(--topic-dark); font-family:var(--font-serif); font-size:1.55rem; line-height:1.2; }.topic-section-card p { position:relative; margin:0 0 12px; color:#5b718e; font-size:.94rem; }.topic-section-card p:last-child { margin:0; }
.topic-faq { max-width:900px; margin-right:auto; margin-left:auto; }.topic-faq details { margin-bottom:10px; border:1px solid var(--topic-line); border-radius:16px; background:#fff; }.topic-faq summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 20px; color:var(--topic-dark); cursor:pointer; font-weight:800; list-style:none; }.topic-faq summary::-webkit-details-marker { display:none; }.topic-faq details p { margin:0;padding:0 20px 20px;color:#5d7390; }.topic-faq details[open] summary i { transform:rotate(45deg); }
.topic-related { display:grid; grid-template-columns:.75fr 1.25fr; gap:35px; align-items:center; padding:clamp(28px,4vw,46px); border:1px solid var(--topic-line); border-radius:28px; background:var(--topic-accent-soft); }.topic-related>div:last-child { display:flex; flex-wrap:wrap; gap:10px; }.topic-related a { display:inline-flex; align-items:center; justify-content:space-between; gap:16px; flex:1 1 210px; padding:14px 16px; color:var(--topic-dark); border:1px solid var(--topic-line); border-radius:14px; background:#fff; text-decoration:none; font-weight:700; font-size:.86rem; }.topic-related a i { color:var(--topic-accent); }
.topic-cta { display:flex; align-items:center; justify-content:space-between; gap:35px; margin-bottom:0!important; padding:clamp(30px,5vw,54px); color:#fff; border-radius:32px; background:radial-gradient(circle at 90% 0,color-mix(in srgb,var(--topic-accent) 40%,transparent),transparent 35%),linear-gradient(135deg,var(--topic-dark),color-mix(in srgb,var(--topic-dark) 68%,var(--topic-accent))); box-shadow:0 24px 54px rgba(25,52,87,.18); }.topic-cta span,.topic-cta h2 { color:#fff; }.topic-cta>div:first-child { max-width:680px; }.topic-cta>div:last-child { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:10px; }.topic-cta .btn-cta.outline { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); }
@media(max-width:900px){.topic-hero{grid-template-columns:1fr}.topic-hero-visual{min-height:290px}.topic-section-grid{grid-template-columns:1fr}.topic-related{grid-template-columns:1fr}.topic-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.topic-visual>section,.topic-visual>header{margin-bottom:54px}.topic-hero{padding:27px 20px;border-radius:25px}.topic-hero h1{font-size:2.5rem}.topic-hero-visual{min-height:255px;transform:scale(.86)}.topic-section-card{min-height:auto;padding:24px}.topic-related,.topic-cta{padding:26px 20px;border-radius:24px}.topic-cta>div:last-child,.topic-cta .btn-cta{width:100%}.topic-cta .btn-cta{justify-content:center}}