/* web-protection.css — уникальные для этой страницы правила.
   Общие правила вынесены в service-shared.css. */

.webprotect-hero { position:relative; min-height:790px; padding:122px 0 86px; border-bottom:1px solid var(--border); background:linear-gradient(rgba(var(--accent-rgb), .055) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--accent-rgb), .055) 1px,transparent 1px), radial-gradient(circle at 10% 10%,rgba(var(--accent-rgb), .18),transparent 31%), radial-gradient(circle at 82% 24%,rgba(var(--accent-2-rgb), .13),transparent 29%), var(--bg); background-size:64px 64px,64px 64px,auto,auto,auto; }

.webprotect-hero__inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.84fr); gap:clamp(54px,7vw,94px); align-items:center; }

.webprotect-hero h1 { margin:0 0 22px; font-size:clamp(50px,6.3vw,78px); font-weight:800; line-height:.99; letter-spacing:-.058em; }

.webprotect-console__flow > div.is-active strong { color:var(--accent); }

.webprotect-console__log i { display:inline-block; width:5px; height:10px; margin-left:5px; background:var(--accent); animation:webprotect-cursor 1s steps(2) infinite; }

@keyframes webprotect-cursor { 50% { opacity: 0; } }

.webprotect-advantage { --card-accent:var(--accent); position:relative; min-height:310px; padding:25px; overflow:hidden; border:1px solid var(--border); border-radius:21px; background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--card-accent) 12%,transparent),transparent 34%), var(--surface); transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition); }

.webprotect-capability { --card-accent:var(--accent); position:relative; display:grid; grid-template-columns:54px minmax(0,1fr); gap:18px; min-height:184px; padding:22px; overflow:hidden; border:1px solid var(--border); border-radius:19px; background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--card-accent) 12%,transparent),transparent 42%), color-mix(in srgb,var(--surface) 94%,transparent); transition:border-color var(--transition),box-shadow var(--transition); }

.webprotect-principle { --card-accent:var(--accent); position:relative; min-height:270px; padding:27px; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--card-accent) 10%,transparent),transparent 38%), var(--surface); transition:border-color var(--transition),box-shadow var(--transition); }

.webprotect-consultation { padding:96px 0; background:var(--bg-alt); }

.webprotect-form .form__textarea { height:104px; min-height:104px; max-height:104px; }

.webprotect-faq-item { overflow:hidden; border:1px solid var(--border); border-radius:17px; background:var(--surface); transition:border-color var(--transition),background var(--transition); }

.webprotect-faq-item summary span::before,.webprotect-faq-item summary span::after { content:''; position:absolute; top:50%; left:50%; width:12px; height:1.5px; border-radius:2px; background:var(--accent); transform:translate(-50%,-50%); transition:transform var(--transition); }

.webprotect-modal { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:24px; visibility:hidden; opacity:0; transition:opacity .25s ease,visibility 0s linear .25s; }

.webprotect-modal--open { visibility:visible; opacity:1; transition:opacity .25s ease; }

.webprotect-modal__dialog { position:relative; z-index:1; width:100%; max-width:880px; max-height:calc(100vh - 48px); overflow-y:auto; padding:clamp(24px,3.4vw,40px); border:1px solid var(--border); border-radius:24px; outline:none; background:radial-gradient(ellipse 60% 60% at 100% 0%,rgba(var(--accent-rgb), .16),transparent 60%),var(--surface); box-shadow:var(--shadow); opacity:0; transform:translateY(16px) scale(.97); transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s ease; }

.webprotect-hero h1 { max-width:760px; font-size:clamp(46px,5.45vw,70px); line-height:1.02; }

.webprotect-console__flow > div.is-active strong { font-size:10px; }

.webprotect-scheme__source.is-goodbot { border-color:color-mix(in srgb,#8b5cf6 42%,var(--border)); }

.webprotect-scheme__source.is-goodbot > span { color:#8b5cf6; background:rgba(139,92,246,.11); }

.webprotect-scheme__flow--web { display:grid; grid-template-columns:minmax(170px,1.12fr) minmax(155px,.96fr) minmax(145px,.88fr) minmax(155px,.96fr) minmax(165px,1fr); gap:30px; align-items:center; padding:30px 22px; }

.webprotect-scheme__sources--web { gap:9px; }

.webprotect-scheme__sources--web .webprotect-scheme__source { grid-template-columns:38px minmax(0,1fr); gap:9px; padding:12px; }

.webprotect-scheme__sources--web .webprotect-scheme__source > span { width:38px; height:38px; }

.webprotect-scheme__connector { display:none; flex-direction:column; align-items:center; gap:8px; min-width:0; color:var(--accent); }

.webprotect-scheme__connector span { font-size:8px; font-weight:800; text-align:center; text-transform:uppercase; }

.webprotect-scheme__connector i { position:relative; width:100%; height:2px; border-radius:2px; background:currentColor; }

.webprotect-scheme__connector i::after { content:''; position:absolute; top:-4px; right:0; width:8px; height:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }

.webprotect-scheme__connector--clean { color:#22c55e; }

.webprotect-scheme__connector--fan { color:#8b5cf6; }

.webprotect-scheme__sources--web,.webprotect-scheme__anycast,.webprotect-scheme__nodes,.webprotect-scheme__balancer { position:relative; }

.webprotect-scheme__sources--web::after,.webprotect-scheme__anycast::after,.webprotect-scheme__nodes::after,.webprotect-scheme__balancer::after { content:''; position:absolute; top:50%; right:-23px; width:16px; height:2px; border-radius:2px; background:var(--flow-color,var(--accent)); transform:translateY(-50%); }

.webprotect-scheme__sources--web::before,.webprotect-scheme__anycast::before,.webprotect-scheme__nodes::before,.webprotect-scheme__balancer::before { content:''; position:absolute; top:50%; right:-23px; width:8px; height:8px; border-top:2px solid var(--flow-color,var(--accent)); border-right:2px solid var(--flow-color,var(--accent)); transform:translateY(-50%) rotate(45deg); }

.webprotect-scheme__anycast { --flow-color:#8b5cf6; }

.webprotect-scheme__nodes,.webprotect-scheme__balancer { --flow-color:#22c55e; }

.webprotect-scheme__stage { --stage-accent:var(--accent); display:flex; flex-direction:column; min-height:250px; padding:18px; border:1px solid color-mix(in srgb,var(--stage-accent) 42%,var(--border)); border-radius:18px; background:radial-gradient(circle at 85% 5%,color-mix(in srgb,var(--stage-accent) 14%,transparent),transparent 38%),color-mix(in srgb,var(--stage-accent) 6%,var(--surface)); }

.webprotect-scheme__stage-icon { display:grid; place-items:center; width:50px; height:50px; margin-bottom:25px; border:1px solid color-mix(in srgb,var(--stage-accent) 48%,var(--border)); border-radius:15px; color:var(--stage-accent); background:color-mix(in srgb,var(--stage-accent) 13%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--stage-accent) 7%,transparent); }

.webprotect-scheme__stage-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

.webprotect-scheme__stage > small { margin-bottom:6px; color:var(--stage-accent); font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.webprotect-scheme__stage > strong { font-size:15px; line-height:1.28; letter-spacing:-.02em; }

.webprotect-scheme__stage > p { margin:9px 0 14px; color:var(--text-muted); font-size:10px; line-height:1.5; }

.webprotect-scheme__stage > b { margin-top:auto; padding-top:11px; border-top:1px solid var(--border); color:var(--stage-accent); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:8px; }

.webprotect-scheme__anycast { --stage-accent:var(--accent-2); }

.webprotect-scheme__balancer { --stage-accent:var(--accent); }

.webprotect-scheme__resource { --stage-accent:#22c55e; }

.webprotect-scheme__nodes { display:grid; gap:9px; }

.webprotect-scheme__nodes > div { display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:center; min-height:72px; padding:10px; border:1px solid color-mix(in srgb,#8b5cf6 38%,var(--border)); border-radius:13px; background:color-mix(in srgb,#8b5cf6 7%,var(--surface)); }

.webprotect-scheme__nodes svg { box-sizing:border-box; width:40px; height:40px; padding:8px; border:1px solid color-mix(in srgb,#8b5cf6 48%,var(--border)); border-radius:11px; fill:none; stroke:#8b5cf6; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; background:rgba(139,92,246,.1); }

.webprotect-scheme__nodes strong,.webprotect-scheme__nodes small { display:block; }

.webprotect-scheme__nodes strong { font-size:12px; }

.webprotect-scheme__nodes small { margin-top:4px; color:#8b5cf6; font-size:7px; font-weight:800; }

.webprotect-possibilities { border-bottom:1px solid var(--border); background:radial-gradient(circle at 85% 10%,rgba(139,92,246,.08),transparent 27%),var(--bg); }

.webprotect-possibilities__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }

.webprotect-possibility { --card-accent:var(--accent); position:relative; display:grid; grid-template-columns:58px minmax(0,1fr); gap:20px; min-height:190px; padding:25px; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--card-accent) 11%,transparent),transparent 42%),var(--surface); transition:border-color var(--transition),box-shadow var(--transition); }

.webprotect-possibility:nth-child(2),.webprotect-possibility:nth-child(6) { --card-accent:var(--accent-2); }

.webprotect-possibility:nth-child(3),.webprotect-possibility:nth-child(7) { --card-accent:#8b5cf6; }

.webprotect-possibility:nth-child(4),.webprotect-possibility:nth-child(8) { --card-accent:#22c55e; }

.webprotect-possibility:hover { border-color:color-mix(in srgb,var(--card-accent) 46%,var(--border)); box-shadow:0 18px 42px color-mix(in srgb,var(--card-accent) 8%,transparent); }

.webprotect-possibility .webprotect-icon { width:58px; height:58px; border-radius:16px; }

.webprotect-possibility small { display:block; margin:3px 0 8px; color:var(--card-accent); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.webprotect-possibility h3 { margin:0 0 10px; font-size:18px; line-height:1.34; }

.webprotect-possibility p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.62; }

.webprotect-modal .transit-form .form__textarea { height:104px; min-height:104px; max-height:104px; }

.webprotect-modal .transit-form__service { border-color:color-mix(in srgb,var(--accent) 28%,var(--border)); color:var(--text-muted); background:color-mix(in srgb,var(--surface) 70%,var(--bg)); cursor:default; }

.webprotect-modal .transit-form .form__actions { display:flex; gap:12px; }

.webprotect-modal .transit-form .form__actions .btn--ghost { flex:0 0 auto; }

.webprotect-modal .transit-form .form__actions .form__submit { flex:1; width:auto; }

@media (max-width: 1120px) {
  .webprotect-hero__inner { grid-template-columns:minmax(0,1fr) minmax(370px,.78fr); gap:42px; }

  .webprotect-scheme__flow--web { grid-template-columns:minmax(165px,1.08fr) minmax(150px,.94fr) minmax(140px,.86fr) minmax(150px,.94fr) minmax(160px,1fr); gap:26px; padding:27px 16px; }

  .webprotect-scheme__sources--web::after,.webprotect-scheme__anycast::after,.webprotect-scheme__nodes::after,.webprotect-scheme__balancer::after { right:-21px; width:14px; }

  .webprotect-scheme__sources--web::before,.webprotect-scheme__anycast::before,.webprotect-scheme__nodes::before,.webprotect-scheme__balancer::before { right:-21px; }

  .webprotect-scheme__stage { padding:16px; }

  .webprotect-scheme__stage > strong { font-size:14px; }

}

@media (max-width: 900px) {
  .webprotect-hero__inner { grid-template-columns:1fr; }

}

@media (max-width: 680px) {
  .webprotect-hero h1 { font-size:clamp(42px,13.5vw,58px); }

  .webprotect-hero h1 { font-size:clamp(39px,11.8vw,52px); }

  .webprotect-scheme__flow--web { padding:22px 16px; }

  .webprotect-scheme__nodes { grid-template-columns:1fr; }

  .webprotect-scheme__nodes > div { grid-template-columns:38px minmax(0,1fr); justify-items:initial; min-height:72px; text-align:left; }

  .webprotect-possibility { grid-template-columns:52px minmax(0,1fr); gap:15px; min-height:205px; padding:20px; }

  .webprotect-possibility .webprotect-icon { width:52px; height:52px; }

}

@media (max-width: 980px) {
  .webprotect-scheme__flow--web { display:flex; flex-direction:column; gap:14px; padding:26px; }

  .webprotect-scheme__sources--web,.webprotect-scheme__stage,.webprotect-scheme__nodes,.webprotect-scheme__connector { width:min(100%,560px); }

  .webprotect-scheme__connector { display:flex; height:52px; justify-content:center; }

  .webprotect-scheme__connector i { width:2px; height:30px; }

  .webprotect-scheme__connector i::after { top:auto; right:-4px; bottom:0; transform:rotate(135deg); }

  .webprotect-scheme__sources--web::before,.webprotect-scheme__sources--web::after,.webprotect-scheme__anycast::before,.webprotect-scheme__anycast::after,.webprotect-scheme__nodes::before,.webprotect-scheme__nodes::after,.webprotect-scheme__balancer::before,.webprotect-scheme__balancer::after { display:none; }

  .webprotect-scheme__stage { min-height:245px; }

  .webprotect-scheme__nodes { grid-template-columns:repeat(3,minmax(0,1fr)); }

  .webprotect-scheme__nodes > div { grid-template-columns:1fr; justify-items:center; min-height:130px; text-align:center; }

  .webprotect-possibilities__grid { grid-template-columns:1fr; }

  .webprotect-modal .transit-form .form__actions { flex-wrap:wrap; }

  .webprotect-modal .transit-form .form__actions .btn--ghost,.webprotect-modal .transit-form .form__actions .form__submit { flex:1 1 140px; }

}

@media (max-width: 460px) {
  .webprotect-console__flow > div.is-active strong { font-size:8px; }

  .webprotect-scheme__stage { min-height:260px; }

  .webprotect-possibility { grid-template-columns:1fr; min-height:0; }

}