/* ==========================================================================
   NirnayAI Solutions Private Limited — enterprise UI system
   Tokens follow ui-ux-pro-max "Modern Dark": elevated near-black (never pure
   #000), hairline rgba borders, frosted glass, 16px radii,
   cubic-bezier(.16,1,.3,1) easing, Inter.
   ========================================================================== */

:root{
  /* surfaces — never pure black (OLED smear) */
  --deep:#040508;
  --base:#07080d;
  --elev:#0c0e15;
  --elev-2:#12151f;

  /* frosted glass */
  --glass:rgba(255,255,255,.045);
  --glass-hi:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.09);
  --border-hi:rgba(255,255,255,.16);

  /* accents */
  --accent:#5e6ad2;
  --accent-lo:#818cf8;
  --accent-glow:rgba(94,106,210,.24);
  --brain:#8bc34a;
  --circuit:#f5a623;
  --sky:#38bdf8;

  /* text */
  --fg:#edeef2;
  --fg-2:#b4bac7;
  --fg-3:#828a9c;

  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh:0 8px 30px rgba(0,0,0,.42);
  --sh-lg:0 24px 70px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(94,106,210,.55);

  --r-sm:12px; --r:16px; --r-lg:22px; --r-full:999px;
  --e:cubic-bezier(.16,1,.3,1);
  --t:340ms;
  --max:1280px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--base);
  color:var(--fg);
  font-size:16px;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100svh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:28px}

.skip{position:absolute;left:22px;top:-100px;z-index:400;background:var(--accent);color:#fff;padding:12px 24px;border-radius:10px;font-weight:700;transition:top var(--t) var(--e)}
.skip:focus{top:22px}

/* ---------------- ambient gradient field ---------------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.1}
.blob-a{width:640px;height:640px;background:var(--accent);top:-16%;left:-12%;animation:drift-a 34s var(--e) infinite alternate}
.blob-b{width:520px;height:520px;background:var(--brain);bottom:-18%;right:-10%;animation:drift-b 42s var(--e) infinite alternate}
.blob-c{width:440px;height:440px;background:var(--sky);top:44%;left:56%;animation:drift-c 38s var(--e) infinite alternate}
@keyframes drift-a{to{transform:translate(90px,60px) scale(1.12)}}
@keyframes drift-b{to{transform:translate(-80px,-50px) scale(1.08)}}
@keyframes drift-c{to{transform:translate(-60px,70px) scale(1.14)}}
.grid-lines{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 80%)}
.page{position:relative;z-index:1}

/* ---------------- header ---------------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:200;padding-block:16px;border-bottom:1px solid transparent;transition:background var(--t) var(--e),border-color var(--t) var(--e),padding var(--t) var(--e)}
.hdr.stuck{background:rgba(7,8,13,.72);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border-bottom-color:var(--border);padding-block:11px}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px}

/* brand lockup: full logo image */
.brandbar{display:flex;align-items:center;min-height:44px}
.brand-logo{height:54px;width:auto;max-width:min(60vw,300px);object-fit:contain;flex-shrink:0;
  transition:transform var(--t) var(--e)}
.brandbar:hover .brand-logo{transform:scale(1.06)}

.nav{display:flex;align-items:center;gap:2px;list-style:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--r-full);font-size:.9375rem;font-weight:500;color:var(--fg-2);transition:color var(--t) var(--e),background var(--t) var(--e)}
.nav a:hover{color:var(--fg);background:var(--glass)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:12px 26px;border-radius:var(--r-full);font-weight:650;font-size:.9375rem;
  transition:transform 160ms var(--e),background var(--t) var(--e),border-color var(--t) var(--e),box-shadow var(--t) var(--e)}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn-p{background:linear-gradient(135deg,var(--accent),var(--accent-lo));color:#fff;box-shadow:0 6px 24px var(--accent-glow)}
.btn-p:hover{box-shadow:0 10px 34px var(--accent-glow)}
.btn-g{border:1px solid var(--border-hi);color:var(--fg);background:var(--glass);backdrop-filter:blur(12px)}
.btn-g:hover{background:var(--glass-hi)}

.burger{display:none;width:44px;height:44px;border-radius:11px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform var(--t) var(--e),opacity var(--t) var(--e)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- page loader ---------------- */
.loader{position:fixed;inset:0;z-index:500;background:var(--base);display:grid;place-items:center;transition:opacity 460ms var(--e),visibility 460ms var(--e)}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}  /* also during the fade */
.loader-in{display:flex;flex-direction:column;align-items:center;gap:18px}
.loader-logo{height:66px;width:auto;object-fit:contain;animation:breathe 2.2s var(--e) infinite alternate}
@keyframes breathe{from{opacity:.6;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.loader-nm{font-size:1.25rem;font-weight:800;letter-spacing:-.03em}
.loader-nm em{font-style:normal;color:var(--brain)}
.loader-bar{width:190px;height:2px;border-radius:2px;background:var(--glass-hi);overflow:hidden}
.loader-bar i{display:block;height:100%;width:40%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--brain));animation:sweep 1.05s var(--e) infinite}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}

/* ---------------- headings ---------------- */
.eyebrow{display:inline-block;padding:6px 15px;margin-bottom:18px;border:1px solid var(--border-hi);border-radius:var(--r-full);background:var(--glass);backdrop-filter:blur(12px);font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lo)}
h1.display{font-size:clamp(2.25rem,6vw,4.25rem);font-weight:800;line-height:1.03;letter-spacing:-.045em}
h2.title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-.038em}
.grad{background:linear-gradient(110deg,var(--brain) 0%,var(--sky) 50%,var(--accent-lo) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(1rem,1.8vw,1.1875rem);color:var(--fg-2);max-width:68ch}
.muted{color:var(--fg-2);font-size:1rem;max-width:66ch}

.sec{padding-block:104px;position:relative}
.sec-head{max-width:820px;margin-bottom:56px}
.sec-head.mid{text-align:center;margin-inline:auto}
.sec-head.mid .muted{margin-inline:auto}

/* ---------------- image cards (categories & problems) ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.tile{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--elev);box-shadow:var(--sh);
  aspect-ratio:4/3;
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e),border-color var(--t) var(--e);
  will-change:transform;
}
.tile:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:var(--border-hi)}
.tile:active{transform:translateY(-4px) scale(.99)}

/* Generated surface — replaces stock photography everywhere.
   Built from the category accent (--c) so every card is on-theme by
   construction: no image files, no download weight, nothing to keep in sync. */
.tile-plate{position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(118% 86% at 76% 10%, color-mix(in srgb,var(--c,var(--accent)) 24%,transparent), transparent 60%),
    linear-gradient(158deg, var(--elev-2) 0%, var(--elev) 52%, var(--deep) 100%);
  transition:transform 720ms var(--e)}
.tile:hover .tile-plate{transform:scale(1.035)}
/* hairline mesh — reads as engineering drawing, not decoration */
.tile-plate::before{content:'';position:absolute;inset:-1px;
  background-image:
    linear-gradient(color-mix(in srgb,var(--c,var(--accent)) 13%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--c,var(--accent)) 13%,transparent) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(112% 84% at 78% 12%,#000,transparent 66%);
          mask-image:radial-gradient(112% 84% at 78% 12%,#000,transparent 66%)}
/* single sweeping arc, drawn in the accent */
.tile-plate::after{content:'';position:absolute;right:-32%;top:-56%;width:112%;aspect-ratio:1;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--c,var(--accent)) 32%,transparent);
  box-shadow:0 0 0 22px color-mix(in srgb,var(--c,var(--accent)) 5%,transparent)}

.tile-ico{position:absolute;top:22px;left:24px;width:50px;height:50px;border-radius:15px;
  display:grid;place-items:center;z-index:2;
  background:color-mix(in srgb,var(--c,var(--accent)) 13%,rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb,var(--c,var(--accent)) 30%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform var(--t) var(--e),border-color var(--t) var(--e)}
.tile:hover .tile-ico{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c,var(--accent)) 52%,transparent)}
.tile-ico svg{width:25px;height:25px;color:var(--c,var(--accent))}
.tiles.prob-grid .tile-ico{width:42px;height:42px;border-radius:13px;top:18px;left:20px}
.tiles.prob-grid .tile-ico svg{width:21px;height:21px}

/* legibility scrim — lighter than the old one, the plate is already dark */
.tile-ov{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(4,5,8,.34) 54%,rgba(4,5,8,.86) 100%);
  transition:background var(--t) var(--e)}
.tile:hover .tile-ov{background:linear-gradient(180deg,transparent 0%,rgba(4,5,8,.4) 50%,rgba(4,5,8,.9) 100%)}
.tile-accent{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c,var(--accent));transform:scaleX(0);transform-origin:0 50%;transition:transform 480ms var(--e)}
.tile:hover .tile-accent{transform:scaleX(1)}

.tile-body{position:absolute;left:0;right:0;bottom:0;padding:26px}
.tile-name{font-size:1.375rem;font-weight:750;letter-spacing:-.028em;margin-bottom:7px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.tile-meta{display:flex;align-items:center;gap:9px;font-size:.8125rem;font-weight:600;color:var(--fg-2)}
.tile-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--c,var(--accent))}
.tile-blurb{font-size:.875rem;color:var(--fg-2);margin-top:10px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height 460ms var(--e),opacity 340ms var(--e),margin var(--t) var(--e)}
.tile:hover .tile-blurb{max-height:88px;opacity:1}
.tile-go{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);
  opacity:0;transform:translate(-6px,6px);transition:opacity var(--t) var(--e),transform var(--t) var(--e)}
.tile:hover .tile-go{opacity:1;transform:none}
.tile-go svg{width:16px;height:16px;color:#fff}



/* problem tiles sit a little shorter */
.tiles.prob-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tiles.prob-grid .tile{aspect-ratio:3/2}
.tiles.prob-grid .tile-name{font-size:1.125rem}

/* ---------------- category hero (detail page) ---------------- */
/* Height was 56svh, so the banner's shape changed with the window and a
   photograph would have been cropped differently on every screen. A fixed
   ratio close to the 2.4:1 the images are graded at keeps that predictable. */
.cat-hero{position:relative;aspect-ratio:2.6;min-height:340px;
  display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--border)}
.cat-hero-plate{position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(74% 108% at 84% 6%, color-mix(in srgb,var(--c,var(--accent)) 22%,transparent), transparent 62%),
    linear-gradient(168deg, var(--elev) 0%, var(--base) 62%);}
.cat-hero-plate::before{content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(color-mix(in srgb,var(--c,var(--accent)) 10%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--c,var(--accent)) 10%,transparent) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 100% at 84% 8%,#000,transparent 70%);
          mask-image:radial-gradient(70% 100% at 84% 8%,#000,transparent 70%)}
.cat-hero-mark{position:absolute;right:5%;top:50%;transform:translateY(-50%);
  width:min(30vw,290px);aspect-ratio:1;display:grid;place-items:center;pointer-events:none}
.cat-hero-mark svg{width:100%;height:100%;color:color-mix(in srgb,var(--c,var(--accent)) 26%,transparent);stroke-width:.9}
/* With a photograph behind it the plate, the decorative glyph and the
   bottom-heavy scrim all get out of the way: the glyph sits exactly where the
   subject does, and a scrim that goes fully opaque at the foot would bury it.
   A left-to-right wash instead, the same treatment the homepage banner uses. */
.cat-hero.has-img .cat-hero-plate,
.cat-hero.has-img .cat-hero-mark{display:none}
.cat-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center}
.cat-hero.has-img .cat-hero-ov{background:
  linear-gradient(90deg, rgba(4,5,8,.90) 0%, rgba(4,5,8,.78) 38%,
                  rgba(4,5,8,.36) 62%, transparent 90%),
  linear-gradient(180deg, rgba(4,5,8,.55) 0%, transparent 26%,
                  transparent 72%, rgba(4,5,8,.70) 100%)}
.cat-hero-ov{position:absolute;inset:0;background:
  linear-gradient(180deg,transparent 0%,rgba(4,5,8,.42) 52%,var(--base) 100%)}
.cat-hero-in{position:relative;z-index:2;width:100%;padding-block:56px 52px}
.crumb{display:flex;align-items:center;gap:9px;font-size:.8125rem;font-weight:600;color:var(--fg-3);margin-bottom:18px}
.crumb a{transition:color var(--t) var(--e)}
.crumb a:hover{color:var(--fg)}
.crumb svg{width:13px;height:13px}

/* ---------------- modal / overlay ---------------- */
.scrim{position:fixed;inset:0;z-index:300;background:rgba(2,3,5,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--e),visibility var(--t) var(--e)}
.scrim.open{opacity:1;visibility:visible}

.modal{position:fixed;z-index:310;inset:0;display:grid;place-items:center;padding:24px;pointer-events:none}
.modal-card{
  position:relative;width:min(940px,100%);max-height:88svh;overflow:hidden;
  display:flex;flex-direction:column;
  background:rgba(12,14,21,.86);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--border-hi);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  opacity:0;transform:translateY(22px) scale(.975);pointer-events:none;
  transition:opacity var(--t) var(--e),transform var(--t) var(--e);
}
.modal.open .modal-card{opacity:1;transform:none;pointer-events:auto}
.modal-hero{position:relative;height:150px;flex-shrink:0;overflow:hidden;
  background:
    radial-gradient(86% 150% at 88% 0%, color-mix(in srgb,var(--c,var(--accent)) 26%,transparent), transparent 62%),
    linear-gradient(150deg, var(--elev-2), var(--elev) 70%)}
.modal-hero::before{content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(color-mix(in srgb,var(--c,var(--accent)) 12%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--c,var(--accent)) 12%,transparent) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 150% at 88% 0%,#000,transparent 70%);
          mask-image:radial-gradient(80% 150% at 88% 0%,#000,transparent 70%)}
.modal-hero-ico{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:76px;height:76px;
  display:grid;place-items:center;pointer-events:none}
.modal-hero-ico svg{width:100%;height:100%;color:color-mix(in srgb,var(--c,var(--accent)) 42%,transparent);stroke-width:1.1}
.modal-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(12,14,21,.72))}
.modal-hero-tx{position:absolute;left:0;right:0;bottom:0;padding:24px 30px;z-index:2}
.modal-cat{display:inline-block;padding:4px 12px;border-radius:var(--r-full);font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:color-mix(in srgb,var(--c,var(--accent)) 26%,transparent);border:1px solid color-mix(in srgb,var(--c,var(--accent)) 50%,transparent);color:#fff;margin-bottom:9px}
.modal-hero-tx h3{font-size:clamp(1.375rem,3vw,1.875rem);font-weight:750;letter-spacing:-.03em;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.modal-body{padding:30px;overflow-y:auto;overscroll-behavior:contain}
.modal-close{position:absolute;top:18px;right:18px;z-index:3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);
  transition:background var(--t) var(--e),transform 160ms var(--e)}
.modal-close:hover{background:rgba(0,0,0,.65)}
.modal-close:active{transform:scale(.94)}
.modal-close svg{width:17px;height:17px;color:#fff}

.blk{margin-bottom:26px}
.blk:last-child{margin-bottom:0}
.blk-h{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.blk-h span{font-size:.6875rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3)}
.blk-h::after{content:'';flex:1;height:1px;background:var(--border)}
.blk p{color:var(--fg-2);font-size:.9375rem;line-height:1.72}

.ai-note{
  padding:18px 20px;margin-bottom:18px;border-radius:var(--r);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,transparent),transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  display:flex;gap:14px;align-items:flex-start;
}
.ai-note .pulse{width:9px;height:9px;border-radius:50%;background:var(--accent-lo);flex-shrink:0;margin-top:6px;position:relative}
.ai-note .pulse::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent-lo);opacity:.55;animation:halo 2.2s var(--e) infinite}
@keyframes halo{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.ai-note p{font-size:.875rem;color:var(--fg-2);line-height:1.65;margin:0}
.ai-note b{color:var(--fg);font-weight:650}

/* ---------------- footer ---------------- */
.ft{border-top:1px solid var(--border);background:var(--deep);padding-block:64px 30px;position:relative;z-index:1}
.ft-g{display:grid;grid-template-columns:1fr 1fr 1.15fr 1.5fr;gap:44px;margin-bottom:46px;
  align-items:start}
.ft-c h4{font-size:.6875rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3);margin-bottom:18px}
.ft-c ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.ft-c a{font-size:.9375rem;color:var(--fg-2);transition:color var(--t) var(--e)}
.ft-c a:hover{color:var(--fg)}

/* contact column: a quiet label above each set, the values themselves loud */
.ft-help{display:flex;flex-direction:column;gap:6px}
.ft-help .ft-l{font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);margin-top:14px}
.ft-help .ft-l:first-of-type{margin-top:0}
.ft-help a{font-size:1.0625rem;font-weight:700;color:var(--fg);width:fit-content;
  transition:color var(--t) var(--e)}
.ft-help a:hover{color:var(--accent-lo)}

/* the call-to-action card, the one block in the footer that is allowed to shout */
.ft-cta{padding:30px 28px;border-radius:var(--r-lg);text-align:center;
  border:1px solid var(--border-hi);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ft-cta h3{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.ft-cta p{font-size:.875rem;line-height:1.6;color:var(--fg-2);margin:0 auto 22px;max-width:34ch}
.ft-cta .btn{width:100%;max-width:230px}

.ft-b{padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;
  gap:16px 26px;justify-content:space-between;align-items:center}
.ft-b p{font-size:.8125rem;color:var(--fg-3)}
.ft-mark{height:34px;width:auto;object-fit:contain;flex-shrink:0}
.ft-b .ft-loc{margin-left:auto}

/* ---------------- scroll reveal ---------------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity 520ms var(--e),transform 620ms var(--e)}
.rv.in{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
/* The WhatsApp button is pinned to the viewport's right edge, while the footer
   is centred inside a 1280px wrap. They only collide once the viewport is
   narrow enough for the wrap to reach under the button, so the last row gives
   up width on the right rather than the whole footer giving up height. */
@media (max-width:1340px){
  .ft-b{padding-right:74px}
}
@media (max-width:1024px){
  /* the CTA card takes the full row rather than being squeezed to a sliver */
  .ft-g{grid-template-columns:1fr 1fr;gap:34px}
  .ft-cta{grid-column:1/-1;order:1}
}
@media (max-width:560px){
  .ft-g{grid-template-columns:1fr;gap:30px}
  .ft-cta .btn{max-width:none}
  .ft-b{justify-content:flex-start;padding-right:0;padding-bottom:44px}
  .ft-b .ft-loc{margin-left:0}
}
@media (max-width:768px){
  .brand-logo{height:44px}
  .wrap{padding-inline:20px}
  .sec{padding-block:68px}
  .sec-head{margin-bottom:36px}
  .tiles{grid-template-columns:1fr;gap:18px}
  .tiles.prob-grid{grid-template-columns:1fr}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
    background:rgba(7,8,13,.97);backdrop-filter:blur(22px);border-bottom:1px solid var(--border);
    padding:16px;gap:3px;transform:translateY(-140%);transition:transform var(--t) var(--e)}
  .nav.open{transform:none}
  .nav a{justify-content:center}
  .burger{display:flex}
  /* too narrow for a wide band: hold a workable height and slide the frame
     right so the subject stays in view instead of being cropped away */
  .cat-hero{aspect-ratio:auto;min-height:300px}
  .cat-hero-img{object-position:78% center}
  .cat-hero.has-img .cat-hero-ov{background:
    linear-gradient(180deg, rgba(4,5,8,.55) 0%, rgba(4,5,8,.72) 45%, rgba(4,5,8,.92) 100%)}
  .modal{padding:0;place-items:end stretch}
  .modal-card{width:100%;max-height:92svh;border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(100%)}
  .modal.open .modal-card{transform:none}
  .modal-body{padding:22px}
  .modal-hero{height:150px}
  /* tile blurb always visible on touch — there is no hover */
  .tile-blurb{max-height:88px;opacity:1}
}

/* ---------- floating WhatsApp button ----------
   Sits above everything and follows the viewport, so it is reachable from any
   point on the page. Keeps WhatsApp's own brand green rather than a site
   accent: people recognise the badge by its colour before they read it. */
.wa{position:fixed;right:24px;bottom:24px;z-index:60;
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:#25d366;color:#0b1f14;
  box-shadow:0 8px 26px rgba(37,211,102,.34),0 2px 8px rgba(0,0,0,.4);
  transition:transform 220ms var(--e),box-shadow 220ms var(--e)}
.wa svg{width:30px;height:30px;fill:#fff}
.wa:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 36px rgba(37,211,102,.46),0 3px 10px rgba(0,0,0,.45)}
.wa:active{transform:scale(.96)}
.wa:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:768px){
  .wa{right:16px;bottom:16px;width:52px;height:52px}
  .wa svg{width:27px;height:27px}
}

@media (prefers-reduced-motion:reduce){
  .wa,.wa:hover,.wa:active{transition:none;transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .blob{animation:none}
}

/* --------------------------------------------------------------------------
   Plate variants — six cards inside one category share an accent and an icon,
   so without this they render identically and the grid reads as noise.
   Shifting the light source and the arc gives each card its own composition
   while staying inside the same system.
   -------------------------------------------------------------------------- */
.tile:nth-child(6n+2) .tile-plate{background:
  radial-gradient(104% 96% at 18% 8%, color-mix(in srgb,var(--c,var(--accent)) 22%,transparent), transparent 58%),
  linear-gradient(196deg, var(--elev-2) 0%, var(--elev) 54%, var(--deep) 100%)}
.tile:nth-child(6n+2) .tile-plate::after{right:auto;left:-40%;top:-48%;width:96%}

.tile:nth-child(6n+3) .tile-plate{background:
  radial-gradient(130% 78% at 92% 88%, color-mix(in srgb,var(--c,var(--accent)) 20%,transparent), transparent 56%),
  linear-gradient(142deg, var(--elev-2) 0%, var(--elev) 48%, var(--deep) 100%)}
.tile:nth-child(6n+3) .tile-plate::after{top:auto;bottom:-64%;right:-28%;width:104%}

.tile:nth-child(6n+4) .tile-plate{background:
  radial-gradient(96% 120% at 50% -8%, color-mix(in srgb,var(--c,var(--accent)) 21%,transparent), transparent 60%),
  linear-gradient(178deg, var(--elev-2) 0%, var(--elev) 56%, var(--deep) 100%)}
.tile:nth-child(6n+4) .tile-plate::after{right:-6%;top:-78%;width:120%;opacity:.8}

.tile:nth-child(6n+5) .tile-plate{background:
  radial-gradient(112% 88% at 8% 84%, color-mix(in srgb,var(--c,var(--accent)) 19%,transparent), transparent 58%),
  linear-gradient(206deg, var(--elev-2) 0%, var(--elev) 50%, var(--deep) 100%)}
.tile:nth-child(6n+5) .tile-plate::after{right:auto;left:-52%;bottom:-40%;top:auto;width:100%}

.tile:nth-child(6n) .tile-plate{background:
  radial-gradient(88% 104% at 68% 96%, color-mix(in srgb,var(--c,var(--accent)) 23%,transparent), transparent 56%),
  linear-gradient(164deg, var(--elev-2) 0%, var(--elev) 52%, var(--deep) 100%)}
.tile:nth-child(6n) .tile-plate::after{right:-44%;top:-24%;width:88%}

/* mesh follows the light source so the two never fight */
.tile:nth-child(6n+2) .tile-plate::before{-webkit-mask-image:radial-gradient(104% 88% at 18% 10%,#000,transparent 66%);mask-image:radial-gradient(104% 88% at 18% 10%,#000,transparent 66%)}
.tile:nth-child(6n+3) .tile-plate::before{-webkit-mask-image:radial-gradient(118% 82% at 90% 86%,#000,transparent 66%);mask-image:radial-gradient(118% 82% at 90% 86%,#000,transparent 66%)}
.tile:nth-child(6n+4) .tile-plate::before{-webkit-mask-image:radial-gradient(96% 110% at 50% 0%,#000,transparent 68%);mask-image:radial-gradient(96% 110% at 50% 0%,#000,transparent 68%)}
.tile:nth-child(6n+5) .tile-plate::before{-webkit-mask-image:radial-gradient(108% 88% at 10% 82%,#000,transparent 66%);mask-image:radial-gradient(108% 88% at 10% 82%,#000,transparent 66%)}
.tile:nth-child(6n)   .tile-plate::before{-webkit-mask-image:radial-gradient(92% 100% at 68% 92%,#000,transparent 66%);mask-image:radial-gradient(92% 100% at 68% 92%,#000,transparent 66%)}