/* =====================================================================
   Appslin — Dynamic Website Design page: FINAL enhancement layer
   Additive only. Does not modify existing production CSS files.
   ===================================================================== */

:root{
  --dyf-navy:#0a1f44;
  --dyf-blue:#1466d8;
  --dyf-green:#12a67a;
  --dyf-ink:#132244;
  --dyf-muted:#5a6b86;
  --dyf-line:rgba(10,31,68,.10);
  --dyf-shadow:0 22px 50px rgba(10,31,68,.10);
}

/* ---------- CHANGE 1 : bigger hero banner image ---------- */
.dy-hero .pr-hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:44px;
  align-items:center;
}
.dy-hero .pr-hero-visual{max-width:none;width:100%}
.dy-hero .dy-hero-art{
  margin:0;
  width:100%;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(160deg,rgba(20,102,216,.16),rgba(18,166,122,.12));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 80px rgba(3,12,32,.45);
  padding:10px;
}
.dy-hero .dy-hero-art img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;      /* never crop */
  border-radius:18px;
}
@media (min-width:1100px){
  .dy-hero .pr-hero-visual{margin-right:-30px}
  .dy-hero .dy-hero-art img{min-height:520px}
}
@media (min-width:1400px){
  .dy-hero .dy-hero-art img{min-height:600px}
}

/* ---------- CHANGE 3 & 4 : 3 + 2 balanced card rows ---------- */
@media (min-width:900px){
  #why-dynamic .dy-split5,
  #benefits .dy-split5,
  #approach .dy-split5,
  #applications.section .dy-apps.dy-split5{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:24px;
    align-items:stretch;
  }
  #why-dynamic .dy-split5 > *,
  #benefits .dy-split5 > *,
  #approach .dy-split5 > *,
  #applications .dy-apps.dy-split5 > *{grid-column:span 2;height:100%}
  #why-dynamic .dy-split5 > *:nth-child(4),
  #why-dynamic .dy-split5 > *:nth-child(5),
  #benefits .dy-split5 > *:nth-child(4),
  #benefits .dy-split5 > *:nth-child(5),
  #approach .dy-split5 > *:nth-child(4),
  #approach .dy-split5 > *:nth-child(5),
  #applications .dy-apps.dy-split5 > *:nth-child(4),
  #applications .dy-apps.dy-split5 > *:nth-child(5){grid-column:span 3}
}

/* ---------- CHANGE 5 & 9 : sticky, content-length image ---------- */
@media (min-width:1024px){
  #lasting-impact .pp-split,
  #versatile .pp-split{align-items:stretch}
  #lasting-impact .pp-split-visual,
  #versatile .pp-split-visual{
    position:relative;
    display:flex;
    height:100%;
    min-height:100%;
  }
  #lasting-impact .pp-split-visual img,
  #versatile .pp-split-visual img{
    width:100%;
    height:100%;
    min-height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:22px;
  }
}
#versatile .pp-cards{gap:16px}
#versatile .pp-mini{
  background:#fff;
  border:1px solid var(--dyf-line);
  border-radius:16px;
  padding:20px 22px;
  box-shadow:0 12px 30px rgba(10,31,68,.06);
  position:relative;
  padding-left:56px;
}
#versatile .pp-mini::before{
  content:"";
  position:absolute;left:22px;top:24px;
  width:18px;height:18px;border-radius:6px;
  background:linear-gradient(135deg,var(--dyf-blue),var(--dyf-green));
}

/* ---------- CHANGE 6 : premium process cards ---------- */
.dyf-proc{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}
.dyf-proc-card{
  position:relative;
  background:#fff;
  border:1px solid var(--dyf-line);
  border-radius:20px;
  padding:28px 24px 26px;
  box-shadow:var(--dyf-shadow);
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.dyf-proc-card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:4px;
  background:linear-gradient(90deg,var(--dyf-blue),var(--dyf-green));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.dyf-proc-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(10,31,68,.14)}
.dyf-proc-card:hover::after{transform:scaleX(1)}
.dyf-proc-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.dyf-ico{
  flex:0 0 auto;width:50px;height:50px;border-radius:14px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--dyf-blue),var(--dyf-green));
  box-shadow:0 10px 22px rgba(20,102,216,.28);
}
.dyf-ico svg{width:24px;height:24px}
.dyf-step-no{
  margin-left:auto;font-weight:800;font-size:26px;line-height:1;
  color:rgba(10,31,68,.14);
}
.dyf-proc-card h4{margin:0 0 8px;font-size:19px;color:var(--dyf-navy)}
.dyf-proc-card p{margin:0;color:var(--dyf-muted);font-size:15px;line-height:1.7}

/* ---------- CHANGE 7 : transformative premium layout ---------- */
.dyf-trans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.dyf-trans-card{
  background:linear-gradient(180deg,#fff,#f6f9ff);
  border:1px solid var(--dyf-line);
  border-radius:20px;
  padding:28px 26px;
  box-shadow:var(--dyf-shadow);
}
.dyf-trans-card h4{margin:14px 0 10px;color:var(--dyf-navy);font-size:20px}
.dyf-trans-card p{margin:0;color:var(--dyf-muted);line-height:1.75}
.dyf-pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.dyf-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--dyf-navy);background:#fff;border:1px solid var(--dyf-line);
  box-shadow:0 6px 16px rgba(10,31,68,.06);
}
.dyf-pill i{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--dyf-blue),var(--dyf-green));display:inline-block}

/* ---------- CHANGE 8 : infinite marquee slider ---------- */
.dyf-mq{position:relative;overflow:hidden;margin-top:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.dyf-mq-track{display:flex;gap:22px;width:max-content;animation:dyfScroll 34s linear infinite;align-items:stretch}
.dyf-mq:hover .dyf-mq-track,.dyf-mq:focus-within .dyf-mq-track{animation-play-state:paused}
@keyframes dyfScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dyf-mq-card{
  flex:0 0 330px;max-width:330px;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:26px 24px;
  backdrop-filter:blur(6px);
}
.dyf-mq-card h5{margin:16px 0 10px;color:#fff;font-size:19px}
.dyf-mq-card p{margin:0;color:rgba(255,255,255,.78);font-size:15px;line-height:1.7}
.dyf-mq-card .dyf-ico{box-shadow:none}
@media (prefers-reduced-motion:reduce){.dyf-mq-track{animation:none}}
@media (max-width:600px){.dyf-mq-card{flex-basis:270px;max-width:270px}}

/* ---------- CHANGE 2 / 10 : unified premium forms ---------- */
.dyf-form .field{margin-bottom:16px}
.dyf-form label{display:block;font-size:13px;font-weight:700;color:var(--dyf-navy);margin-bottom:6px}
.dyf-form input[type=text],
.dyf-form input[type=email],
.dyf-form input[type=tel],
.dyf-form select,
.dyf-form textarea{
  width:100%;
  border:1px solid var(--dyf-line);
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  background:#fff;
  color:var(--dyf-ink);
}
.dyf-form textarea{min-height:110px;resize:vertical}
.dyf-form .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.dyf-form .form-row{grid-template-columns:1fr}}
.dyf-form .phone-group{display:grid;grid-template-columns:116px minmax(0,1fr);gap:10px}
.dyf-form .phone-group .country-code{
  width:116px;min-width:116px;padding:12px 8px;font-size:14px;
}
.dyf-form .phone-group input[type=tel]{min-width:0;width:100%}
.dyf-form .captcha-note{font-size:12px;color:var(--dyf-muted);margin:6px 0 0}
.dyf-form .btn{width:100%}

/* ---------- CHANGE 11 : floating View Packages widget ---------- */
.dyf-float{
  position:fixed;
  right:20px;
  bottom:104px;
  z-index:900;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(135deg,var(--dyf-blue),var(--dyf-green));
  box-shadow:0 16px 34px rgba(10,31,68,.30);
  transform:translateY(14px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
.dyf-float.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.dyf-float:hover{box-shadow:0 22px 44px rgba(10,31,68,.38);color:#fff}
.dyf-float svg{width:18px;height:18px}
@media (max-width:768px){
  .dyf-float{right:14px;bottom:92px;padding:11px 16px;font-size:14px}
  .dyf-float span{display:inline}
}

/* ---------- CHANGE 13 : on-page schedule meeting ---------- */
.dyf-meet-card{
  background:#fff;
  border:1px solid var(--dyf-line);
  border-radius:24px;
  padding:32px;
  box-shadow:var(--dyf-shadow);
}
.dyf-meet-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:start}
@media (max-width:1023px){.dyf-meet-grid{grid-template-columns:1fr}}
.dyf-meet-aside ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.dyf-meet-aside li{display:flex;gap:10px;align-items:flex-start;color:var(--dyf-muted);font-size:15px}
.dyf-meet-aside li svg{width:20px;height:20px;flex:0 0 auto;color:var(--dyf-green)}
.dyf-meet-aside img{width:100%;height:auto;border-radius:18px;margin-top:20px;display:block}

/* wide (half-row) cards: keep the normal vertical card layout */
@media (min-width:900px){
  #why-dynamic .dy-split5 > :nth-child(4),
  #why-dynamic .dy-split5 > :nth-child(5),
  #benefits .dy-split5 > :nth-child(4),
  #benefits .dy-split5 > :nth-child(5),
  #approach .dy-split5 > :nth-child(4),
  #approach .dy-split5 > :nth-child(5){
    display:block;
  }
  #why-dynamic .dy-split5 > :nth-child(4) > h4,
  #why-dynamic .dy-split5 > :nth-child(5) > h4,
  #benefits .dy-split5 > :nth-child(4) > h4,
  #benefits .dy-split5 > :nth-child(5) > h4,
  #approach .dy-split5 > :nth-child(4) > h5,
  #approach .dy-split5 > :nth-child(5) > h5{
    flex:none;margin:0 0 8px;
  }
  #why-dynamic .dy-split5 > :nth-child(4) > p,
  #why-dynamic .dy-split5 > :nth-child(5) > p,
  #benefits .dy-split5 > :nth-child(4) > p,
  #benefits .dy-split5 > :nth-child(5) > p,
  #approach .dy-split5 > :nth-child(4) > p,
  #approach .dy-split5 > :nth-child(5) > p{max-width:none}
  #applications .dy-apps.dy-split5 > :nth-child(4),
  #applications .dy-apps.dy-split5 > :nth-child(5){display:flex}
}

/* process cards: 3 + 2 balanced rows */
@media (min-width:900px){
  .dyf-proc{grid-template-columns:repeat(6,minmax(0,1fr))}
  .dyf-proc > *{grid-column:span 2}
  .dyf-proc > *:nth-child(4),
  .dyf-proc > *:nth-child(5){grid-column:span 3}
}