{{--
  AI-first courses highlight band — shown at the top of a school page.
  Expects:
    $aiCourses = [ ['title'=>..., 'level'=>..., 'url'=>..., 'blurb'=>...], ... ]
    $aiTitle (optional), $aiSub (optional)
  Brand palette: navy #0F2239 / #0a1c3d, orange #F07F1A, yellow #f6bb18, Inter font.
--}}
<style>
.aic { font-family:'Inter',system-ui,sans-serif; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0a1c3d 0%,#10294f 55%,#0F2239 100%); padding:64px 24px 70px; }
.aic *,.aic *::before,.aic *::after { box-sizing:border-box; }
.aic::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1px); background-size:30px 30px; }
.aic-orb { position:absolute; top:-120px; right:-60px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,#F07F1A 0%,transparent 65%); opacity:.2; filter:blur(20px); pointer-events:none; }
.aic-inner { position:relative; z-index:2; max-width:1240px; margin:0 auto; }

.aic-head { max-width:760px; margin-bottom:38px; }
.aic-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.aic-tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; padding:7px 15px; border-radius:999px;
  color:#F07F1A; background:rgba(240,127,26,.12); border:1px solid rgba(240,127,26,.35); }
.aic-tag.alt { color:#f6bb18; background:rgba(246,187,24,.12); border-color:rgba(246,187,24,.35); }
.aic-title { font-size:clamp(26px,3.2vw,42px); font-weight:800; color:#fff; line-height:1.12; letter-spacing:-.8px; margin:0 0 14px; }
.aic-title span { color:#F07F1A; }
.aic-sub { font-size:16px; color:rgba(255,255,255,.7); line-height:1.75; margin:0 0 18px; }
.aic-collab { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.8); }
.aic-collab svg { width:18px; height:18px; color:#F07F1A; }
.aic-collab b { color:#fff; font-weight:800; }

.aic-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:880px){ .aic-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .aic-grid { grid-template-columns:1fr; } }

.aic-card { position:relative; display:flex; flex-direction:column; background:#fff; border-radius:18px; padding:26px 24px 22px;
  text-decoration:none; overflow:hidden; border:1px solid rgba(255,255,255,.1); transition:transform .25s, box-shadow .25s; }
.aic-card::before { content:''; position:absolute; left:0; top:0; right:0; height:4px;
  background:linear-gradient(90deg,#F07F1A,#f6bb18); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.aic-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px -18px rgba(0,0,0,.5); }
.aic-card:hover::before { transform:scaleX(1); }
.aic-card-lvl { align-self:flex-start; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.7px;
  color:#F07F1A; background:rgba(240,127,26,.1); padding:5px 11px; border-radius:8px; margin-bottom:14px; }
.aic-card h3 { font-size:19px; font-weight:800; color:#0F2239; line-height:1.25; margin:0 0 9px; }
.aic-card p { font-size:13.5px; color:#5b6675; line-height:1.6; margin:0 0 18px; flex:1; }
.aic-link { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:#F07F1A; }
.aic-link i { transition:transform .25s; }
.aic-card:hover .aic-link i { transform:translateX(5px); }
</style>

<section class="aic">
  <div class="aic-orb"></div>
  <div class="aic-inner">
    <div class="aic-head">
      <div class="aic-tags">
        <span class="aic-tag">AI-First Courses</span>
        <span class="aic-tag alt">Degrees for the Future</span>
      </div>
      <h2 class="aic-title">{!! $aiTitle ?? 'Future-ready degrees, <span>powered by AI</span>' !!}</h2>
      <p class="aic-sub">{{ $aiSub ?? 'Industry-built, AI-first programs that blend core fundamentals with machine learning, data science and real-world projects — designed to make you job-ready from day one.' }}</p>
      <span class="aic-collab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> In collaboration with <b>Coding&nbsp;Pro</b></span>
    </div>
    <div class="aic-grid">
      @foreach($aiCourses as $c)
      <a href="{{ $c['url'] }}" class="aic-card">
        <span class="aic-card-lvl">{{ $c['level'] }}</span>
        <h3>{{ $c['title'] }}</h3>
        <p>{{ $c['blurb'] }}</p>
        <span class="aic-link">Explore Program <i class="fas fa-arrow-right" style="font-size:11px;"></i></span>
      </a>
      @endforeach
    </div>
  </div>
</section>