/*!
 * ENCRYPTIA CLOUD – Home page
 * Four interactive sectors: Cloud, Home, Business, Care.
 * All selectors are prefixed with "enc-" so the file is safe to drop into a WordPress theme.
 */

/* Logo font (header). Falls back to Montserrat if the file is missing. */
@font-face {
  font-family: "Do Futuristic";
  src: local("Do Futuristic"), local("DoFuturistic"),
       url("../fonts/DoFuturistic.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
.enc-home {
  --enc-bg: #05070d;
  --enc-ease: cubic-bezier(.22, .8, .24, 1);
  --enc-ease-io: cubic-bezier(.76, 0, .24, 1);

  --enc-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --enc-font-logo: "Do Futuristic", "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --enc-font-display: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;

  /* One design pixel, scaled to the viewport. 1 unit = 1px on the 1536 x 1024 approved layout. */
  --u: min(calc(100vw / 1536), calc(100vh / 1024));
  --wpbar: 0px;
  --header-h: clamp(60px, calc(var(--u) * 100), 120px);
  --footer-h: clamp(46px, calc(var(--u) * 72), 104px);

  --cx: 50;
  --cy: 50;

  margin: 0;
  background: var(--enc-bg);
  color: #fff;
  font-family: var(--enc-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.admin-bar.enc-home { --wpbar: 32px; }
@media (max-width: 782px) { body.admin-bar.enc-home { --wpbar: 46px; } }

.enc-home *, .enc-home *::before, .enc-home *::after { box-sizing: border-box; }
.enc-home a { -webkit-tap-highlight-color: transparent; }
.enc-home h1, .enc-home h2, .enc-home p, .enc-home ul { margin: 0; padding: 0; }
.enc-home ul { list-style: none; }
.enc-home svg { display: block; }

html.enc-js, body.enc-home { background: #05070d; }
body.enc-home { overflow: hidden; }

.enc-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.enc-skip {
  position: fixed; left: 12px; top: 12px; z-index: 2000; padding: 10px 16px; background: #fff; color: #000;
  font: 500 14px/1 var(--enc-font-ui); text-decoration: none; transform: translateY(-200%);
}
.enc-skip:focus { transform: none; }

/* Sector themes */
.enc-sector--cloud,    .enc-bg--cloud    { --accent: #1ea1ff; --accent-rgb: 30, 161, 255; --bg-grad: radial-gradient(95% 95% at 76% 56%, #0b2d60 0%, #071a3b 36%, #040d20 68%, #03060f 100%); }
.enc-sector--home,     .enc-bg--home     { --accent: #ff9f1c; --accent-rgb: 255, 159, 28; --bg-grad: radial-gradient(95% 95% at 70% 54%, #2e1b0a 0%, #1b1107 40%, #0e0903 74%, #080502 100%); }
.enc-sector--business, .enc-bg--business { --accent: #17d6c0; --accent-rgb: 23, 214, 192; --bg-grad: radial-gradient(95% 95% at 70% 56%, #0b3038 0%, #061c24 40%, #04111a 74%, #030b10 100%); }
.enc-sector--care,     .enc-bg--care     { --accent: #8ed23a; --accent-rgb: 142, 210, 58; --bg-grad: radial-gradient(95% 95% at 70% 56%, #16290c 0%, #0c1708 40%, #070f06 74%, #050a04 100%); }

/* ------------------------------------------------------------------ */
/* 2. Page frame                                                       */
/* ------------------------------------------------------------------ */
.enc-page {
  position: relative;
  display: flex; flex-direction: column;
  height: calc(100vh - var(--wpbar));
  height: calc(100dvh - var(--wpbar));
  min-height: 420px;
  overflow: hidden;
  background: var(--enc-bg);
}
.enc-stage {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: var(--enc-bg);
}

.enc-layer {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: calc(var(--cx) * 1%) minmax(0, 1fr);
  grid-template-rows: calc(var(--cy) * 1%) minmax(0, 1fr);
}
.enc-layer--bg { z-index: 0; }
.enc-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.enc-layer--fg { z-index: 2; }

/* ------------------------------------------------------------------ */
/* 3. Header                                                           */
/* ------------------------------------------------------------------ */
.enc-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, calc(var(--u) * 40), 96px);
  pointer-events: none;
}
.enc-header > * { pointer-events: auto; }
/* Logo: padlock icon + live text. The "E" of ENCRYPTIA sits right after the three circuit lines of the lock,
   so its three arms continue them (all sizes derive from --lh, the icon height). */
.enc-logo { --lh: clamp(40px, calc(var(--u) * 66), 100px); display: inline-flex; align-items: flex-start; gap: calc(var(--lh) * .13); color: #fff; text-decoration: none; }
.enc-logo__mark { flex: none; width: var(--lh); height: var(--lh); filter: drop-shadow(0 0 10px rgba(120, 140, 255, .35)); }
.enc-logo__text { position: relative; display: block; margin-top: calc(var(--lh) * .385); font-family: var(--enc-font-logo); font-weight: 400; }
.enc-logo__name { display: block; font-size: calc(var(--lh) * .457); line-height: 1; letter-spacing: .05em; margin-right: -.05em; white-space: nowrap; }
.enc-logo__cloud {
  position: absolute; right: 0; bottom: calc(100% + var(--lh) * .125);
  font-size: calc(var(--lh) * .154); line-height: 1; letter-spacing: .3em; margin-right: -.3em; color: rgba(255, 255, 255, .9); white-space: nowrap;
}

.enc-nav ul { display: flex; gap: clamp(20px, calc(var(--u) * 46), 96px); }
.enc-nav a {
  position: relative; display: inline-block; padding: 8px 0;
  font: 400 clamp(13px, calc(var(--u) * 17), 23px)/1.2 var(--enc-font-ui); letter-spacing: .01em;
  color: #fff; text-decoration: none; opacity: .94; transition: opacity .3s;
}
.enc-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
  background: linear-gradient(90deg, #1ea1ff, #17d6c0, #ff9f1c); box-shadow: 0 0 10px rgba(255, 255, 255, .5);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--enc-ease);
}
.enc-nav a:hover, .enc-nav a:focus-visible { opacity: 1; }
.enc-nav a:hover::after, .enc-nav a:focus-visible::after { transform: scaleX(1); }
.enc-nav a:focus-visible, .enc-logo:focus-visible, .enc-social a:focus-visible, .enc-burger:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.enc-burger { display: none; }

/* ------------------------------------------------------------------ */
/* 4. Backgrounds (one per sector, live in their own grid layer)       */
/* ------------------------------------------------------------------ */
.enc-bg { position: relative; overflow: hidden; background: var(--bg-grad); --mx: 70%; --my: 50%; }
.enc-bg > i { position: absolute; inset: 0; display: block; pointer-events: none; }
.enc-bg__glow {
  background: radial-gradient(60% 70% at 72% 54%, rgba(var(--accent-rgb), .20), transparent 72%);
}
.enc-bg > .enc-bg__spot {
  inset: auto; left: 0; top: 0; width: 920px; height: 920px;
  background: radial-gradient(460px circle at center, rgba(var(--accent-rgb), .17), transparent 62%);
  opacity: 0; transition: opacity .7s var(--enc-ease);
}
.enc-bg.is-active .enc-bg__spot { opacity: 1; }

.enc-bg__racks {
  opacity: .34;
  background:
    repeating-linear-gradient(90deg, rgba(60, 150, 255, .16) 0 1px, transparent 1px 36px),
    radial-gradient(circle, rgba(120, 200, 255, .95) 0 1px, transparent 1.7px) 0 0 / 36px 13px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 82%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 82%);
}
.enc-bg__bokeh {
  opacity: .8;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 176, 80, .22) 0, transparent 70px),
    radial-gradient(circle at 82% 22%, rgba(255, 150, 40, .18) 0, transparent 90px),
    radial-gradient(circle at 64% 82%, rgba(255, 190, 110, .16) 0, transparent 80px),
    radial-gradient(circle at 36% 70%, rgba(255, 140, 30, .12) 0, transparent 60px);
}
.enc-bg__grid {
  -webkit-mask-image: radial-gradient(75% 85% at 72% 62%, #000, transparent 78%);
          mask-image: radial-gradient(75% 85% at 72% 62%, #000, transparent 78%);
}
.enc-bg__grid::before {
  content: ""; position: absolute; inset: -48px 0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .10) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ------------------------------------------------------------------ */
/* 5. Sectors                                                          */
/* ------------------------------------------------------------------ */
.enc-sector {
  --pl: clamp(24px, calc(var(--u) * 49), 110px);
  --bw: clamp(250px, calc(var(--u) * 350), 700px);
  --pt: 0px;
  position: relative; overflow: hidden;
  min-width: 0; min-height: 0;
  container-type: size;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pt) 0 clamp(10px, calc(var(--u) * 18), 28px) var(--pl);
  color: #fff; cursor: pointer;
  transition: opacity 1s var(--enc-ease) var(--rd, 0s);
}
.enc-sector[data-row="0"] { --pt: var(--header-h); }
.enc-sector--cloud { --rd: 0s; }
.enc-sector--home { --rd: .12s; }
.enc-sector--business { --rd: .24s; }
.enc-sector--care { --rd: .36s; }

.enc-body {
  z-index: 3; width: var(--bw); max-width: 100%;
  transition: opacity 1s var(--enc-ease) calc(var(--rd, 0s) + .2s), transform 1.1s var(--enc-ease) calc(var(--rd, 0s) + .2s);
}

.enc-brand { display: flex; align-items: center; gap: clamp(14px, calc(var(--u) * 28), 52px); }
.enc-brand__mark {
  flex: none; width: clamp(42px, calc(var(--u) * 68), 128px); height: auto; color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .55));
}
.enc-title {
  font: 500 clamp(15.4px, calc(var(--u) * 22.4), 46.2px)/1.14 var(--enc-font-display);
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.enc-title > span { display: block; }
.enc-title__accent { color: var(--accent); text-shadow: 0 0 22px rgba(var(--accent-rgb), .45); }

.enc-rule {
  display: block; width: clamp(24px, calc(var(--u) * 34), 64px); height: 2px;
  margin: clamp(10px, calc(var(--u) * 24), 44px) 0 clamp(8px, calc(var(--u) * 20), 36px);
  background: var(--accent); opacity: .8; box-shadow: 0 0 10px rgba(var(--accent-rgb), .7);
}

/* Collapsible blocks: the content simply folds away when a sector gets small */
.enc-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .7s var(--enc-ease), opacity .5s var(--enc-ease); }
.enc-fold__in { min-height: 0; overflow: hidden; }
.enc-sector[data-density="0"] .enc-fold--tag,
.enc-sector[data-density="0"] .enc-fold--desc,
.enc-sector[data-density="1"] .enc-fold--desc { grid-template-rows: 0fr; opacity: 0; }

.enc-eyebrow {
  margin-bottom: .85em;
  font: 500 clamp(10.5px, calc(var(--u) * 12.5), 17px)/1.4 var(--enc-font-ui);
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.enc-tagline {
  margin-bottom: clamp(8px, calc(var(--u) * 20), 34px);
  font: 400 clamp(16px, calc(var(--u) * 23), 40px)/1.28 var(--enc-font-ui); color: #fff;
  text-wrap: balance;
}
.enc-desc {
  max-width: 24em; margin-bottom: clamp(6px, calc(var(--u) * 12), 22px);
  font: 400 clamp(12.5px, calc(var(--u) * 14.3), 21px)/1.7 var(--enc-font-ui); color: rgba(255, 255, 255, .72);
}

.enc-cta {
  display: inline-flex; align-items: center; justify-content: space-between; align-self: flex-start;
  gap: clamp(16px, calc(var(--u) * 40), 70px);
  min-width: clamp(150px, calc(var(--u) * 200), 340px);
  margin-top: clamp(8px, calc(var(--u) * 14), 26px);
  padding: clamp(9px, calc(var(--u) * 13), 22px) clamp(14px, calc(var(--u) * 18), 32px);
  border: 1px solid rgba(var(--accent-rgb), .9); background: rgba(var(--accent-rgb), .04);
  color: var(--accent); text-decoration: none;
  font: 500 clamp(12px, calc(var(--u) * 15), 21px)/1 var(--enc-font-ui); letter-spacing: .05em; text-transform: uppercase;
  transition: background .4s var(--enc-ease), box-shadow .4s var(--enc-ease), color .4s;
}
.enc-cta svg { flex: none; width: 1.4em; height: 1.4em; transition: transform .5s var(--enc-ease); }
.enc-cta::after { content: ""; position: absolute; inset: 0; z-index: 5; }     /* the whole tile is the link */
.enc-cta:hover, .enc-sector.is-pressed .enc-cta {
  background: rgba(var(--accent-rgb), .15);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 30px rgba(var(--accent-rgb), .38);
}
.enc-cta:hover svg { transform: translateX(7px); }
.enc-cta:focus-visible { outline: none; }
.enc-cta:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -6px; }

/* ------------------------------------------------------------------ */
/* 6. Visuals                                                          */
/* ------------------------------------------------------------------ */
.enc-visual {
  position: absolute; z-index: 1;
  right: clamp(8px, calc(var(--u) * 14), 40px);
  top: calc(var(--pt) + 50cqh);
  width: min(calc(100cqh * var(--ar) * .98), calc(100cqw - var(--pl) - var(--bw) + var(--u) * 56), calc(var(--u) * 1180));
  aspect-ratio: var(--ar);
  translate: 0 -50%;
  scale: 1;
  container-type: inline-size;
  pointer-events: none;
  transition: opacity .9s var(--enc-ease), scale 1.2s var(--enc-ease);
}
.enc-visual__in {
  position: relative; width: 100%; height: 100%;
  transform: translate3d(var(--vx, 0px), var(--vy, 0px), 0);
}
.enc-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.enc-vnode { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
.enc-vnode__dot {
  display: grid; place-items: center;
  width: clamp(30px, 7.4cqw, 68px); height: clamp(30px, 7.4cqw, 68px); border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .7); background: rgba(5, 8, 14, .74); color: var(--accent);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), .26), inset 0 0 14px rgba(var(--accent-rgb), .14);
}
.enc-vnode__dot svg { width: 56%; height: 56%; }
.enc-vnode__label {
  position: absolute; left: 50%; top: 100%; width: max-content; max-width: 9.5em; margin-top: .6em;
  transform: translateX(-50%); text-align: center;
  font: 400 clamp(9px, 1.95cqw, 14.5px)/1.25 var(--enc-font-ui); color: rgba(255, 255, 255, .9);
  transition: opacity .5s var(--enc-ease);
}
.enc-vnode--r .enc-vnode__label { left: 100%; top: 50%; margin: 0 0 0 .85em; transform: translateY(-50%); text-align: left; }
.enc-sector--care .enc-vnode__label { font-size: clamp(8px, 1.55cqw, 12px); letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------------------ */
/* 7. Interaction states                                               */
/* ------------------------------------------------------------------ */
.enc-stage[data-active] .enc-sector.is-dim .enc-visual { opacity: .4; }
.enc-stage[data-active] .enc-sector.is-dim .enc-vnode__label { opacity: 0; }
.enc-stage[data-active] .enc-sector.is-dim .enc-body { opacity: .92; }
.enc-sector.is-active .enc-visual { scale: 1.035; }

/* ------------------------------------------------------------------ */
/* 8. The shared glowing line                                          */
/* ------------------------------------------------------------------ */
.enc-beams { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.enc-beam { position: absolute; display: block; }
.enc-beam--h {
  left: 0; right: 0; top: calc(var(--cy) * 1%); height: 1px; margin-top: -.5px;
  background: linear-gradient(90deg, #1ea1ff 0%, #1ea1ff 12%, #17d6c0 38%, #ffffff 50%, #ff9f1c 62%, #8ed23a 88%, #8ed23a 100%);
  transform-origin: 50% 50%;
  transition: transform 1.5s var(--enc-ease) .1s;
}
.enc-beam--v {
  top: 0; bottom: 0; left: calc(var(--cx) * 1%); width: 1px; margin-left: -.5px;
  background: linear-gradient(180deg, #1ea1ff 0%, #1ea1ff 8%, #ff9f1c 38%, #ffffff 50%, #17d6c0 62%, #8ed23a 92%, #8ed23a 100%);
  transform-origin: 50% 50%;
  transition: transform 1.5s var(--enc-ease) .1s;
}
.enc-beam::before {                                         /* soft halo */
  content: ""; position: absolute; background: inherit; filter: blur(7px); opacity: .62;
  transition: opacity .8s var(--enc-ease);
}
.enc-beam--h::before { left: 0; right: 0; top: -4px; bottom: -4px; }
.enc-beam--v::before { top: 0; bottom: 0; left: -4px; right: -4px; }
.enc-stage[data-active] .enc-beam::before { opacity: .95; }
.enc-beam::after {                                          /* travelling pulse */
  content: ""; position: absolute; background-repeat: no-repeat;
}
.enc-beam--h::after {
  left: 0; right: 0; top: -1px; bottom: -1px;
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  background-size: 16% 100%; animation: encPulseH 6.5s linear infinite;
}
.enc-beam--v::after {
  top: 0; bottom: 0; left: -1px; right: -1px;
  background-image: linear-gradient(180deg, transparent, rgba(255, 255, 255, .95), transparent);
  background-size: 100% 16%; animation: encPulseV 7.5s linear infinite .8s;
}
.enc-core {
  position: absolute; left: calc(var(--cx) * 1%); top: calc(var(--cy) * 1%);
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, .9), 0 0 34px 8px rgba(120, 200, 255, .55);
  transition: transform 1.2s var(--enc-ease) .3s, opacity 1.2s;
}
.enc-core b {
  position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7);
  animation: encCore 3.6s ease-out infinite;
}
.enc-core b:nth-child(2) { animation-delay: 1.8s; }

/* ------------------------------------------------------------------ */
/* 9. Footer                                                           */
/* ------------------------------------------------------------------ */
.enc-footer {
  position: relative; z-index: 30; flex: none; height: var(--footer-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(12px, calc(var(--u) * 24), 40px);
  padding: 0 clamp(20px, calc(var(--u) * 60), 120px); white-space: nowrap;
  background: #05070b; border-top: 1px solid rgba(255, 255, 255, .1);
  font: 400 clamp(10px, calc(var(--u) * 13.5), 18px)/1.3 var(--enc-font-ui);
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .66);
}
.enc-footer p { display: flex; align-items: center; gap: .95em; }
.enc-footer p svg { flex: none; width: 2.1em; height: 2.1em; color: rgba(255, 255, 255, .55); stroke-width: 1.3; }
.enc-footer__a { justify-self: start; }
.enc-footer__b { justify-self: center; }
.enc-footer__c { justify-self: end; display: flex; align-items: center; gap: clamp(16px, calc(var(--u) * 40), 80px); }
.enc-copy { text-transform: none !important; letter-spacing: .02em !important; }
.enc-social { display: flex; align-items: center; gap: clamp(14px, calc(var(--u) * 28), 44px); }
.enc-social a { display: grid; place-items: center; color: rgba(255, 255, 255, .62); transition: color .3s, transform .4s var(--enc-ease); }
.enc-social a:hover { color: #fff; transform: translateY(-2px); }
.enc-social svg { width: clamp(18px, calc(var(--u) * 24), 34px); height: auto; }

/* ------------------------------------------------------------------ */
/* 10. Intro animation                                                 */
/* ------------------------------------------------------------------ */
.enc-intro { display: none; position: fixed; inset: 0; z-index: 1000; overflow: hidden; }
html.enc-intro-run .enc-intro { display: block; }
.enc-intro__q { position: absolute; width: 50.1%; height: 50.1%; background: #03050a; transition: transform 1.25s var(--enc-ease-io) .12s; }
.enc-intro__q--tl { left: 0; top: 0; }
.enc-intro__q--tr { right: 0; top: 0; }
.enc-intro__q--bl { left: 0; bottom: 0; }
.enc-intro__q--br { right: 0; bottom: 0; }
.enc-intro__q::before, .enc-intro__q::after {            /* the cross line, split across the four panels */
  content: ""; position: absolute; background: linear-gradient(var(--dir), var(--c1), var(--c2)); box-shadow: 0 0 14px rgba(255, 255, 255, .35);
  transition: transform .9s var(--enc-ease) 1.95s, opacity .35s ease;
  transform: scale(var(--sx, 1), var(--sy, 1)); transform-origin: var(--ox) var(--oy);
}
.enc-intro__q::before { width: 1px; top: 0; bottom: 0; --dir: 0deg; }
.enc-intro__q::after  { height: 1px; left: 0; right: 0; --dir: 90deg; }
.enc-intro__q--tl { --c1: #ffffff; --c2: #1ea1ff; }
.enc-intro__q--tr { --c1: #ffffff; --c2: #ff9f1c; }
.enc-intro__q--bl { --c1: #ffffff; --c2: #17d6c0; }
.enc-intro__q--br { --c1: #ffffff; --c2: #8ed23a; }
.enc-intro__q--tl::before { right: 0; --oy: 100%; --ox: 50%; --dir: 0deg; background: linear-gradient(0deg, #fff, #1ea1ff); }
.enc-intro__q--tl::after  { bottom: 0; --ox: 100%; --oy: 50%; background: linear-gradient(270deg, #fff, #1ea1ff); }
.enc-intro__q--tr::before { left: 0; --oy: 100%; --ox: 50%; background: linear-gradient(0deg, #fff, #ff9f1c); }
.enc-intro__q--tr::after  { bottom: 0; --ox: 0%; --oy: 50%; background: linear-gradient(90deg, #fff, #ff9f1c); }
.enc-intro__q--bl::before { right: 0; --oy: 0%; --ox: 50%; background: linear-gradient(180deg, #fff, #17d6c0); }
.enc-intro__q--bl::after  { top: 0; --ox: 100%; --oy: 50%; background: linear-gradient(270deg, #fff, #17d6c0); }
.enc-intro__q--br::before { left: 0; --oy: 0%; --ox: 50%; background: linear-gradient(180deg, #fff, #8ed23a); }
.enc-intro__q--br::after  { top: 0; --ox: 0%; --oy: 50%; background: linear-gradient(90deg, #fff, #8ed23a); }
html.enc-intro-run .enc-intro__q::before { --sy: 0; }
html.enc-intro-run .enc-intro__q::after  { --sx: 0; }
html.enc-intro-run.enc-intro-lines .enc-intro__q::before { --sy: 1; }
html.enc-intro-run.enc-intro-lines .enc-intro__q::after  { --sx: 1; }
html.enc-intro-open .enc-intro__q::before, html.enc-intro-open .enc-intro__q::after { opacity: 0; }
html.enc-intro-open .enc-intro__q--tl { transform: translate(-101%, -101%); }
html.enc-intro-open .enc-intro__q--tr { transform: translate(101%, -101%); }
html.enc-intro-open .enc-intro__q--bl { transform: translate(-101%, 101%); }
html.enc-intro-open .enc-intro__q--br { transform: translate(101%, 101%); }

.enc-intro__center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.2vmin, 22px);
  transition: opacity .55s ease, transform 1s var(--enc-ease), filter .6s ease;
}
html.enc-intro-open .enc-intro__center { opacity: 0; transform: scale(1.14); filter: blur(6px); }
.enc-intro__mark { width: clamp(72px, 15vmin, 150px); color: #fff; filter: drop-shadow(0 0 18px rgba(80, 170, 255, .65)); }
.enc-intro__svg { width: 100%; height: auto; }
.enc-intro__svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: encDraw 1.25s var(--enc-ease-io) .25s forwards; }
.enc-intro__svg path:nth-child(2) { animation-delay: .7s; animation-duration: .9s; }
.enc-intro__svg path:nth-child(3) { animation-delay: 1.0s; animation-duration: .6s; }
.enc-intro__word { display: flex; font: 600 clamp(26px, 6.4vmin, 62px)/1 var(--enc-font-display); letter-spacing: .14em; margin-right: -.14em; color: #fff; }
.enc-intro__word span {
  opacity: 0; transform: translateY(14px); filter: blur(8px);
  animation: encLetter .8s var(--enc-ease) forwards; animation-delay: calc(.95s + var(--i) * .06s);
}
.enc-intro__sub {
  font: 400 clamp(11px, 2.1vmin, 20px)/1 var(--enc-font-display); color: rgba(255, 255, 255, .72); letter-spacing: .5em; margin-right: -.5em;
  opacity: 0; animation: encSub 1.1s var(--enc-ease) 1.55s forwards;
}
.enc-intro__skip {
  position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: none; border: 0; padding: 10px 18px; cursor: pointer;
  font: 400 12px/1 var(--enc-font-ui); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
  opacity: 0; animation: encFadeIn .8s ease .8s forwards; transition: color .3s;
}
.enc-intro__skip:hover { color: #fff; }
html.enc-intro-open .enc-intro__skip { opacity: 0 !important; animation: none; }

/* Hidden state while the intro is playing, then everything fades in */
html.enc-booting .enc-sector { opacity: 0; }
html.enc-booting .enc-body { opacity: 0; transform: translateY(18px); }
html.enc-booting .enc-visual { opacity: 0; scale: .86; }
html.enc-booting .enc-beam--h { transform: scaleX(0); }
html.enc-booting .enc-beam--v { transform: scaleY(0); }
html.enc-booting .enc-core { transform: scale(0); opacity: 0; }
html.enc-booting .enc-header, html.enc-booting .enc-footer { opacity: 0; }
.enc-header, .enc-footer { transition: opacity 1.2s var(--enc-ease) .6s; }

/* ------------------------------------------------------------------ */
/* 11. Portal transition (click on a sector)                           */
/* ------------------------------------------------------------------ */
.enc-portal {
  position: fixed; inset: 0; z-index: 900; visibility: hidden; pointer-events: none;
  background: var(--p-bg, #05070d);
  clip-path: circle(0px at var(--p-x, 50%) var(--p-y, 50%));
}
html.enc-leaving .enc-portal {
  visibility: visible; pointer-events: auto;
  clip-path: circle(150vmax at var(--p-x, 50%) var(--p-y, 50%));
  transition: clip-path 1s cubic-bezier(.7, 0, .2, 1) .1s;
}
.enc-portal__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  color: var(--p-accent, #fff); opacity: 0; transform: scale(.94);
}
html.enc-leaving .enc-portal__inner { opacity: 1; transform: none; transition: opacity .5s ease .55s, transform 1s var(--enc-ease) .5s; }
.enc-portal__mark svg { width: clamp(60px, 11vmin, 110px); height: auto; filter: drop-shadow(0 0 16px var(--p-accent, #fff)); }
.enc-portal__name { font: 500 clamp(18px, 3.4vmin, 30px)/1 var(--enc-font-display); letter-spacing: .26em; text-transform: uppercase; color: #fff; margin-right: -.26em; }
html.enc-leaving .enc-header, html.enc-leaving .enc-footer { opacity: 0; transition: opacity .45s ease 0s; }
html.enc-leaving .enc-sector .enc-body, html.enc-leaving .enc-sector .enc-visual { opacity: 0; transition: opacity .5s ease; }
html.enc-leaving .enc-beam, html.enc-leaving .enc-core { opacity: 0; transition: opacity .5s ease; }

/* ------------------------------------------------------------------ */
/* 12. Illustration animation                                          */
/* ------------------------------------------------------------------ */
.enc-flow { animation: encFlow 2.6s linear infinite; animation-delay: calc(var(--d, 0s) * -1); }
.enc-neon-edge { animation: encNeon 4.2s ease-in-out infinite; }
.enc-cloud-float { animation: encFloat 6s ease-in-out infinite; }
.enc-led { animation: encLed 2.4s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
.enc-spark { animation: encSpark 3.6s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); transform-box: fill-box; transform-origin: center; }
.enc-lamp { animation: encLamp 4.8s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
.enc-ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: encRing 3.4s ease-out infinite; }
.enc-ring--2 { animation-delay: 1.7s; }
.enc-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: encBar 2.8s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
.enc-scan { animation: encScan 4.6s linear infinite; }
.enc-gauge { animation: encGauge 2.4s var(--enc-ease) .5s backwards; }

@keyframes encBreathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes encDrift { from { transform: translate3d(-2%, 1%, 0); } to { transform: translate3d(2%, -2%, 0); } }
@keyframes encGridMove { from { transform: translateY(0); } to { transform: translateY(48px); } }
@keyframes encRackFlicker { 0%, 100% { opacity: .34; } 50% { opacity: .26; } }
@keyframes encPulseH { from { background-position: -30% 0; } to { background-position: 130% 0; } }
@keyframes encPulseV { from { background-position: 0 -30%; } to { background-position: 0 130%; } }
@keyframes encCore { from { transform: scale(1); opacity: .9; } to { transform: scale(7); opacity: 0; } }
@keyframes encFlow { to { stroke-dashoffset: -24; } }
@keyframes encNeon { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes encFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes encLed { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes encSpark { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.5); } }
@keyframes encLamp { 0%, 100% { opacity: .5; } 40% { opacity: .9; } 70% { opacity: .65; } }
@keyframes encRing { 0% { opacity: .85; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes encBar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes encScan { from { transform: translateY(-48px); } to { transform: translateY(190px); } }
@keyframes encGauge { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes encDraw { to { stroke-dashoffset: 0; } }
@keyframes encLetter { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes encSub { from { opacity: 0; letter-spacing: 1.1em; } to { opacity: 1; letter-spacing: .5em; } }
@keyframes encFadeIn { to { opacity: 1; } }

/* ------------------------------------------------------------------ */
/* 13. Responsive                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .enc-footer { grid-template-columns: minmax(0, 1fr) auto; }
  .enc-footer .enc-footer__b { display: none; }
}

/* Phones and tablets in portrait: four stacked cards */
@media (max-width: 900px) {
  .enc-home { --header-h: 62px; --footer-h: auto; --u: min(calc(100vw / 600), 1px); }
  body.enc-home { overflow: auto; }
  html.enc-js { overflow-x: hidden; }

  .enc-page { display: block; height: auto; min-height: 100vh; min-height: 100svh; overflow: visible; }
  .enc-stage { overflow: visible; }
  .enc-layer--bg, .enc-fx, .enc-beams { display: none; }
  .enc-layer--fg { position: relative; display: block; inset: auto; }

  .enc-header { position: fixed; top: var(--wpbar); padding: 0 18px; pointer-events: auto; }
  .enc-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(5, 7, 13, .74);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .enc-logo { --lh: 44px; }

  .enc-burger {
    position: relative; z-index: 60; display: block; width: 44px; height: 44px; margin-right: -8px; background: none; border: 0; cursor: pointer; color: #fff;
  }
  .enc-burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .45s var(--enc-ease), top .45s var(--enc-ease); }
  .enc-burger span:nth-child(1) { top: 17px; }
  .enc-burger span:nth-child(2) { top: 26px; }
  .enc-burger[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
  .enc-burger[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
  .enc-nav {
    position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
    background: radial-gradient(90% 60% at 50% 40%, #0b2146, #05070d 70%);
    opacity: 0; visibility: hidden; transition: opacity .45s var(--enc-ease), visibility 0s linear .45s;
  }
  .enc-nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .enc-nav ul { flex-direction: column; align-items: center; gap: 8px; }
  .enc-nav a { padding: 12px 0; font-size: 26px; font-weight: 300; letter-spacing: .04em; }

  .enc-sector {
    --pl: 0px; --pt: 0px;
    container-type: inline-size; justify-content: flex-start; cursor: pointer;
    min-height: min(100svh, 820px);
    padding: 44px clamp(22px, 6.5vw, 64px) 54px;
    background: var(--bg-grad);
  }
  .enc-sector--cloud { padding-top: calc(var(--header-h) + 40px); }
  .enc-footer { white-space: normal; }
  .enc-sector + .enc-sector::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 6;
    background: linear-gradient(90deg, transparent, var(--accent) 30%, #fff 50%, var(--accent) 70%, transparent);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), .8);
  }
  .enc-sector::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(60% 40% at 70% 70%, rgba(var(--accent-rgb), .20), transparent 70%);
    animation: encBreathe 7s ease-in-out infinite;
  }
  .enc-sector { display: flex; }
  .enc-body { order: 1; width: 100%; max-width: 560px; margin: 0 auto; }
  .enc-brand__mark { width: 56px; }
  .enc-title { font-size: clamp(17.5px, 5.18vw, 29.4px); }
  .enc-rule { margin: 20px 0 16px; }
  .enc-eyebrow { font-size: 12px; }
  .enc-tagline { font-size: clamp(19px, 5.3vw, 28px); }
  .enc-desc { font-size: 15px; max-width: none; }
  .enc-fold { grid-template-rows: 1fr !important; opacity: 1 !important; }
  .enc-cta { font-size: 14px; padding: 14px 20px; min-width: 190px; margin-top: 12px; }

  .enc-visual {
    position: relative; right: auto; top: auto; translate: none; scale: 1; order: 2;
    width: min(100%, 560px); margin: 34px auto 0;
  }
  .enc-vnode__dot { width: clamp(30px, 8.4cqw, 56px); height: clamp(30px, 8.4cqw, 56px); }
  .enc-vnode__label { font-size: clamp(8.5px, 2.5cqw, 13px); }
  .enc-sector--care .enc-vnode__label { font-size: clamp(7.5px, 2cqw, 11px); }
  .enc-stage[data-active] .enc-sector.is-dim .enc-visual { opacity: 1; }
  .enc-stage[data-active] .enc-sector.is-dim .enc-vnode__label { opacity: 1; }

  .enc-footer {
    display: flex; flex-direction: column; align-items: center; gap: 14px; height: auto; text-align: center;
    padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); font-size: 11px;
  }
  .enc-footer .enc-footer__b { display: flex; }
  .enc-footer__a, .enc-footer__b { justify-self: auto; }
  .enc-footer__c { flex-direction: column-reverse; gap: 16px; }
  .enc-social { gap: 26px; }
  .enc-social svg { width: 24px; }

  html.enc-booting .enc-sector { opacity: 0; }
}

/* Short laptop viewports: keep text compact */
@media (min-width: 901px) and (max-height: 700px) {
  .enc-desc { line-height: 1.55; }
}

/* ------------------------------------------------------------------ */
/* 14. Reduced motion                                                  */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .enc-home *, .enc-home *::before, .enc-home *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .enc-flow, .enc-neon-edge, .enc-cloud-float, .enc-led, .enc-spark, .enc-lamp, .enc-bar { animation: none !important; }
}

/* LOGIN button in the menu */
@media (max-width:900px){.enc-nav .enc-login{margin-top:10px;padding:14px 44px;font-size:18px}}

/* Login button: four-colour border (Cloud / Home / Business / Care) */
.enc-nav .enc-login{display:inline-flex;align-items:center;padding:9px 22px;border:2px solid transparent;border-radius:999px;color:#fff;opacity:1;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(#050b18,#050b18) padding-box,linear-gradient(90deg,#1ea1ff 0 25%,#ff9f1c 25% 50%,#17d6c0 50% 75%,#8ed23a 75% 100%) border-box;transition:box-shadow .35s,filter .35s}
.enc-nav .enc-login::after{display:none}
.enc-nav .enc-login:hover,.enc-nav .enc-login:focus-visible{filter:brightness(1.2);box-shadow:0 0 22px rgba(30,161,255,.35),0 0 22px rgba(255,159,28,.25)}

/* ---- AI-agent threat strip (top of every page): compact, monochrome ---- */
.enc-threat{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,26px);flex-wrap:wrap;padding:7px 24px;color:#fff;font-size:11.5px;line-height:1.3;font-family:inherit;letter-spacing:.01em;background:#05070d;border-bottom:1px solid rgba(255,255,255,.07)}
.enc-threat b{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;color:#fff;display:flex;align-items:center;gap:8px}
.enc-threat b i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.85}
.enc-threat span{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.78);white-space:nowrap}
.enc-threat svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:rgba(255,255,255,.85)}
.enc-threat u{width:1px;height:12px;background:rgba(255,255,255,.18)}
@media(max-width:900px){.enc-threat u{display:none}.enc-threat{font-size:11px;gap:5px 16px;padding:7px 14px}.enc-threat .s4{display:inline-flex}}
/* home page: strip sits above the full-screen stage */
.enc-page > .enc-threat{flex:none;height:30px;padding:0 24px;flex-wrap:nowrap;overflow:hidden}
.enc-page{--strip-h:30px}
.enc-page > .enc-header{top:var(--strip-h)}
@media(max-width:900px){
  .enc-page > .enc-threat{height:auto;min-height:30px;padding:7px 14px;flex-wrap:wrap;margin-top:62px}
  .enc-page > .enc-header{top:var(--wpbar)}
  .enc-page .enc-sector--cloud{padding-top:36px}
}

/* ------------------------------------------------------------------ */
/* 15. Phones: a short home page, everything on ONE screen              */
/* ------------------------------------------------------------------ */
.enc-m { display: none; }
@media (max-width: 600px) {
  .enc-home { --header-h: 52px; }
  html.enc-js, body.enc-home { height: 100%; overflow: hidden; }
  .enc-page > .enc-threat { display: none; }
  .enc-page { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 0; overflow: hidden; padding-top: var(--header-h); box-sizing: border-box; }
  .enc-stage { flex: 1 1 auto; min-height: 0; }
  .enc-layer--fg { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .enc-logo { --lh: 34px; }
  .enc-header { height: var(--header-h); }

  .enc-sector {
    min-height: 0; padding: 6px 14px 6px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 33%;
    align-items: center; column-gap: 8px; overflow: hidden;
  }
  .enc-sector--cloud { padding-top: 6px; }
  .enc-body { grid-column: 1; grid-row: 1; order: 0; display: flex; flex-direction: column; gap: 4px; max-width: none; margin: 0; min-width: 0; }
  .enc-brand { gap: 8px; }
  .enc-brand__mark { width: 26px; }
  .enc-title { display: flex; gap: .3em; font-size: 14px; line-height: 1.05; white-space: nowrap; }
  .enc-rule, .enc-fold--tag, .enc-fold--desc { display: none; }
  .enc-m { display: block; }
  .enc-m__k { margin: 0; font-size: 9.5px; line-height: 1.25; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
  .enc-m__t { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .88); }
  .enc-cta { align-self: flex-start; min-width: 0; margin-top: 3px; padding: 6px 12px; font-size: 10.5px; letter-spacing: .08em; gap: 8px; white-space: nowrap; }
  .enc-cta svg { width: 1.2em; height: 1.2em; }
  .enc-visual { grid-column: 2; grid-row: 1; order: 0; position: relative; width: 100%; max-width: 150px; margin: 0; justify-self: end; align-self: center; }
  .enc-vnode { display: none; }

  .enc-footer { flex: none; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; height: auto; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); font-size: 10px; }
  .enc-footer .enc-footer__a, .enc-footer .enc-footer__b { display: none; }
  .enc-footer__c { flex-direction: row; gap: 14px; width: 100%; justify-content: space-between; }
  .enc-social { gap: 18px; }
  .enc-social svg { width: 18px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .enc-sector { padding-top: 4px; padding-bottom: 4px; }
  .enc-body { gap: 2px; }
  .enc-brand__mark { width: 22px; }
  .enc-title { font-size: 13px; }
  .enc-m__k { font-size: 8.5px; letter-spacing: .06em; }
  .enc-m__t { font-size: 11.5px; line-height: 1.25; margin-top: 1px; }
  .enc-cta { padding: 4px 10px; font-size: 9.5px; margin-top: 2px; }
}

/* While sectors slide: freeze decorative animations so every frame is cheap (smoother in Safari) */
.enc-stage.is-moving .enc-visual *, .enc-stage.is-moving .enc-sector::after { animation-play-state: paused !important; }

/* desktop: cells are positioned from script (see placeCells in encryptia-home.js) */
@media (min-width: 901px) {
  .enc-layer--bg > .enc-bg, .enc-layer--fg > .enc-sector { position: absolute; box-sizing: border-box; min-width: 0; min-height: 0; left: 0; top: 0; }
  .enc-layer--bg > .enc-bg--home, .enc-layer--fg > .enc-sector[data-col="1"] { left: 50%; }
  .enc-layer--fg > .enc-sector[data-row="1"], .enc-layer--bg > .enc-bg--business, .enc-layer--bg > .enc-bg--care { top: 50%; }
  .enc-layer--bg > .enc-bg, .enc-layer--fg > .enc-sector { width: 50%; height: 50%; }
}

/* Safari/WebKit: isolate only the four clipped background surfaces. Do not
   transform the page/stage: fixed menus and portal must remain viewport-bound. */
@media (min-width: 901px) {
  .enc-webkit .enc-layer--bg > .enc-bg {
    transform: translateZ(0);
    contain: paint;
  }
}
/* Desktop cells are absolute; the unused grid tracks need no recalculation. */
@media (min-width: 901px) {
  .enc-layer { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .enc-bg > .enc-bg__spot { display: none; }
}

/* ---- intro: the original Encryptia mark ---- */
.enc-intro__mark { width: clamp(84px, 17vmin, 170px); filter: drop-shadow(0 0 22px rgba(60, 150, 255, .55)); }
.enc-intro__img { display: block; width: 100%; height: auto; opacity: 0; transform: scale(.82); animation: encMarkIn 1.1s var(--enc-ease-io) .2s forwards; }
@keyframes encMarkIn { from { opacity: 0; transform: scale(.82); filter: blur(6px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }

/* ---- Login: four-colour neon contour, quarters meet at 12 / 3 / 6 / 9 o'clock ---- */
.enc-nav .enc-login { position: relative; isolation: isolate; border: 0; background: #050b18;
  --ring: conic-gradient(from 270deg, #1ea1ff 0%, #1ea1ff 24%, #ff9f1c 26%, #ff9f1c 49%, #17d6c0 51%, #17d6c0 74%, #8ed23a 76%, #8ed23a 99%, #1ea1ff 100%); }
.enc-nav .enc-login::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px; background: var(--ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.enc-nav .enc-login::after { display: block; content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; background: var(--ring); filter: blur(7px); opacity: .7; transition: opacity .35s; }
.enc-nav .enc-login:hover::after, .enc-nav .enc-login:focus-visible::after { opacity: .85; }
.enc-nav .enc-login:hover, .enc-nav .enc-login:focus-visible { box-shadow: none; filter: none; }

/* ---- Phones: big, readable sector tiles ---- */
@media (max-width: 600px) {
  .enc-sector { --f: clamp(15px, 5.6vw, 23px); --ic: calc(var(--f) * 2.15); column-gap: 6px; padding: 6px 12px 6px 16px; }
  .enc-body { gap: 7px; }
  .enc-brand { gap: 11px; align-items: stretch; }
  .enc-sector--cloud { --s: 1.44; } .enc-sector--home { --s: 1.33; } .enc-sector--business { --s: 1.5; } .enc-sector--care { --s: 1.16; }
  .enc-brand__mark { width: calc(var(--ic) * var(--s)); height: calc(var(--ic) * var(--s)); margin: calc(var(--ic) * (1 - var(--s)) / 2); flex: none; overflow: visible; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .55)); }
  .enc-title { flex-direction: column; justify-content: space-between; gap: 0; height: var(--ic); font-size: var(--f); line-height: .78; letter-spacing: .02em; padding: .08em 0 .04em; }
  .enc-title > span { display: block; }
  .enc-m__t { display: none; }
  .enc-m__k { display: block; font-size: clamp(11.5px, 3.6vw, 14.5px); line-height: 1.3; letter-spacing: .02em; text-transform: none; color: rgba(255, 255, 255, .9); }
  .enc-cta { padding: 0; border: 0; background: none; box-shadow: none; min-width: 0; margin-top: 2px; gap: 9px; font-size: clamp(12px, 3.6vw, 14px); letter-spacing: .1em; color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
  .enc-cta svg { width: 1.7em; height: 1.7em; stroke-width: 1.8; filter: drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 12px rgba(var(--accent-rgb), .8)); animation: encNudge 2.2s ease-in-out infinite; }
  .enc-cta:hover, .enc-sector.is-pressed .enc-cta { background: none; box-shadow: none; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .enc-sector { --f: clamp(14px, 4.6vw, 19px); }
  .enc-body { gap: 4px; }
  .enc-m__k { font-size: 11px; line-height: 1.25; letter-spacing: .01em; }
  .enc-cta { font-size: 11.5px; padding: 0; margin-top: 0; }
}
@keyframes encNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (max-width: 600px) {
  .enc-sector { padding-left: 22px; }
  .enc-sector--cloud { --s: 1.3; }
  .enc-brand { gap: 16px; }
}
@media (max-width: 600px) and (max-height: 600px) {
  .enc-sector { padding-top: 3px; padding-bottom: 3px; }
  .enc-body { gap: 3px; }
  .enc-m__k { font-size: 10.5px; line-height: 1.2; }
  .enc-cta { font-size: 11px; margin-top: 0; }
}