/* ==========================================================================
   INFINIYARD — Brand CSS
   Paste this whole file into:  Appearance → Customize → Additional CSS
   (WordPress Customizer). It has NO Tailwind dependency, so every custom
   shape / card / motif below keeps working after you rebuild the page with
   native Elementor widgets. Attach the class names (e.g. iy-folder) to the
   relevant Elementor element via its Advanced → CSS Classes field.
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */
:root{
  --iy-blue:        #22A7E0;   /* primary sky blue — CTAs, accents, icons     */
  --iy-blue-600:    #1790C6;   /* hover / pressed                             */
  --iy-blue-soft:   #E1F3FC;   /* pale fills, badges                          */
  --iy-blue-100:    #7DD3FC;   /* light sky blue                              */
  --iy-charcoal:    #121317;   /* dark bands, header/footer                   */
  --iy-charcoal-2:  #1B1D22;   /* charcoal card / gradient partner            */
  --iy-ink:         #0E0F12;   /* near-black headings on light                */
  --iy-grey:        #4B5563;   /* body text                                   */
  --iy-grey-muted:  #9CA3AF;   /* secondary text                             */
  --iy-grey-100:    #F3F4F6;   /* light section bg                            */
  --iy-grey-200:    #E5E7EB;   /* borders / dividers                          */
  --iy-white:       #FFFFFF;
  --iy-radius:      18px;
  --iy-radius-lg:   26px;
  --iy-shadow:      0 18px 40px -18px rgba(16,24,40,.35);
  --iy-shadow-sm:   0 8px 24px -12px rgba(16,24,40,.25);
  --iy-font-display:"Poppins", system-ui, sans-serif;
  --iy-font-body:   "Inter", system-ui, sans-serif;
  --iy-maxw:        1200px;
}

/* ---------- 2. Typography helpers ---------------------------------------- */
/* Map to Elementor Heading / Text-Editor widgets, or set globally in
   Site Settings → Typography and delete these. */
.iy-eyebrow{
  display:inline-block;
  font-family:var(--iy-font-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--iy-blue);
  background:var(--iy-blue-soft);
  padding:.45rem .9rem;
  border-radius:999px;
}
.iy-h1{
  font-family:var(--iy-font-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.01em;
  font-size:clamp(2.6rem,6vw,4rem);
}
.iy-h2{
  font-family:var(--iy-font-display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.005em;
  text-transform:uppercase;
  font-size:clamp(2rem,4.5vw,3.25rem);
}
.iy-h3{ font-family:var(--iy-font-display); font-weight:700; }
.iy-lead{
  font-family:var(--iy-font-body);
  color:var(--iy-grey);
  font-size:1.075rem;
  line-height:1.7;
  max-width:56ch;
}
.iy-on-dark .iy-lead,
.iy-lead--onDark{ color:#C7CBD2; }
.iy-blue-text{ color:var(--iy-blue); }

/* ---------- 3. Buttons --------------------------------------------------- */
/* In Elementor use the native Button widget; add class iy-btn iy-btn--primary
   (or --ghost) in Advanced → CSS Classes. The arrow chip is drawn here. */
.iy-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--iy-font-body);
  font-weight:600;
  font-size:.95rem;
  padding:.85rem 1.1rem .85rem 1.5rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  cursor:pointer;
  border:0;
}
.iy-btn--primary{ background:var(--iy-blue); color:#fff; box-shadow:var(--iy-shadow-sm); }
.iy-btn--primary:hover{ background:var(--iy-blue-600); transform:translateY(-2px); }
.iy-btn--ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35); }
.iy-btn--ghost:hover{ border-color:var(--iy-blue); color:var(--iy-blue-100); }
.iy-btn--dark{ background:var(--iy-charcoal); color:#fff; }
.iy-btn--dark:hover{ background:#000; transform:translateY(-2px); }
.iy-btn__chip{
  display:inline-grid;
  place-items:center;
  width:1.85rem;height:1.85rem;
  border-radius:999px;
  background:rgba(255,255,255,.22);
}
.iy-btn--ghost .iy-btn__chip{ background:rgba(255,255,255,.12); }

/* ---------- 4. Layout atoms --------------------------------------------- */
.iy-wrap{ max-width:var(--iy-maxw); margin-inline:auto; padding-inline:1.25rem; }
.iy-band{ padding-block:clamp(3.5rem,7vw,6rem); }
.iy-band--dark{ background:var(--iy-charcoal); color:#fff; }
.iy-band--grey{ background:var(--iy-grey-100); }
.iy-band--white{ background:#fff; }

/* Dotted grid motif (Why-Choose / hero corners) */
.iy-dotgrid{
  background-image:radial-gradient(var(--iy-grey-muted) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  opacity:.5;
}

/* ---------- 5. Hero angled shape ---------------------------------------- */
/* Wrap the hero in .iy-hero. The blue rounded shape mimics the title slide. */
.iy-hero{ position:relative; background:var(--iy-charcoal); overflow:hidden; }
.iy-hero__shape{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(34,167,224,.16), transparent 60%);
}
.iy-hero__panel{
  position:absolute; left:0; bottom:0; z-index:0;
  width:min(60%,760px); height:78%;
  background:linear-gradient(180deg,#39B4EA 0%, var(--iy-blue) 100%);
  border-top-right-radius:120px 90px;
  border-bottom-right-radius:0;
  box-shadow:0 -30px 80px -20px rgba(34,167,224,.5);
}
@media (max-width:768px){
  .iy-hero__panel{ width:100%; height:46%; border-top-right-radius:60px 44px; }
}

/* ---------- 6. Folder-tab card (What's Inside / Our Difference) ---------- */
.iy-folder{
  position:relative;
  background:linear-gradient(180deg,#3FB6EC 0%, var(--iy-blue) 100%);
  color:var(--iy-ink);
  border-radius:8px 8px var(--iy-radius) var(--iy-radius);
  padding:2.4rem 1.5rem 1.6rem;
  margin-top:22px;
  box-shadow:var(--iy-shadow);
}
.iy-folder::before{           /* the tab */
  content:"";
  position:absolute; top:-20px; left:0;
  width:52%; height:26px;
  background:linear-gradient(180deg,#4FBDEE,#3FB6EC);
  border-radius:8px 18px 0 0;
}
.iy-folder h3{ font-weight:800; text-transform:uppercase; letter-spacing:.01em; }
.iy-folder__icon{
  width:2.6rem;height:2.6rem;display:grid;place-items:center;
  color:var(--iy-ink); margin-bottom:.9rem;
}

/* ---------- 7. Feature card (About / Services) -------------------------- */
.iy-feature{
  border-radius:var(--iy-radius);
  padding:1.7rem 1.5rem;
  box-shadow:var(--iy-shadow);
  height:100%;
}
.iy-feature--blue{ background:var(--iy-blue); color:#fff; }
.iy-feature--white{ background:#fff; color:var(--iy-ink); border:1px solid var(--iy-grey-200); }
.iy-feature__icon{ width:3rem;height:3rem;display:grid;place-items:center;margin-bottom:1.4rem; }
.iy-feature--blue .iy-feature__icon{ color:#fff; }
.iy-feature--white .iy-feature__icon{ color:var(--iy-blue); }
.iy-feature h3{ font-weight:800; margin-bottom:.5rem; text-transform:uppercase; font-size:1.02rem; letter-spacing:.02em; }
.iy-feature p{ line-height:1.6; font-size:.96rem; }
.iy-feature--white p{ color:var(--iy-grey); }
.iy-feature--blue p{ color:rgba(255,255,255,.92); }

/* Service row card (with ▷ marker) — alternating fills */
.iy-service{ display:flex; gap:1.1rem; align-items:flex-start; border-radius:var(--iy-radius); padding:1.6rem 1.5rem; box-shadow:var(--iy-shadow-sm); height:100%; }
.iy-service--blue{ background:var(--iy-blue); color:#fff; }
.iy-service--white{ background:#fff; color:var(--iy-ink); border:1px solid var(--iy-grey-200); }
.iy-service__ic{ flex:0 0 auto; width:3.1rem;height:3.1rem; display:grid;place-items:center; }
.iy-service--white .iy-service__ic{ color:var(--iy-blue); }
.iy-service h3{ font-weight:800; letter-spacing:.02em; display:flex; align-items:center; gap:.5rem; }
.iy-service h3::before{ content:"▷"; font-size:.7em; color:currentColor; }
.iy-service--white p{ color:var(--iy-grey); }
.iy-service--blue p{ color:rgba(255,255,255,.9); }

/* ---------- 8. Industry image card + starburst -------------------------- */
.iy-industry{ position:relative; border-radius:var(--iy-radius); overflow:hidden; box-shadow:var(--iy-shadow); background:#fff; }
.iy-industry img{ width:100%; height:210px; object-fit:cover; display:block; }
.iy-industry__label{ padding:1.2rem 1rem; font-family:var(--iy-font-display); font-weight:800; text-transform:uppercase; text-align:center; font-size:.95rem; letter-spacing:.02em; }
.iy-industry--blue .iy-industry__label{ background:var(--iy-blue); color:#fff; }
.iy-industry--white .iy-industry__label{ background:#fff; color:var(--iy-ink); }
.iy-starburst{
  position:absolute; top:-14px; right:16px; z-index:2;
  width:44px;height:44px;
  background:var(--iy-blue);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.iy-starburst--white{ background:#fff; }

/* ---------- 9. Why-Choose row ------------------------------------------- */
.iy-why{ display:flex; gap:1.1rem; align-items:center; background:var(--iy-charcoal-2); border-radius:var(--iy-radius); padding:1.25rem 1.4rem; }
.iy-why--accent{ background:var(--iy-blue); }
.iy-why__ic{ flex:0 0 auto; width:3.2rem;height:3.2rem; display:grid;place-items:center; color:#fff; }
.iy-why h3{ font-family:var(--iy-font-display); font-weight:800; text-transform:uppercase; color:#fff; font-size:1rem; letter-spacing:.02em; }
.iy-why p{ color:rgba(255,255,255,.8); font-size:.92rem; line-height:1.55; margin-top:.25rem; }

/* ---------- 10. Process timeline ---------------------------------------- */
.iy-process{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.iy-step{ text-align:center; position:relative; }
.iy-step__ic{ width:5rem;height:5rem;margin:0 auto 1.4rem; color:var(--iy-blue); display:grid;place-items:center; }
.iy-step__pill{ font-family:var(--iy-font-display); font-weight:800; text-transform:uppercase; font-size:.92rem; letter-spacing:.02em; border-radius:10px; padding:.85rem .75rem; line-height:1.15; }
.iy-step:nth-child(odd) .iy-step__pill{ background:var(--iy-blue); color:#fff; }
.iy-step:nth-child(even) .iy-step__pill{ background:#fff; color:var(--iy-ink); border:2px solid var(--iy-blue); }
.iy-step p{ color:rgba(255,255,255,.82); font-size:.92rem; line-height:1.55; margin-top:1rem; }
.iy-step:not(:last-child)::after{
  content:"›";
  position:absolute; top:6.4rem; right:-1rem;
  color:var(--iy-blue); font-size:1.6rem; font-weight:800; line-height:1;
}
@media (max-width:860px){
  .iy-process{ grid-template-columns:1fr 1fr; }
  .iy-step:not(:last-child)::after{ display:none; }
}
@media (max-width:520px){ .iy-process{ grid-template-columns:1fr; } }

/* ---------- 11. Closing CTA band (angled blue) -------------------------- */
.iy-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--iy-charcoal) 0%, var(--iy-charcoal) 38%, var(--iy-blue) 38%);
  color:#fff;
}
@media (max-width:768px){ .iy-cta{ background:var(--iy-blue); } }
.iy-cta__inner{ position:relative; z-index:1; }
.iy-cta h2{ color:#FFFFFF; }

/* ---------- 12. Header / footer ----------------------------------------- */
.iy-topbar{ background:var(--iy-charcoal); color:#cfd3da; font-size:.85rem; }
.iy-nav{ background:#fff; box-shadow:0 1px 0 var(--iy-grey-200); }
.iy-nav a.iy-navlink{ font-family:var(--iy-font-body); font-weight:600; color:var(--iy-ink); text-decoration:none; padding:.4rem .1rem; position:relative; }
.iy-nav a.iy-navlink:hover{ color:var(--iy-blue); }
.iy-nav a.iy-navlink.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; background:var(--iy-blue); border-radius:2px; }
.iy-footer{ background:var(--iy-charcoal); color:#B7BCC5; }
.iy-footer a{ color:#B7BCC5; text-decoration:none; }
.iy-footer a:hover{ color:var(--iy-blue); }

/* ---------- 13. Contact form ------------------------------------------- */
.iy-input{ width:100%; border:1px solid var(--iy-grey-200); border-radius:12px; padding:.85rem 1rem; font-family:var(--iy-font-body); font-size:.95rem; background:#fff; color:var(--iy-ink); }
.iy-input:focus{ outline:none; border-color:var(--iy-blue); box-shadow:0 0 0 3px var(--iy-blue-soft); }
.iy-contact-card{ display:flex; gap:1rem; align-items:center; background:#fff; border:1px solid var(--iy-grey-200); border-radius:var(--iy-radius); padding:1.2rem 1.3rem; }
.iy-contact-card__ic{ width:3rem;height:3rem;flex:0 0 auto; display:grid;place-items:center; background:var(--iy-blue-soft); color:var(--iy-blue); border-radius:12px; }

/* ---------- 14. Accessibility / motion --------------------------------- */
:focus-visible{ outline:3px solid var(--iy-blue); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}
.iy-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.iy-reveal.is-in{ opacity:1; transform:none; }