/* =========================================================
   IPTV UK About — dedicated page layer
   Reuses the shared design system, components and animations.
   ========================================================= */

.about-page{background:#fff}
.about-page main{overflow:hidden}
.about-page .section{padding-block:clamp(4.75rem,7.5vw,8rem)}
.about-page .section-copy>p+p,.trust-copy>p+p{margin-top:1rem}
.about-page .icon-box svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Hero */
.about-hero{position:relative;min-height:58rem;padding:calc(var(--header) + 5rem) 0 6rem;overflow:hidden;background:radial-gradient(circle at 78% 30%,rgba(11,61,145,.24),transparent 27rem),radial-gradient(circle at 16% 18%,rgba(200,16,46,.18),transparent 23rem),linear-gradient(145deg,#0a1931 0%,#0b1e3a 50%,#0c1c34 100%);isolation:isolate}
.about-hero::after{position:absolute;z-index:-2;right:-15rem;bottom:-22rem;width:48rem;height:48rem;border:1px solid rgba(255,255,255,.05);border-radius:50%;box-shadow:0 0 0 6rem rgba(255,255,255,.014),0 0 0 12rem rgba(255,255,255,.009);content:""}
.about-hero__grid{position:absolute;z-index:-3;inset:0;background-image:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);background-size:4rem 4rem;mask-image:linear-gradient(to bottom,#000,transparent 94%)}
.about-hero__glow{position:absolute;z-index:-2;width:30rem;height:30rem;border-radius:50%;filter:blur(5rem);opacity:.42}
.about-hero__glow--one{top:6rem;left:-16rem;background:rgba(11,61,145,.38)}
.about-hero__glow--two{right:-12rem;bottom:3rem;background:rgba(200,16,46,.3)}
.about-hero__layout{display:grid;min-height:44rem;align-items:center;grid-template-columns:minmax(0,.96fr) minmax(31rem,1.04fr);gap:clamp(3rem,6vw,6rem)}
.about-hero__copy{position:relative;z-index:10;max-width:45rem}
.about-breadcrumb ol{display:flex;align-items:center;gap:.65rem;margin-bottom:2rem;color:rgba(255,255,255,.48);font-size:var(--xs);font-weight:700}
.about-breadcrumb li+li::before{margin-right:.65rem;color:rgba(255,255,255,.25);content:"/"}
.about-breadcrumb a{transition:color .2s}.about-breadcrumb a:hover{color:#fff}
.about-hero h1{margin-top:1.45rem;color:#fff;font-size:clamp(3.2rem,5.3vw,6rem);font-weight:790;letter-spacing:-.075em}
.about-hero__copy>p{max-width:42rem;margin-top:1.55rem;color:rgba(255,255,255,.68);font-size:var(--lg);line-height:1.78}
.about-hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.1rem}
.about-hero__proof{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.about-hero__proof span{padding:.55rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--pill);background:rgba(255,255,255,.045);color:rgba(255,255,255,.62);font-size:.77rem;font-weight:650;backdrop-filter:blur(.75rem)}
.about-hero__visual{position:relative;min-height:39rem;perspective:1100px;transform-style:preserve-3d}
.about-hero__visual::before{position:absolute;top:10%;left:9%;width:82%;height:78%;border-radius:50%;background:radial-gradient(circle,rgba(11,61,145,.23),transparent 65%);content:"";filter:blur(2.5rem)}
.about-visual-orbit{position:absolute;top:50%;left:50%;border:1px solid rgba(255,255,255,.075);border-radius:50%;transform:translate(-50%,-50%) rotate(-12deg)}
.about-visual-orbit--one{width:38rem;height:24rem}.about-visual-orbit--two{width:30rem;height:30rem;transform:translate(-50%,-50%) rotate(28deg)}
.about-visual-card{position:absolute;z-index:5;top:11%;left:5%;width:90%;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:2rem;background:linear-gradient(145deg,rgba(16,30,52,.96),rgba(7,17,31,.88));box-shadow:0 4rem 8rem rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.16);transform:rotateY(-7deg) rotateX(2deg) rotateZ(1deg);backdrop-filter:blur(1.5rem)}
.about-visual-card::after{position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.12),transparent 28%,transparent 72%,rgba(200,16,46,.08));content:"";pointer-events:none}
.about-visual-card img{width:100%;height:auto}
.about-float-card{position:absolute;z-index:9;border:1px solid rgba(255,255,255,.14);background:rgba(10,20,36,.72);box-shadow:0 1.8rem 3.5rem rgba(0,0,0,.3);color:#fff;backdrop-filter:blur(1rem);animation:floatBadge 8s ease-in-out infinite}
.about-float-card--support{right:-1rem;bottom:12%;display:grid;min-width:8.7rem;padding:1rem 1.1rem;border-radius:1.3rem;text-align:center;animation-delay:-2s}
.about-float-card--support span{font-size:2rem;font-weight:850;letter-spacing:-.06em;line-height:1}.about-float-card--support small{margin-top:.3rem;color:rgba(255,255,255,.54);font-size:.67rem;text-transform:uppercase}
.about-float-card--setup{bottom:3%;left:-1rem;display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border-radius:1.15rem;animation-delay:-5s}
.about-float-card--setup b{display:grid;width:2.1rem;height:2.1rem;place-items:center;border-radius:.7rem;background:var(--gradient)}
.about-float-card--setup span{display:grid}.about-float-card--setup strong{font-size:.77rem}.about-float-card--setup small{color:rgba(255,255,255,.46);font-size:.62rem}

/* Story */
.story-layout{display:grid;align-items:center;grid-template-columns:minmax(0,.88fr) minmax(30rem,1.12fr);gap:clamp(3rem,8vw,7.5rem)}
.story-principles{position:relative;padding:clamp(1.5rem,3vw,2.25rem);border:1px solid var(--border);border-radius:2rem;background:linear-gradient(145deg,#fff,#f8f9fc);box-shadow:var(--shadow-md)}
.story-principles::before{position:absolute;top:-4rem;right:-4rem;width:12rem;height:12rem;border-radius:50%;background:radial-gradient(circle,rgba(11,61,145,.13),transparent 68%);content:""}
.story-principles__top{position:relative;padding:1rem 1rem 2rem;border-bottom:1px solid var(--border)}
.story-principles__top span{color:var(--primary);font-size:var(--xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.story-principles__top strong{display:block;max-width:28rem;margin-top:.65rem;font-size:clamp(1.7rem,3vw,2.65rem);letter-spacing:-.055em;line-height:1.08}
.story-principles__grid{display:grid;grid-template-columns:1fr 1fr}
.story-principles__grid article{position:relative;min-height:13rem;padding:2rem 1rem}
.story-principles__grid article:nth-child(odd){border-right:1px solid var(--border)}
.story-principles__grid article:nth-child(-n+2){border-bottom:1px solid var(--border)}
.story-principles__grid span{color:var(--primary);font-size:.72rem;font-weight:850;letter-spacing:.1em}
.story-principles__grid h3{margin-top:1.25rem;font-size:var(--lg)}
.story-principles__grid p{margin-top:.65rem;font-size:var(--sm)}

/* Mission and choice cards */
.mission-grid .feature-card{min-height:18rem}
.mission-grid .feature-card h3{margin-top:1.35rem}
.choice-section .section-heading--split>p{max-width:34rem;margin:0}
.choice-grid .benefit-card{min-height:18rem}
.choice-grid .benefit-card h3{margin-top:2rem}

/* Numbers */
.about-numbers{position:relative;padding-block:clamp(5rem,8vw,8rem);overflow:hidden;background:radial-gradient(circle at 50% -20%,rgba(11,61,145,.22),transparent 36rem),linear-gradient(145deg,#0a1931,#091426 55%,#0b1020);isolation:isolate}
.about-numbers__grid{position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:4rem 4rem;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.about-numbers .section-heading h2{color:#fff}.about-numbers .section-heading p{max-width:45rem;color:rgba(255,255,255,.58)}
.number-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.number-card{position:relative;min-height:14rem;padding:2rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);text-align:center;backdrop-filter:blur(1rem)}
.number-card::before{position:absolute;top:0;left:20%;width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(123,177,255,.75),transparent);content:""}
.number-card dt{margin-top:1rem;color:#fff;font-size:clamp(2.7rem,5vw,4.8rem);font-weight:850;letter-spacing:-.075em;line-height:1}
.number-card sup{margin-left:.12rem;color:#8dbaff;font-size:.4em;vertical-align:top}
.number-card dd{max-width:12rem;margin:1.15rem auto 0;color:rgba(255,255,255,.52);font-size:var(--sm)}

/* Devices */
.about-device-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.about-device-grid .device-card{min-height:13rem}
.about-device-grid .device-card>div{font-size:1.25rem;font-weight:850;letter-spacing:-.04em}

/* Process */
.process-timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:process}
.process-timeline::before{position:absolute;top:3.6rem;right:11%;left:11%;height:1px;background:linear-gradient(90deg,rgba(11,61,145,.2),rgba(200,16,46,.55),rgba(11,61,145,.2));content:""}
.process-step{position:relative;z-index:1;min-height:22rem;padding:1.35rem;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm);transition:transform .35s var(--spring),box-shadow .3s}
.process-step:hover{box-shadow:var(--shadow-md);transform:translateY(-6px)}
.process-step>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border:1px solid rgba(11,61,145,.16);border-radius:1.45rem;background:linear-gradient(145deg,rgba(11,61,145,.13),rgba(200,16,46,.08));color:var(--primary);font-size:1.05rem;font-weight:850;box-shadow:0 14px 30px rgba(11,61,145,.1)}
.process-step>div{padding:2rem .45rem .75rem}.process-step small{color:var(--primary);font-size:.7rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.process-step h3{margin-top:.75rem}.process-step p{margin-top:.9rem;font-size:var(--sm)}
.process-step:not(:last-child)::after{position:absolute;z-index:2;top:2.9rem;right:-1.15rem;width:1.3rem;color:var(--primary);content:"→";font-size:1.15rem;font-weight:850;text-align:center}

/* Trust */
.trust-layout{display:grid;align-items:center;grid-template-columns:minmax(0,.8fr) minmax(32rem,1.2fr);gap:clamp(3rem,7vw,7rem)}
.trust-copy h2{margin-top:1rem}.trust-copy>p{margin-top:1.25rem;font-size:var(--lg)}.trust-copy .text-link{margin-top:1.75rem}
.trust-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.trust-card{min-height:17rem;padding:2rem;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:0 10px 35px rgba(17,24,39,.045);transition:transform .35s var(--spring),box-shadow .3s}
.trust-card:hover{box-shadow:var(--shadow-md);transform:translateY(-6px)}
.trust-card h3{margin-top:1.45rem}.trust-card p{margin-top:.8rem;font-size:var(--sm)}

.about-page .cta-banner{min-height:26rem}

@media(max-width:1100px){
  .about-hero__layout{grid-template-columns:minmax(0,1fr) minmax(27rem,.9fr);gap:2.5rem}
  .about-visual-orbit--one{width:31rem}.about-visual-orbit--two{width:26rem;height:26rem}
  .story-layout,.trust-layout{gap:3rem}
  .about-device-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:900px){
  .about-hero{min-height:auto;padding-bottom:5rem}
  .about-hero__layout,.story-layout,.trust-layout{grid-template-columns:1fr}
  .about-hero__copy{max-width:48rem}
  .about-hero__visual{width:min(100%,42rem);min-height:36rem;margin:0 auto}
  .story-layout{gap:3.5rem}.story-principles{max-width:46rem;margin-inline:auto}
  .choice-section .section-heading--split{display:block}.choice-section .section-heading--split>p{max-width:42rem;margin-top:1.25rem}
  .number-grid,.process-timeline{grid-template-columns:1fr 1fr}
  .process-timeline::before{display:none}.process-step:not(:last-child)::after{display:none}
  .about-device-grid{grid-template-columns:repeat(3,1fr)}
  .trust-copy{max-width:44rem}
}

@media(max-width:680px){
  .about-page .section{padding-block:4.5rem}
  .about-hero{padding-top:calc(var(--header) + 3.5rem)}
  .about-hero h1{font-size:clamp(3rem,15vw,4.5rem)}
  .about-hero__actions{display:grid}.about-hero__actions .button{width:100%}
  .about-hero__visual{min-height:28rem;margin-top:1.5rem}
  .about-visual-card{top:12%;left:2%;width:96%;border-radius:1.35rem;transform:rotateY(-3deg) rotateX(1deg)}
  .about-visual-orbit--one{width:23rem;height:16rem}.about-visual-orbit--two{width:20rem;height:20rem}
  .about-float-card--support{right:0;bottom:8%;min-width:7.5rem}.about-float-card--setup{bottom:0;left:0}
  .story-principles{padding:1rem}.story-principles__grid{grid-template-columns:1fr}.story-principles__grid article{min-height:auto;padding:1.5rem .75rem;border-right:0!important;border-bottom:1px solid var(--border)}.story-principles__grid article:last-child{border-bottom:0}
  .number-grid,.process-timeline,.trust-card-grid{grid-template-columns:1fr}
  .number-card{min-height:12rem}
  .about-device-grid{grid-template-columns:1fr 1fr}.about-device-grid .device-card{min-height:12rem;padding:1.25rem .75rem}
}

@media(max-width:430px){
  .about-hero__visual{min-height:24rem}.about-float-card--setup{display:none}.about-float-card--support{bottom:3%;transform:scale(.9);transform-origin:right bottom}
  .about-device-grid{grid-template-columns:1fr}
}