/* ============================================================
   TECHUGEN SOLUTIONS — Global Stylesheet
   Brand: blue -> green gradient (matches the logo)
   Edit the color values under :root to re-theme the whole site.
   ============================================================ */

:root{
  /* Brand colors (pulled from the logo) */
  --blue:      #1B75BC;
  --blue-dark: #12568c;
  --cyan:      #1C9AD6;
  --green:     #39B54A;
  --green-lt:  #6dbf3f;

  /* Neutrals */
  --ink:       #0f1c2b;   /* near-black headings */
  --body:      #46586b;   /* body text */
  --muted:     #7b8a9a;
  --line:      #e4e9ef;
  --bg:        #ffffff;
  --bg-soft:   #f5f8fb;
  --bg-dark:   #0d1b2a;   /* dark footer / sections */
  --bg-dark-2: #10233a;

  --grad:  linear-gradient(100deg, var(--blue) 0%, var(--cyan) 48%, var(--green) 100%);
  --grad-soft: linear-gradient(100deg, #eaf3fb 0%, #eef8ef 100%);
  --hero-grad: linear-gradient(118deg, #1663a8 0%, #1C9AD6 46%, #2fae4d 100%);
  --nav-grad:  linear-gradient(90deg, #123f70 0%, #0f5f7a 55%, #0e6b58 100%);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(16,42,71,.08);
  --shadow-lg: 0 20px 50px rgba(16,42,71,.14);
  --container: 1180px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--body);
  background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased;
  font-size:17px;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; transition:.2s; }
a:hover{ color:var(--green); }
h1,h2,h3,h4{ color:var(--ink); line-height:1.18; margin:0 0 .5em; font-weight:800; letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); }
h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); }
h3{ font-size:1.28rem; }
p{ margin:0 0 1rem; }
ul{ margin:0 0 1rem; padding-left:1.15rem; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; }
.section.tight{ padding:60px 0; }
.section.soft{ background:var(--bg-soft); }
.section.dark{ background:var(--bg-dark); color:#c7d3df; }
.section.dark h1,.section.dark h2,.section.dark h3{ color:#fff; }
.center{ text-align:center; }
.narrow{ max-width:760px; margin-left:auto; margin-right:auto; }
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
  display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin-bottom:14px;
}
.section.dark .eyebrow{ color:var(--green-lt); }
.lead{ font-size:1.15rem; color:var(--body); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-weight:700; font-size:1rem; padding:14px 28px; border-radius:50px;
  border:2px solid transparent; transition:.22s; white-space:nowrap;
}
.btn-primary{ background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(27,117,188,.28); }
.btn-primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(27,117,188,.38); }
.btn-outline{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); }
.btn-ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ background:#fff; color:var(--blue); }
.btn-lg{ padding:16px 34px; font-size:1.05rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:128px; }
.nav .logo img{ height:100px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
.nav-links a{ color:var(--ink); font-weight:600; font-size:.98rem; position:relative; white-space:nowrap; }
.nav-links a:hover,.nav-links a.active{ color:var(--blue); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px;
  background:var(--grad); border-radius:3px;
}
.nav-cta{ display:flex; align-items:center; gap:16px; }
.menu-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.menu-toggle span{ display:block; width:26px; height:3px; background:var(--ink); border-radius:3px; margin:5px 0; transition:.25s; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--bg-dark); color:#d6e2ee; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(57,181,74,.28), transparent 60%),
    radial-gradient(760px 520px at 8% 110%, rgba(27,117,188,.42), transparent 60%);
}
.hero .container{ position:relative; padding-top:96px; padding-bottom:100px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; }
.hero h1{ color:#fff; }
.hero p{ font-size:1.2rem; max-width:560px; color:#c2d1e0; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; }
.hero-badges{ display:flex; gap:26px; flex-wrap:wrap; margin-top:42px; }
.hero-badges div{ font-size:.92rem; color:#9fb4c8; }
.hero-badges b{ display:block; font-size:1.9rem; color:#fff; font-weight:800; }
.hero-visual{
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:26px;
  backdrop-filter:blur(6px);
}
.hero-visual .chip{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:12px;
  background:rgba(255,255,255,.06); margin-bottom:14px; border:1px solid rgba(255,255,255,.08);
}
.hero-visual .chip:last-child{ margin-bottom:0; }
.hero-visual .chip .ico{ width:44px; height:44px; border-radius:10px; background:var(--grad); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.hero-visual .chip b{ color:#fff; display:block; font-size:1rem; }
.hero-visual .chip span{ font-size:.86rem; color:#9fb4c8; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; transition:.25s; height:100%;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.card .ico{
  width:58px; height:58px; border-radius:14px; background:var(--grad-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin-bottom:18px;
}
.card h3{ margin-bottom:.4rem; }
.card p{ font-size:.98rem; margin-bottom:.6rem; }
.card .more{ font-weight:700; font-size:.92rem; color:var(--blue); }
.card ul{ font-size:.95rem; }
.card ul li{ margin-bottom:.3rem; }

.card-lift{ box-shadow:var(--shadow); }

/* Feature row (icon + text list) */
.feature{ display:flex; gap:16px; align-items:flex-start; }
.feature .dot{ flex:0 0 auto; width:44px; height:44px; border-radius:11px; background:var(--grad-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.feature h3{ font-size:1.12rem; margin-bottom:.2rem; }
.feature p{ font-size:.96rem; margin:0; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center; }
.stat b{ display:block; font-size:2.8rem; font-weight:800; line-height:1; }
.stat span{ color:var(--muted); font-size:.98rem; }
.section.dark .stat span{ color:#9fb4c8; }

/* ---------- Partner logos ---------- */
.partner-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.partner{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  height:92px; padding:14px;
  background:#fff; border:1px solid var(--line); border-radius:12px; transition:.2s;
  font-weight:800; font-size:1.05rem; color:#334; text-align:center; letter-spacing:-.01em;
}
.partner:hover{ box-shadow:var(--shadow); transform:translateY(-4px); color:var(--blue); }
.partner small{ font-weight:600; font-size:.7rem; color:var(--muted); letter-spacing:.03em; line-height:1.2; }
.partner small:empty{ display:none; }

/* ---------- Split / CTA ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.checklist{ list-style:none; padding:0; }
.checklist li{ position:relative; padding-left:34px; margin-bottom:14px; font-weight:500; color:var(--ink); }
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; width:23px; height:23px; border-radius:50%;
  background:var(--grad); color:#fff; font-size:.8rem; display:flex; align-items:center; justify-content:center; font-weight:800;
}
.cta-band{ background:var(--grad); color:#fff; border-radius:22px; padding:56px; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.9); max-width:620px; margin:0 auto 28px; font-size:1.12rem; }

/* ---------- Page banner ---------- */
.page-banner{ background:var(--bg-dark); color:#cdd9e6; position:relative; overflow:hidden; }
.page-banner::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(700px 400px at 85% 0%, rgba(57,181,74,.25), transparent 60%),
            radial-gradient(600px 400px at 0% 100%, rgba(27,117,188,.4), transparent 60%);
}
.page-banner .container{ position:relative; padding:74px 24px; }
.page-banner h1{ color:#fff; margin-bottom:.3em; }
.page-banner p{ max-width:640px; color:#c2d1e0; font-size:1.12rem; margin:0; }
.breadcrumb{ font-size:.9rem; color:#9fb4c8; margin-bottom:14px; }
.breadcrumb a{ color:#9fb4c8; }
.breadcrumb a:hover{ color:#fff; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field.full{ grid-column:1 / -1; }
label{ font-weight:600; font-size:.92rem; color:var(--ink); }
input,select,textarea{
  font-family:inherit; font-size:1rem; padding:13px 15px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); transition:.2s; width:100%;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,117,188,.14); }
textarea{ resize:vertical; min-height:130px; }

.info-card{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.info-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.info-row .ico{ width:44px;height:44px;border-radius:11px;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex:0 0 auto; }
.info-row b{ color:var(--ink); display:block; }

/* highlight/edit-me marker for placeholder text you should replace */
.edit-me{ background:#fff6d6; padding:1px 5px; border-radius:4px; border-bottom:1px dashed #d9b400; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-dark); color:#9fb0c1; padding:64px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
.site-footer img{ height:46px; margin-bottom:18px; }
.site-footer h4{ color:#fff; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer ul li{ margin-bottom:10px; }
.site-footer a{ color:#9fb0c1; font-size:.96rem; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.88rem; color:#7d8fa2; }

/* ---------- Reveal animation ----------
   Only hidden when JavaScript is available (html.js). Without JS, all
   content stays fully visible — so the site never shows blank sections. */
.js .reveal{ opacity:0; transform:translateY(24px); transition:.7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .partner-grid{ grid-template-columns:repeat(3,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
/* Collapse the nav into the menu button when the enlarged logo + full nav get tight */
@media (max-width:1180px){
  .nav-links{
    position:fixed; inset:128px 0 auto 0; flex-direction:column; background:#fff;
    padding:18px 24px 26px; gap:6px; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    transform:translateY(-170%); transition:.3s; align-items:flex-start; z-index:49;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ padding:12px 0; width:100%; font-size:1.05rem; }
  .nav-links a.active::after{ display:none; }
  .menu-toggle{ display:block; }
  .nav-cta .btn{ display:none; }
}

@media (max-width:760px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .cta-band{ padding:38px 24px; }
  .section{ padding:60px 0; }
}

/* ============================================================
   V2 ADDITIONS — custom SVG icons, colour accents, brand wall,
   product gallery. (Appended so these rules take precedence.)
   ============================================================ */

/* ---- Colour accent gradients ---- */
:root{
  --g1:linear-gradient(135deg,#1B75BC,#1FA6DE);
  --g2:linear-gradient(135deg,#2C9E42,#84C441);
  --g3:linear-gradient(135deg,#0E9CB0,#20C3A2);
  --g4:linear-gradient(135deg,#6C5CE7,#9B8CF2);
  --g5:linear-gradient(135deg,#F2793A,#FBB040);
  --g6:linear-gradient(135deg,#E23A86,#F26DAE);
}

/* ---- SVG icon base ---- */
svg.i{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; display:block; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Icon badges now hold white SVGs on colourful gradients */
.card .ico{ color:#fff; background:var(--g1); box-shadow:0 10px 20px rgba(27,117,188,.20); }
.card .ico svg.i{ width:28px; height:28px; }
.feature .dot{ color:#fff; background:var(--g1); }
.feature .dot svg.i{ width:22px; height:22px; }
.info-row .ico svg.i{ width:22px; height:22px; }
.hero-visual .chip .ico{ color:#fff; }
.hero-visual .chip .ico svg.i{ width:24px; height:24px; }

/* Cycle accent colours across cards for a lively, colourful look */
.card:nth-child(6n+1) .ico{ background:var(--g1); }
.card:nth-child(6n+2) .ico{ background:var(--g3); }
.card:nth-child(6n+3) .ico{ background:var(--g2); }
.card:nth-child(6n+4) .ico{ background:var(--g5); }
.card:nth-child(6n+5) .ico{ background:var(--g4); }
.card:nth-child(6n+6) .ico{ background:var(--g6); }
.feature:nth-child(3n+1) .dot{ background:var(--g1); }
.feature:nth-child(3n+2) .dot{ background:var(--g2); }
.feature:nth-child(3n+3) .dot{ background:var(--g5); }
.hero-visual .chip:nth-child(1) .ico{ background:var(--g1); }
.hero-visual .chip:nth-child(2) .ico{ background:var(--g5); }
.hero-visual .chip:nth-child(3) .ico{ background:var(--g2); }
.hero-visual .chip:nth-child(4) .ico{ background:var(--g4); }
.info-row:nth-child(4n+1) .ico{ background:var(--g1); }
.info-row:nth-child(4n+2) .ico{ background:var(--g2); }
.info-row:nth-child(4n+3) .ico{ background:var(--g5); }
.info-row:nth-child(4n+4) .ico{ background:var(--g4); }

/* Coloured top accent bar on card hover */
.card{ position:relative; overflow:hidden; }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:.3s; }
.card:hover::before{ transform:scaleX(1); }

/* Give the "soft" sections a subtle tint so the page is more colourful */
.section.soft{ background:linear-gradient(180deg,#f3f8fc 0%, #eef7f0 100%); }
.tint-blue{ background:linear-gradient(180deg,#eaf3fb,#f7fbff); }
.tint-green{ background:linear-gradient(180deg,#eef8ef,#f8fdf8); }

/* ---- Brand logo wall (Partners) ---- */
.brand-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.brand-tile{ background:#fff; border:1px solid var(--line); border-radius:14px;
  height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:14px 10px; transition:.22s; position:relative; overflow:hidden; }
.brand-tile::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--bc,#1B75BC); opacity:0; transition:.25s; }
.brand-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.brand-tile:hover::before{ opacity:1; }
.brand-mark{ width:40px; height:40px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; background:var(--bc,#1B75BC); color:#fff; font-weight:800; font-size:1.15rem; }
.brand-name{ font-weight:800; font-size:1.02rem; color:var(--bc,#334); letter-spacing:-.01em; line-height:1.1; text-align:center; }
.brand-name small{ display:block; font-weight:600; font-size:.68rem; color:var(--muted); letter-spacing:.02em; }

/* Microsoft-style 4 squares / Google multicolour helper marks */
.ms-squares{ display:grid; grid-template-columns:1fr 1fr; gap:2px; width:34px; height:34px; }
.ms-squares span{ display:block; border-radius:2px; }

/* ---- Product gallery ---- */
.product-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:.25s; display:flex; flex-direction:column; height:100%; }
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.product-media{ aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  padding:22px; background:linear-gradient(160deg,#eef5fb,#eafaef); }
.product-media svg{ width:100%; height:100%; max-height:170px; }
.product-body{ padding:24px 24px 26px; flex:1; display:flex; flex-direction:column; }
.product-tag{ display:inline-block; align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:var(--pc,#1B75BC); padding:5px 11px; border-radius:30px; margin-bottom:12px; }
.product-body h3{ margin-bottom:.35rem; }
.product-body p{ font-size:.96rem; }
.product-specs{ list-style:none; padding:0; margin:.4rem 0 0; }
.product-specs li{ position:relative; padding-left:22px; font-size:.9rem; margin-bottom:7px; color:var(--body); }
.product-specs li::before{ content:""; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%;
  background:var(--pc,#1B75BC); }
.product-brands{ margin-top:auto; padding-top:14px; font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); }

/* ---- Responsive additions ---- */
@media (max-width:960px){
  .brand-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .brand-grid{ grid-template-columns:repeat(2,1fr); }
  .brand-tile{ height:100px; }
}
@media (max-width:420px){
  .brand-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

/* ============================================================
   V3 ADDITIONS — Paragon-style home, brand cards, imagery
   ============================================================ */

/* Hero figure with network illustration + square motif */
.hero-figure{ position:relative; }
.hero-illus{ background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:18px; backdrop-filter:blur(6px); }
.hero-illus svg{ width:100%; height:auto; display:block; }
.square-motif{ position:absolute; right:-14px; bottom:-14px; display:grid; grid-template-columns:repeat(3,20px);
  grid-auto-rows:20px; gap:6px; }
.square-motif span{ display:block; width:20px; height:20px; border-radius:4px; }
.square-motif span:nth-child(1){ background:#1B75BC; } .square-motif span:nth-child(2){ background:#1FA6DE; }
.square-motif span:nth-child(3){ background:#39B54A; } .square-motif span:nth-child(4){ background:#84C441; }
.square-motif span:nth-child(5){ background:#F2793A; } .square-motif span:nth-child(6){ background:#6C5CE7; }

/* Intro two-column */
.intro-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.intro-split .checklist li{ font-weight:400; color:var(--body); }
.intro-card{ background:var(--grad-soft); border:1px solid var(--line); border-radius:16px; padding:32px; }
.intro-since{ font-weight:700; color:var(--ink); font-size:1.05rem; margin-bottom:18px; }
.serve-list{ list-style:none; padding:0; margin:0 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.serve-list li{ display:flex; align-items:center; gap:12px; font-weight:600; color:var(--ink); font-size:.98rem; }
.serve-list .i{ width:22px; height:22px; }
.serve-list li{ }
.serve-list li svg.i{ color:#fff; }
.serve-list li{ }
.serve-list li > svg.i{ background:var(--g1); border-radius:8px; padding:7px; width:34px; height:34px; box-sizing:content-box; }

/* Dark brand strip on home */
.dbrand-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:44px; }
.dbrand{ height:66px; display:flex; align-items:center; justify-content:center; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); padding:10px; }
.dbrand img{ max-height:34px; max-width:100%; filter:brightness(0) invert(1); opacity:.9; }
.dbrand-txt{ color:#e7eef6; font-weight:800; font-size:.95rem; letter-spacing:-.01em; text-align:center; }

/* Media frame for scene illustrations */
.media-frame{ border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); line-height:0;
  border:1px solid var(--line); min-height:300px; }
.media-frame svg{ width:100%; height:100%; min-height:340px; display:block; }

/* Brand cards (Partners page — Paragon style) */
.brand-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.brand-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 18px 20px;
  display:flex; flex-direction:column; align-items:center; text-align:center; transition:.22s; }
.brand-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.brand-logo{ height:70px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.brand-logo img{ max-height:56px; max-width:150px; object-fit:contain; }
.brand-plate{ display:flex; align-items:center; justify-content:center; height:52px; padding:0 6px;
  font-weight:900; font-size:1.15rem; letter-spacing:-.02em; color:var(--bc,#334); }
.brand-cap{ font-weight:700; color:var(--ink); font-size:.98rem; position:relative; padding-top:12px; }
.brand-cap::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:3px; background:var(--grad); }
.brand-cap small{ display:block; font-weight:500; color:var(--muted); font-size:.76rem; margin-top:2px; }

/* Pipe title */
.pipe-title span{ color:var(--green); font-weight:400; margin:0 6px; }

/* Expanded footer (5 columns) */
.footer-grid5{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr; gap:36px; }
.fbrandline{ font-weight:700; color:#cdd9e6; margin:14px 0 10px; }

/* Responsive */
@media (max-width:960px){
  .intro-split{ grid-template-columns:1fr; gap:30px; }
  .dbrand-grid{ grid-template-columns:repeat(4,1fr); }
  .brand-cards{ grid-template-columns:repeat(3,1fr); }
  .footer-grid5{ grid-template-columns:1fr 1fr; gap:30px; }
  .square-motif{ display:none; }
}
@media (max-width:760px){
  .dbrand-grid{ grid-template-columns:repeat(3,1fr); }
  .brand-cards{ grid-template-columns:repeat(2,1fr); }
  .serve-list{ grid-template-columns:1fr; }
  .footer-grid5{ grid-template-columns:1fr; }
  .media-frame{ min-height:220px; }
  .media-frame svg{ min-height:240px; }
}
@media (max-width:420px){
  .brand-cards{ grid-template-columns:1fr 1fr; gap:12px; }
  .dbrand-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   V4 — brand logo loading (online logos + nameplate fallback)
   ============================================================ */
.brand-img{ max-height:56px; max-width:150px; object-fit:contain; }
.brand-plate{ display:none; }                 /* shown by JS only if all logo sources fail */

/* Dark home strip: white chips so colour logos read on the dark band */
.dbrand{ background:#fff; border:1px solid rgba(255,255,255,.14); }
.dbrand .brand-img{ max-height:30px; max-width:110px; filter:none; opacity:1; }
.dbrand-txt{ display:none; color:var(--bc,#243447); font-weight:800; font-size:.92rem; letter-spacing:-.01em; text-align:center; }

/* Keep the enlarged logo tidy on smaller screens */
@media (max-width:760px){
  .nav{ height:92px; }
  .nav .logo img{ height:66px; }
  .nav-links{ inset:92px 0 auto 0; }
}
@media (max-width:420px){
  .nav .logo img{ height:56px; }
}