@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --ccai-teal:#0f7b74; --ccai-red:#c02231; --ccai-gold:#e0a100;
  --ccai-slate:#2f3b45; --ccai-ink:#1c2226; --ccai-muted:#5c6b73;
}
html{overflow-x:hidden;}
.ccai-hero,.ccai-search-section,.ccai-section,.ccai-oai{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}

/* HERO — на всю ширину */
.ccai-hero{
  position:relative;left:50%;width:100vw;margin-left:-50vw;
  min-height:clamp(360px,52vw,560px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ccai-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ccai-hero-overlay{position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(12,60,56,.92),rgba(18,22,26,.6) 55%,rgba(18,22,26,.5));}
.ccai-hero-inner{position:relative;z-index:2;text-align:center;color:#fff;
  padding:3em 1.3em 4.8em;max-width:920px;animation:ccaiFade .7s ease both;}
.ccai-logo{width:clamp(160px,24vw,240px);height:auto;
  filter:invert(1) drop-shadow(0 3px 14px rgba(0,0,0,.5));margin-bottom:.7em;}
.ccai-h1{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  font-size:clamp(2.2em,5.5vw,3.6em);line-height:1.08;letter-spacing:.5px;
  margin:.1em 0 .35em;color:#fff;border:none;text-shadow:0 3px 18px rgba(0,0,0,.4);}
.ccai-tagline{font-size:clamp(1.02em,1.7vw,1.25em);line-height:1.55;
  max-width:640px;margin:0 auto;opacity:.95;}
@keyframes ccaiFade{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* ПОШУК — картка, що накладається на банер */
.ccai-search-section{position:relative;z-index:3;max-width:760px;margin:-64px auto 0;padding:0 1.3em;text-align:center;}
.ccai-search-card{background:#fff;border-radius:14px;box-shadow:0 18px 45px rgba(16,30,40,.18);padding:1.4em 1.5em;}
.ccai-search{display:flex;align-items:center;gap:.7em;}
.ccai-search-icon{color:var(--ccai-muted);flex:none;}
.ccai-search input{flex:1;border:none;outline:none;background:transparent;font-size:1.15em;padding:.6em .2em;color:var(--ccai-ink);}
.ccai-search input::placeholder{color:#98a4ab;}
.ccai-search button{flex:none;border:none;background:var(--ccai-red);color:#fff;
  font:600 1em/1 'Inter',sans-serif;padding:.95em 1.9em;border-radius:8px;cursor:pointer;transition:background .2s,transform .1s;}
.ccai-search button:hover{background:#9c1a26;}
.ccai-search button:active{transform:scale(.97);}
.ccai-browse-link{display:inline-block;margin-top:1.1em;color:var(--ccai-teal);font-weight:600;text-decoration:none;}
.ccai-browse-link:hover{text-decoration:underline;}

/* EXPLORE — кольорові плитки */
.ccai-section{max-width:1120px;margin:3.4em auto 1em;padding:0 1.3em;text-align:center;}
.ccai-divider{width:60px;height:5px;background:var(--ccai-gold);border-radius:3px;margin:0 auto 1.1em;}
.ccai-h2{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  font-size:clamp(1.5em,3.4vw,2.2em);color:var(--ccai-ink);margin:0 0 1.6em;border:none;}
.ccai-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4em;}
.ccai-tile{display:flex;flex-direction:column;align-items:center;gap:.6em;padding:2em 1.2em;
  background:#fff;border:1px solid #e8ecef;border-radius:16px;text-decoration:none;color:var(--ccai-ink);
  box-shadow:0 3px 10px rgba(20,30,40,.05);transition:transform .2s,box-shadow .2s;}
.ccai-tile:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(20,30,40,.13);}
.ccai-tile-ico{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:16px;color:#fff;transition:transform .2s;}
.ccai-tile:hover .ccai-tile-ico{transform:scale(1.08) rotate(-4deg);}
.ccai-tile:nth-child(1) .ccai-tile-ico{background:var(--ccai-teal);}
.ccai-tile:nth-child(2) .ccai-tile-ico{background:var(--ccai-red);}
.ccai-tile:nth-child(3) .ccai-tile-ico{background:var(--ccai-gold);}
.ccai-tile:nth-child(4) .ccai-tile-ico{background:var(--ccai-slate);}
.ccai-tile-title{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:1.15em;}
.ccai-tile-desc{font-size:.9em;color:var(--ccai-muted);}

.ccai-oai{max-width:1120px;margin:3em auto 1.5em;padding:0 1.3em;text-align:center;font-size:.85em;color:var(--ccai-muted);}
.ccai-oai a{color:var(--ccai-teal);}

@media (max-width:640px){
  .ccai-hero-inner{padding:2.4em 1.2em 4.2em;}
  .ccai-search-section{margin-top:-48px;}
  .ccai-search{flex-wrap:wrap;}
  .ccai-search button{width:100%;}
}
.ccai-eyebrow{
  display:inline-block;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(.72em,1.4vw,.85em);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
  padding:.55em 1.2em;border-radius:999px;margin-bottom:1.2em;
  backdrop-filter:blur(2px);
}

/* ==== ВЛАСНА ШАПКА CCAI ==== */
.ccai-nav{ background:var(--tl); box-shadow:0 2px 14px rgba(15,60,55,.18); }
.ccai-nav-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:1.2em; padding:.55em 1.3em; }
.ccai-brand{ color:#fff !important; font-family:'Space Grotesk','Inter',sans-serif; font-weight:600; font-size:1.05em; line-height:1.15; text-decoration:none !important; max-width:260px; }
.ccai-brand:hover{ opacity:.9; }
.ccai-links{ display:flex; align-items:center; gap:.3em; margin-left:auto; flex-wrap:wrap; }
.ccai-links>a,.ccai-drop-t{ color:#fff !important; font-weight:600; text-decoration:none !important; padding:.55em .9em; border-radius:8px; display:inline-block; }
.ccai-links>a:hover,.ccai-drop-t:hover{ background:rgba(255,255,255,.16); }
.ccai-drop{ position:relative; }
.ccai-drop-menu{ position:absolute; right:0; top:100%; min-width:210px; background:#fff; border:1px solid #e7ecee; border-radius:10px; box-shadow:0 14px 34px rgba(20,30,40,.16); padding:.35em; margin-top:.3em; display:none; z-index:100; }
.ccai-drop:hover .ccai-drop-menu,.ccai-drop:focus-within .ccai-drop-menu{ display:block; }
.ccai-drop-menu a{ display:block; color:var(--ink) !important; font-weight:500; text-decoration:none !important; padding:.55em .8em; border-radius:6px; }
.ccai-drop-menu a:hover{ background:#f1f5f5; }
.ccai-navsearch{ display:flex; align-items:center; background:#fff; border-radius:8px; overflow:hidden; }
.ccai-navsearch input{ border:none; outline:none; padding:.5em .7em; font-size:.92em; width:130px; }
.ccai-navsearch button{ border:none; background:var(--rd); color:#fff; padding:.5em .7em; cursor:pointer; display:flex; align-items:center; }
.ccai-navsearch button:hover{ background:var(--rd-d); }
.ccai-login a{ color:#fff !important; font-weight:600; text-decoration:none !important; padding:.55em .8em; }
.ccai-login a:hover{ text-decoration:underline !important; }
.ccai-nav-toggle,.ccai-burger{ display:none; }

@media (max-width:820px){
  .ccai-burger{ display:flex; flex-direction:column; gap:5px; margin-left:auto; cursor:pointer; padding:.4em; }
  .ccai-burger span{ width:26px; height:3px; background:#fff; border-radius:2px; }
  .ccai-links{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:.1em; margin:.4em 0 .2em; }
  .ccai-nav-toggle:checked ~ .ccai-links{ display:flex; }
  .ccai-nav-inner{ flex-wrap:wrap; }
  .ccai-drop-menu{ position:static; box-shadow:none; border:none; background:rgba(255,255,255,.12); margin:.2em 0 .2em 1em; }
  .ccai-drop-menu a{ color:#fff !important; }
  .ccai-drop-menu a:hover{ background:rgba(255,255,255,.15); }
  .ccai-navsearch{ width:100%; }
  .ccai-navsearch input{ flex:1; width:auto; }
  .ccai-login{ padding:.3em 0; }
}

.ccai-latest{ text-align:center; }
.ccai-latest-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1em; text-align:left; margin-top:.4em; }
.ccai-latest-card{ display:flex; flex-direction:column; gap:.5em; background:#fff; border:1px solid #e8ecef; border-radius:12px; padding:1.1em 1.2em; text-decoration:none !important; color:#1c2226 !important; box-shadow:0 3px 10px rgba(20,30,40,.05); transition:transform .18s,box-shadow .18s; }
.ccai-latest-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(20,30,40,.1); }
.ccai-latest-title{ font-weight:600; font-family:'Space Grotesk','Inter',sans-serif; line-height:1.35; color:#1c2226; }
.ccai-latest-meta{ font-size:.85em; color:#5c6b73; }
.ccai-latest-loading,.ccai-latest-empty{ color:#5c6b73; }
@media (max-width:640px){ .ccai-latest-grid{ grid-template-columns:1fr; } }