/* ============================================================
   Industry pages (industry-page.php)
   Dark hero with a capability card, overview + consultation form,
   solution cards, feature list, standards band, process steps,
   technology chips, why-us cards, portfolio strip, closing CTA.
   Colours are explicit so main.css (a:hover{color:#fff}, bare
   h1/h2/p rules) can't restyle the page. Scroll-reveal comes from
   js/gletus-animate.js; hover lifts use `translate` because the
   reveal's transform:none would cancel a transform.
   ============================================================ */

.ip-page{
  --ip-ink:#0a1633; --ip-text:#3b4a63; --ip-muted:#5b6a86; --ip-line:#e3ebf6;
  --ip-blue:#0b8cff; --ip-navy:#002357; --ip-grad:linear-gradient(120deg,#002357 0%,#0b8cff 100%);
  --ip-ease:cubic-bezier(.2,.7,.2,1); --ip-shadow:0 14px 34px rgba(10,22,51,.08); --ip-shadow-h:0 26px 54px rgba(10,22,51,.15);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; color:var(--ip-text);
}
.ip-page *, .ip-page *::before, .ip-page *::after{ box-sizing:border-box; }
.ip-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.ip-page h1, .ip-page h2, .ip-page h3{ letter-spacing:-.4px; }

/* ---------- Buttons ---------- */
.ip-btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:14px; border:0;
  font-size:15.5px; font-weight:700; line-height:1.2; text-decoration:none; cursor:pointer;
  transition:translate .25s var(--ip-ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.ip-btn:hover, .ip-btn:focus-visible{ translate:0 -3px; text-decoration:none; }
.ip-btn-primary{ color:#fff; background:linear-gradient(120deg,#0b8cff 0%,#00b4d8 100%); box-shadow:0 14px 30px rgba(0,140,255,.35); }
.ip-btn-primary:hover, .ip-btn-primary:focus-visible{ color:#fff; box-shadow:0 20px 38px rgba(0,140,255,.45); }
.ip-btn-wa{ color:#fff; background:#1fa855; box-shadow:0 14px 30px rgba(31,168,85,.3); }
.ip-btn-wa:hover, .ip-btn-wa:focus-visible{ color:#fff; background:#18914a; }
.ip-btn-ghost{ color:#fff; border:1.5px solid rgba(255,255,255,.45); background:rgba(255,255,255,.06); }
.ip-btn-ghost:hover, .ip-btn-ghost:focus-visible{ color:#002357; background:#fff; border-color:#fff; }
.ip-btn-light{ color:#002357; background:#fff; box-shadow:0 14px 30px rgba(0,10,40,.25); }
.ip-btn-light:hover, .ip-btn-light:focus-visible{ color:#0b5fd6; }

/* ---------- Hero ---------- */
.ip-hero{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  padding:88px 0 96px;   /* 40px of the top padding sits behind the sticky header on desktop */
  background:radial-gradient(640px 420px at 88% 12%, rgba(11,140,255,.38) 0%, transparent 70%),
             radial-gradient(540px 420px at 4% 100%, rgba(0,194,214,.26) 0%, transparent 70%),
             linear-gradient(135deg,#021a44 0%,#06306f 55%,#0b4fb3 100%);
}
.ip-hero::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.2px) 0 0/24px 24px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 55%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 55%, transparent 100%);
}
.ip-hero::after{
  content:''; position:absolute; z-index:-1; width:560px; height:560px; right:-160px; bottom:-260px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 0 0 70px rgba(255,255,255,.03), 0 0 0 140px rgba(255,255,255,.02);
}
.ip-hero-in{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:56px; }
.ip-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; font-size:13.5px; color:rgba(255,255,255,.7); }
.ip-crumb a{ color:#bfe9ff; text-decoration:none; }
.ip-crumb a:hover{ color:#fff; text-decoration:underline; }
.ip-crumb span[aria-hidden]{ opacity:.5; }
.ip-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; padding:8px 16px; border-radius:999px;
  font-size:13.5px; font-weight:700; letter-spacing:.3px; color:#bfe9ff; background:rgba(47,215,255,.1); border:1px solid rgba(47,215,255,.35);
}
.ip-hero h1{
  margin:0 0 20px; color:#fff; font-size:clamp(34px,4.4vw,56px); font-weight:800; line-height:1.08; letter-spacing:-1.2px; text-align:left;
  text-shadow:0 8px 30px rgba(0,10,40,.35);
}
.ip-lead{ margin:0 0 30px; max-width:640px; color:#d5e3f5; font-size:17px; line-height:1.8; text-align:left; }
.ip-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.ip-highlights{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; margin:32px 0 0; padding:24px 0 0; border-top:1px solid rgba(255,255,255,.14); }
.ip-highlights li{ position:relative; padding-left:28px; color:#e6f0ff; font-size:15px; font-weight:600; line-height:1.4; text-align:left; }
.ip-highlights li::before{
  content:''; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23062033' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat, #2fd7ff;
}

/* hero capability card */
.ip-hero-visual{ position:relative; padding:26px 10px 34px; }
.ip-vcard{
  position:relative; padding:24px; border-radius:26px; color:#fff;
  background:linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.2); box-shadow:0 40px 80px rgba(0,8,30,.45); backdrop-filter:blur(10px);
  animation:ipFloat 7s ease-in-out infinite alternate;
}
.ip-vcard-head{ display:flex; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.14); }
.ip-vcard-head b{ font-size:17px; font-weight:700; }
.ip-vicon{ width:46px; height:46px; display:grid; place-items:center; border-radius:14px; font-size:20px; background:linear-gradient(135deg,#2fd7ff,#0b8cff); color:#04213f; box-shadow:0 10px 24px rgba(11,140,255,.4); }
.ip-dots{ margin-left:auto; display:flex; gap:6px; }
.ip-dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); }
.ip-dots i:first-child{ background:#2fd7ff; }
.ip-vrow{
  display:flex; align-items:center; gap:14px; margin-top:12px; padding:14px 16px; border-radius:16px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  animation:ipRowIn .6s var(--ip-ease) both; animation-delay:calc(.25s + var(--d) * .15s);
}
.ip-vrow-ic{ width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px; background:rgba(47,215,255,.16); color:#7fe6ff; font-size:16px; }
.ip-vrow-label{ font-size:15px; font-weight:600; color:#f1f7ff; }
.ip-vok{ margin-left:auto; color:#4ade80; font-size:18px; }
.ip-vbars{ display:grid; gap:9px; margin-top:20px; }
.ip-vbars span{ position:relative; display:block; height:7px; border-radius:7px; background:rgba(255,255,255,.12); overflow:hidden; }
.ip-vbars span::after{ content:''; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:7px; background:linear-gradient(90deg,#2fd7ff,#0b8cff); animation:ipBar 1.4s var(--ip-ease) .6s both; }
.ip-float{
  position:absolute; display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border-radius:14px;
  font-size:13.5px; font-weight:700; color:#0a1633; background:#fff; box-shadow:0 18px 40px rgba(0,8,30,.35); white-space:nowrap;
}
.ip-float i{ color:#0b6fe0; }
.ip-float-1{ left:-14px; bottom:0; animation:ipFloat 6s ease-in-out infinite alternate-reverse; }
.ip-float-2{ right:-6px; top:0; animation:ipFloat 8s ease-in-out infinite alternate; }

/* ---------- Company numbers band (overlaps the hero's bottom edge) ---------- */
.ip-statband{ position:relative; z-index:2; margin-top:-52px; }
.ip-stats{ max-width:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.ip-stats .g-stat{ padding:26px 16px; border-radius:20px; background:#fff; border:1px solid var(--ip-line); box-shadow:0 18px 44px rgba(10,22,51,.12); }
.ip-stats .g-stat b{ font-size:clamp(28px,3vw,38px); color:transparent; background:var(--ip-grad); -webkit-background-clip:text; background-clip:text; letter-spacing:-1px; }
.ip-stats .g-stat span{ color:var(--ip-muted); font-size:15px; font-weight:600; }

/* ---------- Generic sections ---------- */
.ip-sec{ padding:96px 0; }
.ip-head{ max-width:780px; margin:0 auto 48px; text-align:center; }
.ip-head-left{ margin:0; text-align:left; }
.ip-page .ip-kicker{ margin:0 0 10px; color:#ff7b06; font-size:13px; font-weight:800; line-height:1.4; letter-spacing:2.5px; text-transform:uppercase; text-align:inherit; }
.ip-sec h2{ margin:0; color:var(--ip-ink); font-size:clamp(28px,3.3vw,42px); font-weight:800; line-height:1.15; text-align:inherit; }
.ip-head h2::after{ content:''; display:block; width:72px; height:4px; margin:18px auto 0; border-radius:4px; background:var(--ip-grad); }
.ip-head-left h2::after{ margin-left:0; }
.ip-card-ic{
  width:54px; height:54px; display:grid; place-items:center; border-radius:16px; font-size:22px; color:#fff;
  background:var(--ip-grad); box-shadow:0 12px 26px rgba(11,140,255,.3);
}

/* ---------- Overview + form ---------- */
.ip-intro{ padding-top:84px; scroll-margin-top:90px; }
.ip-intro-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
.ip-intro-text h2{ text-align:left; position:relative; padding-bottom:18px; margin-bottom:22px; }
.ip-intro-text h2::after{ content:''; position:absolute; left:0; bottom:0; width:72px; height:4px; border-radius:4px; background:var(--ip-grad); }
.ip-page .ip-intro-text .ip-kicker{ text-align:left; }
.ip-intro-text p{ margin:0 0 16px; font-size:16.5px; line-height:1.85; color:var(--ip-text); text-align:left; }
.ip-check{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.ip-check li{ position:relative; padding:14px 18px 14px 54px; border-radius:14px; background:#f6f9ff; border:1px solid var(--ip-line); font-size:15.5px; line-height:1.6; color:var(--ip-ink); font-weight:500; text-align:left; }
.ip-check li::before{
  content:''; position:absolute; left:16px; top:14px; width:24px; height:24px; border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat, var(--ip-grad);
  box-shadow:0 4px 10px rgba(11,140,255,.3);
}
/* consultation form (include/contact-form-top.php) */
.ip-form{ position:sticky; top:100px; }
.ip-form .form-box{
  position:relative; overflow:hidden; padding:32px 28px 28px; border-radius:24px; background:#fff;
  border:1px solid var(--ip-line); box-shadow:0 26px 64px rgba(10,22,51,.12);
}
.ip-form .form-box::before{ content:''; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,#002357,#0b8cff,#00c2d6); }
.ip-form .form-box h3{ padding:0; margin:0 0 4px; color:var(--ip-ink); font-size:22px; font-weight:800; letter-spacing:.5px; text-align:left; }
.ip-form .form-box > p{ margin:0 0 18px; color:var(--ip-muted); font-size:15px; text-align:left; }
.ip-form .form-box label{ display:block; margin:12px 0 6px; color:var(--ip-ink); font-size:14px; font-weight:600; text-align:left; }
.ip-form .form-box input, .ip-form .form-box select, .ip-form .form-box textarea{
  display:block; width:100%; margin:0; padding:12px 14px; border-radius:12px; border:1px solid var(--ip-line); background:#f7faff;
  color:var(--ip-ink); font-size:15px; font-family:inherit; animation:none; box-shadow:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.ip-form .form-box textarea{ min-height:96px; resize:vertical; }
.ip-form .form-box input:focus, .ip-form .form-box select:focus, .ip-form .form-box textarea:focus{
  outline:none; border-color:var(--ip-blue); background:#fff; box-shadow:0 0 0 4px rgba(11,140,255,.14);
}
.ip-form .form-box .form-group{ margin:0; }
.ip-form .form-box button[type="submit"]{
  display:block; width:100%; margin-top:18px; padding:14px; border:0; border-radius:12px; cursor:pointer;
  color:#fff; font-size:16px; font-weight:700; letter-spacing:.3px; background:var(--ip-grad); box-shadow:0 14px 28px rgba(11,140,255,.32);
  transition:translate .25s var(--ip-ease), box-shadow .25s;
}
.ip-form .form-box button[type="submit"]:hover{ translate:0 -2px; box-shadow:0 18px 34px rgba(11,140,255,.4); }

/* ---------- Solutions ---------- */
.ip-solutions{ background:radial-gradient(800px 360px at 10% 0%, #e7f0ff 0%, transparent 60%), linear-gradient(180deg,#f6f9ff 0%,#ffffff 100%); }
.ip-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.ip-card{
  position:relative; overflow:hidden; padding:32px 28px; border-radius:22px; background:#fff; border:1px solid var(--ip-line);
  box-shadow:var(--ip-shadow); text-align:left;
}
.ip-card::before{ content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--ip-grad); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ip-ease); }
.ip-card:hover{ translate:0 -8px; box-shadow:var(--ip-shadow-h); border-color:rgba(11,140,255,.35); }
.ip-card:hover::before{ transform:scaleX(1); }
.ip-card h3, .ip-why-card h3{ margin:20px 0 10px; color:var(--ip-ink); font-size:19px; font-weight:700; line-height:1.3; text-align:left; padding:0; }
.ip-card p, .ip-why-card p{ margin:0; color:var(--ip-text); font-size:15px; line-height:1.75; text-align:left; }

/* ---------- Features ---------- */
.ip-features-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; }
.ip-features .ip-head-left .ip-btn{ margin-top:28px; }
.ip-feat-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ip-feat-list li{
  position:relative; padding:18px 18px 18px 58px; border-radius:16px; background:#fff; border:1px solid var(--ip-line);
  box-shadow:0 6px 18px rgba(10,22,51,.05); color:var(--ip-ink); font-size:15.5px; font-weight:600; line-height:1.45; text-align:left;
  transition:border-color .25s, box-shadow .25s, translate .25s var(--ip-ease);
}
.ip-feat-list li:hover{ border-color:rgba(11,140,255,.4); box-shadow:0 14px 30px rgba(10,22,51,.1); translate:0 -3px; }
.ip-feat-list li::before{
  content:''; position:absolute; left:18px; top:50%; translate:0 -50%; width:26px; height:26px; border-radius:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%230b6fe0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat, #e6f1ff;
}

/* ---------- Standards ---------- */
.ip-standards{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:radial-gradient(600px 380px at 90% 10%, rgba(11,140,255,.35) 0%, transparent 70%), linear-gradient(140deg,#021a44 0%,#0b3d91 70%,#0b5fd6 100%);
}
.ip-std-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.ip-standards h2{ color:#fff; text-align:left; }
.ip-page .ip-std-text .ip-kicker{ color:#ffb054; text-align:left; }
.ip-std-text p{ margin:20px 0 0; color:#d5e3f5; font-size:16.5px; line-height:1.85; text-align:left; }
.ip-std-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ip-std-list li{
  display:flex; align-items:flex-start; gap:12px; padding:18px; border-radius:16px; color:#f1f7ff; font-size:15px; font-weight:600; line-height:1.5;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); text-align:left;
}
.ip-std-list li i{ flex:0 0 auto; margin-top:2px; color:#2fd7ff; font-size:17px; }

/* ---------- Process ---------- */
.ip-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; counter-reset:none; }
.ip-steps li{
  position:relative; padding:30px 28px 28px; border-radius:22px; background:#fff; border:1px solid var(--ip-line); box-shadow:var(--ip-shadow); text-align:left;
}
.ip-steps li:hover{ translate:0 -6px; box-shadow:var(--ip-shadow-h); }
.ip-step-no{
  position:absolute; top:22px; right:24px; font-size:44px; font-weight:800; line-height:1; letter-spacing:-1px;
  background:var(--ip-grad); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.25;
}
.ip-step-ic{ width:50px; height:50px; display:grid; place-items:center; border-radius:15px; font-size:20px; color:#0b6fe0; background:#e8f2ff; }
.ip-steps h3{ margin:18px 0 8px; color:var(--ip-ink); font-size:18.5px; font-weight:700; text-align:left; padding:0; }
.ip-steps p{ margin:0; color:var(--ip-text); font-size:15px; line-height:1.75; text-align:left; }

/* ---------- Technology ---------- */
.ip-tech{ padding-top:0; }
.ip-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:980px; margin:0 auto; }
.ip-chips span{
  padding:11px 20px; border-radius:999px; background:#fff; border:1px solid var(--ip-line); box-shadow:0 6px 16px rgba(10,22,51,.05);
  color:var(--ip-ink); font-size:15px; font-weight:600; transition:border-color .2s, color .2s, translate .2s var(--ip-ease);
}
.ip-chips span:hover{ border-color:rgba(11,140,255,.45); color:#0b5fd6; translate:0 -2px; }

/* ---------- Why us ---------- */
.ip-why{ background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%); }
.ip-why-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.ip-why-card{ padding:30px 26px; border-radius:22px; background:#fff; border:1px solid var(--ip-line); box-shadow:var(--ip-shadow); text-align:left; }
.ip-why-card:hover{ translate:0 -6px; box-shadow:var(--ip-shadow-h); }

/* ---------- Closing CTA ---------- */
.ip-cta-band{ padding:0 0 96px; }
.ip-cta-in{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:48px 52px; border-radius:30px; color:#fff;
  background:radial-gradient(500px 300px at 90% 0%, rgba(47,215,255,.35) 0%, transparent 70%), linear-gradient(130deg,#021a44 0%,#0b4fb3 100%);
  box-shadow:0 30px 70px rgba(10,22,51,.2);
}
.ip-cta-band h2{ margin:0 0 10px; color:#fff; font-size:clamp(24px,2.6vw,34px); font-weight:800; line-height:1.2; text-align:left; }
.ip-cta-band p{ margin:0; color:#d5e3f5; font-size:16.5px; line-height:1.7; text-align:left; }

@keyframes ipFloat{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-14px,0); } }
@keyframes ipRowIn{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
@keyframes ipBar{ from{ width:0; } }

/* ---------- Tablet / phone ---------- */
@media (max-width:1100px){
  .ip-why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:991px){
  .ip-hero-in, .ip-intro-grid, .ip-features-grid, .ip-std-grid{ grid-template-columns:1fr; gap:40px; }
  .ip-hero-visual{ max-width:560px; }
  .ip-form{ position:static; }
  .ip-cards, .ip-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .ip-hero{ padding:40px 0 64px; }   /* the fixed top bar is hidden on phones */
  .ip-sec{ padding:64px 0; }
  .ip-intro{ padding-top:56px; }
  .ip-tech{ padding-top:0; }
  .ip-wrap{ padding:0 16px; }
  .ip-highlights, .ip-feat-list, .ip-std-list, .ip-cards, .ip-steps, .ip-why-grid{ grid-template-columns:1fr; }
  .ip-statband{ margin-top:-36px; }
  .ip-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .ip-stats .g-stat{ padding:18px 10px; }
  .ip-hero-visual{ padding:20px 0 30px; }
  .ip-float{ display:none; }
  .ip-btn{ padding:13px 20px; }
  .ip-cta-band{ padding-bottom:64px; }
  .ip-cta-in{ padding:34px 24px; border-radius:24px; }
  .ip-form .form-box{ padding:26px 18px 22px; }
}
@media (prefers-reduced-motion:reduce){
  .ip-vcard, .ip-float, .ip-vrow, .ip-vbars span::after{ animation:none; }
  .ip-btn:hover, .ip-card:hover, .ip-feat-list li:hover, .ip-steps li:hover, .ip-why-card:hover, .ip-chips span:hover{ translate:none; }
}