/* ══════════════════════════════════════════
   TILEFIN IT SOLUTIONS — style.css
   Brand: Navy #1b3d7d · Cyan #4dd9e8
   Font:  Barlow Condensed (Gotham Narrow alt)
          + Plus Jakarta Sans (body)
   ══════════════════════════════════════════ */

:root {
  --navy:        #1b3d7d;
  --navy-dark:   #0f2454;
  --navy-deeper: #091a3e;
  --cyan:        #4dd9e8;
  --cyan-light:  #a8eef5;
  --cyan-pale:   rgba(77,217,232,0.1);
  --cyan-glow:   rgba(77,217,232,0.22);
  --bg:          #06101f;
  --bg-2:        #0b1a30;
  --bg-3:        #0f2145;
  --bg-card:     #0d1e3a;
  --border:      rgba(77,217,232,0.09);
  --border-md:   rgba(77,217,232,0.2);
  --border-lg:   rgba(77,217,232,0.35);
  --text:        #e2eaf6;
  --text-muted:  #8ea8cc;
  --text-dim:    #3d5a80;
  --white:       #ffffff;
  --red:         #ff5b5b;
  --green:       #22c97d;
  --radius:      12px;
  --radius-lg:   20px;
  --shadow:      0 4px 28px rgba(0,0,0,0.45);
  --nav-h:       74px;
  --trans:       0.28s cubic-bezier(0.4,0,0.2,1);
  --font-head:   'Barlow Condensed', sans-serif;
  --font-body:   'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.72; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; transition: color var(--trans); }
ul { list-style: none; }
address { font-style: normal; }
input, textarea, button, select { font-family: inherit; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 4px; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Typography */
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.1; color: var(--white); }
h1 { font-size: clamp(2.6rem,5.5vw,4.8rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem,3.5vw,3rem); letter-spacing: 0; }
h3 { font-size: 1.15rem; font-weight: 700; }
h4 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
p  { font-size: 1rem; line-height: 1.75; }
em { font-style: normal; color: var(--cyan); }
strong { font-weight: 700; color: var(--white); }

/* AI chip badge */
.ai-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-pale);
  border: 1px solid var(--border-md);
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}
.ai-chip-sm { font-size: 0.58rem; padding: 1px 5px; }

/* Section Tag */
.section-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-pale);
  border: 1px solid var(--border-md);
  padding: 5px 14px; border-radius: 100px; margin-bottom: 18px;
}
.section-header { text-align: center; max-width: 640px; margin: 0 auto 68px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { color: var(--text-muted); font-size: 1.05rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.02em; padding: 12px 26px; border-radius: 8px;
  cursor: pointer; transition: var(--trans); border: none; white-space: nowrap;
}
.btn--primary { background: linear-gradient(135deg,var(--navy),var(--navy-dark)); color: var(--white); border: 1.5px solid var(--border-md); }
.btn--primary:hover { background: linear-gradient(135deg,#2451a0,var(--navy)); border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-glow),0 8px 24px rgba(0,0,0,0.4); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--text); border: 1.5px solid var(--border-md); }
.btn--outline:hover { border-color: var(--cyan); color: var(--cyan); }
.btn--nav { background: var(--navy); color: var(--white); padding: 9px 20px; font-size: 0.86rem; border: 1.5px solid var(--border-md); }
.btn--nav:hover { border-color: var(--cyan); color: var(--cyan); }
.btn--lg { padding: 15px 34px; font-size: 1rem; }
.btn--full { width: 100%; }
.btn--tile-select { background: var(--cyan-pale); color: var(--cyan); border: 1.5px solid var(--border-md); font-size: 0.82rem; padding: 8px 16px; border-radius: 7px; font-family: var(--font-head); font-weight: 700; cursor: pointer; transition: var(--trans); width: 100%; margin-top: 14px; }
.btn--tile-select:hover { background: rgba(77,217,232,0.18); border-color: var(--cyan); }
.btn--tile-added { background: rgba(34,201,125,0.12); color: var(--green); border-color: rgba(34,201,125,0.3); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ══ NAV ══ */
.nav { position: fixed; top:0; left:0; right:0; z-index: 1000; height: var(--nav-h); transition: background var(--trans), backdrop-filter var(--trans); }
.nav.scrolled { background: rgba(6,16,31,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav__inner { max-width: 1160px; margin:0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 24px; }
.nav__logo { flex-shrink: 0; }
.nav__logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  filter: none;
  background: #ffffff;
  border-radius: 8px;
  padding: 5px 12px;
  display: block;
}
.nav__links { display: flex; gap: 24px; margin-left: auto; list-style: none; }
.nav__links a { font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-muted); transition: color var(--trans); }
.nav__links a:hover, .nav__links a.active { color: var(--white); }
.nav__social { display: flex; align-items: center; gap: 4px; }
.nav__social a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-muted); transition: var(--trans); }
.nav__social a:hover { color: var(--cyan); background: var(--cyan-pale); }
.nav__social svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--trans); }
.nav__burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.nav__mobile { display: none; flex-direction: column; gap: 2px; padding: 16px 24px 24px; background: rgba(6,16,31,0.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav__mobile a { padding: 11px 0; font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav__mobile a:last-of-type { border: none; margin-top: 8px; }
.nav__mobile.open { display: flex; }
.mobile-social { display: flex; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
.mobile-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; color: var(--text-muted); border-bottom: none !important; padding: 0 !important; }
.mobile-social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ══ HERO ══ */
.hero { min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(77,217,232,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(77,217,232,0.04) 1px,transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%,black 20%,transparent 100%); }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(120px); }
.blob1 { width:700px;height:700px;background:radial-gradient(circle,rgba(27,61,125,0.6),transparent 65%);top:-200px;left:-150px;animation:floatBlob 14s ease-in-out infinite; }
.blob2 { width:500px;height:500px;background:radial-gradient(circle,rgba(77,217,232,0.15),transparent 65%);top:-100px;right:-100px;animation:floatBlob 18s ease-in-out infinite reverse; }
.blob3 { width:400px;height:400px;background:radial-gradient(circle,rgba(15,36,84,0.8),transparent 65%);bottom:0;left:30%;animation:floatBlob 22s ease-in-out infinite; }
@keyframes floatBlob { 0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,25px) scale(1.06)} }
.hero__wrap { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding-top:calc(var(--nav-h) + 80px); padding-bottom:60px; position:relative; z-index:1; max-width:1160px; margin:0 auto; padding-left:24px; padding-right:24px; }

.hero__badge { display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--cyan);background:var(--cyan-pale);border:1px solid var(--border-md);padding:6px 16px;border-radius:100px;margin-bottom:24px; }
.badge__dot { width:7px;height:7px;background:var(--cyan);border-radius:50%;animation:pulse 2s ease infinite; }
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

.hero__title { font-size:clamp(2.8rem,5.5vw,5rem); margin-bottom:22px; }
.hero__gradient { background:linear-gradient(120deg,var(--cyan) 0%,var(--cyan-light) 60%,#fff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero__desc { font-size:1.06rem;color:var(--text-muted);max-width:480px;margin-bottom:24px;line-height:1.8; }

/* AI bar */
.ai-bar { display:flex;align-items:flex-start;gap:12px;background:rgba(27,61,125,0.2);border:1.5px solid var(--border-md);border-radius:12px;padding:14px 18px;margin-bottom:28px; }
.ai-bar__icon { font-size:1.4rem;flex-shrink:0; }
.ai-bar__text strong { display:block;font-family:var(--font-head);font-size:0.9rem;font-weight:700;color:var(--cyan-light);margin-bottom:3px; }
.ai-bar__text span { font-size:0.83rem;color:var(--text-muted);line-height:1.5; }

.hero__actions { display:flex;gap:14px;flex-wrap:wrap; }

/* ── Hero Tile Grid ── */
.tilecore-wrapper { position:relative; }
.conn-lines { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0.25; }
.conn-line { stroke:var(--cyan);stroke-width:1.5;stroke-dasharray:4 4;animation:dashMove 3s linear infinite; }
.conn-line--dim { opacity:0.4; }
@keyframes dashMove { to{stroke-dashoffset:-16} }

.logo-tile-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;z-index:1; }

/* Tile base */
.ltile { aspect-ratio:1;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;transition:var(--trans);position:relative;overflow:hidden;border:2px solid transparent; }
.ltile svg { width:26px;height:26px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--trans);flex-shrink:0; }
.ltile span { font-family:var(--font-head);font-size:0.72rem;font-weight:700;letter-spacing:0.04em;transition:color var(--trans);text-align:center; }
.ltile small { font-family:var(--font-head);font-size:0.58rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;opacity:0.8;text-align:center; }

/* Empty cell */
.ltile--empty { background:transparent !important;border:none !important;pointer-events:none;box-shadow:none !important; }
.ltile--empty:hover { transform:none !important; }

/* Rounded top-left (logo shape) */
.ltile--rounded-tl { border-top-left-radius:32px !important; }

/* TileCore — CYAN (top-left, logo match) */
.ltile--core {
  background: linear-gradient(145deg,#4dd9e8,#2bb8c8);
  border-color: rgba(77,217,232,0.6);
  cursor: default;
  box-shadow: 0 0 32px rgba(77,217,232,0.3);
}
.ltile--core svg { stroke: var(--navy-dark); }
.ltile--core span { color: var(--navy-dark); font-weight: 800; font-size: 0.8rem; }
.ltile--core small { color: var(--navy-dark); opacity: 0.7; }
/* Pulsing AI ring on TileCore */
.ltile__ai-ring {
  position:absolute;inset:-4px;border-radius:inherit;
  border:2px solid rgba(77,217,232,0.5);
  animation:aiRing 2.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes aiRing { 0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.06);opacity:.15} }

/* Navy tiles (OFF state) */
.ltile--navy {
  background: linear-gradient(145deg,#1b3d7d,#0f2454);
  border-color: rgba(77,217,232,0.12);
  cursor: pointer;
}
.ltile--navy svg { stroke: rgba(255,255,255,0.4); }
.ltile--navy span { color: rgba(255,255,255,0.45); }

/* Navy tiles (ON / selected state) */
.ltile--navy.ltile--on,
.ltile--selectable.ltile--on {
  background: linear-gradient(145deg,#2451a0,#1b3d7d);
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(77,217,232,0.2);
}
.ltile--on svg { stroke: var(--cyan-light) !important; }
.ltile--on span { color: var(--white) !important; }
.ltile--selectable:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-lg); }

/* Tile summary below hero grid */
.tile-summary { margin-top:18px;background:var(--bg-card);border:1.5px solid var(--border-md);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;gap:10px; }
.tile-summary__count { font-family:var(--font-head);font-size:0.82rem;font-weight:700;color:var(--cyan);letter-spacing:0.06em;text-transform:uppercase; }
.tile-summary__list { display:flex;flex-wrap:wrap;gap:6px;min-height:22px; }
.ts-chip { font-size:0.72rem;font-family:var(--font-head);font-weight:600;background:rgba(27,61,125,0.35);border:1px solid var(--border-md);color:var(--cyan-light);padding:3px 9px;border-radius:6px; }
.tile-summary__cta { align-self:stretch;text-align:center; }
.tile-caption { text-align:center;font-size:0.73rem;color:var(--text-dim);margin-top:10px;font-style:italic; }

/* Stats bar */
.hero__stats { position:relative;z-index:1;background:var(--bg-2);border-top:1px solid var(--border);padding:32px 0; }
.stats-row { display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-item strong { display:block;font-family:var(--font-head);font-size:1.9rem;font-weight:900;color:var(--cyan);line-height:1;margin-bottom:4px; }
.stat-item span { font-size:0.8rem;color:var(--text-muted);max-width:160px;display:block;margin:0 auto; }
.stat-sep { width:1px;height:40px;background:var(--border); }

/* ══ TILECORE SECTION ══ */
.tilecore-section { padding:100px 0;background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.tilecore-inner { display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:center; }

.tilecore-visual { display:flex;flex-direction:column;align-items:center;gap:52px; }
.tilecore-icon { position:relative;width:160px;height:160px;flex-shrink:0;margin-bottom:36px; }
/* Square glow rings — rounded-rect, matches logo tile geometry (not circular) */
.tilecore-icon__ring { position:absolute;border-radius:24px;border:1.5px solid var(--cyan);animation:tcRing 3s ease-in-out infinite; }
.tilecore-icon__ring.ring1 { inset:0;animation-delay:0s;opacity:0.5; }
.tilecore-icon__ring.ring2 { inset:-12px;border-radius:28px;animation-delay:1s;opacity:0.25; }
.tilecore-icon__ring.ring3 { inset:-24px;border-radius:32px;animation-delay:2s;opacity:0.12; }
@keyframes tcRing { 0%,100%{transform:scale(1);}50%{transform:scale(1.03);opacity:0.08;} }
/* Square tile center — rounded-corner square (Image 4 model) */
.tilecore-icon__center {
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(145deg,#4dd9e8,#2bb8c8);
  border-radius:22px;
  box-shadow: 0 8px 32px rgba(77,217,232,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
}
.tilecore-icon__center svg { width:40px;height:40px;stroke:var(--navy-dark);fill:none;stroke-width:1.8;stroke-linecap:round; }
.tilecore-icon__center span { font-family:var(--font-head);font-size:0.95rem;font-weight:800;color:var(--navy-dark);letter-spacing:0.04em; }
.tilecore-icon__center small {
  font-family:var(--font-head);font-size:0.6rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color: rgba(15,36,84,0.65);
}
.tilecore-connections { display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:340px; }
.tc-chip { font-size:0.75rem;font-family:var(--font-head);font-weight:600;background:var(--bg-card);border:1px solid var(--border-md);color:var(--text-muted);padding:5px 12px;border-radius:8px; }
.tc-chip--more { border-style:dashed;color:var(--cyan); }

.tilecore-text h2 { margin-bottom:18px; }
.tilecore-text > p { color:var(--text-muted);margin-bottom:28px;line-height:1.8; }
.tilecore-features { display:flex;flex-direction:column;gap:18px; }
.tc-feat { display:flex;align-items:flex-start;gap:14px; }
.tc-feat__icon { font-size:1.3rem;flex-shrink:0;margin-top:1px; }
.tc-feat strong { display:block;font-family:var(--font-head);font-size:1rem;font-weight:700;margin-bottom:4px;color:var(--white); }
.tc-feat p { font-size:0.87rem;color:var(--text-muted);line-height:1.65;margin:0; }

/* ══ TILES SECTION ══ */
.tiles-section { padding:110px 0; }
.tiles-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }

.tile-card { background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:28px 22px;transition:var(--trans);position:relative;display:flex;flex-direction:column; }
.tile-card:hover { border-color:var(--border-lg);transform:translateY(-5px);box-shadow:var(--shadow); }
.tile-card--selected { border-color:var(--cyan);background:rgba(27,61,125,0.2); }
.tile-card--core { background:linear-gradient(145deg,rgba(77,217,232,0.08),rgba(27,61,125,0.2));border-color:rgba(77,217,232,0.35); }
.tile-card--soon { opacity:0.65;pointer-events:none; }
.tile-card__badge { position:absolute;top:-12px;left:20px;font-family:var(--font-head);font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:4px 12px;border-radius:100px;background:var(--cyan);color:var(--navy-dark); }
.tile-card__badge--soon { background:var(--bg-3);color:var(--text-muted);border:1px solid var(--border); }

.tile-card__icon { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:var(--trans); }
.tile-card:hover .tile-card__icon { transform:scale(1.08); }
.sol-icon--1 { background:rgba(27,61,125,0.3);border:1px solid rgba(27,61,125,0.6); }
.sol-icon--2 { background:rgba(77,217,232,0.1);border:1px solid rgba(77,217,232,0.22); }
.sol-icon--3 { background:rgba(27,61,125,0.3);border:1px solid rgba(27,61,125,0.6); }
.sol-icon--4 { background:rgba(77,217,232,0.1);border:1px solid rgba(77,217,232,0.22); }
.sol-icon--5 { background:rgba(27,61,125,0.3);border:1px solid rgba(27,61,125,0.6); }
.sol-icon--6 { background:rgba(77,217,232,0.1);border:1px solid rgba(77,217,232,0.22); }
.tc-core-icon { background:linear-gradient(145deg,#4dd9e8,#2bb8c8); }
.tile-card__icon svg { width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.tc-core-icon svg { stroke:var(--navy-dark); }
.tile-card h3 { margin-bottom:8px;font-size:1.05rem; }
.tile-card p { font-size:0.84rem;color:var(--text-muted);line-height:1.65;flex:1;margin-bottom:12px; }
.tile-card__list { list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:0; }
.tile-card__list li { font-size:0.8rem;color:var(--text-muted);padding-left:14px;position:relative;line-height:1.45; }
.tile-card__list li::before { content:'›';position:absolute;left:0;color:var(--cyan);font-weight:700; }
.tile-card__status { display:inline-block;font-family:var(--font-head);font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--green);background:rgba(34,201,125,0.1);border:1px solid rgba(34,201,125,0.2);padding:4px 10px;border-radius:6px;margin-top:14px; }
.tile-card__status--soon { color:var(--text-dim);background:transparent;border-color:var(--border); }

/* Selected bar (floats at bottom of tiles section) */
.selected-bar { position:sticky;bottom:20px;z-index:90;margin-top:40px;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity 0.4s ease,transform 0.4s ease; }
.selected-bar.visible { opacity:1;transform:none;pointer-events:all; }
.selected-bar__inner { background:linear-gradient(135deg,var(--navy-dark),var(--navy));border:1.5px solid var(--border-lg);border-radius:14px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 32px rgba(77,217,232,0.12); }
.selected-bar__info { display:flex;align-items:center;gap:16px;flex:1;flex-wrap:wrap; }
.selected-bar__count { font-family:var(--font-head);font-size:0.88rem;font-weight:700;color:var(--cyan);letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap; }
.selected-bar__chips { display:flex;gap:6px;flex-wrap:wrap; }
.selected-bar__chips span { font-size:0.75rem;font-family:var(--font-head);font-weight:600;background:rgba(77,217,232,0.15);border:1px solid var(--border-md);color:var(--cyan-light);padding:3px 9px;border-radius:6px; }

/* ══ FEATURES ══ */
.features { padding:100px 0;background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.features__list { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.feat-item { display:flex;gap:20px;padding:26px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);transition:var(--trans);align-items:flex-start; }
.feat-item:hover { border-color:var(--border-md);transform:translateY(-3px); }
.feat-item__icon { width:44px;height:44px;flex-shrink:0;background:rgba(27,61,125,0.3);border:1px solid rgba(77,217,232,0.18);border-radius:11px;display:flex;align-items:center;justify-content:center; }
.feat-item__icon svg { width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.feat-item__body h3 { margin-bottom:7px;font-size:1.02rem; }
.feat-item__body p { font-size:0.87rem;color:var(--text-muted);line-height:1.7; }

/* ══ HOW IT WORKS ══ */
.how { padding:110px 0; }
.how__steps { display:flex;align-items:flex-start;gap:0; }
.how-step { flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:38px 22px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-lg);transition:var(--trans); }
.how-step:hover { border-color:var(--border-md);transform:translateY(-4px); }
.how-step__num { font-family:var(--font-head);font-size:3.5rem;font-weight:900;background:linear-gradient(135deg,var(--navy),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:16px; }
.how-step__icon { width:50px;height:50px;background:rgba(27,61,125,0.3);border:1px solid var(--border-md);border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
.how-step__icon svg { width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.how-step h3 { margin-bottom:10px; }
.how-step p { font-size:0.87rem;color:var(--text-muted);line-height:1.7; }
.how-step__arrow { flex:0 0 52px;font-size:1.8rem;color:var(--border-lg);display:flex;align-items:center;justify-content:center;margin-top:56px;font-family:var(--font-head); }

/* ══ PRICING ══ */
.pricing { padding:110px 0;background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.pricing__toggle { display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:52px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:10px;padding:5px;width:fit-content;margin-left:auto;margin-right:auto; }
.ptoggle { font-family:var(--font-head);font-weight:700;font-size:0.88rem;padding:9px 22px;border-radius:7px;border:none;cursor:pointer;background:transparent;color:var(--text-muted);transition:var(--trans);display:flex;align-items:center;gap:8px; }
.ptoggle--active { background:var(--navy);color:var(--white);box-shadow:0 2px 12px rgba(27,61,125,0.4); }
.save-badge { font-size:0.68rem;background:var(--cyan-pale);color:var(--cyan);border:1px solid var(--border-md);padding:2px 7px;border-radius:5px;font-weight:700; }
.pricing__grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;margin-bottom:36px; }
.pricing-card { background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:34px 28px;position:relative;transition:var(--trans); }
.pricing-card:hover { border-color:var(--border-md);transform:translateY(-4px);box-shadow:var(--shadow); }
.pricing-card--featured { background:linear-gradient(160deg,rgba(27,61,125,0.35),rgba(15,36,84,0.5));border-color:rgba(77,217,232,0.4);transform:scale(1.04);box-shadow:0 0 56px rgba(27,61,125,0.3),0 0 24px rgba(77,217,232,0.1); }
.pricing-card--featured:hover { transform:scale(1.04) translateY(-4px); }
.featured-badge { position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--navy),#2451a0);color:var(--white);font-family:var(--font-head);font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:5px 18px;border-radius:100px;white-space:nowrap;border:1px solid var(--border-md); }
.pricing-card__top { padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--border); }
.pricing-card__name { display:block;font-family:var(--font-head);font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px; }
.pricing-card--featured .pricing-card__name { color:var(--cyan-light); }
.pricing-card__price { display:flex;align-items:baseline;gap:4px;margin-bottom:6px; }
.price { font-family:var(--font-head);font-size:2.5rem;font-weight:900;color:var(--white);letter-spacing:-0.03em;line-height:1;transition:var(--trans); }
.price--custom { font-size:2rem;background:linear-gradient(120deg,var(--cyan),var(--cyan-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.per { font-size:0.9rem;color:var(--text-muted); }
.pricing-card__sub { font-size:0.82rem;color:var(--text-dim);margin-top:4px; }
.pricing-card__features { display:flex;flex-direction:column;gap:9px;margin-bottom:24px; }
.pricing-card__features li { font-size:0.875rem;color:var(--text-muted);display:flex;align-items:baseline;gap:8px;line-height:1.5; }
.pricing-card--featured .pricing-card__features li { color:var(--text); }
.pcheck { color:var(--cyan);font-weight:700;font-size:0.82rem;flex-shrink:0; }
.pna { color:var(--text-dim);font-weight:700;flex-shrink:0; }
.pricing-card__note { text-align:center;font-size:0.74rem;color:var(--text-dim);margin-top:10px; }
.pricing__note { text-align:center;padding:20px 28px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);max-width:720px;margin:0 auto; }
.pricing__note p { font-size:0.87rem;color:var(--text-muted);line-height:1.7; }
.pricing__note strong { color:var(--cyan-light); }

/* ══ CAREERS PREVIEW ══ */
.careers { padding:100px 0;background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.careers__inner { display:grid;grid-template-columns:1fr 1.3fr;gap:72px;align-items:start; }
.careers__text h2 { margin:12px 0 18px; }
.careers__text p { color:var(--text-muted);margin-bottom:16px;max-width:420px; }
.careers__text .btn { margin-top:10px; }
.careers__roles { display:flex;flex-direction:column;gap:12px; }
.role-card { background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);padding:22px 24px;transition:var(--trans); }
.role-card:hover { border-color:var(--border-md);transform:translateY(-2px); }
.role-card--general { border-style:dashed; }
.role-card__top { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.role-card h3 { font-size:1rem;margin:0; }
.role-card p { font-size:0.86rem;color:var(--text-muted);margin-bottom:10px;line-height:1.6; }
.role-badge { font-size:0.68rem;font-family:var(--font-head);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 9px;border-radius:6px; }
.role-badge--open { background:rgba(34,201,125,0.12);color:var(--green);border:1px solid rgba(34,201,125,0.25); }
.role-meta { display:flex;gap:16px; }
.role-meta span { font-size:0.78rem;color:var(--text-dim); }
.role-link { font-size:0.86rem;font-family:var(--font-head);font-weight:600;color:var(--cyan);transition:opacity var(--trans); }
.role-link:hover { opacity:0.7; }

/* ══ CTA BAND ══ */
.cta-band { padding:80px 0;background:linear-gradient(135deg,var(--navy-deeper),var(--navy-dark),#0d2660);border-top:1px solid var(--border-md);border-bottom:1px solid var(--border-md);position:relative;overflow:hidden; }
.cta-band::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(77,217,232,0.07),transparent);pointer-events:none; }
.cta-band__inner { display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative;z-index:1; }
.cta-band__text h2 { margin-bottom:10px; }
.cta-band__text p { color:var(--text-muted);max-width:520px; }

/* ══ CONTACT ══ */
.contact { padding:110px 0; }
.contact__inner { display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start; }
.contact__info h2 { margin:12px 0 16px; }
.contact__info > p { color:var(--text-muted);line-height:1.8;margin-bottom:32px; }
.contact__address { display:flex;flex-direction:column;gap:12px;margin-bottom:24px; }
.addr-item { display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius); }
.addr-icon { font-size:1.1rem;flex-shrink:0;margin-top:1px; }
.addr-item strong { display:block;font-size:0.88rem;margin-bottom:3px; }
.addr-item span,.addr-item div { font-size:0.84rem;color:var(--text-muted);line-height:1.7; }
.addr-item a { color:var(--cyan);font-size:0.86rem; }
.addr-item a:hover { opacity:.75; }
.contact__social { display:flex;gap:9px;flex-wrap:wrap; }

/* Contact form */
.contact__form { display:flex;flex-direction:column;gap:16px; }

/* Selected tiles in form */
.form-tiles-selected { background:var(--bg-card);border:1.5px solid var(--border-lg);border-radius:12px;padding:14px 16px; }
.form-tiles-selected__label { display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px; }
.form-tiles-selected__hint { font-size:0.68rem;color:var(--text-dim);font-weight:400;text-transform:none;letter-spacing:0;margin-left:auto; }
.form-tiles-selected__chips { display:flex;flex-wrap:wrap;gap:6px;min-height:24px; }
.form-tile-chip { font-size:0.75rem;font-family:var(--font-head);font-weight:600;background:rgba(27,61,125,0.3);border:1px solid var(--border-md);color:var(--cyan-light);padding:4px 10px;border-radius:7px;display:inline-flex;align-items:center;gap:6px; }
.form-tile-chip--core { background:rgba(77,217,232,0.12);border-color:rgba(77,217,232,0.3);color:var(--cyan); }
.chip-remove { background:none;border:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0 2px;opacity:0.6;transition:opacity var(--trans); }
.chip-remove:hover { opacity:1; }

.form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.form-group { display:flex;flex-direction:column;gap:7px; }
.form-group label { font-size:0.76rem;font-weight:600;font-family:var(--font-head);color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase; }
.form-group label span { color:var(--cyan); }
.form-group input,.form-group textarea { background:var(--bg-card);border:1.5px solid var(--border);border-radius:10px;padding:13px 16px;color:var(--text);font-size:0.95rem;transition:border-color var(--trans),box-shadow var(--trans);outline:none;resize:vertical; }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--text-dim); }
.form-group input:focus,.form-group textarea:focus { border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,61,125,0.2); }
.form-actions { display:flex;flex-direction:column;gap:10px; }
.form-note { font-size:0.76rem;color:var(--text-dim);text-align:center; }
.form-success { display:none;color:var(--cyan);font-size:0.9rem;text-align:center;padding:14px;background:var(--cyan-pale);border:1px solid var(--border-md);border-radius:8px; }
.form-success.show { display:block; }

/* ══ FOOTER ══ */
.footer { padding:64px 0 28px;background:var(--bg-2);border-top:1px solid var(--border); }
.footer__top { display:flex;gap:72px;margin-bottom:48px;flex-wrap:wrap; }
.footer__brand { flex:1 1 260px; }
.footer__logo { height:36px;width:auto;filter:none;margin-bottom:16px;object-fit:contain; }
.footer__brand p { font-size:0.85rem;color:var(--text-dim);line-height:1.75; }
.footer__social { display:flex;gap:7px;flex-wrap:wrap;margin-top:18px; }
.footer__nav { display:flex;gap:52px;flex-wrap:wrap; }
.footer__col { display:flex;flex-direction:column; }
.footer__col a { font-size:0.85rem;color:var(--text-muted);margin-bottom:10px;transition:color var(--trans); }
.footer__col a:hover { color:var(--cyan); }
.footer__bottom { display:flex;justify-content:space-between;align-items:center;padding-top:22px;border-top:1px solid var(--border);font-size:0.77rem;color:var(--text-dim);flex-wrap:wrap;gap:8px; }

/* Social icons */
.social-icon { width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:9px;color:var(--text-muted);transition:var(--trans); }
.social-icon:hover { border-color:var(--cyan);color:var(--cyan);background:var(--cyan-pale);transform:translateY(-2px); }
.social-icon svg { width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

/* WhatsApp float */
.whatsapp-float { position:fixed;bottom:28px;right:28px;z-index:999;width:54px;height:54px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,0.4);transition:var(--trans); }
.whatsapp-float:hover { transform:scale(1.1);box-shadow:0 8px 32px rgba(37,211,102,0.55); }
.whatsapp-float svg { width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

/* ══ RESPONSIVE ══ */
@media(max-width:1100px){
  .nav__social{display:none;}
  .tiles-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:1024px){
  .tilecore-inner { grid-template-columns: 1fr; gap: 56px; }
  .tilecore-visual { flex-direction: column; align-items: center; }
  .features__list{grid-template-columns:1fr;}
  .how__steps{flex-direction:column;align-items:center;}
  .how-step{width:100%;max-width:500px;}
  .how-step__arrow{transform:rotate(90deg);margin:0;font-size:1.4rem;}
  .pricing__grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}
  .pricing-card--featured{transform:none;}
  .pricing-card--featured:hover{transform:translateY(-4px);}
  .careers__inner{grid-template-columns:1fr;gap:48px;}
  .contact__inner{grid-template-columns:1fr;gap:56px;}
}
@media(max-width:900px){
  .hero__wrap{grid-template-columns:1fr;text-align:center;gap:48px;max-width:620px;}
  .hero__desc{margin-left:auto;margin-right:auto;}
  .hero__actions{justify-content:center;}
  .ai-bar{text-align:left;}
  .hero__visual{max-width:380px;margin:0 auto;}
  .cta-band__inner{flex-direction:column;text-align:center;}
}
@media(max-width:768px){
  .nav__links,.nav__inner .btn--nav{display:none;}
  .nav__burger{display:flex;}
  .tiles-grid{grid-template-columns:1fr 1fr;}
  .stats-row{gap:24px;}
  .stat-sep{display:none;}
}
@media(max-width:540px){
  .form-row{grid-template-columns:1fr;}
  .logo-tile-grid{gap:7px;}
  .ltile span{font-size:0.65rem;}
  .ltile svg{width:20px;height:20px;}
  .tiles-grid{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;text-align:center;}
  .tilecore-visual { flex-direction: column; }
  .selected-bar__inner{flex-direction:column;}
}

/* ════════════════════════════════════════
   TILE SELECTION → FORM SYNC STYLES
   ════════════════════════════════════════ */

/* Tile ON state (selected) */
.ltile--selectable { cursor: pointer; }
.ltile--on {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px rgba(77,217,232,0.25), 0 4px 18px rgba(77,217,232,0.15);
}
.ltile--on svg { stroke: var(--cyan) !important; }
.ltile--on span { color: var(--white) !important; }

/* Tile OFF state (unselected navy) */
.ltile--navy:not(.ltile--on):not(.ltile--core) {
  opacity: 0.55;
}
.ltile--navy:not(.ltile--on):not(.ltile--core):hover {
  opacity: 0.9;
}

/* Pulse feedback */
@keyframes tilePulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.93); }
  100% { transform: scale(1); }
}
.ltile--pulse { animation: tilePulse 0.35s ease; }

/* Selected tile pills below grid */
.tile-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-family: var(--font-head);
  font-weight: 600;
  background: rgba(77,217,232,0.1);
  border: 1px solid rgba(77,217,232,0.25);
  color: var(--cyan-light);
  padding: 3px 10px;
  border-radius: 6px;
  margin: 2px;
  transition: all 0.2s ease;
  animation: pillPop 0.25s ease;
}
@keyframes pillPop {
  0%   { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.tile-pill--empty {
  background: transparent;
  border-color: rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-style: italic;
  font-weight: 400;
  font-family: var(--font-body);
  font-size: 0.7rem;
}

/* Summary card */
.tile-summary {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--trans);
  /* Always visible so user can see "None selected" state */
}
.tile-summary.has-tiles {
  border-color: var(--border-md);
  box-shadow: 0 0 0 2px rgba(77,217,232,0.06);
}
.tile-summary__count {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.tile-summary__count span {
  font-size: 1.4rem;
  color: var(--cyan);
  margin-right: 4px;
}
.tile-summary__list { margin-bottom: 12px; min-height: 24px; }
.tile-summary__cta { font-size: 0.88rem; padding: 10px 20px; }

/* ── Form: Selected Tiles Display ── */
.form-tiles-selected {
  background: rgba(27,61,125,0.15);
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.form-tiles-selected__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}
.form-tiles-selected__hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}
.form-tiles-selected__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.form-tile-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(27,61,125,0.3);
  border: 1px solid var(--border-md);
  color: var(--text);
  padding: 4px 12px;
  border-radius: 7px;
}
.form-tile-chip--core {
  background: linear-gradient(90deg, rgba(27,61,125,0.5), rgba(77,217,232,0.15));
  border-color: rgba(77,217,232,0.35);
  color: var(--cyan-light);
}
.chip-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 2px;
  transition: color var(--trans);
}
.chip-remove:hover { color: var(--red); }

/* Form actions row */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}



/* Logo: see .nav__logo-img and .footer__logo rules above */

/* ── AI Section highlights ── */
.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(27,61,125,0.4), rgba(77,217,232,0.12));
  border: 1px solid rgba(77,217,232,0.3);
  color: var(--cyan-light);
  padding: 3px 10px;
  border-radius: 6px;
}

/* AI badge on tile cards */
.sol-card .ai-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.62rem;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(77,217,232,0.12);
  border: 1px solid rgba(77,217,232,0.25);
  color: var(--cyan);
  padding: 2px 8px;
  border-radius: 5px;
}

/* AI bar in hero */
.ai-bar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(90deg, rgba(27,61,125,0.3), rgba(77,217,232,0.07));
  border: 1px solid rgba(77,217,232,0.2);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 28px;
}
.ai-bar__icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.ai-bar__text strong { display: block; font-family: var(--font-head); font-size: 0.92rem; font-weight: 700; color: var(--white); margin-bottom: 2px; }
.ai-bar__text span { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }

/* ── Tile caption ── */
.tile-caption {
  text-align: center;
  font-size: 0.73rem;
  color: var(--text-dim);
  margin-top: 10px;
  font-style: italic;
}

/* Tile tooltip */
.tile-tooltip {
  position: absolute;
  bottom: -38px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-dark);
  color: var(--cyan-light);
  font-size: 0.76rem;
  font-family: var(--font-head);
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}
.tile-tooltip.show { opacity: 1; }

/* ════════════════════════
   PRICING CONTROLS + CURRENCY SELECTOR
   ════════════════════════ */
.pricing-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.pricing__toggle {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 5px;
  gap: 4px;
}
.currency-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 7px 16px;
  transition: border-color var(--trans);
}
.currency-selector:focus-within { border-color: var(--border-md); }
.currency-label { font-size: 1.1rem; }
.currency-selector select {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  padding: 2px 4px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ea8cc' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 14px;
  padding-right: 22px;
}
.currency-selector select option { background: #0f2145; color: var(--text); }
.currency-live {
  font-size: 0.7rem;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-pale);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.currency-live.loading { color: var(--text-dim); background: transparent; border-color: transparent; }
.currency-live.error { color: var(--red); background: rgba(255,91,91,0.08); }

/* Remove old standalone toggle margin */
.pricing__toggle { margin-bottom: 0; }

@media (max-width: 600px) {
  .pricing-controls { flex-direction: column; align-items: stretch; }
  .pricing-controls > * { justify-content: center; }
}

/* ════════════════════════════════════════
   TILE CARD SELECTED STATE
   ════════════════════════════════════════ */

/* Card selected highlight */
.tile-card--selected {
  border-color: var(--cyan) !important;
  background: linear-gradient(160deg, rgba(27,61,125,0.35) 0%, rgba(13,30,58,0.9) 100%) !important;
  box-shadow: 0 0 0 1px rgba(77,217,232,0.2), 0 8px 32px rgba(27,61,125,0.3) !important;
}
.tile-card--selected .tile-card__name::after {
  content: ' ✓';
  color: var(--cyan);
}

/* "Add This Tile" button — default */
.btn--tile-select {
  width: 100%;
  margin-top: auto;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding: 11px 16px;
  border-radius: 9px;
  border: 1.5px solid var(--border-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--trans);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn--tile-select:hover {
  border-color: var(--cyan);
  color: var(--white);
  background: rgba(77,217,232,0.06);
}

/* "✓ Added" selected state */
.btn--tile-selected {
  background: linear-gradient(135deg, var(--navy), #0f2454) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  box-shadow: 0 0 0 2px rgba(77,217,232,0.15) !important;
}
.btn--tile-selected:hover {
  background: rgba(255,91,91,0.08) !important;
  border-color: rgba(255,91,91,0.4) !important;
  color: #ff8888 !important;
}

/* Flash animation on Selected Tiles panel when tile added */
@keyframes panelFlash {
  0%   { box-shadow: 0 0 0 0 rgba(77,217,232,0.6); }
  50%  { box-shadow: 0 0 0 6px rgba(77,217,232,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(77,217,232,0); }
}
.tile-summary--flash {
  animation: panelFlash 0.8s ease-out;
}

/* Career role cards as clickable links to careers page */
.role-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: var(--trans);
}
.role-card--link:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(27,61,125,0.3);
}
.role-card--link:hover h3 { color: var(--cyan); }

/* ── Email harvester protection links ── */
.email-protect {
  cursor: pointer;
  user-select: text;
}

/* ════════════════════════
   FREE TRIAL PRICING CARD
   ════════════════════════ */

/* 4-column grid for pricing when free card is present */
.pricing__grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Free card styles */
.pricing-card--free {
  background: linear-gradient(160deg, rgba(0,180,80,0.08) 0%, rgba(13,30,58,0.9) 100%);
  border-color: rgba(0,220,100,0.35);
  position: relative;
}
.pricing-card--free:hover {
  border-color: rgba(0,220,100,0.6);
  box-shadow: 0 0 40px rgba(0,220,100,0.1);
}
.free-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #00b450, #00dc64);
  color: #002d14;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,180,80,0.35);
}
.price--free {
  background: linear-gradient(120deg, #00dc64, #00ffaa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2.6rem;
}
.btn--free {
  background: linear-gradient(135deg, #00b450, #009940);
  color: #fff;
  border: 1.5px solid rgba(0,220,100,0.3);
  font-family: var(--font-head);
  font-weight: 700;
}
.btn--free:hover {
  background: linear-gradient(135deg, #00cc5a, #00b450);
  border-color: #00dc64;
  box-shadow: 0 0 0 3px rgba(0,220,100,0.15), 0 8px 24px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

/* Responsive: 4-col → 2-col → 1-col */
@media (max-width: 1200px) {
  .pricing__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-card--featured { transform: none; }
  .pricing-card--featured:hover { transform: translateY(-4px); }
}
@media (max-width: 640px) {
  .pricing__grid--4 { grid-template-columns: 1fr; }
}

/* ════════════════════════
   FREE TRIAL BANNER SECTION
   ════════════════════════ */
.free-trial-banner {
  padding: 80px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.free-trial-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 80% 50%, rgba(0,180,80,0.07), transparent);
  pointer-events: none;
}
.ftb__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, rgba(0,180,80,0.06) 0%, rgba(13,30,58,0.6) 100%);
  border: 1.5px solid rgba(0,220,100,0.25);
  border-radius: var(--radius-lg);
  padding: 48px 48px;
  position: relative;
  z-index: 1;
}
.ftb__icon {
  font-size: 4rem;
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(0,220,100,0.4));
  animation: ftbFloat 3s ease-in-out infinite;
}
@keyframes ftbFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%       { transform: translateY(-8px) rotate(5deg); }
}
.ftb__tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00dc64;
  background: rgba(0,220,100,0.1);
  border: 1px solid rgba(0,220,100,0.3);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.ftb__title {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  line-height: 1.15;
}
.ftb__desc {
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.75;
  max-width: 600px;
  margin-bottom: 28px;
}
.ftb__desc strong { color: var(--white); }

/* Limit cards row */
.ftb__limits {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ftb__limit {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(0,220,100,0.2);
  border-radius: var(--radius);
  padding: 12px 18px;
  flex: 1 1 160px;
  min-width: 0;
}
.ftb__limit-icon { font-size: 1.4rem; flex-shrink: 0; }
.ftb__limit strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 2px;
}
.ftb__limit span { font-size: 0.78rem; color: var(--text-muted); }

/* Actions */
.ftb__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ftb__note {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .ftb__inner {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 24px;
    text-align: center;
  }
  .ftb__icon { font-size: 3rem; }
  .ftb__limits { justify-content: center; }
  .ftb__limit { flex: 1 1 140px; }
  .ftb__actions { justify-content: center; }
}

/* Free plan nav highlight */
.nav__links a.nav-free-link {
  color: #00dc64 !important;
  font-weight: 600;
}
.nav__links a.nav-free-link:hover { opacity: 0.8; }