/* styles.css
   Holding page for UK broadband network (SearchSwitchSave.com group)
   Production-ready, fast, responsive, accessible
   Last updated: 12 February 2026
*/

/* -----------------------------
   Tokens
------------------------------ */
:root{
  --ink:#0b1a37;
  --muted:#4a5568;

  --bg:#e8f0fe;
  --paper:#ffffff;

  --panel:#2d3fe5;
  --panel2:#1f2cb8;

  --good:#1fbf6a;
  --warn:#e7a83a;

  --r-xl: 34px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --shadow: 0 16px 40px rgba(11, 26, 55, .14);
  --shadow2: 0 24px 58px rgba(11, 26, 55, .20);

  --pad: clamp(16px, 2.2vw, 34px);
  --gap: clamp(12px, 2vw, 22px);

  --h1: clamp(34px, 3.2vw, 56px);
  --h2: clamp(18px, 2.1vw, 24px);
  --lead: clamp(14.5px, 1.15vw, 16.5px);

  --focus: 0 0 0 6px rgba(45, 63, 229, .18);

  color-scheme: light;
}

/* -----------------------------
   Base
------------------------------ */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ height: 100%; overflow-x: hidden; }
body{ min-height: 100%; margin: 0; }

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(45, 63, 229, 0.12);
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:none;
  box-shadow: var(--focus);
  border-radius: 12px;
}

/* -----------------------------
   Skip link
------------------------------ */
.skip{
  position:absolute;
  left:-9999px;
  top:14px;
  z-index:50;
  padding:10px 12px;
  background: var(--paper);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.skip:focus{ left:14px; }

/* -----------------------------
   Light blue background with subtle animation
------------------------------ */
.page{
  min-height: 100svh;
  display:grid;
  place-items: start center;
  position:relative;
  overflow: visible;
  padding: clamp(16px, 3vw, 44px);
  padding-left: max(clamp(16px, 3vw, 44px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 3vw, 44px), env(safe-area-inset-right));
  padding-bottom: max(clamp(16px, 3vw, 44px), env(safe-area-inset-bottom));
}

.page::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--bg);
  z-index:0;
  animation: bg-shift 14s ease-in-out infinite;
}

/* Subtle ambient glow orbs */
.page::after{
  content:"";
  position:absolute;
  inset:-15%;
  background:
    radial-gradient(circle at 25% 35%, rgba(45,63,229,.07) 0 28%, transparent 30%),
    radial-gradient(circle at 75% 65%, rgba(45,63,229,.05) 0 32%, transparent 34%);
  z-index:0;
  pointer-events:none;
  animation: bg-float 20s ease-in-out infinite;
}

@keyframes bg-shift{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .97; }
}

@keyframes bg-float{
  0%, 100%{ transform: translate(0, 0); opacity: 1; }
  50%{ transform: translate(1%, -0.5%); opacity: .92; }
}

/* -----------------------------
   Shell card (no black borders)
------------------------------ */
.shell{
  width: min(1160px, 100%);
  background: rgba(255,255,255,.92);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  position:relative;
  z-index:1;
  overflow:hidden;
  backdrop-filter: blur(12px);
  animation: shell-appear .5s ease-out;
}

@keyframes shell-appear{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.shell__inner{
  padding: calc(var(--pad) + 6px);
  padding-top: calc(var(--pad) + 12px);
}

/* -----------------------------
   Header
------------------------------ */
.shell__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(11, 26, 55, .06);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.brand__mark{
  width:38px;
  height:38px;
  border-radius: 14px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(45,63,229,.80), transparent 60%),
    radial-gradient(20px 20px at 70% 45%, rgba(31,191,106,.70), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,0));
  box-shadow: 0 10px 24px rgba(11,26,55,.10);
}

.brand__text{ display:block; }

.brand__title{
  display:block;
  font-weight: 950;
  letter-spacing: -.01em;
  font-size: 13.5px;
}

.brand__sub{
  display:block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.nav__social{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
}

.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  color: var(--muted);
  transition: color .18s ease, background-color .18s ease;
}

.social-link:hover{
  color: var(--panel);
  background: rgba(45, 63, 229, .08);
}

.social-link__icon{
  width:20px;
  height:20px;
}

/* -----------------------------
   Buttons
------------------------------ */
.btn{
  min-height: 44px;
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(11, 26, 55, .10);
  border-radius: 12px;
  background: rgba(11, 26, 55, .03);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -.01em;
  cursor:pointer;
  transition: transform .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(11, 26, 55, .05);
  border-color: rgba(11, 26, 55, .14);
}

.btn:active{ transform: translateY(0); }

.btn--primary{
  background: rgba(45, 63, 229, .96);
  border-color: rgba(45, 63, 229, .50);
  color:#fff;
}

.btn--primary:hover{ filter: brightness(1.03); }

/* -----------------------------
   Hero
------------------------------ */
.hero{
  display:block;
  padding-top: 4px;
  padding-bottom: 8px;
}

.content{
  padding: clamp(18px, 2vw, 24px) clamp(14px, 2vw, 22px);
  border-radius: var(--r-lg);
  max-width: 720px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius: 999px;
  background: rgba(45,63,229,.10);
  font-weight: 950;
  letter-spacing: -.01em;
  margin:0;
}

.badge__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--good);
  box-shadow: 0 0 0 6px rgba(31,191,106,.14);
}

h1{
  font-size: var(--h1);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 20px 0 12px;
}

.lede{
  margin: 0 0 14px;
  font-size: var(--lead);
  color: var(--muted);
  max-width: 72ch;
}

.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 2px 8px rgba(11,26,55,.06);
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 900;
}

.pill__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(90,102,125,.55);
}

.pill--live .pill__dot{
  background: var(--good);
  box-shadow: 0 0 0 5px rgba(31,191,106,.12);
}

.pill--build .pill__dot{
  background: var(--warn);
  box-shadow: 0 0 0 5px rgba(231,168,58,.14);
}

.pill--uk .pill__dot{
  background: rgba(45,63,229,.92);
  box-shadow: 0 0 0 5px rgba(45,63,229,.12);
}

.ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 18px;
}

/* -----------------------------
   Sections
------------------------------ */
.section{
  padding-top: 28px;
  border-top: 1px solid rgba(11, 26, 55, .06);
}

.section:first-of-type{ border-top: none; padding-top: 24px; }

.section__title{
  margin: 0 0 10px;
  font-size: var(--h2);
  font-weight: 950;
  letter-spacing: -.01em;
  color: var(--ink);
}

.section__sub{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Cards grid */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 14px;
}

/* Card */
.card{
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 12px rgba(11,26,55,.06);
  padding: 16px 18px;
  display:flex;
  justify-content:space-between;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

a.card{ cursor:pointer; }

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,26,55,.10);
  background: #fff;
}

.card__left{
  min-width:0;
  display:grid;
  gap: 6px;
}

.card__domain{
  margin:0;
  font-weight: 950;
  letter-spacing: -.01em;
  font-size: 14.5px;
  word-break: break-word;
}

.card__desc{
  margin:0;
  color: var(--muted);
  font-size: 12.75px;
}

.card__right{
  display:grid;
  justify-items:end;
  align-content:center;
  gap: 8px;
  min-width: 150px;
}

/* Status pill (no dark outline) */
.status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(11,26,55,.06);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: -.01em;
  color: var(--ink);
}

.status__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(90,102,125,.55);
}

.status--live .status__dot{
  background: var(--good);
  box-shadow: 0 0 0 5px rgba(31,191,106,.12);
}

.status--build .status__dot{
  background: var(--warn);
  box-shadow: 0 0 0 5px rgba(231,168,58,.14);
}

/* Link accent */
.link{
  color: #2d3fe5;
  text-decoration: underline;
  text-decoration-color: rgba(45,63,229,.36);
  text-underline-offset: 3px;
  font-weight: 950;
  font-size: 12.5px;
  justify-self:end;
}

.card:hover .link{
  text-decoration-color: rgba(45,63,229,.60);
}

/* -----------------------------
   Author
------------------------------ */
.author{
  margin-top: 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 12px rgba(11,26,55,.06);
  padding: 18px 20px;
  display:grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items:start;
}

.author__avatar{
  width:46px;
  height:46px;
  border-radius: 18px;
  background:
    radial-gradient(18px 18px at 35% 35%, rgba(45,63,229,.75), transparent 60%),
    radial-gradient(22px 22px at 65% 45%, rgba(31,191,106,.70), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,0));
  box-shadow: 0 10px 24px rgba(11,26,55,.10);
}

.author__title{
  margin:0 0 4px;
  font-weight: 950;
  letter-spacing: -.01em;
}

.author__text{
  margin:0;
  color: var(--muted);
  font-size: 13px;
}

/* -----------------------------
   Footer
------------------------------ */
.footer{
  margin-top: 24px;
  padding-top: 16px;
  display:flex;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 12.5px;
}

.footer a,
.footer .link{
  color: #2d3fe5;
}

.footer__actions{
  display:flex;
  align-items:center;
  gap: 16px;
  flex-wrap:wrap;
}

.footer__social{
  display:inline-flex;
  align-items:center;
  gap: 12px;
}

.social-link--footer{
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 700;
}

.social-link--footer:hover{
  background: transparent;
  text-decoration: underline;
}

/* -----------------------------
   Responsive
------------------------------ */
/* Tablet: single column cards, stacked nav */
@media (max-width: 880px){
  .cards{ grid-template-columns: 1fr; }
  .card__right{ min-width: 0; justify-items: start; }
  .link{ justify-self: start; }
}

/* Mobile: full-width buttons, tighter spacing */
@media (max-width: 600px){
  .shell__inner{ padding: var(--pad); }
  .shell__header{ flex-direction: column; align-items: stretch; }
  .brand{ justify-content: flex-start; }
  .nav{ width: 100%; justify-content: stretch; }
  .nav .btn{ flex: 1; min-width: 0; justify-content: center; }
  .nav__social{ margin-left: 0; margin-top: 4px; }
  .ctas .btn{ flex: 1; min-width: 140px; }
  .meta-row{ gap: 8px; }
  .section{ padding-top: 18px; }
}

@media (max-width: 480px){
  .page{ padding: 12px; }
  .btn{ min-height: 44px; height: auto; padding: 12px 14px; }
  .nav{ flex-direction: column; }
  .nav .btn{ width: 100%; }
  .nav__social{ justify-content: center; margin-top: 8px; }
  .ctas{ flex-direction: column; }
  .ctas .btn{ width: 100%; }
  .footer__actions{ flex-direction: column; align-items: flex-start; }
}

/* -----------------------------
   Reduced motion
------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}