/* ==========================================================================
   mediacdn.com — by Gloman
   Aesthetic: broadcast control room. Near-black rack panel, amber phosphor
   signal, wide technical type, monospace telemetry.
   ========================================================================== */

:root{
  --ink:        #08090a;
  --ink-2:      #0e1012;
  --panel:      #121518;
  --line:       #23282d;
  --line-hot:   #333a41;

  --fg:         #e8e6e1;
  --fg-dim:     #9aa0a6;
  --fg-faint:   #646a70;

  --sig:        #ffb01f;   /* phosphor amber — the one accent */
  --sig-deep:   #c77c00;
  --live:       #3ddc84;   /* on-air green, status only */

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;

  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --rule: 1px solid var(--line);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* faint rack-panel glow from the top-left, never a flat fill */
  background-image:
    radial-gradient(120ch 70ch at 12% -10%, rgba(255,176,31,.075), transparent 62%),
    radial-gradient(90ch 60ch at 95% 8%, rgba(255,176,31,.032), transparent 60%),
    linear-gradient(180deg, #0b0d0e 0%, var(--ink) 34%, #060708 100%);
  background-attachment:fixed;
}

/* ── texture overlays ──────────────────────────────────────────────────── */
.grain,.scan{ position:fixed; inset:0; pointer-events:none; z-index:90; }
.grain{
  opacity:.38; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.scan{
  opacity:.5;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.017) 0 1px, transparent 1px 3px);
}

/* ── load choreography ─────────────────────────────────────────────────── */
[data-r]{ opacity:0; transform:translateY(14px); animation:rise .78s cubic-bezier(.22,.7,.28,1) forwards; }
[data-r="1"]{ animation-delay:.06s } [data-r="2"]{ animation-delay:.14s }
[data-r="3"]{ animation-delay:.24s } [data-r="4"]{ animation-delay:.38s }
[data-r="5"]{ animation-delay:.5s  } [data-r="6"]{ animation-delay:.6s  }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ── chrome ────────────────────────────────────────────────────────────── */
a{ color:inherit; }

.topbar{
  position:relative; z-index:2;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.5rem var(--gut) 1.15rem;
  border-bottom:var(--rule);
}
.mark{
  display:inline-flex; align-items:center;
  font-family:var(--sans); font-weight:800; font-stretch:112%;
  font-size:1.0625rem; letter-spacing:-.015em; text-decoration:none;
}
.mark__tld{ color:var(--fg-faint); font-weight:500; }
.mark__dot{
  width:7px; height:7px; margin-right:.6rem; border-radius:50%;
  background:var(--sig); box-shadow:0 0 12px 1px rgba(255,176,31,.65);
}
.topbar__by{
  margin:0; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint);
}
.topbar__by a{ color:var(--fg-dim); text-decoration:none; border-bottom:1px solid var(--line-hot); }
.topbar__by a:hover{ color:var(--sig); border-color:var(--sig); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding:clamp(3.5rem,9vw,7.5rem) var(--gut) clamp(3rem,6vw,5rem);
  max-width:110rem;
}

.status{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 clamp(1.5rem,4vw,2.5rem);
  padding:.4rem .85rem .42rem;
  border:1px solid var(--line-hot); border-radius:2px;
  background:rgba(255,255,255,.015);
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim);
}
.status__led{
  width:6px; height:6px; border-radius:50%; background:var(--live);
  box-shadow:0 0 0 0 rgba(61,220,132,.55); animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(61,220,132,.5); }
  70%{ box-shadow:0 0 0 9px rgba(61,220,132,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,132,0); }
}

.hero__title{
  margin:0; font-weight:900; font-stretch:125%;
  /* Stacked MEDIA / CDN lockup. 4.2em is the measured advance width of the
     longer word in Archivo 900 @125% width, so sizing off the available
     width keeps the lockup flush to the gutters and never re-wraps. */
  font-size:min(13rem, calc((100vw - 2 * var(--gut)) / 4.2));
  line-height:.82; letter-spacing:-.045em; text-transform:uppercase;
}
.hero__title span{ display:block; }
.hero__title--accent{
  color:var(--sig);
  text-shadow:0 0 42px rgba(255,176,31,.28);
}

.hero__lede{
  max-width:46ch; margin:clamp(1.75rem,4vw,2.6rem) 0 0;
  font-size:clamp(1.0625rem,.98rem + .5vw,1.35rem);
  line-height:1.52; color:var(--fg-dim);
}
.hero__lede strong{ color:var(--fg); font-weight:600; }

/* audio waveform — the motif */
.wave{
  display:flex; align-items:flex-end; gap:3px;
  height:56px; margin:clamp(2.25rem,5vw,3.25rem) 0 0;
  max-width:34rem;
}
.wave i{
  flex:1; min-width:2px; height:var(--a); border-radius:1px;
  background:linear-gradient(180deg,var(--sig),var(--sig-deep));
  opacity:.55; transform-origin:bottom;
  animation:pulse 1.5s var(--d) ease-in-out infinite alternate;
}
/* --a is the per-bar ceiling, so the row reads as a waveform even frozen */
@keyframes pulse{
  from{ height:10%; opacity:.26 }
  to{ height:var(--a); opacity:.9 }
}

.figures{
  display:flex; flex-wrap:wrap; gap:0; margin:clamp(2.5rem,6vw,4rem) 0 0;
  border-top:var(--rule); max-width:58rem;
}
.figures > div{
  flex:1 1 11rem; padding:1.15rem 1.35rem 1.15rem 0;
  border-right:var(--rule);
}
.figures > div:last-child{ border-right:0; }
.figures > div + div{ padding-left:1.35rem; }
.figures dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-faint);
}
.figures dd{
  margin:.35rem 0 0; font-weight:800; font-stretch:112%;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem); letter-spacing:-.03em;
  color:var(--fg);
}

/* Wide screens: the stacked lockup leaves the right half empty, so the lede
   and the waveform sit side by side under it instead of stacking again. */
@media (min-width: 900px){
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(2rem,4vw,4.5rem);
    align-items:end;
  }
  .hero > *{ grid-column:1/-1; }
  .hero__lede{ grid-column:1; }
  .wave{
    grid-column:2; align-self:end;
    margin-top:0; margin-bottom:.4rem; max-width:none;
    height:clamp(56px,7vw,86px);
  }
}

/* ── section heading rule ──────────────────────────────────────────────── */
.sect__h{
  margin:0 0 clamp(1.75rem,4vw,2.75rem);
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint);
  display:flex; align-items:center; gap:1rem;
}
.sect__h::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ── services ──────────────────────────────────────────────────────────── */
.services{
  padding:clamp(3.5rem,7vw,6rem) var(--gut);
  border-top:var(--rule);
}
/* 1px grid gap over a line-coloured backdrop draws the hairlines between
   cards — no per-card borders to reconcile when they wrap. */
.cards{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  background:var(--line);
  border:var(--rule);
}

.card{
  position:relative; overflow:hidden;
  padding:clamp(1.75rem,3vw,2.5rem);
  background:linear-gradient(175deg,var(--panel),var(--ink-2));
  transition:background .4s ease;
}
.card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--sig); transform:scaleY(0); transform-origin:top;
  transition:transform .45s cubic-bezier(.22,.7,.28,1);
}
.card:hover{ background:linear-gradient(175deg,#171b1f,#101315); }
.card:hover::before{ transform:scaleY(1); }

.card__idx{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; color:var(--sig-deep);
}
.card h3{
  margin:.9rem 0 .8rem; font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);
  font-weight:700; font-stretch:105%; letter-spacing:-.025em; line-height:1.15;
}
.card p{ margin:0; color:var(--fg-dim); font-size:.9375rem; line-height:1.65; }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.5rem 0 0; padding:0; list-style:none; }
.tags li{
  padding:.25rem .55rem; border:1px solid var(--line-hot); border-radius:2px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  color:var(--fg-faint); white-space:nowrap;
}

/* ── domain record terminal ────────────────────────────────────────────── */
.record{
  padding:clamp(3.5rem,7vw,6rem) var(--gut);
  border-top:var(--rule);
}
.term{
  max-width:64rem; border:1px solid var(--line-hot); border-radius:4px;
  background:#0b0d0f; overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.035);
}
.term__bar{
  display:flex; align-items:center; gap:.45rem;
  padding:.7rem .95rem; border-bottom:1px solid var(--line);
  background:#101315;
}
.term__bar span{ width:9px; height:9px; border-radius:50%; background:var(--line-hot); }
.term__bar span:first-child{ background:var(--sig-deep); }
.term__bar em{
  margin-left:.65rem; font-style:normal;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.07em; color:var(--fg-faint);
}
.term__body{
  margin:0; padding:clamp(1.15rem,3vw,1.9rem);
  overflow-x:auto;
  font-family:var(--mono); font-size:clamp(.76rem,.7rem + .22vw,.875rem);
  line-height:1.95; color:var(--fg);
}
.term__body .k{ color:var(--sig); }
.term__body .ok{ color:var(--live); }
.term__body .c{ color:var(--fg-faint); }

.disclaimer{
  max-width:64rem; margin:1.5rem 0 0;
  font-family:var(--mono); font-size:.72rem; line-height:1.85; color:var(--fg-faint);
}

/* ── contact ───────────────────────────────────────────────────────────── */
.contact{
  padding:clamp(4rem,9vw,7.5rem) var(--gut);
  border-top:var(--rule);
  background:
    radial-gradient(70ch 40ch at 18% 120%, rgba(255,176,31,.09), transparent 65%);
}
.contact__h{
  margin:0; max-width:20ch;
  font-size:clamp(2rem,1.3rem + 3.6vw,4.25rem);
  font-weight:800; font-stretch:112%; letter-spacing:-.04em; line-height:1.02;
}
.contact__p{ max-width:44ch; margin:1.35rem 0 0; color:var(--fg-dim); }

.contact__links{ display:flex; flex-wrap:wrap; gap:.75rem; margin:clamp(2rem,4vw,2.75rem) 0 0; }
.btn{
  display:inline-block; padding:.85rem 1.5rem;
  border:1px solid var(--line-hot); border-radius:2px;
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.06em;
  text-decoration:none; color:var(--fg);
  transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
}
.btn:hover{ border-color:var(--sig); color:var(--sig); transform:translateY(-2px); }
.btn--solid{
  background:var(--sig); border-color:var(--sig); color:#12100b; font-weight:600;
  box-shadow:0 12px 40px -18px rgba(255,176,31,.85);
}
.btn--solid:hover{ background:#ffc44d; border-color:#ffc44d; color:#12100b; }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  padding:1.6rem var(--gut) 2.25rem; border-top:var(--rule);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--fg-faint);
}
.foot p{ margin:0; }
.foot a{ color:var(--fg-dim); text-decoration:none; border-bottom:1px solid transparent; }
.foot a:hover{ color:var(--sig); border-color:var(--sig); }

/* ── focus + motion ────────────────────────────────────────────────────── */
:focus-visible{ outline:2px solid var(--sig); outline-offset:3px; border-radius:2px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  [data-r]{ opacity:1; transform:none; }
  .wave i{ height:var(--a); opacity:.6; }
  html{ scroll-behavior:auto; }
}

@media (max-width: 640px){
  .figures > div{ flex-basis:100%; border-right:0; border-bottom:var(--rule); padding-left:0 !important; }
  .figures > div:last-child{ border-bottom:0; }
  .topbar{ flex-direction:column; align-items:flex-start; gap:.4rem; }
}