:root { --pink:#FF007A; --purple:#7000FF; --cyan:#00F0FF; }
  html { scroll-behavior: smooth; }
  body { background:#0B0E0F; color:#E7E9EA; }

  /* ── Tailwind custom-class fallbacks (apply even if CDN config fails to load) ── */
  .text-on-surface         { color:#E7E9EA; }
  .text-on-surface-variant { color:#9AA0A2; }
  .bg-surface              { background-color:#0B0E0F; }
  .bg-surface-container    { background-color:#14181A; }
  .text-luminous-pink      { color:#FF007A; }
  .text-electric-purple    { color:#7000FF; }
  .text-cyber-cyan         { color:#00F0FF; }
  .font-display            { font-family:"Hanken Grotesk",sans-serif; }
  .max-w-container         { max-width:1320px; }

  /* ---------- Grain ---------- */
  .grain::after{
    content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- Glass ---------- */
  .glass{
    background:rgba(255,255,255,0.025);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.07);
    border-top-color:rgba(255,255,255,0.12);
  }

  /* ---------- Animated Aurora ---------- */
  .aurora{ position:absolute; inset:-30% -10%; z-index:0; filter:blur(90px); pointer-events:none; }
  .blob{ position:absolute; border-radius:50%; mix-blend-mode:screen; opacity:.75; will-change:transform; }
  .b1{ width:55vw; height:55vw; left:-5%; top:-8%;
       background:radial-gradient(circle at 50% 50%, var(--pink) 0%, transparent 62%);
       animation:drift1 22s ease-in-out infinite; }
  .b2{ width:58vw; height:58vw; right:-8%; top:-12%;
       background:radial-gradient(circle at 50% 50%, var(--purple) 0%, transparent 60%);
       animation:drift2 26s ease-in-out infinite; }
  .b3{ width:50vw; height:50vw; left:18%; bottom:-25%;
       background:radial-gradient(circle at 50% 50%, var(--cyan) 0%, transparent 60%);
       animation:drift3 19s ease-in-out infinite; }
  .b4{ width:34vw; height:34vw; left:38%; top:10%;
       background:radial-gradient(circle at 50% 50%, var(--pink) 0%, transparent 65%);
       opacity:.55; animation:drift4 30s ease-in-out infinite; }
  @keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(14vw,8vh) scale(1.18)} 66%{transform:translate(6vw,-6vh) scale(.92)} }
  @keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1)} 30%{transform:translate(-12vw,10vh) scale(.9)} 70%{transform:translate(-4vw,-8vh) scale(1.2)} }
  @keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(8vw,-14vh) scale(1.3)} }
  @keyframes drift4{ 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-10vw,6vh) scale(1.25)} 80%{transform:translate(8vw,4vh) scale(.85)} }
  @media (prefers-reduced-motion: reduce){ .blob{ animation:none !important } .orbit{ animation:none !important } }

  /* hero text gradient */
  .grad-text{ background:linear-gradient(110deg, var(--cyan), var(--purple) 55%, var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }

  /* buttons */
  .btn-primary{ background:linear-gradient(120deg, var(--purple), var(--pink)); transition:.35s; }
  .btn-primary:hover{ box-shadow:0 0 32px rgba(255,0,122,.35); transform:translateY(-1px); }
  .btn-ghost{ border:1px solid rgba(255,255,255,.18); transition:.35s; }
  .btn-ghost:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,0,122,.5); }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:none; }

  /* orbit logo */
  .orbit{ animation:spin 14s linear infinite; transform-origin:center; }
  @keyframes spin{ to{ transform:rotate(360deg) } }

  /* ---------- Service icon badge ---------- */
  .icon-badge{ width:60px; height:60px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .icon-badge svg{ width:30px; height:30px; }

  /* ---------- Best-for callout ---------- */
  .bestfor{ padding:20px 22px; border-radius:10px; }
  .pill{ display:inline-flex; align-items:center; font-family:"DM Sans",sans-serif; font-size:13px; font-weight:500;
    letter-spacing:.04em; padding:7px 14px; border-radius:999px; border:1px solid; transition:.3s; cursor:default; }
  .pill:hover{ transform:translateY(-2px); }
  .pill-pink{ color:var(--pink); border-color:rgba(255,0,122,.45); background:rgba(255,0,122,.08); }
  .pill-pink:hover{ background:rgba(255,0,122,.16); box-shadow:0 0 18px rgba(255,0,122,.25); }
  .pill-purple{ color:#b98bff; border-color:rgba(112,0,255,.5); background:rgba(112,0,255,.10); }
  .pill-purple:hover{ background:rgba(112,0,255,.20); box-shadow:0 0 18px rgba(112,0,255,.3); }
  .pill-cyan{ color:var(--cyan); border-color:rgba(0,240,255,.4); background:rgba(0,240,255,.07); }
  .pill-cyan:hover{ background:rgba(0,240,255,.15); box-shadow:0 0 18px rgba(0,240,255,.22); }

  /* ---------- Portrait ---------- */
  .portrait{ position:relative; border-radius:12px; overflow:hidden; isolation:isolate; }
  .portrait img, .portrait .ph{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
  .ph{ background:linear-gradient(160deg,#1c2123,#0c0f10); }

  /* ---------- Case study ---------- */
  .case{ position:relative; border-radius:10px; overflow:hidden; display:block; isolation:isolate; }
  .case .media{ position:absolute; inset:0; z-index:0; transition:transform .8s cubic-bezier(.16,1,.3,1); }
  .case:hover .media{ transform:scale(1.06); }
  .case .scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(8,10,11,.97) 0%, rgba(8,10,11,.88) 26%, rgba(8,10,11,.45) 58%, rgba(8,10,11,.12) 100%); }
  .case .arrow{ transition:transform .4s; }
  .case:hover .arrow{ transform:translate(6px,-6px); }

  /* Split card (image on top, solid text panel below) */
  .case-split{ border-radius:10px; overflow:visible; isolation:isolate; display:flex; flex-direction:column; }
  .case-split .case-img{ position:relative; overflow:hidden; border-radius:10px 10px 0 0; isolation:isolate; }
  .case-split .case-img .media{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform .8s cubic-bezier(.16,1,.3,1); }
  .case-split:hover .case-img .media{ transform:scale(1.06); }
  .case-overlay{ position:absolute; inset:0; z-index:1; transition:opacity .55s cubic-bezier(.16,1,.3,1); }
  .case-split:hover .case-overlay{ opacity:0; }
  .case-text{ background:rgb(16,19,21); padding:20px 24px 24px; border-radius:0 0 10px 10px; border:1px solid rgba(255,255,255,.08); border-top:none; flex-shrink:0; }
  .case-split .arrow{ transition:transform .4s; }
  .case-split:hover .arrow{ transform:translate(4px,-4px); }

  /* ---------- Image-first case grid ---------- */
  .cs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .cs-grid .case{ min-height:165px; }
  .cs-grid-2{ margin-top:12px; }
  .cs-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
  .cs-row .case{ min-height:150px; }
  @media(min-width:768px){
    .cs-grid{ grid-template-columns:repeat(3,1fr); grid-template-rows:285px 245px; gap:16px; }
    .cs-grid .case{ min-height:0; }
    .cs-tall{ grid-row:span 2; }
    .cs-tall-r{ grid-row:1 / span 2; grid-column:3; }
    .cs-grid-2{ margin-top:16px; }
    .cs-row{ gap:16px; margin-top:16px; }
    .cs-row .case{ min-height:205px; }
  }
  .cs-placeholder{ background:rgba(255,255,255,.018); border:1px dashed rgba(255,255,255,.07); pointer-events:none; cursor:default; }
  .cs-placeholder .scrim{ display:none; }

  /* ---------- Client logo strip ---------- */
  .logo-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px 32px; align-items:center; justify-items:center; }
  .logo-strip img{ height:34px; width:auto; opacity:.5; filter:brightness(1.25); transition:opacity .3s; }
  .logo-strip img:hover{ opacity:1; }
  @media(min-width:768px){
    .logo-strip{ grid-template-columns:repeat(8,1fr); gap:24px 40px; }
    .logo-strip img{ height:44px; }
  }

  ::selection{ background:var(--purple); color:#fff; }

  /* ---------- Comparison matrix ---------- */
  .matrix{ width:100%; border-collapse:collapse; min-width:680px; }
  .matrix th, .matrix td{ padding:17px 14px; text-align:center; border-bottom:1px solid rgba(255,255,255,.07); }
  .matrix th:first-child, .matrix td:first-child{ text-align:left; }
  .matrix tbody tr:last-child td{ border-bottom:none; }
  .matrix .crit{ font-weight:500; color:#E7E9EA; font-size:15px; }
  .matrix .crit-inner{ display:flex; align-items:center; gap:12px; }
  .matrix .crit-icon{ flex-shrink:0; opacity:.65; color:var(--cyan); }
  .matrix thead th{ font-family:"DM Sans",sans-serif; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:#9AA0A2; font-weight:500; padding-bottom:16px; vertical-align:bottom; }
  .matrix thead th.rk{ color:#fff; }
  .mk{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; }
  .mk-yes{ color:var(--cyan); }
  .mk-no{ color:#4A4E50; }
  .mk-rk{ color:var(--pink); filter:drop-shadow(0 0 7px rgba(255,0,122,.55)); }
  .col-remark{ position:relative; background:linear-gradient(180deg, rgba(255,0,122,.07), rgba(112,0,255,.05)); }
  tbody tr:first-child .col-remark{ border-top-left-radius:14px; border-top-right-radius:14px; }
  tbody tr:last-child .col-remark{ border-bottom-left-radius:14px; border-bottom-right-radius:14px; }
  thead .col-remark{ border-top-left-radius:14px; border-top-right-radius:14px; }
  .col-remark.edged{ border-left:1px solid rgba(255,0,122,.22); border-right:1px solid rgba(255,0,122,.22); }
  /* ---------- Problem accordion ---------- */
  .acc-item{ border-bottom:1px solid rgba(255,255,255,.10); transition:background .4s; }
  .acc-item:last-child{ border-bottom:none; }
  .acc-item.open{ background:rgba(255,255,255,.02); }
  .acc-head{ width:100%; display:flex; align-items:center; gap:18px; padding:22px 8px; cursor:pointer; text-align:left; background:none; border:none; color:inherit; }
  .acc-x{ width:28px; height:28px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1.5px solid currentColor; opacity:.95; }
  .acc-x svg{ width:12px; height:12px; }
  .acc-title{ font-size:19px; font-weight:700; flex:1; line-height:1.3; }
  .acc-sign{ position:relative; width:22px; height:22px; flex-shrink:0; color:#6B7072; }
  .acc-sign::before, .acc-sign::after{ content:""; position:absolute; background:currentColor; border-radius:2px; transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .4s; }
  .acc-sign::before{ top:10px; left:2px; width:18px; height:2px; }
  .acc-sign::after{ top:2px; left:10px; width:2px; height:18px; }
  .acc-item.open .acc-sign::after{ transform:scaleY(0); opacity:0; }
  .acc-body{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,1,.3,1); }
  .acc-body-inner{ padding:0 8px 24px 52px; }
  .acc-tag{ display:inline-block; font-family:"DM Sans",sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:12px; }
  .acc-bar{ height:3px; width:0; border-radius:3px; transition:width .6s cubic-bezier(.16,1,.3,1); }
  .acc-item.open .acc-bar{ width:100%; }
  ::-webkit-scrollbar{ width:10px; height:10px }
  ::-webkit-scrollbar-track{ background:#0B0E0F }
  ::-webkit-scrollbar-thumb{ background:#262b2d; border-radius:9px }

  /* ---------- Checklist (set accent via text-* color on .chk-grid) ---------- */
  .chk-grid{ display:grid; grid-template-columns:1fr; gap:16px 32px; }
  @media(min-width:640px){ .chk-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .chk{ display:flex; align-items:flex-start; gap:12px; }
  .chk-ic{ flex-shrink:0; margin-top:1px; width:20px; height:20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb, currentColor 14%, transparent); }
  .chk-ic svg{ width:12px; height:12px; }
  .chk-tx{ font-weight:300; line-height:1.45; color:#9AA0A2; }

  /* ── Blog TOC ─────────────────────────────────────────────── */
  .toc-link { display:block; font-size:12px; font-weight:400; color:#9AA0A2;
              padding:5px 0 5px 12px; border-left:2px solid transparent;
              text-decoration:none; line-height:1.4;
              transition:color 140ms, border-color 140ms; }
  .toc-link:hover { color:#D4D9DC; border-left-color:rgba(185,139,255,.35); }
  .toc-link.toc-active { color:#E7E9EA; border-left-color:#B98BFF; }

  /* Mobile TOC accordion */
  .blog-toc-mobile { margin-bottom:2.5rem; }
  .blog-toc-mobile summary { list-style:none; cursor:pointer;
              display:flex; align-items:center; gap:10px;
              font-family:"DM Sans",sans-serif; font-size:12px; font-weight:600;
              letter-spacing:.14em; text-transform:uppercase; color:#9AA0A2;
              padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07); }
  .blog-toc-mobile summary::-webkit-details-marker { display:none; }
  .blog-toc-mobile summary .toc-chevron { transition:transform .3s; }
  .blog-toc-mobile[open] summary .toc-chevron { transform:rotate(180deg); }
  .blog-toc-mobile ul { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.07); }
  .blog-toc-mobile .toc-link { padding-left:0; border-left:none; font-size:13px; color:#9AA0A2; padding:8px 0; }
  .blog-toc-mobile .toc-link:hover,
  .blog-toc-mobile .toc-link.toc-active { color:#E7E9EA; }

  /* ── Article prose ────────────────────────────────────────── */
  .article-body { font-size:1.0625rem; line-height:1.8; color:#B8BEC2; }
  .article-body h2 { font-size:1.65rem !important; font-weight:900 !important; color:#E7E9EA !important;
                     margin:2.75rem 0 1rem !important; letter-spacing:-.02em; line-height:1.2 !important; }
  .article-body h3 { font-size:1.2rem !important; font-weight:700 !important; color:#E7E9EA !important;
                     margin:2rem 0 0.75rem !important; }
  .article-body h4 { font-size:1.05rem !important; font-weight:700 !important; color:#D0D4D7 !important;
                     margin:1.5rem 0 0.5rem !important; }
  .article-body p  { margin:0 0 1.35rem; }
  .article-body ul, .article-body ol { margin:0 0 1.35rem 1.5rem; }
  .article-body li { margin-bottom:.45rem; }
  .article-body strong, .article-body b { color:#E7E9EA; font-weight:700; }
  .article-body em, .article-body i { font-style:italic; }
  .article-body blockquote { border-left:3px solid rgba(255,255,255,.25); padding:0 0 0 1.25rem;
                              margin:2rem 0; color:#9AA0A2; font-style:italic; }
  .article-body img { width:100%; border-radius:12px; margin:2rem 0; display:block; }
  .article-body a  { color:var(--cyan); text-decoration:underline; text-underline-offset:3px;
                     transition:opacity 140ms; }
  .article-body a:hover { opacity:.75; }
  .article-body table { width:100%; border-collapse:collapse; margin:2rem 0; font-size:.9rem; }
  .article-body th { background:rgba(255,255,255,.05); color:#E7E9EA;
                     font-weight:700; padding:10px 14px; text-align:left;
                     border-bottom:1px solid rgba(255,255,255,.1); }
  .article-body td { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.06);
                     color:#B8BEC2; vertical-align:top; }
  .article-body hr { border:none; border-top:1px solid rgba(255,255,255,.08); margin:2.5rem 0; }

  /* ── Blog card grid ───────────────────────────────────────── */
  #blog-grid { display:grid; gap:20px; }
  .blog-card { transition:transform .3s; }
  .blog-card:hover { transform:translateY(-3px); }
  .line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

  /* ── Pagination ───────────────────────────────────────────── */
  .page-btn { display:inline-flex; align-items:center; justify-content:center;
              width:36px; height:36px; border-radius:8px; font-size:13px; font-weight:600;
              color:#6B7072; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
              cursor:pointer; transition:color .15s, background .15s, border-color .15s; }
  .page-btn:hover { color:#E7E9EA; background:rgba(255,255,255,.08); }
  .page-btn.active { color:#E7E9EA; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
  .page-btn-nav { width:auto; padding:0 14px; gap:6px; }

  /* ---------- Contact form ---------- */
  .frm-label{ display:block; font-family:"DM Sans",sans-serif; font-size:12px; letter-spacing:.12em;
              text-transform:uppercase; color:#9AA0A2; margin-bottom:8px; }
  .frm-req{ color:var(--pink); }
  /* !important defeats the Tailwind forms-plugin reset (white bg) injected by the CDN at runtime */
  .frm-input, .frm-select, .frm-textarea{
    width:100%; background-color:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.12) !important;
    border-radius:12px; padding:13px 15px; color:#E7E9EA !important; font-size:15px; font-family:inherit;
    line-height:1.5; outline:none; transition:border-color .18s, box-shadow .18s, background .18s; }
  .frm-textarea{ min-height:150px; resize:vertical; }
  .frm-input::placeholder, .frm-textarea::placeholder{ color:#6b7174 !important; opacity:1; }
  .frm-input:focus, .frm-select:focus, .frm-textarea:focus{
    border-color:rgba(185,139,255,.7) !important; box-shadow:0 0 0 3px rgba(112,0,255,.18); background-color:rgba(255,255,255,.06) !important; }
  .frm-select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA0A2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right 14px center !important; background-size:16px !important; }
  .frm-select option, .frm-select optgroup{ background:#14181A; color:#E7E9EA; }
  .frm-input.err, .frm-select.err, .frm-textarea.err{ border-color:#ff6b81 !important; box-shadow:0 0 0 3px rgba(255,107,129,.15); }
  .frm-err{ display:none; color:#ff8a9a; font-size:12.5px; margin-top:6px; }
  .frm-banner{ color:#ff8a9a; font-size:14px; background:rgba(255,107,129,.08);
               border:1px solid rgba(255,107,129,.25); border-radius:10px; padding:11px 14px; }
  .frm-consent{ display:flex; gap:12px; align-items:flex-start; }
  .frm-consent input[type="checkbox"]{ margin-top:2px; width:18px; height:18px; flex-shrink:0;
               accent-color:#7000FF; cursor:pointer; }
  /* Honeypot — hidden from people, present for bots */
  .hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px;
       overflow:hidden; opacity:0; pointer-events:none; }