/* ============================================================
   AIB DIGITAL SOLUTIONS — additions on top of yume.css + company.css
   Colours come from the shared tokens; the build remaps the old warm
   palette to AIB indigo, so nothing here hard-codes the brand.
   ============================================================ */

/* ---------- Access · Integrate · Bloom ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
.pillar{position:relative; padding:28px 26px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--ring-0); box-shadow:var(--sh-1); overflow:hidden}
.pillar .n{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--accent); text-transform:uppercase}
.pillar h3{margin:10px 0 8px; font-family:var(--display); font-size:30px; font-weight:500; letter-spacing:-.01em; color:var(--fg)}
.pillar p{margin:0; color:var(--fg-2); line-height:1.6}
.pillar::after{content:""; position:absolute; right:-60px; top:-60px; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 70%)}
@media (max-width:860px){ .pillars{grid-template-columns:1fr} }

/* ---------- Product cards ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px}
.prod-grid.three{grid-template-columns:repeat(3,1fr)}
.prod{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-0);
  box-shadow:var(--sh-1); overflow:hidden; text-decoration:none; color:inherit; transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.prod:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.prod .shot{aspect-ratio:16/9; overflow:hidden; background:var(--ring-1); border-bottom:1px solid var(--line)}
.prod .shot img{width:100%; height:100%; object-fit:cover; object-position:top left; display:block}
.prod .body{display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px; flex:1}
.prod .kind{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.prod h3{margin:0; font-size:21px; letter-spacing:-.01em; color:var(--fg)}
.prod p{margin:0; color:var(--fg-2); line-height:1.55}
.prod .foot{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:10px}
.prod .price{font-weight:700; color:var(--fg)}
.prod .price small{font-weight:500; color:var(--fg-3)}
.prod .go{color:var(--accent); font-weight:600; white-space:nowrap}
.prod.feature{grid-column:1/-1; display:grid; grid-template-columns:1.25fr 1fr}
.prod.feature .shot{aspect-ratio:auto; min-height:100%; border-bottom:0; border-right:1px solid var(--line)}
.prod.feature h3{font-size:28px}
@media (max-width:960px){ .prod-grid.three{grid-template-columns:1fr 1fr} }
@media (max-width:760px){
  .prod-grid, .prod-grid.three{grid-template-columns:1fr}
  .prod.feature{grid-template-columns:1fr}
  .prod.feature .shot{border-right:0; border-bottom:1px solid var(--line); aspect-ratio:16/9}
}

/* ---------- Product page ---------- */
.pp-hero{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center}
.pp-hero .frame img{display:block; width:100%}
.pp-buy{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.pp-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.pp-meta span{padding:6px 11px; border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--fg-2); background:var(--ring-0)}
.feat-list{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; margin:34px 0 0; padding:0; list-style:none}
.feat-list li{position:relative; padding-left:28px; color:var(--fg-2); line-height:1.55}
.feat-list li b{color:var(--fg)}
.feat-list li::before{content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; border-radius:4px;
  background:var(--accent-tint); border:1.5px solid var(--accent)}
.lic{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px}
.lic article{padding:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ring-0)}
.lic article.best{border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-tint)}
.lic .amt{font-family:var(--display); font-size:44px; color:var(--fg); line-height:1; margin:8px 0 10px}
.lic p{margin:0 0 18px; color:var(--fg-2)}
.shots{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px}
.shots img{width:100%; display:block; border-radius:var(--r-md); border:1px solid var(--line)}
@media (max-width:860px){
  .pp-hero, .lic, .shots{grid-template-columns:1fr}
  .feat-list{grid-template-columns:1fr}
}

/* ---------- Articles ---------- */
.arts{display:grid; gap:14px; margin-top:34px}
.arts a{display:grid; grid-template-columns:1fr auto; gap:6px 18px; padding:20px 22px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--ring-0); text-decoration:none; color:inherit}
.arts a:hover{border-color:var(--accent-line)}
.arts b{color:var(--fg); font-size:18px}
.arts span{color:var(--fg-3); font-size:14px; grid-column:1}
.arts i{font-style:normal; color:var(--accent); grid-row:1/3; grid-column:2; align-self:center}
.lic.three{grid-template-columns:repeat(3,1fr)}
.lic .flag{display:inline-block; margin-left:8px; padding:3px 9px; border-radius:999px; font-size:12px; background:var(--accent-tint); color:var(--accent); vertical-align:middle}
.lic ul{margin:0 0 18px; padding-left:18px; color:var(--fg-2); line-height:1.7}
@media (max-width:960px){ .lic.three{grid-template-columns:1fr} }

/* ============================================================
   v3 — company look (devsinc-inspired): geometric sans, near-black
   bands lit with Bloom Glyph red, rounded grey panels, gradient-topped cards.
   ============================================================ */
:root{
  --sans:"DM Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"DM Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --glow:#ff7a5e; --night:#161413; --night-2:#24201e;
  --panel:#f2f2f1;
}
:root[data-theme="dark"]{ --panel:#1d1b1a; }
body{background:var(--bg-2)}
h1,h2,h3,.lede{font-family:var(--display)}
h1,h2{font-weight:600; letter-spacing:-.025em}
h1 em, h2 em, h3 em{font-style:normal; color:var(--accent)}
.ink h1 em, .ink h2 em, .band-dark h2 em{background:linear-gradient(90deg,#ffb199,#ff4b2b); -webkit-background-clip:text; background-clip:text; color:transparent}

/* dark sections become a near-black panel with rounded corners */
main > section.ink, main > section.band-dark{
  margin:12px; border-radius:28px; overflow:hidden;
  background:radial-gradient(900px 420px at 85% 0%,rgba(236,48,20,.22),transparent 60%),
             radial-gradient(700px 380px at 0% 100%,rgba(255,122,94,.08),transparent 60%),
             linear-gradient(160deg,var(--night),var(--night-2));
}
main > section.band-dark{color:#f5f5f4}
main > section.band-dark .eyebrow{color:var(--glow)}
main > section.band-dark p{color:#d6d3d1}
/* alternate light sections sit on soft grey panels */
main > section.panel{margin:12px; border-radius:28px; background:var(--panel)}
footer.ink{background:linear-gradient(160deg,var(--night),#0c0b0a)}

.eyebrow{font-family:var(--mono); letter-spacing:.14em}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
.btn-w{background:#fff; color:#201e1d; border:1px solid #fff}
.btn-w:hover{background:#f0efee}
.btn-ghost-w{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
.btn-ghost-w:hover{border-color:#fff}

/* service cards with a gradient top edge */
.svc-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px}
.svc-card{position:relative; padding:26px 22px 24px; border-radius:18px; background:var(--ring-0); border:1px solid var(--line);
  text-decoration:none; color:inherit; overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.svc-card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,#ec3014,#ffb199)}
.svc-card:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.svc-card .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent); margin-bottom:16px}
.svc-card h3{margin:0 0 8px; font-size:19px; font-weight:600; color:var(--fg)}
.svc-card p{margin:0; color:var(--fg-2); line-height:1.55; font-size:15px}
@media (max-width:1000px){ .svc-cards{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .svc-cards{grid-template-columns:1fr} }

/* stats band */
.stats{display:grid; grid-template-columns:repeat(4,1fr); margin-top:44px; border-top:1px solid rgba(255,255,255,.12)}
.stats div{padding:26px 20px 6px 0; border-right:1px solid rgba(255,255,255,.12); padding-left:20px}
.stats div:first-child{padding-left:0}
.stats div:last-child{border-right:0}
.stats b{display:block; font-family:var(--display); font-size:clamp(40px,5vw,60px); font-weight:600; color:#fff; letter-spacing:-.03em; line-height:1}
.stats b i{font-style:normal; color:var(--glow)}
.stats span{display:block; margin-top:10px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#a8a29e}
@media (max-width:860px){ .stats{grid-template-columns:1fr 1fr} .stats div:nth-child(2){border-right:0} .stats div:nth-child(3){padding-left:0} }

/* case study cards: image on top, near-black footer */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.case-card{display:flex; flex-direction:column; border-radius:20px; overflow:hidden; text-decoration:none; color:#fff; background:var(--night); box-shadow:var(--sh-1); transition:transform .2s var(--ease)}
.case-card:hover{transform:translateY(-4px)}
.case-card .img{position:relative; aspect-ratio:16/10; overflow:hidden; background:#24201e}
.case-card .img img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.case-card .tag{position:absolute; left:14px; top:14px; padding:5px 10px; border-radius:7px; background:rgba(22,20,19,.85); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.case-card .txt{padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.case-card h3{margin:0; font-size:20px; font-weight:600; line-height:1.3; color:#fff}
.case-card .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#a8a29e}
.case-card .go{margin-top:auto; padding-top:6px; font-size:14px; color:var(--glow)}
@media (max-width:960px){ .cases{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .cases{grid-template-columns:1fr} }

/* industries */
.inds{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px}
.inds div{padding:22px; border-radius:16px; background:var(--ring-0); border:1px solid var(--line)}
.inds b{display:block; font-size:17px; color:var(--fg); margin-bottom:6px}
.inds span{color:var(--fg-2); font-size:15px; line-height:1.55}
@media (max-width:860px){ .inds{grid-template-columns:1fr} }

/* experience list (dark) */
.exp{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px}
.exp article{padding:24px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1)}
.exp .org{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--glow)}
.exp h3{margin:8px 0 8px; font-size:19px; color:#fff; font-weight:600}
.exp p{margin:0; color:#d6d3d1; line-height:1.6; font-size:15px}
@media (max-width:760px){ .exp{grid-template-columns:1fr} }

/* product cards: buy row */
.prod .buy{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.prod .buy .btn{padding:10px 16px; font-size:14px}
.hero-shot{border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.hero-shot img{display:block; width:100%}

/* blog cards (dev.to articles) */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.blog-grid.all{grid-template-columns:repeat(3,1fr)}
.blog-card{display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:var(--ring-0); border:1px solid var(--line);
  text-decoration:none; color:inherit; transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.blog-card:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.blog-card .img{aspect-ratio:16/9; overflow:hidden; background:var(--panel)}
.blog-card .img img{width:100%; height:100%; object-fit:cover; display:block}
.blog-card .txt{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px}
.blog-card .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.blog-card h3{margin:0; font-size:18px; font-weight:600; line-height:1.35; color:var(--fg)}
.blog-card .meta{font-size:13.5px; color:var(--fg-3)}
@media (max-width:960px){ .blog-grid, .blog-grid.all{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .blog-grid, .blog-grid.all{grid-template-columns:1fr} }

/* ---------- Bloom Glyph logo ---------- */
.mark svg.glyph{width:auto; height:34px; border-radius:0; box-shadow:none; color:#201e1d; flex:none}
:root[data-theme="dark"] .mark svg.glyph, .ft-brand .mark svg.glyph{color:#fff}
.mark svg.glyph + span{border-left:1.5px solid currentColor; padding-left:12px; line-height:1}
.ft-brand .mark svg.glyph + span{border-color:rgba(255,255,255,.35)}
@media(max-width:420px){ .mark svg.glyph{height:30px} }