/* Ramitech — vibrant theme layer with switchable palettes.
   Loaded after styles.css; only restyles (colours, gradients, glow, motion).
   The palette is chosen by <html data-palette="…"> (set from src/site.json "palette").
   Palettes: blue (default) · crimson · emerald · violet · graphite */

:root {
  /* ---- palette: Electric Blue (default) — bright royal blue ---- */
  --deep-1: #0B2F86; --deep-2: #1650D6; --deep-3: #2F86FF;
  --brand: #1456E0; --brand-ink: #0D42B5; --brand-2: #1E90F0;
  --glow-hex: #3DDCFF; --glow: 61, 220, 255;
  --warm: 225, 29, 46; --glow-3: 124, 58, 237;
  --sky: #C4E3FF; --ground: #F2F7FF; --brand-tint: #EAF1FF; --tint-2: #DDF6FD;
  --accent: #E11D2E; --accent-2: #F2412F; --accent-ink: #B9121F; --accent-rgb: 225, 29, 46;
  --hl-1: #A8ECFF; --hl-2: #5BE3FF; --hl-3: #FFFFFF;
  --line-dark: #4470D6; --line-dark-2: #6A92E8;
}

[data-palette="crimson"] {
  --deep-1: #1C0510; --deep-2: #560A1D; --deep-3: #B3122E;
  --brand: #B4152F; --brand-ink: #8C0F24; --brand-2: #E0314A;
  --glow-hex: #FFB547; --glow: 255, 181, 71;
  --warm: 255, 77, 109; --glow-3: 255, 120, 60;
  --sky: #FFCBB8; --ground: #FFF6F4; --brand-tint: #FDECEE; --tint-2: #FFF1DC;
  --accent: #1456E0; --accent-2: #2B7BF0; --accent-ink: #0D42B5; --accent-rgb: 20, 86, 224;
  --hl-1: #FFE0A8; --hl-2: #FFB547; --hl-3: #FF9DB0;
  --line-dark: #6B1A2E; --line-dark-2: #8E2A42;
}

[data-palette="emerald"] {
  --deep-1: #03201C; --deep-2: #064E46; --deep-3: #0B8F7C;
  --brand: #0B7A6C; --brand-ink: #075E53; --brand-2: #14B8A6;
  --glow-hex: #A3E635; --glow: 163, 230, 53;
  --warm: 225, 29, 46; --glow-3: 20, 184, 166;
  --sky: #9BF0DD; --ground: #F0FAF7; --brand-tint: #E3F6F1; --tint-2: #F0FBD9;
  --accent: #E11D2E; --accent-2: #F2412F; --accent-ink: #B9121F; --accent-rgb: 225, 29, 46;
  --hl-1: #D9F99D; --hl-2: #A3E635; --hl-3: #5EEAD4;
  --line-dark: #1A5E54; --line-dark-2: #2A7A6D;
}

[data-palette="violet"] {
  --deep-1: #0F0A2E; --deep-2: #2E1470; --deep-3: #6D28D9;
  --brand: #6D28D9; --brand-ink: #5B21B6; --brand-2: #A855F7;
  --glow-hex: #22D3EE; --glow: 34, 211, 238;
  --warm: 236, 72, 153; --glow-3: 168, 85, 247;
  --sky: #C4B5FD; --ground: #F6F3FF; --brand-tint: #F1EBFF; --tint-2: #E0F7FD;
  --accent: #E11D48; --accent-2: #F43F5E; --accent-ink: #BE123C; --accent-rgb: 225, 29, 72;
  --hl-1: #F0ABFC; --hl-2: #C084FC; --hl-3: #67E8F9;
  --line-dark: #3B2A7A; --line-dark-2: #5B45A8;
}

[data-palette="graphite"] {
  --deep-1: #0A0C11; --deep-2: #1B202B; --deep-3: #4A2A14;
  --brand: #C2410C; --brand-ink: #9A3412; --brand-2: #F97316;
  --glow-hex: #FB923C; --glow: 251, 146, 60;
  --warm: 225, 29, 46; --glow-3: 249, 115, 22;
  --sky: #FDBA74; --ground: #FAF7F4; --brand-tint: #FFF1E6; --tint-2: #FFF7DB;
  --accent: #E11D2E; --accent-2: #F2412F; --accent-ink: #B9121F; --accent-rgb: 225, 29, 46;
  --hl-1: #FDE68A; --hl-2: #FB923C; --hl-3: #F87171;
  --line-dark: #3A3F4B; --line-dark-2: #525866;
}

/* ---- derived tokens (shared by every palette) ---- */
:root, [data-palette] {
  --navy: var(--deep-1);
  --navy-2: var(--deep-2);
  --muted-dark: rgba(255, 255, 255, .86);   /* secondary text on coloured backgrounds */
  --cyan: var(--glow-hex);
  --media: var(--brand-tint);
  --line: #DCE4F2;

  --grad-hero:
    radial-gradient(900px 520px at 88% -8%, rgba(var(--glow), .38), transparent 62%),
    radial-gradient(760px 460px at 4% 108%, rgba(var(--warm), .30), transparent 60%),
    linear-gradient(135deg, var(--deep-1) 0%, var(--deep-2) 52%, var(--deep-3) 125%);
  --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 60%, var(--glow-hex) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-stripe: linear-gradient(90deg, var(--accent) 0%, var(--brand) 50%, var(--glow-hex) 100%);
  --grad-panel: linear-gradient(150deg, var(--deep-2) 0%, var(--brand) 100%);
  --shadow-card: 0 10px 30px rgba(12, 30, 70, .10);
  --shadow-lift: 0 18px 44px rgba(12, 30, 70, .18);

  /* Fiber (the core business) wears the palette's own colour; the other services keep theirs */
  --svc-fiber: var(--brand); --svc-fiber-2: var(--brand-2);
  --svc-materials: #EA580C; --svc-materials-2: #F59E0B;
  --svc-software: #7C3AED; --svc-software-2: #C026D3;
  --svc-billing: #0D9488; --svc-billing-2: #22C55E;
}

/* ---------- Top bar & header ---------- */
.topbar { background: var(--grad-brand); color: #fff; }
.topbar__link { color: #fff; }
.topbar__link:hover { color: #fff; text-decoration: underline; }
.site-header { box-shadow: 0 6px 24px rgba(12, 30, 70, .06); border-bottom-color: transparent; }
.nav__links a:hover { color: var(--brand); }
.nav__links a[aria-current="page"] {
  color: var(--brand); border-bottom-color: transparent;
  background-image: var(--grad-stripe); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 100%;
}
@media (max-width: 767px) {
  /* in the phone menu the current page is a highlighted row, not an underline */
  .nav__links a[aria-current="page"] { background-image: none; background-color: var(--brand-tint); border-radius: 10px; padding: 0 10px; }
}
.eyebrow { color: var(--brand); }
a { color: var(--brand); }
a:hover { color: var(--brand-ink); }

/* ---------- Heroes ---------- */
.hero, .page-hero { background: var(--grad-hero); }
.hero::after, .page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 70%); mask-image: linear-gradient(to left, #000 0%, transparent 70%);
}
.hero > .container, .page-hero > .container { position: relative; z-index: 1; }
.hero .eyebrow, .page-hero .eyebrow, .section--dark .eyebrow { color: var(--cyan); }
.chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
/* Service chips in the home hero are links to each service page */
.chip--link { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; transition: background-color .15s, border-color .15s, transform .15s; }
.chip--link:hover, .chip--link:focus-visible { color: #fff; background: rgba(255, 255, 255, .20); border-color: var(--cyan); }
.chip--link:active { transform: scale(.97); background: rgba(255, 255, 255, .26); }
@media (max-width: 767px) { .chip--link { min-height: 44px; padding: 0 10px; } }
.hl { background: linear-gradient(90deg, var(--hl-1) 0%, var(--hl-2) 45%, var(--hl-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__note .ic, .breadcrumb a { color: var(--cyan); }

/* Fiber lines take the palette's colours; light pulses travel along them */
.hero__lines .ln { stroke: var(--sky); }
.hero__lines .ln--warm { stroke: rgb(var(--warm)); }
.hero__lines .pulse { stroke: var(--glow-hex); stroke-dasharray: 26 520; stroke-width: 2.5; stroke-linecap: round; animation: fiber-pulse 5.5s linear infinite; }
.hero__lines .pulse--2 { stroke: #fff; stroke-opacity: .8; animation-duration: 7s; animation-delay: -2.5s; }
.hero__lines .pulse--3 { stroke: rgb(var(--warm)); animation-duration: 6.2s; animation-delay: -4s; }
.hero__lines .dot { fill: var(--glow-hex); }
.hero__lines .dot--warm { fill: rgb(var(--warm)); }
@keyframes fiber-pulse { from { stroke-dashoffset: 546; } to { stroke-dashoffset: 0; } }

/* Full animated fiber network behind the home hero (wide + phone layouts) */
.fiber-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fiber-bg__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fiber-bg__svg--tall { display: none; }
@media (max-width: 767px) {
  .fiber-bg__svg--wide { display: none; }
  .fiber-bg__svg--tall { display: block; }
}
.fiber-bg { opacity: .75; }   /* one knob for the whole network's strength */
.fiber-bg .fl { fill: none; stroke: var(--sky); stroke-opacity: .20; stroke-width: 1.4; }
.fiber-bg .fl--strong { stroke-opacity: .32; stroke-width: 1.8; }
.fiber-bg .fl--warm { stroke: rgb(var(--warm)); stroke-opacity: .40; }
.fiber-bg .fp {
  fill: none; stroke: var(--glow-hex); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 34 1000; stroke-dashoffset: 34; animation: fiber-run 6s linear infinite;
}
.fiber-bg .fp--2 { stroke: #fff; animation-duration: 7.5s; animation-delay: -3s; }
.fiber-bg .fp--3 { animation-duration: 5.2s; animation-delay: -1.5s; }
.fiber-bg .fp--4 { stroke: #fff; stroke-opacity: .85; animation-duration: 8s; animation-delay: -5s; }
.fiber-bg .fp--5 { animation-duration: 6.8s; animation-delay: -4.2s; }
.fiber-bg .fp--6 { stroke: var(--sky); animation-duration: 9s; animation-delay: -2.2s; }
.fiber-bg .fp--7 { animation-duration: 7.2s; animation-delay: -6s; }
.fiber-bg .fp--warm { stroke: #FF6B78; animation-duration: 6.4s; animation-delay: -3.6s; }
@keyframes fiber-run { from { stroke-dashoffset: 34; } to { stroke-dashoffset: -1000; } }
.fiber-bg .fn { fill: #fff; }
.fiber-bg .fn--warm { fill: #FF6B78; }
.fiber-bg .fn-halo {
  fill: var(--glow-hex); opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: fiber-node 3.2s ease-out infinite;
}
.fiber-bg .fn-halo--2 { animation-delay: -.8s; }
.fiber-bg .fn-halo--3 { animation-delay: -1.6s; fill: #FF6B78; }
.fiber-bg .fn-halo--4 { animation-delay: -2.4s; }
@keyframes fiber-node { 0% { transform: scale(.4); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
/* keep the headline side readable: soften the network behind the text */
.hero--fiber::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--deep-1) 55%, transparent) 0%, transparent 55%);
}
.hero--fiber > .container { z-index: 2; }
@media (max-width: 767px) {
  .hero--fiber::before { background: linear-gradient(180deg, color-mix(in srgb, var(--deep-1) 35%, transparent) 0%, transparent 60%); }
}

/* ---------- Buttons ---------- */
.btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.btn--accent { background: var(--grad-accent); box-shadow: 0 10px 24px rgba(var(--accent-rgb), .32); }
.btn--accent:hover { background: var(--accent-ink); box-shadow: 0 12px 28px rgba(var(--accent-rgb), .42); }
.btn--accent:active, .btn--wa:active, .btn--dark:active { transform: translateY(1px); }
.btn--dark { background: linear-gradient(135deg, var(--deep-2), var(--brand)); }
.btn--dark:hover { background: linear-gradient(135deg, var(--deep-2), var(--brand-ink)); }
.btn--outline-dark { border-color: var(--deep-2); color: var(--deep-2); }
.btn--outline-dark:hover { background: var(--deep-2); }
.btn--ghost { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }
.btn--ghost:hover { border-color: var(--cyan); background: rgba(255, 255, 255, .12); }
.btn--wa { box-shadow: 0 10px 22px rgba(21, 128, 61, .28); }
.link-arrow { color: var(--brand); }

/* ---------- Cards & services ---------- */
.card, .pkg, .product { box-shadow: var(--shadow-card); border-color: var(--line); transition: transform .2s, box-shadow .2s, border-color .2s; }
a.card:hover, .service:hover, .pkg:hover, .product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card--soft { box-shadow: none; }
.coverage-form { box-shadow: var(--shadow-lift); }
.hero .coverage-form { box-shadow: 0 30px 70px rgba(0, 0, 0, .40), 0 0 0 1px rgba(255, 255, 255, .08); }
.seg button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }

.service { --svc: var(--svc-fiber); --svc-2: var(--svc-fiber-2); position: relative; overflow: hidden; }
.service::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--svc), var(--svc-2)); }
.service--materials { --svc: var(--svc-materials); --svc-2: var(--svc-materials-2); }
.service--software { --svc: var(--svc-software); --svc-2: var(--svc-software-2); }
.service--billing { --svc: var(--svc-billing); --svc-2: var(--svc-billing-2); }
.service .service__icon { background: linear-gradient(135deg, var(--svc), var(--svc-2)); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--svc) 35%, transparent); }
.service .check-list .ic, .service .link-arrow { color: var(--svc); }

.service__icon, .contact-item__icon, .nav__icon { background: linear-gradient(135deg, var(--brand-tint), var(--tint-2)); color: var(--brand); }
.feature .service__icon { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 30%, transparent); }
.check-list .ic { color: var(--brand); }

/* ---------- Sections ---------- */
.section--ground {
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(var(--glow), .10), transparent 70%),
    radial-gradient(600px 300px at 0% 100%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%),
    var(--ground);
}
.section--dark {
  background:
    radial-gradient(800px 420px at 100% 0%, rgba(var(--glow), .22), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(var(--glow-3), .20), transparent 60%),
    linear-gradient(160deg, var(--deep-1), var(--deep-2));
}
.section--dark .check-list .ic, .pkg--featured .check-list .ic { color: var(--cyan); }
.panel-dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(4px); }
.step { border-bottom-color: rgba(255, 255, 255, .14); }
.step__num { border-color: var(--cyan); color: var(--cyan); }
.steps--light .step { border-bottom-color: var(--line); }
.steps--light .step__num { border: 0; background: var(--grad-brand); color: #fff; }

.trust { background: #fff; }
.badge { box-shadow: var(--shadow-card); }

/* ---------- Packages ---------- */
.pkg--featured {
  background: radial-gradient(420px 240px at 100% 0%, rgba(var(--glow), .35), transparent 65%), var(--grad-panel);
  border-color: transparent; box-shadow: 0 22px 50px color-mix(in srgb, var(--brand) 35%, transparent);
}
.pkg--featured .pkg__rule { background: rgba(255, 255, 255, .22); }
.pkg--featured .pkg__kind { color: var(--sky); }
.pkg__tag { background: var(--grad-accent); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .35); }
.tabs button[aria-selected="true"] { background: var(--grad-brand); }

/* ---------- Products (colour by category) ---------- */
.product { --pc: var(--brand); --pc-bg: var(--brand-tint); }
.product--cables { --pc: var(--brand); --pc-bg: linear-gradient(135deg, var(--brand-tint), var(--tint-2)); }
.product--boxes { --pc: #EA580C; --pc-bg: linear-gradient(135deg, #FFF1E6, #FFF7DB); }
.product--closures { --pc: #7C3AED; --pc-bg: linear-gradient(135deg, #F1E9FF, #FBE8FF); }
.product--splitters { --pc: #0D9488; --pc-bg: linear-gradient(135deg, #E2F7F4, #E6FAEA); }
.product--patch { --pc: #DB2777; --pc-bg: linear-gradient(135deg, #FDE7F1, #FFEFF0); }
.product--odf { --pc: #0F766E; --pc-bg: linear-gradient(135deg, #E3F4F1, #EAF1FF); }
.product--networking { --pc: #4F46E5; --pc-bg: linear-gradient(135deg, #EEF0FF, #E6F4FF); }
.product--tools {--pc: #B45309; --pc-bg: linear-gradient(135deg, #FFF3DC, #FFF9EB); }
.product__media { background: var(--pc-bg); color: var(--pc); }
.product__cat { color: var(--pc); font-weight: 500; }
.product.is-added { border-color: var(--pc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 35%, transparent), var(--shadow-card); }
.cat.is-active { background: var(--grad-brand); color: #fff; }

.quote {
  background: radial-gradient(360px 200px at 100% 0%, rgba(var(--glow), .30), transparent 65%), linear-gradient(160deg, var(--deep-2), var(--brand-ink));
  box-shadow: var(--shadow-lift);
}
.quote__count { background: var(--grad-accent); }
.quote__qty { color: var(--sky); }

/* ---------- Tabs in page hero ---------- */
.hero-tabs { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .20); }
.hero-tabs__icon { background: rgba(var(--glow), .16); color: var(--cyan); }
.hero-tabs button[aria-selected="true"] { color: var(--deep-1); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.hero-tabs button[aria-selected="true"] .hero-tabs__icon { background: var(--grad-accent); color: #fff; }

/* ---------- CTA band & footer ---------- */
.cta-band {
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(var(--glow), .35), transparent 65%),
    radial-gradient(420px 240px at 0% 100%, rgba(var(--warm), .25), transparent 65%),
    var(--grad-panel);
  box-shadow: 0 24px 56px color-mix(in srgb, var(--brand) 30%, transparent);
}
.footer { position: relative; background: linear-gradient(180deg, var(--deep-1), color-mix(in srgb, var(--deep-1) 70%, #000)); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-stripe); }
.footer__bottom { border-top-color: rgba(255, 255, 255, .12); }
.social { background: rgba(255, 255, 255, .08); }
.social:hover { background: var(--brand); }

/* ---------- Mobile menu & swipe cues ---------- */
.nav__status.is-open .nav__dot { animation: live-dot 1.8s ease-in-out infinite; }
@keyframes live-dot { 50% { box-shadow: 0 0 0 7px rgba(21, 128, 61, 0); } }
.hscroll__dot.is-active::before { background: var(--brand); }
.hscroll__btn { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .hero__lines .pulse, .nav__status.is-open .nav__dot, .fiber-bg .fp, .fiber-bg .fn-halo { animation: none; }
  .fiber-bg .fp { stroke-dasharray: none; stroke-opacity: .2; }
  .hero__lines .pulse { stroke-dasharray: none; stroke-opacity: .25; }
  a.card:hover, .service:hover, .pkg:hover, .product:hover { transform: none; }
}