/* ============================================================
   GLETUS PORTFOLIO  —  premium UI (light + dark)
   Scoped under .gpf so it never fights the global header/footer.
   ============================================================ */

.gpf{
  --g-bg:#eef3fb;
  --g-bg-2:#ffffff;
  --g-card:rgba(255,255,255,.72);
  --g-card-solid:#ffffff;
  --g-ink:#0a1633;
  --g-ink-2:#31415f;
  --g-muted:#5b6a86;
  --g-line:#e2eaf6;
  --g-navy:#002357;
  --g-blue:#0b8cff;
  --g-brand:linear-gradient(120deg,#002357,#0b8cff);
  --g-shadow:0 20px 45px rgba(10,22,51,.10);
  --g-shadow-sm:0 8px 22px rgba(10,22,51,.07);
  --g-radius:22px;

  background:
    radial-gradient(900px 500px at 12% -8%, #dbe9ff 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #e7f7ff 0%, transparent 50%),
    var(--g-bg);
  color:var(--g-ink);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
  transition:background .4s ease,color .4s ease;
}

.gpf[data-theme="dark"]{
  --g-bg:#070c18;
  --g-bg-2:#0e1526;
  --g-card:rgba(20,29,48,.62);
  --g-card-solid:#111a2e;
  --g-ink:#eaf1ff;
  --g-ink-2:#c4d1ea;
  --g-muted:#8aa0c4;
  --g-line:#1e2c47;
  --g-navy:#0b8cff;
  --g-blue:#5cb3ff;
  --g-shadow:0 20px 45px rgba(0,0,0,.45);
  --g-shadow-sm:0 8px 22px rgba(0,0,0,.35);
  background:
    radial-gradient(900px 500px at 12% -8%, #10233f 0%, transparent 55%),
    radial-gradient(800px 480px at 100% 0%, #0c2a33 0%, transparent 50%),
    var(--g-bg);
}

.gpf *{ box-sizing:border-box; }
.gpf-container{ max-width:1220px; margin:0 auto; padding:0 20px; }
.gpf a{ text-decoration:none; }

/* ---------------- THEME TOGGLE ---------------- */
.gpf-theme{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--g-line);
  background:var(--g-card-solid); color:var(--g-ink); cursor:pointer;
  box-shadow:var(--g-shadow); font-size:20px; display:grid; place-items:center;
  transition:transform .25s ease, background .3s ease;
}
.gpf-theme:hover{ transform:translateY(-3px) rotate(-8deg); }
.gpf[data-theme="dark"] .gpf-theme .fa-moon{ display:none; }
.gpf:not([data-theme="dark"]) .gpf-theme .fa-sun{ display:none; }

/* ---------------- HERO ---------------- */
.gpf-hero{ position:relative; padding:104px 20px 40px; text-align:center; }
.gpf-eyebrow{
  display:inline-block; color:var(--g-blue); font-weight:700; letter-spacing:3px;
  text-transform:uppercase; font-size:12.5px; padding:7px 16px; border-radius:40px;
  background:var(--g-card); border:1px solid var(--g-line); backdrop-filter:blur(8px);
}
.gpf-hero h1{
  font-size:clamp(34px,6vw,64px); line-height:1.06; font-weight:800; margin:18px auto 16px;
  max-width:920px; letter-spacing:-.5px;
}
.gpf-hero h1 .g-grad{
  background:var(--g-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gpf-hero p{ color:var(--g-muted); font-size:clamp(15px,2vw,19px); max-width:640px; margin:0 auto 28px; }

.gpf-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.gpf-btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:14px;
  font-weight:700; font-size:15px; cursor:pointer; border:none; transition:.25s; position:relative; overflow:hidden;
}
.gpf-btn-primary{ background:var(--g-brand); color:#fff; box-shadow:0 14px 30px rgba(11,140,255,.32); }
.gpf-btn-primary:hover{ transform:translateY(-3px); color:#fff; }
.gpf-btn-ghost{ background:var(--g-card); color:var(--g-ink); border:1px solid var(--g-line); backdrop-filter:blur(8px); }
.gpf-btn-ghost:hover{ border-color:var(--g-blue); color:var(--g-blue); transform:translateY(-3px); }

/* counters */
.gpf-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:820px; margin:52px auto 0; }
.gpf-stats .s{
  background:var(--g-card); border:1px solid var(--g-line); border-radius:18px; padding:22px 10px;
  box-shadow:var(--g-shadow-sm); backdrop-filter:blur(10px);
}
.gpf-stats b{ display:block; font-size:clamp(24px,3.4vw,36px); font-weight:800; color:var(--g-blue); }
.gpf-stats span{ font-size:13px; color:var(--g-muted); font-weight:600; }

/* ---------------- FILTER BAR ---------------- */
.gpf-filter{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0px auto 6px; }
.gpf-chip{
  padding:10px 22px; border-radius:40px; font-weight:600; font-size:14px; cursor:pointer;
  color:var(--g-ink-2); background:var(--g-card); border:1px solid var(--g-line); transition:.2s; backdrop-filter:blur(8px);
}
.gpf-chip:hover{ color:var(--g-blue); border-color:var(--g-blue); }
.gpf-chip.is-active{ background:var(--g-brand); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(11,140,255,.28); }

/* ---------------- GRID ---------------- */
.gpf-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  padding:34px 20px 20px; max-width:1220px; margin:0 auto;
}
@media(max-width:1000px){ .gpf-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .gpf-grid{ grid-template-columns:1fr; } }

/* ---------------- CARD ---------------- */
.gpf-card{
  position:relative; display:flex; flex-direction:column; border-radius:var(--g-radius);
  background:var(--g-card); border:1px solid var(--g-line); box-shadow:var(--g-shadow-sm);
  overflow:hidden; backdrop-filter:blur(12px); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  will-change:transform;
}
.gpf-card:hover{ transform:translateY(-10px); box-shadow:var(--g-shadow); border-color:rgba(11,140,255,.4); }

.gpf-shot{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--g-bg-2); }
.gpf-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.gpf-card:hover .gpf-shot img{ transform:scale(1.07); }
.gpf-shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(3,10,26,.35), transparent 42%); opacity:0; transition:.35s; }
.gpf-card:hover .gpf-shot::after{ opacity:1; }

.gpf-cat{
  position:absolute; top:12px; left:12px; z-index:2; font-size:11.5px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:#fff; padding:6px 12px; border-radius:30px;
  background:rgba(0,35,87,.72); backdrop-filter:blur(6px);
}

.gpf-logo{
  position:absolute; bottom:-26px; left:20px; z-index:3; width:56px; height:56px; border-radius:14px;
  background:#fff; border:1px solid var(--g-line); box-shadow:var(--g-shadow-sm);
  display:grid; place-items:center; overflow:hidden;
}
.gpf-logo img{ width:74%; height:74%; object-fit:contain; }

.gpf-body{ padding:36px 20px 20px; display:flex; flex-direction:column; flex:1; }
.gpf-name{ font-size:19px; font-weight:800; color:var(--g-ink); margin:0 0 2px; }
.gpf-sub{ font-size:13.5px; font-weight:600; color:var(--g-blue); margin-bottom:10px; }
.gpf-text{ font-size:14px; line-height:1.62; color:var(--g-muted); margin:0 0 16px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.gpf-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.gpf-tag{ font-size:11.5px; font-weight:700; color:var(--g-ink-2); background:var(--g-bg-2);
  border:1px solid var(--g-line); padding:5px 11px; border-radius:8px; }

.gpf-actions{ display:flex; gap:10px; }
.gpf-act{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 12px; border-radius:11px; font-weight:700; font-size:13.5px; transition:.22s;
}
.gpf-act-visit{ background:var(--g-brand); color:#fff; box-shadow:0 8px 18px rgba(11,140,255,.28); }
.gpf-act-visit:hover{ transform:translateY(-2px); color:#fff; }
.gpf-act-details{ background:var(--g-bg-2); color:var(--g-ink); border:1px solid var(--g-line); }
.gpf-act-details:hover{ border-color:var(--g-blue); color:var(--g-blue); transform:translateY(-2px); }

.gpf-empty{ text-align:center; color:var(--g-muted); padding:40px; grid-column:1/-1; font-weight:600; }

/* ---------------- MOBILE APP SECTION ---------------- */
.gpf-sec-head{ text-align:center; padding:64px 20px 4px; }
.gpf-sec-head .k{ color:var(--g-blue); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:12px; }
.gpf-sec-head h2{ font-size:clamp(26px,4vw,40px); font-weight:800; margin:8px 0 10px; }
.gpf-sec-head p{ color:var(--g-muted); max-width:600px; margin:0 auto; font-size:15px; }

.gpf-apps{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; padding:30px 20px 10px; max-width:1120px; margin:0 auto; }
@media(max-width:760px){ .gpf-apps{ grid-template-columns:1fr; } }
.gpf-appcard{
  display:flex; flex-direction:column; border-radius:var(--g-radius);
  background:var(--g-card); border:1px solid var(--g-line); box-shadow:var(--g-shadow-sm); backdrop-filter:blur(12px);
  overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.gpf-appcard:hover{ transform:translateY(-8px); box-shadow:var(--g-shadow); }

/* full pre-composed 3-phone mockup image (shown as-is) */
.gpf-appshot{ width:100%; overflow:hidden; background:linear-gradient(135deg,#dbe9ff,#eef4ff); line-height:0; }
.gpf-appshot img{ width:100%; height:auto; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.gpf-appcard:hover .gpf-appshot img{ transform:scale(1.04); }

.gpf-appinfo{ padding:20px; display:flex; flex-direction:column; }
.gpf-appinfo h3{ font-size:18px; font-weight:800; margin:0 0 6px; }
.gpf-appinfo p{ font-size:13.5px; color:var(--g-muted); line-height:1.55; margin:0 0 12px; }
.gpf-plats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.gpf-plat{ font-size:11.5px; font-weight:700; color:#fff; background:var(--g-navy); padding:5px 11px; border-radius:30px; display:inline-flex; align-items:center; gap:6px; }
.gpf[data-theme="dark"] .gpf-plat{ background:#12335c; }
.gpf-applink{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-weight:700; font-size:13.5px; color:var(--g-blue); }
.gpf-applink:hover{ gap:11px; color:var(--g-blue); }

/* ---------------- FINAL CTA ---------------- */
.gpf-final{
  margin:60px auto; max-width:1120px; border-radius:26px; padding:56px 30px; text-align:center;
  background:var(--g-brand); color:#fff; box-shadow:0 30px 60px rgba(11,140,255,.28);
}
.gpf-final h2{ font-size:clamp(26px,3.6vw,40px); font-weight:800; margin-bottom:12px; color:#fff; }
.gpf-final p{ opacity:.94; max-width:560px; margin:0 auto 26px; font-size:16px; }
.gpf-final .gpf-btn-primary{ background:#fff; color:var(--g-navy); box-shadow:0 12px 26px rgba(0,0,0,.18); }
.gpf-final .gpf-btn-primary:hover{ color:var(--g-navy); }

/* ---------------- ANIMATIONS ---------------- */
.gpf-reveal{ opacity:0; transform:translateY(38px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.gpf-reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .gpf-reveal{ opacity:1; transform:none; transition:none; }
  .gpf-card, .gpf-shot img{ transition:none; }
}

/* ============================================================
   DETAILS PAGE
   ============================================================ */
.gpd-hero{ padding:100px 20px 10px; }
.gpd-back{ display:inline-flex; align-items:center; gap:8px; color:var(--g-blue); font-weight:700; font-size:14px; margin-bottom:18px; }
.gpd-back:hover{ gap:12px; }
.gpd-head{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.gpd-logo{ width:74px; height:74px; border-radius:18px; background:#fff; border:1px solid var(--g-line); display:grid; place-items:center; box-shadow:var(--g-shadow-sm); overflow:hidden; }
.gpd-logo img{ width:74%; height:74%; object-fit:contain; }
.gpd-head h1{ font-size:clamp(28px,4vw,46px); font-weight:800; margin:0; letter-spacing:-.5px; }
.gpd-head .sub{ color:var(--g-blue); font-weight:700; font-size:16px; }
.gpd-cat{ font-size:11.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#fff; padding:6px 13px; border-radius:30px; background:var(--g-navy); }

.gpd-shot{ margin:26px auto 0; max-width:1120px; border-radius:22px; overflow:hidden; border:1px solid var(--g-line); box-shadow:var(--g-shadow); background:var(--g-bg-2); }
.gpd-shot img{ width:100%; display:block; }

.gpd-wrap{ max-width:1120px; margin:0 auto; padding:40px 20px 10px; display:grid; grid-template-columns:1.7fr 1fr; gap:40px; }
@media(max-width:860px){ .gpd-wrap{ grid-template-columns:1fr; } }

.gpd-block{ margin-bottom:34px; }
.gpd-block h2{ font-size:22px; font-weight:800; margin:0 0 14px; }
.gpd-block p{ color:var(--g-muted); font-size:15.5px; line-height:1.75; }
.gpd-feat{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:560px){ .gpd-feat{ grid-template-columns:1fr; } }
.gpd-feat li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--g-ink-2); font-weight:600; }
.gpd-feat li i{ color:var(--g-blue); margin-top:3px; }

.gpd-stack{ display:flex; flex-wrap:wrap; gap:9px; }
.gpd-stack .t{ font-size:13px; font-weight:700; color:var(--g-ink-2); background:var(--g-bg-2); border:1px solid var(--g-line); padding:8px 14px; border-radius:10px; }

.gpd-side{ position:sticky; top:96px; align-self:start; }
.gpd-info{ background:var(--g-card); border:1px solid var(--g-line); border-radius:20px; padding:24px; box-shadow:var(--g-shadow-sm); backdrop-filter:blur(12px); }
.gpd-info .row{ display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px dashed var(--g-line); font-size:14px; }
.gpd-info .row:last-of-type{ border-bottom:none; }
.gpd-info .row span{ color:var(--g-muted); font-weight:600; }
.gpd-info .row b{ color:var(--g-ink); font-weight:700; text-align:right; }
.gpd-info .gpf-act-visit{ width:100%; margin-top:18px; }

.gpd-related{ padding:20px 20px 0; }