/* ============================================================
   HOME.CSS — styles only used on index.html.
   Load after base.css.
   ============================================================ */

/* ============ HERO ============ */
.hero{ position:relative; padding: 64px 0 40px; background: linear-gradient(180deg, var(--sky) 0%, #ffffff 78%); overflow:hidden; }
.hero::before{
  content:''; position:absolute; top:-160px; right:-160px; width:480px; height:480px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(43,87,232,0.16), rgba(43,87,232,0) 70%);
}
.hero::after{
  content:''; position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background-image: radial-gradient(circle, rgba(43,87,232,0.14) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 55%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 55%);
}
.headline-mark{ position:relative; display:inline-block; }
.headline-mark svg{ position:absolute; left:0; bottom:-10px; width:100%; height:14px; color: var(--gold); }

.trusted-row{ display:flex; align-items:center; gap:12px; margin-top:26px; }
.trusted-avatars{ display:flex; }
.trusted-avatars span{
  width:32px; height:32px; border-radius:50%; background: var(--sky-2); border:2px solid #fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color: var(--royal);
  margin-left:-9px; box-shadow: 0 2px 6px rgba(11,27,58,0.12);
}
.trusted-avatars span:first-child{ margin-left:0; }
.trusted-row p{ font-size:12.5px; color: var(--muted); font-weight:600; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center; position:relative; z-index:1; }
.hero-copy h1{ font-size: clamp(34px, 4.6vw, 54px); font-weight:800; }
.hero-copy h1 .accent{ color: var(--royal); }
.hero-copy p.lede{ margin-top:18px; font-size:17px; line-height:1.6; color: var(--muted); max-width: 480px; }
.hero-stats{ display:flex; gap:34px; margin-top:40px; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:'Manrope'; font-size:26px; font-weight:800; color: var(--navy); }
.hero-stats .stat span{ font-size:13px; color: var(--muted); font-weight:600; }

.hero-float-card{
  position:absolute; bottom:-26px; left:-20px; background:#fff; border-radius: var(--radius-m);
  padding: 18px 20px; box-shadow: var(--shadow-s); width: 220px; border:1px solid var(--line);
  z-index:3;
}
.hero-float-card b{ display:block; font-family:'Manrope'; font-size:14.5px; color:var(--navy); margin-bottom:8px; }
.hero-float-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.hero-float-card li{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color: var(--muted); font-weight:600; }
.hero-float-card li svg{ width:14px; height:14px; flex-shrink:0; margin-top:2px; color: var(--royal); }

/* ============ SERVICES ============ */
.service-grid{ margin-top: 44px; display:grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.service-card{
  border:1px solid transparent; border-radius: var(--radius-m); padding: 22px 18px;
  display:flex; flex-direction:column; gap:10px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-s); }
.service-card h3{ font-size:15.5px; font-weight:800; line-height:1.25; }
.service-card p{ font-size:12.8px; color: var(--muted); line-height:1.5; flex:1; }
.service-card .learn{ font-size:12.5px; font-weight:700; color: var(--royal); display:inline-flex; align-items:center; gap:5px; }
.svc-1{ background: #EDF2FE; }
.svc-2{ background: #F1ECFB; }
.svc-3{ background: #FDEDF2; }
.svc-4{ background: #FEF1E2; }
.svc-5{ background: #E9F8EF; }
.svc-6{ background: #E7ECF7; }
.svc-7{ background: #F0ECFB; }

/* ============ WHY IKORA ============ */
.why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items:center; }
.why-points{ margin-top: 30px; display:grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.why-point .num{ font-family:'Manrope'; font-weight:800; color: var(--royal); font-size:13px; }
.why-point h4{ font-size:16px; margin-top:6px; }
.why-point p{ font-size:13.5px; color: var(--muted); margin-top:6px; line-height:1.5; }

.growth-panel{
  border-radius: var(--radius-l); overflow:hidden; position:relative;
  height: 400px; box-shadow: var(--shadow); color:#fff;
  padding: 32px 32px 28px; display:flex; flex-direction:column; justify-content:space-between;
  background-image: linear-gradient(100deg, var(--navy) 0%, rgba(11,27,58,0.9) 32%, rgba(11,27,58,0.42) 58%, rgba(11,27,58,0.08) 82%), url('../assets/why_laptop.jpg');
  background-size: cover; background-position: right center;
}
.growth-panel .eyebrow{ background: rgba(255,255,255,0.14); color:#fff; position:relative; z-index:1; }
.growth-panel .eyebrow::before{ background:#fff; }
.growth-panel h3{ color:#fff; font-size: 23px; font-weight:800; margin-top:14px; position:relative; z-index:1; max-width:260px; }
.growth-panel h3 span{ color:#8FB0FF; }
.growth-panel p{ color: rgba(255,255,255,0.72); margin-top:9px; font-size:13.5px; max-width:250px; position:relative; z-index:1; }
.growth-panel .btn{ margin-top:16px; position:relative; z-index:1; align-self:flex-start; }
.growth-panel .trusted-row{ margin-top:0; position:relative; z-index:1; }
.growth-panel .trusted-row p{ color: rgba(255,255,255,0.68); max-width:none; font-size:12px; margin-top:0; }
.growth-panel .trusted-avatars span{ background: rgba(255,255,255,0.16); border-color: var(--navy-2); color:#fff; }

/* ============ PROJECT SHOWCASE (big photo cards, horizontal scroll) ============ */
.proj-toolbar{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.proj-nav-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; color: var(--navy); cursor:pointer;
  transition: background .15s ease, border-color .15s ease; flex-shrink:0;
}
.proj-nav-btn:hover{ background: var(--sky); border-color: var(--royal); color: var(--royal); }
.proj-nav-btn svg{ width:18px; height:18px; }
.proj-grid{
  margin-top:20px; display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:6px; scrollbar-width:none; -ms-overflow-style:none;
}
.proj-grid::-webkit-scrollbar{ display:none; }
.proj-card{
  flex: 0 0 260px; scroll-snap-align:start;
  border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--line); background:#fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.proj-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-s); }
.proj-thumb{ height:200px; overflow:hidden; }
.proj-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease; }
.proj-card:hover .proj-thumb img{ transform: scale(1.05); }
.proj-caption{ padding: 14px 16px; font-size:14px; font-weight:700; color: var(--navy); }
.cap-note{ margin-top:18px; font-size:13px; color: var(--muted); }

/* ============ TESTIMONIALS ============ */
.testi-grid{ margin-top:44px; display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.testi-card{
  border:1px solid var(--line); border-radius: var(--radius-m); padding:26px 22px; background: var(--sky);
  display:flex; flex-direction:column; gap:16px; min-height: 190px; justify-content:space-between;
}
.testi-card .quote-icon{ width:26px; height:26px; color: var(--royal); opacity:.5; }
.testi-card p.placeholder-text{ font-size:14px; color: var(--ink); line-height:1.55; }
.testi-person{ display:flex; align-items:center; gap:10px; }
.testi-avatar{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Manrope'; font-weight:800; font-size:12.5px; color:#fff; flex-shrink:0;
}
.testi-person b{ display:block; font-size:13px; color: var(--navy); }
.testi-person span{ font-size:11.5px; color: var(--muted); }

/* ============ RESPONSIVE (home only) ============ */
@media (max-width: 1180px){
  .service-grid{ grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 980px){
  .hero-grid, .why-grid{ grid-template-columns:1fr; }
  .service-grid{ grid-template-columns: repeat(3,1fr); }
  .testi-grid{ grid-template-columns: 1fr; }
  .proj-card{ flex: 0 0 230px; }
  .growth-panel{ height:auto; min-height:340px; }
}
@media (max-width: 640px){
  .service-grid{ grid-template-columns: repeat(2,1fr); }
  .proj-card{ flex: 0 0 210px; }
  .why-points{ grid-template-columns: 1fr; }
  .hero-float-card{ position:static; margin-top:16px; width:100%; }
}
@media (max-width: 420px){
  .service-grid{ grid-template-columns: 1fr; }
  .proj-card{ flex: 0 0 78vw; }
}