/* 260813 Fortinet EDM - CSS organized by page section */
/* 01. Design tokens */
:root { --navy: #06101e; --navy-2: #0b1a2b; --red: #ff3f4d; --orange: #ff7443; --gold: #d7ae6b; --sage: #9fb4a5; --blue: #4f88a8; --cyan: #39c4ef; --green: #65a98d; --ink: #101828; --muted: #526077; --line: #dbe5f1; }


/* 02. Base */
::selection { background: var(--red); color: #fff; }
section.section-host:not(.offer-section) .section-kicker { display: inline-flex; align-items: center; gap: 10px; }
section.section-host:not(.offer-section) .section-kicker::after { width: 34px; height: 2px; flex: 0 0 34px; border-radius: 99px; background: var(--red); box-shadow: 0 0 7px rgba(255,63,77,.16); content: ""; }

/* 02b. Navigation */
header.site-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(6,16,30,.94); color: #fff; box-shadow: 0 8px 24px rgba(1,8,18,.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
header.site-header .nav-inner { display: flex; width: min(1380px,calc(100% - 40px)); min-height: 72px; align-items: center; gap: 24px; }
header.site-header .brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 11px; color: #fff; font-size: .95rem; font-weight: 900; line-height: 1.1; letter-spacing: .05em; }
header.site-header .brand-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: linear-gradient(135deg,var(--red),#df102e); color: #fff; box-shadow: 0 8px 18px rgba(225,22,50,.24); }
header.site-header .brand small { color: #aebed1; font-size: .72rem; font-weight: 600; letter-spacing: .08em; }
header.site-header nav { display: flex; align-items: center; gap: clamp(16px,2.1vw,28px); margin-left: auto; }
header.site-header nav a { position: relative; padding: 24px 0 22px; color: #cbd7e5; font-size: .95rem; font-weight: 700; transition: color .2s ease; }
header.site-header nav a::after { position: absolute; right: 0; bottom: 16px; left: 0; height: 2px; border-radius: 99px; background: var(--red); content: ""; opacity: 0; transform: scaleX(.35); transition: opacity .2s ease,transform .2s ease; }
header.site-header nav a:hover { color: #fff; }
header.site-header nav a:hover::after { opacity: 1; transform: scaleX(1); }
header.site-header .nav-cta { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; margin-left: 4px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: linear-gradient(135deg,var(--red),#df102e); color: #fff; font-size: .95rem; font-weight: 800; box-shadow: 0 8px 20px rgba(225,22,50,.24); transition: background .2s ease,box-shadow .2s ease,transform .2s ease; }
header.site-header .nav-cta:hover { background: linear-gradient(135deg,#ff5360,#ec1735); box-shadow: 0 10px 24px rgba(225,22,50,.32); transform: scale(1.025); }
header.site-header a:focus-visible { outline: 3px solid rgba(57,196,239,.45); outline-offset: 3px; }



/* 03. Hero section */
section.hero-section { position: relative; isolation: isolate; display: flex; min-height: 680px; align-items: center; overflow: hidden; background: #020813 url(../images/header-bg.jpg) center / cover no-repeat; }
section.hero-section::before { position: absolute; z-index: 1; top: -10%; right: 1%; width: 54%; height: 62%; background: linear-gradient(112deg,transparent 24%,rgba(57,196,239,.06) 35%,rgba(57,196,239,.34) 44%,transparent 54%),linear-gradient(72deg,transparent 28%,rgba(255,116,67,.07) 41%,rgba(255,116,67,.36) 49%,transparent 59%),radial-gradient(ellipse at 58% 88%,rgba(255,75,67,.46),transparent 28%); content: ""; opacity: .78; filter: blur(50px); mix-blend-mode: screen; transform-origin: 58% 88%; animation: shield-rays 4.8s ease-in-out infinite; pointer-events: none; will-change: transform,opacity; }
section.hero-section::after { position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg,rgba(1,6,13,.48) 0%,rgba(2,8,17,.26) 42%,transparent 70%),linear-gradient(0deg,rgba(1,5,12,.32) 0%,transparent 46%); content: ""; pointer-events: none; }
section.hero-section .shield-energy { position: absolute; z-index: 1; top: 43%; left: 76.5%; width: 360px; height: 470px; border-radius: 48% 48% 52% 52%; background: radial-gradient(ellipse at 50% 48%,transparent 36%,rgba(65,164,220,.16) 49%,rgba(255,76,58,.34) 61%,transparent 75%); opacity: .9; filter: blur(10px); mix-blend-mode: screen; transform: translate(-50%,-50%); animation: shield-aura 3.1s ease-in-out infinite; pointer-events: none; will-change: opacity,filter,transform; }
section.hero-section .shield-energy::before { position: absolute; inset: 4% 10%; border-radius: 46%; background: linear-gradient(102deg,transparent 33%,rgba(138,210,255,.18) 43%,rgba(255,255,255,.72) 49%,rgba(255,103,75,.32) 54%,transparent 64%); content: ""; opacity: 0; filter: blur(3px); animation: shield-scan 3.7s ease-in-out infinite; }
section.hero-section .shield-energy::after { position: absolute; right: 8%; bottom: -3%; left: 8%; height: 31%; border-radius: 50%; background: radial-gradient(ellipse,rgba(255,239,190,.72) 0%,rgba(255,91,54,.58) 22%,rgba(255,45,45,.2) 48%,transparent 72%); content: ""; filter: blur(10px); animation: shield-core-pulse 2.25s ease-in-out infinite; }
section.hero-section .shield-energy span { position: absolute; top: 17%; right: -1%; width: 24px; height: 58%; border-radius: 50%; background: linear-gradient(180deg,transparent,rgba(255,105,78,.82),transparent); box-shadow: 0 0 18px rgba(255,77,57,.85),0 0 42px rgba(255,77,57,.48); opacity: .6; filter: blur(3px); animation: shield-edge 2.8s ease-in-out infinite; }
@keyframes shield-rays {
  0%, 100% { opacity: .54; transform: translate3d(0,-8px,0) scale(.96) rotate(-.8deg); }
  50% { opacity: 1; transform: translate3d(-12px,9px,0) scale(1.09) rotate(1deg); }
}
/* @keyframes shield-aura {
  0%, 100% { opacity: .1; filter: blur(9px) brightness(.92); transform: translate(-50%,-50%) scale(.96); }
  50% { opacity: 1; filter: blur(5px) brightness(1.35); transform: translate(-50%,-50%) scale(1.07); }
} */
@keyframes shield-scan {
  0%, 18% { opacity: 0; transform: translateX(-38%) skewX(-8deg); }
  48% { opacity: .03; }
  78%, 100% { opacity: 0; transform: translateX(38%) skewX(-8deg); }
}
@keyframes shield-core-pulse {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes shield-edge {
  0%, 100% { opacity: .38; transform: translateY(-4%) scaleY(.9) rotate(20deg); }
  50% { opacity: 1; transform: translateY(4%) scaleY(1.08)  rotate(20deg); }
}
section.hero-section .hero-layout { position: relative; z-index: 2; display: grid; align-items: center; gap: 16px; width: min(1380px,calc(100% - 40px)); padding-top: 62px; padding-bottom: 62px; grid-template-columns: 1.5fr .5fr; }
section.hero-section .eyebrow { display: inline-block; margin: 0 0 24px; padding: 8px 14px; border: 1px solid rgba(255,115,99,.24); border-radius: 99px; background: rgba(5,14,27,.72); color: #dce8f2; font-size: 1.25rem; box-shadow: inset 0 0 18px rgba(255,75,63,.04); }
section.hero-section .eyebrow strong { color: #ff4652; }
section.hero-section h1 { margin: 0; color: #f8fbff; font-size: clamp(2.65rem,5vw,4.8rem); font-weight: 900; line-height: 1.2; letter-spacing: -.02em;  }
section.hero-section h1 em { background: linear-gradient(90deg,#ff3f4d 0%,#ff7443 28%,#d7ae6b 52%,#9fb4a5 72%,#39c4ef 100%); background-clip: text; color: transparent; font-style: normal; -webkit-background-clip: text; }
section.hero-section .hero-lead { margin: 22px 0; color: #fff; font-size: 1.875rem; font-weight: 700; text-shadow: 0 2px 14px rgba(0,0,0,.48); }
section.hero-section .hero-points { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 0 0 30px; padding: 0; color: #d9e3eb; font-size: 1.25rem; list-style: none; }
section.hero-section .hero-points i { margin-right: 7px; color: #65c7a5; filter: drop-shadow(0 0 7px rgba(101,199,165,.24)); }
section.hero-section .button-primary { border: 1px solid rgba(255,106,103,.26); background: linear-gradient(135deg,#f1263f,#df102e); box-shadow: 0 12px 30px rgba(225,22,50,.34),inset 0 1px rgba(255,255,255,.16); }
section.hero-section .button-primary:hover { background: linear-gradient(135deg,#ff3b4f,#ec1735); box-shadow: 0 15px 34px rgba(225,22,50,.42); }





/* 04. Trends section */
section.trends-section .trends-layout { display: grid; align-items: center; gap: clamp(30px,4vw,40px); grid-template-columns: minmax(0,.88fr) minmax(450px,0.85fr); }
section.trends-section .trends-list { display: grid; gap: 30px; }
section.trends-section .trend-item { display: grid; align-items: start; gap: 17px; grid-template-columns: 48px minmax(0,1fr); }
section.trends-section .trend-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #ffd5cf; border-radius: 13px; background: #fff0ed; color: var(--red); font-size: 1.25rem; box-shadow: 0 8px 20px rgba(255,63,77,.1); }
section.trends-section .trend-item:nth-child(2) .trend-icon { border-color: #eddcbb; background: #fbf5e9; color: #a77b3e; }
section.trends-section .trend-item:nth-child(3) .trend-icon { border-color: #cceaf3; background: #eaf7fb; color: #268cad; }
section.trends-section .trend-copy h3 { margin: 1px 0 7px; color: var(--ink); font-size: 1.125rem; line-height: 1.6; }
section.trends-section .trend-copy p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.85; }
section.trends-section .trends-visual { overflow: hidden; margin: 0; padding: 18px; border: 1px solid #d9e2ec; border-radius: 18px; background: linear-gradient(145deg,#fff,#f4f7fa); box-shadow: 0 24px 55px rgba(16,36,60,.12); }
section.trends-section .trends-visual img { display: block; width: 100%; height: auto; border-radius: 18px; }
/* 05. Roadmap section */
section.roadmap-section .roadmap-subtitle { position: relative; margin: 0 0 15px; padding: 0 0 0 24px;  color: var(--ink); font-size: 1.5rem; line-height: 1.6; font-weight: 900; }
section.roadmap-section .roadmap-subtitle::before { position: absolute; top: 12px; left: 2px; width: 11px; height: 11px; border-radius: 2px; background: linear-gradient(135deg,var(--red),var(--orange)); box-shadow: 0 0 0 4px rgba(255,63,77,.1); content: ""; }
section.roadmap-section .roadmap-subtitle.spaced { margin-top: 80px; }
section.roadmap-section .cert-combo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; margin-bottom: 26px; }
section.roadmap-section .cert-box { padding: 30px 26px; border: 2px solid rgba(255,63,77,.28); border-radius: 18px; background: linear-gradient(135deg,#fff 0%,#fff8f8 48%,#fff1f2 100%); text-align: center; box-shadow: 0 12px 28px rgba(33,54,79,.07); }
section.roadmap-section .cert-box.blue { border-color: rgba(38,140,173,.34); background: linear-gradient(135deg,#fff 0%,#f5faff 48%,#eaf7fb 100%); }
section.roadmap-section .cert-label { display: inline-block; padding: 6px 16px; border-radius: 99px; background: var(--red); color: #fff; font-size: .95rem; font-weight: 900; box-shadow: 0 6px 14px rgba(255,63,77,.16); }
section.roadmap-section .cert-box.blue .cert-label { background: #268cad; box-shadow: 0 6px 14px rgba(38,140,173,.18); }
section.roadmap-section .cert-box h3 { margin: 12px 0 7px; font-size: 1.25rem; }
section.roadmap-section .cert-box p { margin: 0; color: var(--muted); font-size: 1rem; }
section.roadmap-section .plus { display: grid; width: 52px; height: 52px; place-items: center; align-self: center; border: 1px solid #cbd9e7; border-radius: 50%; background: linear-gradient(145deg,#fff,#edf4fa); color: #315d7a; font-size: 1.125rem; box-shadow: 0 8px 20px rgba(33,71,102,.1); }
section.roadmap-section .award { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 34px; padding: 18px 22px; border: 1px solid #466c5b; border-radius: 14px; background: radial-gradient(circle at 24% 50%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 18%,transparent 36%),linear-gradient(110deg,#466c5b 0%,#527f69 56%,#4c8198 100%); color: #fff; text-align: center; font-size: 1rem; font-weight: 800; box-shadow: 0 10px 24px rgba(69,112,105,.24); }
section.roadmap-section .award-icon { flex: 0 0 auto; font-size: 2rem; line-height: 1; filter: drop-shadow(0 4px 7px rgba(215,174,107,.22)); }
section.roadmap-section .pain-table { overflow: hidden; border: 1px solid #cedbeb; border-radius: 16px; background: #fff; }
section.roadmap-section .pain-row { display: grid; grid-template-columns: 1fr 1fr; }
section.roadmap-section .pain-row > div { padding: 18px 22px; border-bottom: 1px solid #e1e8f0; }
section.roadmap-section .pain-row > div + div { border-left: 1px solid #e1e8f0; }
section.roadmap-section .pain-row:last-child > div { border-bottom: 0; }
section.roadmap-section .pain-head { background: linear-gradient(90deg,var(--navy-2),#132c3e); color: #fff; font-weight: 800; }
section.roadmap-section .pain-bad strong { color: #c83440; }
section.roadmap-section .pain-good strong { color: #527f69; }
section.roadmap-section .map-link { display: flex; width: fit-content; max-width: 100%; align-items: center; justify-content: center; gap: 9px; margin: 24px auto 0; padding: 2px 0; color: #4b5563; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; text-underline-offset: 4px; overflow-wrap: anywhere; transition: color .2s ease; }
section.roadmap-section .map-link::before { flex: 0 0 auto; color: var(--red); font-size: 1.125rem; line-height: 1; content: "\2192"; animation: map-link-arrow 1.35s ease-in-out infinite alternate; }
section.roadmap-section .map-link:hover { color: #1f2937; text-decoration: underline; }
section.roadmap-section .map-link:focus-visible { outline: 3px solid rgba(38,140,173,.24); outline-offset: 3px; }
@keyframes map-link-arrow {
  from { transform: translateX(0); }
  to { transform: translateX(5px); }
}
section.roadmap-section .cert-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; table-layout: fixed; border: 1px solid #cae0f2; border-radius: 14px; background: #fff; }
section.roadmap-section .cert-table th, section.roadmap-section .cert-table td { padding: 22px; vertical-align: middle; border-right: 1px solid #cae0f2; border-bottom: 1px solid #cae0f2; }
section.roadmap-section .cert-table th:last-child, section.roadmap-section .cert-table td:last-child { border-right: 0; }
section.roadmap-section .cert-table tr:last-child td { border-bottom: 0; }
section.roadmap-section .cert-table th { background: #edf6f8; color: #397f98; }
section.roadmap-section .cert-table td { color: #344054; }
section.roadmap-section .cert-table tbody td { text-align: left; }
section.roadmap-section .cert-table strong { color: #c92837; }
section.roadmap-section .cert-table th:first-child { width: 32%; }
section.roadmap-section .cert-table th:nth-child(2) { width: 34%; }
section.roadmap-section .cert-table th:nth-child(3) { width: 34%; }
section.roadmap-section .cert-name { display: flex; align-items: center; gap: 18px; min-width: 0; }
section.roadmap-section .cert-badge { flex: 0 0 100px; width: 100px; border-radius: 16px; box-shadow: 0 12px 28px rgba(151,32,18,.16); }
section.roadmap-section .cert-name-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
section.roadmap-section .cert-heading { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
section.roadmap-section .cert-required, section.roadmap-section .cert-level { display: inline-block; color: #c92837; font-size: 1rem; font-weight: 900; }
section.roadmap-section .cert-level { color: #527f69; }
section.roadmap-section .cert-title { color: var(--ink) !important; font-size: 1.5rem; line-height: 1.35; }
section.roadmap-section .cert-subtitle { margin-top: 5px; color: #66758c; font-size: .85rem; font-weight: 700; line-height: 1.5;  }
section.roadmap-section .value-note { display: block; margin-top: 8px; color: #3d8daa; }
/* 06. Advantages section */
section.advantages-section .advantages-grid { display: grid; gap: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); }
section.advantages-section .adv-card { display: grid; min-width: 0; overflow: hidden; padding: 0; grid-template-columns: minmax(0,1.2fr) minmax(180px,.8fr); }
section.advantages-section .adv-copy { display: flex; min-width: 0;  flex-direction: column; padding: 30px 16px 30px 30px; }
section.advantages-section .adv-number { position: absolute; z-index: 2; top: 0; right: 0; display: flex; width: 68px; height: 68px; align-items: flex-start; justify-content: flex-end; padding: 10px; background: linear-gradient(135deg,var(--red),var(--orange)); clip-path: polygon(0 0,100% 0,100% 100%); color: #fff; font-size: 1.125rem; font-weight: 900; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,.22); }
section.advantages-section .adv-card h3 { margin: 0 0 7px; color: var(--ink); font-size: 1.25rem; line-height: 1.6; }
section.advantages-section .adv-card h4 { margin: 0 0 12px; color: #4c8198; font-size: 1rem; }
section.advantages-section .adv-card p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.8; }
section.advantages-section .adv-card p + p { margin-top: 14px; }
section.advantages-section .adv-visual { position: relative; display: grid; min-width: 0; align-items: center; overflow: hidden; margin: 0; padding: 12px; }
section.advantages-section .adv-visual img { width: 100%; border-radius: 14px; }




/* 07. Skills section */
section.skills-section .skills-subtitle { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--ink); font-size: clamp(1.25rem,2vw,1.5rem); font-weight: 900; line-height: 1.5; }
section.skills-section .skills-subtitle::before { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 3px; background: var(--red); box-shadow: 0 0 0 5px rgba(255,63,77,.1); content: ""; }
section.skills-section .skills-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
section.skills-section .skill-panel { padding: 30px; border: 1px solid #dce4ee; border-radius: 20px; background: #fff; color: #081a33; box-shadow: 0 10px 24px rgba(8,26,51,.1); }
section.skills-section .skill-panel.skill-panel-red { border-top: 4px solid var(--red); }
section.skills-section .skill-panel.skill-panel-blue { border-top: 4px solid #268cad; }
section.skills-section .skill-panel .skill-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; font-size: 1.25rem; }
section.skills-section .skill-panel-red .skill-icon { background: #fff0ed; color: var(--red); }
section.skills-section .skill-panel-blue .skill-icon { background: #eaf7fb; color: #268cad; }
section.skills-section .skill-panel h3 { margin: 18px 0; color: #081a33; }
section.skills-section .skill-panel ul { margin: 0; padding: 0; list-style: none; }
section.skills-section .skill-panel li { position: relative; margin-top: 12px; padding: 16px 18px 16px 46px; border: 1px solid #e6ebf1; border-radius: 13px; background: #f6f8fb; color: #162b46; font-weight: 600; }
section.skills-section .skill-panel li::before { position: absolute; top: 50%; left: 18px; display: grid; place-items: center; width: 18px; height: 18px; transform: translateY(-50%); border-radius: 50%; color: #fff; font-size: 11px; font-weight: 900; content: "\2713"; }
section.skills-section .skill-panel-red li::before { background: var(--red); }
section.skills-section .skill-panel-blue li::before { background: #268cad; }



/* 08. Feedback section */
section.feedback-section .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
section.feedback-section .quote { position: relative; overflow: hidden; margin: 0; padding: 30px; border: 1px solid #dbe5f1; border-radius: 18px; background: #fff; color: #344054; box-shadow: 0 14px 34px rgba(18,42,70,.08); }
section.feedback-section .quote::after { position: absolute; top: 4px; right: 20px; color: rgba(38,140,173,.11); font-family: Georgia,"Times New Roman",serif; font-size: 7rem; font-weight: 900; line-height: 1; content: "\201D"; pointer-events: none; }
section.feedback-section .quote-avatar { position: relative; z-index: 1; width: 104px; height: 104px; margin: 0 0 20px; border: 2px solid rgba(38,140,173,.3); border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 8px 20px rgba(18,42,70,.1);font-size: 1rem; }




/* 09. Offer section */
section.offer-section .offer-wrap { position: relative; overflow: hidden; padding: 64px clamp(28px,6vw,76px); border: 1px solid rgba(255,63,77,.42); border-radius: 26px; background: linear-gradient(135deg,#071322,#01050B); box-shadow: 0 30px 80px rgba(8,17,31,.22),0 0 34px rgba(255,63,77,.1); text-align: center; }
section.offer-section .offer-wrap > * { position: relative; z-index: 2; }
section.offer-section .offer-wrap .section-kicker { display: inline-block; margin: 0 0 22px; padding: 7px 16px; border-radius: 99px; background: linear-gradient(135deg,var(--red),var(--orange)); color: #fff; letter-spacing: .08em; }
section.offer-section .offer-wrap h2, section.offer-section .offer-wrap h3 { color: #fff; }
section.offer-section .offer-wrap h2 { margin-bottom: 8px; }
section.offer-section .offer-wrap h3 { margin: 0; color: #FF4652; font-size: 1.5rem; line-height: 1.6; }
section.offer-section .offer-sub { margin: 12px 0 28px; color: #c8d5e7; font-size: 1rem; font-weight: 700; }
section.offer-section .offer-facts { display: flex; justify-content: center; gap: 0; margin-bottom: 30px; }
section.offer-section .offer-fact { display: flex; align-items: center; gap: 10px; padding: 0 30px; color: #d8e3f0; }
section.offer-section .offer-fact + .offer-fact { border-left: 1px solid rgba(255,255,255,.18); }
section.offer-section .offer-fact i { color: #78acd6; font-size: 1.25rem; }
section.offer-section .offer-fact:nth-child(2) i { color: #ffd490; }
section.offer-section .offer-fact strong { color: #fff; font-size: 1.125rem; }
section.offer-section .offer-bonus { display: flex; width: min(100%,760px); align-items: center; justify-content: center; gap: 12px; margin: 0 auto 38px; padding: 18px 22px; border: 1px solid rgba(255,63,77,.62); border-radius: 16px; background: linear-gradient(90deg,rgba(255,63,77,.16),rgba(255,116,67,.1)); color: #fff; font-weight: 800;font-size: 1.25rem; }
section.offer-section .offer-bonus i { color: #ffd490; font-size: 1.5rem; }
section.offer-section .offer-bonus strong { color: #f0b3b3; }
section.offer-section .offer-action { text-align: center; }
section.offer-section .offer-action .button { width: min(100%,480px); padding: 17px 24px; font-size: 1.35rem; transform-origin: center; }
section.offer-section .offer-action .button i { display: inline-flex; width: 1em; height: 1em; flex: 0 0 auto; align-items: center; justify-content: center; font-size: .9em; line-height: 1; transform: none; }
section.offer-section .offer-action .button:hover { transform: scale(1.03); }
section.offer-section .offer-action .button:active { transform: scale(1.01); }




/* 10. Responsive */
@media (max-width: 900px) {
  header.site-header .nav-inner { gap: 16px; }
  header.site-header nav { display: none; }
  header.site-header .nav-cta { margin-left: auto; }
  section.hero-section { min-height: auto; background-position: 82% center; }
  section.hero-section::before { top: -7%; right: -18%; width: 82%; height: 54%; transform-origin: 55% 88%; }
  section.hero-section::after { background: linear-gradient(90deg,rgba(1,6,13,.76),rgba(2,8,17,.42)); }
  section.hero-section .shield-energy { top: 43%; left: 73%; width: 330px; height: 430px; }
  section.hero-section .hero-layout { gap: 8px; grid-template-columns: 1fr; }
  section.hero-section h1 { font-size: 3.3rem; }
  section.trends-section .trends-layout { grid-template-columns: 1fr; }
  section.trends-section .trends-visual { width: min(100%,720px); margin-inline: auto; }
  section.roadmap-section .cert-table { font-size: 1rem; }
  section.advantages-section .advantages-grid { grid-template-columns: 1fr; }
  section.advantages-section .adv-card { grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr); }
}
@media (max-width: 700px) {
  header.site-header .nav-inner { min-height: 64px; gap: 12px; }
  header.site-header .brand { gap: 8px; font-size: .85rem; }
  header.site-header .brand-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
  header.site-header .brand small { font-size: .65rem; }
  header.site-header .nav-cta { padding: 9px 12px; font-size: .85rem; }
 
 
 
  section.hero-section { min-height: 680px; background-position: 87% center; }
  section.hero-section::before { top: -3%; right: -38%; width: 118%; height: 46%; opacity: .56; filter: blur(7px); }
  section.hero-section::after { background: linear-gradient(90deg,rgba(1,6,13,.82),rgba(2,8,17,.5)); }
  section.hero-section .shield-energy { top: 42%; left: 60%; width: 290px; height: 390px; opacity: .78; }
  section.hero-section .shield-energy span { right: 2%; }
  section.hero-section .hero-layout { padding-top: 48px; }
  section.hero-section h1 { font-size: 2.45rem; }
  section.hero-section .eyebrow { padding: 8px 20px; font-size: 1.2rem;line-height: 1.4; }
  section.hero-section .hero-lead { font-size: 1.25rem; }
  section.trends-section .trends-layout { gap: 34px; }
  section.trends-section .trends-list { gap: 24px; }
  section.trends-section .trend-item { gap: 13px; grid-template-columns: 42px minmax(0,1fr); }
  section.trends-section .trend-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 1.125rem; }
  section.trends-section .trend-copy h3 { font-size: 1.125rem; }
  section.trends-section .trends-visual { padding: 7px; border-radius: 15px; }
  section.trends-section .trends-visual img { border-radius: 10px; }
  
  
  section.roadmap-section .roadmap-subtitle { margin-bottom: 24px; padding-bottom: 11px; font-size: 1.25rem; }
  section.roadmap-section .roadmap-subtitle.spaced { margin-top: 44px; }
  section.roadmap-section .cert-combo { grid-template-columns: 1fr; }
  section.roadmap-section .plus { width: 44px; height: 44px; margin: 0 auto; }
  section.roadmap-section .pain-row { grid-template-columns: 1fr; }
  section.roadmap-section .pain-row > div { border-bottom: 1px solid #e1e8f0; }
  section.roadmap-section .pain-row > div + div { border-left: 0; }
  section.roadmap-section .pain-head { display: none; }
  section.roadmap-section span { text-align: left; }
  section.roadmap-section .cert-table, section.roadmap-section .cert-table tbody, section.roadmap-section .cert-table tr, section.roadmap-section .cert-table td { display: block; width: 100%; }
  section.roadmap-section .cert-table thead { display: none; }
  section.roadmap-section .cert-table td { border-right: 0; }
  section.roadmap-section .cert-table td::before { display: block; margin-bottom: 5px; color: #397f98; content: attr(data-label); font-size: 1rem; font-weight: 800; }
  
  
  section.advantages-section .adv-card { position: relative; grid-template-columns: 1fr; }
  section.advantages-section .adv-copy { padding: 24px 76px 24px 24px; }
  section.advantages-section .adv-visual { position: static; overflow: visible; padding: 12px; border-top: 0; border-left: 0; }
  section.advantages-section .adv-visual img { max-height: 300px; object-fit: contain; }
 
 
  section.roadmap-section .cert-name { gap: 14px; }
  section.roadmap-section .cert-badge { flex-basis: 96px; width: 96px; border-radius: 14px; }
  section.roadmap-section .cert-title { font-size: 1.25rem; }
  
   section.skills-section .skill-panel .skill-icon { font-size: 1.125rem; }
  section.skills-section .skills-wrap, section.feedback-section .quote-grid { grid-template-columns: 1fr; }
  
  
  section.offer-section .offer-wrap { padding: 32px 22px; }
  section.offer-section .offer-facts { flex-direction: column; }
  section.offer-section .offer-fact { width: 100%; justify-content: center; padding: 15px 0; }
  section.offer-section .offer-fact + .offer-fact { border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  section.offer-section .offer-bonus { align-items: flex-start; padding: 16px; text-align: left; }
  section.offer-section .offer-action .button { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  section.hero-section::before { animation: none; opacity: .5; }
  section.hero-section .shield-energy, section.hero-section .shield-energy::before, section.hero-section .shield-energy::after, section.hero-section .shield-energy span { animation: none; }
  section.roadmap-section .map-link::before { animation: none; }
  section.offer-section .offer-action .button { transition: none; }
  section.offer-section .offer-action .button:hover, section.offer-section .offer-action .button:active { transform: none; }
}