/* ==========================================================================
   XSECURE — PRODUCT PAGE COMPONENTS (services/xdr.html, services/xwaf.html)
   Visual language from the product decks (xdr.pptx, waf.pptx): white line
   icons on royal-blue badges (hexagons and half-circle tabs), red for
   threats, notched "folder" cards. Page-specific sections: xdr.css, xwaf.css
   --------------------------------------------------------------------------
   1. Tokens & section frame
   2. Icons, icon animations & badges
   3. Tab card
   4. Banner + feature cards
   5. Responsive
   ========================================================================== */

/* 1. TOKENS & SECTION FRAME =============================================== */
.page-product {
    --p-blue: #2b46ff;
    --p-blue-deep: #0d1a9c;
    --p-blue-soft: rgba(43, 70, 255, 0.14);
    --p-red: #e0262f;
    --p-red-deep: #9e0f1a;
    --p-surface: rgba(255, 255, 255, 0.035);
    --p-border: rgba(140, 160, 255, 0.18);
    --p-gap: 28px;
}

.p-section {
    width: 100%;
    padding: 120px var(--page-gutter);
}

.p-wrapper {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.p-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.p-heading .section-title {
    margin-bottom: 0;
}

.p-heading p {
    max-width: 640px;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.p-panel {
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-radius: var(--radius);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

:where(.page-product) h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 2. ICONS & BADGES ======================================================= */
.ico {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    overflow: visible;
}

.ico .t  { stroke-width: 2.2; }
.ico .d  { fill: currentColor; fill-opacity: 0.2; }
.ico .d2 { fill: currentColor; fill-opacity: 0.45; }
.ico .f  { fill: currentColor; stroke: none; }

/* Icon animations — each moving part rotates/scales around its own centre */
.ico [class*="a-"] {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: 2.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ico .a-d2 { animation-delay: 0.4s; }
.ico .a-d3 { animation-delay: 0.8s; }

.ico .a-spin      { animation-name: ico-spin; animation-duration: 9s; animation-timing-function: linear; }
.ico .a-spin-slow { animation-name: ico-spin; animation-duration: 16s; animation-timing-function: linear; }
.ico .a-dash      { stroke-dasharray: 2.5 3.5; animation-name: ico-dash; animation-duration: 1.2s; animation-timing-function: linear; }
.ico .a-node      { animation-name: ico-node; }
.ico .a-n1        { animation-delay: 0.6s; }
.ico .a-n2        { animation-delay: 1.2s; }
.ico .a-n3        { animation-delay: 1.8s; }
.ico .a-pulse     { animation-name: ico-pulse; animation-duration: 1.6s; }
.ico .a-scan      { animation-name: ico-scan; animation-direction: alternate; animation-duration: 1.8s; }
.ico .a-scanx     { animation-name: ico-scanx; animation-direction: alternate; animation-duration: 2.2s; }
.ico .a-signal    { animation-name: ico-signal; animation-duration: 1.4s; }
.ico .a-bar       { transform-origin: bottom; animation-name: ico-bar; animation-direction: alternate; animation-duration: 1.2s; }
.ico .a-wobble    { animation-name: ico-wobble; animation-duration: 3s; }
.ico .a-ping      { animation-name: ico-ping; animation-duration: 2s; animation-timing-function: ease-out; }
.ico .a-draw      { stroke-dasharray: 20; animation-name: ico-draw; animation-duration: 3s; }
.ico .a-line      { stroke-dasharray: 60; animation-name: ico-line; animation-duration: 3.2s; }
.ico .a-look      { animation-name: ico-look; animation-duration: 4s; }
.ico .a-blink     { animation-name: ico-blink; animation-duration: 1.1s; animation-timing-function: steps(2, jump-none); }
.ico .a-legs      { transform-origin: right center; animation-name: ico-legs; animation-duration: 0.5s; animation-direction: alternate; }
.ico .a-legs--r   { transform-origin: left center; animation-delay: 0.25s; }
.ico .a-type      { stroke-dasharray: 18; animation-name: ico-type; animation-duration: 2.6s; }
.ico .a-shake     { animation-name: ico-shake; animation-duration: 0.6s; }
.ico .a-vanish    { animation-name: ico-vanish; animation-duration: 3s; }
.ico .a-up        { animation-name: ico-up; animation-duration: 1.6s; }
.ico .a-hunt      { animation-name: ico-hunt; animation-duration: 3.6s; }
.ico .a-float     { animation-name: ico-float; animation-direction: alternate; animation-duration: 1.6s; }
.ico .a-eyeblink  { animation-name: ico-eyeblink; animation-duration: 4s; }
.ico .a-drop      { animation-name: ico-drop; animation-duration: 1.4s; animation-timing-function: ease-in; }
.ico .a-flame     { transform-origin: bottom; animation-name: ico-flame; animation-duration: 0.7s; animation-direction: alternate; }
.ico .a-pop       { animation-name: ico-pop; animation-duration: 2.4s; }

@keyframes ico-spin     { to { transform: rotate(360deg); } }
@keyframes ico-dash     { to { stroke-dashoffset: -12; } }
@keyframes ico-node     { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); fill-opacity: 0.9; } }
@keyframes ico-pulse    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes ico-scan     { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes ico-scanx    { from { transform: translateX(0); } to { transform: translateX(28px); } }
@keyframes ico-signal   { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes ico-bar      { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }
@keyframes ico-wobble   { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes ico-ping     { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ico-draw     { 0% { stroke-dashoffset: 20; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ico-line     { 0% { stroke-dashoffset: 60; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0.2; } }
@keyframes ico-look     { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
@keyframes ico-blink    { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes ico-legs     { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes ico-type     { 0% { stroke-dashoffset: 18; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes ico-shake    { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes ico-vanish   { 0%, 40% { opacity: 1; transform: scale(1); } 70% { opacity: 0; transform: scale(0.4); } 100% { opacity: 0; transform: scale(0.4); } }
@keyframes ico-up       { 0% { transform: translateY(5px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } }
@keyframes ico-hunt     { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-9px, 3px); } 66% { transform: translate(-3px, -3px); } }
@keyframes ico-float    { from { transform: translateY(1.5px); } to { transform: translateY(-1.5px); } }
@keyframes ico-eyeblink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.1); } }
@keyframes ico-drop     { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes ico-flame    { from { transform: scale(0.9, 0.85); } to { transform: scale(1.05, 1.1); } }
@keyframes ico-pop      { 0%, 15% { transform: scale(0); } 30%, 85% { transform: scale(1); } 100% { transform: scale(0); } }

/* Hexagon badge with a light rim, as on slides 2–4 */
.hex {
    --hex-size: 92px;
    --hex-from: var(--p-blue);
    --hex-to: var(--p-blue-deep);
    --hex-rim: rgba(170, 185, 255, 0.75);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--hex-size);
    height: calc(var(--hex-size) * 1.12);
    color: #ffffff;
    background: var(--hex-rim);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    filter: drop-shadow(0 10px 22px rgba(43, 70, 255, 0.45));
}

.hex::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: linear-gradient(160deg, var(--hex-from), var(--hex-to));
    clip-path: inherit;
}

.hex .ico {
    position: relative;
    width: 46%;
    height: 46%;
}

.hex--sm  { --hex-size: 64px; }
.hex--lg  { --hex-size: 120px; }

.hex--red {
    --hex-from: var(--p-red);
    --hex-to: var(--p-red-deep);
    --hex-rim: rgba(255, 170, 170, 0.75);
    filter: drop-shadow(0 10px 24px rgba(224, 38, 47, 0.45));
}

.hex--cyan {
    --hex-from: var(--color-accent);
    --hex-to: #0a6f96;
    --hex-rim: rgba(190, 250, 255, 0.85);
    color: var(--color-bg);
    filter: drop-shadow(0 10px 26px var(--color-accent-glow));
}

/* Square icon tile (slide 4 response steps) */
.tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(160deg, var(--p-red), var(--p-red-deep));
    box-shadow: 0 8px 18px rgba(224, 38, 47, 0.3);
}

.tile .ico { width: 26px; height: 26px; }

.tile--blue {
    background: linear-gradient(160deg, var(--p-blue), var(--p-blue-deep));
    box-shadow: 0 8px 18px rgba(43, 70, 255, 0.3);
}

/* 3. TAB CARD ============================================================= */
/* Notched folder card with a half-circle icon tab on its left edge */
.tab-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 112px;
    margin-top: 14px;
    padding: 22px 26px 22px 104px;
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.tab-card::before {
    content: '';
    position: absolute;
    left: -1px;
    top: -15px;
    width: 92px;
    height: 15px;
    background: inherit;
    border: 1px solid var(--p-border);
    border-bottom: none;
    border-radius: 12px 18px 0 0;
}

.tab-card:hover {
    transform: translateX(6px);
    border-color: rgba(140, 160, 255, 0.45);
    background: rgba(43, 70, 255, 0.08);
}

.tab-card__icon {
    position: absolute;
    left: -1px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 88px;
    color: #ffffff;
    background: linear-gradient(160deg, var(--p-blue), var(--p-blue-deep));
    border-radius: 0 44px 44px 0;
    box-shadow: 8px 0 22px rgba(43, 70, 255, 0.35);
    transform: translateY(-50%);
}

.tab-card__icon .ico {
    width: 40px;
    height: 40px;
    margin-left: -6px;
}

.tab-card h3 {
    font-size: 1.05rem;
}

.tab-card p {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* 4. BANNER + FEATURE CARDS ============================================== */
.features {
    position: relative;
    padding: 0 32px 40px;
    overflow: hidden;
}

/* Circuit-shield banner from slide 3 */
.features__banner {
    height: 260px;
    margin: 0 -32px;
    background: var(--banner-image) center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.features__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--p-gap);
    margin-top: -90px;
    list-style: none;
}

.feature-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 28px 30px;
    background: rgba(13, 18, 43, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--p-border);
    border-radius: var(--radius);
    transition: transform var(--transition), border-color var(--transition);
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(140, 160, 255, 0.45);
}

.feature-card .hex {
    margin: -38px auto 6px;
}

.feature-card h3 {
    font-size: 1.08rem;
    line-height: 1.4;
    text-align: center;
}

.feature-card p {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .ico [class*="a-"] { animation: none !important; }
}

/* 5. RESPONSIVE =========================================================== */
@media (min-width: 1500px) {
    .p-wrapper { max-width: 1400px; }
}

@media (max-width: 1024px) {
    .p-section { padding: 100px 4%; }

    .features__grid { grid-template-columns: 1fr; gap: 60px; max-width: 560px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 576px) {
    .tab-card { padding: 18px 18px 18px 90px; }
    .tab-card__icon { width: 66px; height: 78px; }
    .tab-card__icon .ico { width: 30px; height: 30px; }

    .features { padding: 0 16px 24px; }
    .features__banner { height: 200px; margin: 0 -16px; }
}