/* ===== Total Therm Maroc — inner pages (same design language as the homepage) ===== */
body.inner{background:#030d1a;color:#e8f1fb}
body.inner main{background:transparent}
body.inner .site-header{background:rgba(3,13,26,.55);border-color:rgba(255,255,255,.06);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
body.inner .site-header.scrolled{background:rgba(3,13,26,.9)}
body.inner .nav-cta{background:#fff;color:#04121f;box-shadow:none}

/* shared type + buttons */
.eyebrow-line{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:700 .76rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:#7fd8ff}
.eyebrow-line::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.eyebrow-dark{color:#0f6fb8}
.h-display{font-family:var(--font-display);font-weight:700;font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.04;letter-spacing:-.035em;color:#fff;margin:0 0 .5em}
.h-dark{color:#0a1a2c}
.grad-text{background:linear-gradient(100deg,#7ff0ff,#38bdf8 45%,#818cf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-light .grad-text{background:linear-gradient(100deg,#0e7ac4,#123a8f);-webkit-background-clip:text;background-clip:text}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;color:#fff;padding-bottom:6px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s cubic-bezier(.2,.8,.2,1),gap .3s}
.link-arrow:hover{gap:16px;background-size:40% 1px}
.btn-glow{background:#fff;color:#04121f;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 18px 50px -12px rgba(56,189,248,.55)}
.btn-glow:hover{background:#e9f8ff}
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost-light:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.04)}
.pg-lead{font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.7;color:rgba(232,241,251,.7);max-width:60ch;margin:0 0 30px}
.pg-actions{display:flex;flex-wrap:wrap;gap:14px}

/* page hero */
.pg-hero{position:relative;margin-top:-74px;padding:170px 0 90px;overflow:hidden;background:radial-gradient(900px 480px at 78% 20%,rgba(31,150,255,.2),transparent 70%),#030d1a}
.pg-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 70% 30%,#000 10%,transparent 75%);pointer-events:none}
.pg-hero .container{position:relative}
.pg-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:50px;align-items:center}
.pg-hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,5.6vw,5rem);line-height:.98;letter-spacing:-.045em;color:#fff;margin:0 0 24px}
.pg-crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;font-size:.84rem;color:rgba(232,241,251,.5)}
.pg-crumbs a{color:#7fd8ff;font-weight:600}
.pg-hero-visual{position:relative;aspect-ratio:1;max-width:360px;width:100%;justify-self:end;display:flex;align-items:center;justify-content:center;color:var(--c,#38bdf8)}
.pg-hero-visual::before,.pg-hero-visual::after{content:"";position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--c,#38bdf8) 35%,transparent)}
.pg-hero-visual::before{inset:6%}
.pg-hero-visual::after{inset:22%;border-style:dashed;opacity:.6;animation:pgspin 40s linear infinite}
@keyframes pgspin{to{transform:rotate(360deg)}}
.pg-hero-visual .pg-orb{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c,#38bdf8) 55%,#fff),var(--c,#38bdf8) 55%,color-mix(in srgb,var(--c,#38bdf8) 40%,#020b18));box-shadow:0 0 90px color-mix(in srgb,var(--c,#38bdf8) 60%,transparent)}
.pg-hero-visual .icon,.pg-hero-visual .brand-drop{position:relative;width:24%;height:auto;color:#fff;stroke-width:1.6}
.pg-hero-visual .brand-drop{width:30%}

/* sections */
.pg-sec{padding:110px 0;position:relative}
.pg-sec-tight{padding:80px 0}
.pg-light{background:#f3f6f9;color:#0a1a2c}
.pg-light p{color:#44546a}
.pg-head{max-width:720px;margin:0 0 54px}
.pg-head-center{margin-left:auto;margin-right:auto;text-align:center}
.pg-head-center .eyebrow-line{justify-content:center}

/* service cards */
.pg-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pg-svc-card{position:relative;display:flex;flex-direction:column;padding:30px 28px 28px;border-radius:26px;background:linear-gradient(170deg,color-mix(in srgb,var(--c) 14%,#071a2e),#050f1d 70%);border:1px solid color-mix(in srgb,var(--c) 28%,rgba(255,255,255,.06));overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
.pg-svc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--c),transparent)}
.pg-svc-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 30px 70px -30px color-mix(in srgb,var(--c) 70%,transparent)}
.pg-svc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.pg-svc-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);color:var(--c)}
.pg-svc-icon .icon{width:28px;height:28px}
.pg-svc-num{font:700 2.4rem/1 var(--font-display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--c) 60%,transparent)}
.pg-svc-card h3{font-family:var(--font-display);font-size:1.55rem;letter-spacing:-.02em;color:#fff;margin:0 0 10px}
.pg-svc-card p{font-size:.96rem;line-height:1.6;color:rgba(232,241,251,.66);margin:0 0 18px}
.pg-svc-card ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px}
.pg-svc-card li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;font-weight:600;color:rgba(232,241,251,.85)}
.pg-svc-card li .icon{color:var(--c);margin-top:2px}
.pg-svc-card .link-arrow{margin-top:auto;align-self:flex-start;color:var(--c)}

/* why / values */
.pg-why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pg-why-item{padding:28px 24px;border-radius:22px;background:#fff;border:1px solid #dfe7ee}
.pg-dark .pg-why-item,.pg-why-dark .pg-why-item{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08)}
.pg-why-item .icon{width:26px;height:26px;color:#0e7ac4;margin-bottom:16px}
.pg-why-dark .pg-why-item .icon{color:#7fd8ff}
.pg-why-item h3{font-family:var(--font-display);font-size:1.12rem;margin:0 0 8px;color:#0a1a2c}
.pg-why-dark .pg-why-item h3{color:#fff}
.pg-why-item p{font-size:.93rem;line-height:1.6;margin:0}
.pg-why-dark .pg-why-item p{color:rgba(232,241,251,.62)}

/* steps */
.pg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.pg-step{position:relative;padding:26px 22px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.pg-step span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#7fd8ff;color:#03101c;font:700 .85rem var(--font-display);margin-bottom:16px}
.pg-step h3{font-family:var(--font-display);font-size:1.12rem;color:#fff;margin:0 0 8px}
.pg-step p{font-size:.92rem;line-height:1.6;color:rgba(232,241,251,.6);margin:0}

/* zones */
.pg-zones{display:flex;flex-wrap:wrap;gap:10px}
.pg-zones span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(127,216,255,.25);background:rgba(127,216,255,.06);font-size:.9rem;font-weight:600;color:#e8f1fb}
.pg-zones span .icon{color:#7fd8ff}
.pg-light .pg-zones span{border-color:#cfdbe6;background:#fff;color:#0a1a2c}
.pg-light .pg-zones span .icon{color:#0e7ac4}
.pg-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:start}

/* prose / detail */
.pg-detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:60px;align-items:start}
.pg-prose p{font-size:1.06rem;line-height:1.8;color:rgba(232,241,251,.74);margin:0 0 20px}
.pg-prose h2{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.025em;color:#fff;margin:44px 0 18px}
.pg-prose h3{font-family:var(--font-display);font-size:1.15rem;color:#fff;margin:0 0 6px}
.pg-offer{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0 10px}
.pg-offer-item{padding:22px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid color-mix(in srgb,var(--c,#38bdf8) 22%,rgba(255,255,255,.06))}
.pg-offer-item p{font-size:.94rem;line-height:1.6;margin:0}
.pg-checks{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg-checks li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font-weight:600;color:#e8f1fb}
.pg-checks .icon{color:var(--c,#38bdf8);flex:none}
.pg-aside{position:sticky;top:110px;display:grid;gap:18px}
.pg-card{padding:26px;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.pg-card h3{font-family:var(--font-display);font-size:1.15rem;color:#fff;margin:0 0 14px}
.pg-card-accent{background:linear-gradient(160deg,color-mix(in srgb,var(--c,#38bdf8) 30%,#07213d),#051426);border-color:color-mix(in srgb,var(--c,#38bdf8) 40%,transparent)}
.pg-card p{font-size:.94rem;line-height:1.6;color:rgba(232,241,251,.7);margin:0 0 16px}
.pg-card .btn{width:100%;justify-content:center}
.pg-links{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pg-links a{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;font-weight:600;font-size:.94rem;color:rgba(232,241,251,.72);transition:background .25s,color .25s}
.pg-links a:hover,.pg-links a.on{background:rgba(255,255,255,.06);color:#fff}
.pg-links a .icon{color:var(--c)}
.pg-contact-line{display:flex;align-items:center;gap:10px;font-weight:700;color:#fff;margin-top:8px}

/* stats */
.pg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.1)}
.pg-stats div{padding:30px 22px 0;border-left:1px solid rgba(255,255,255,.1)}
.pg-stats div:first-child{border-left:0;padding-left:0}
.pg-stats b{display:block;font:700 clamp(2.4rem,4vw,3.4rem)/1 var(--font-display);letter-spacing:-.04em;color:#fff}
.pg-stats span{display:block;margin-top:10px;font-size:.9rem;color:rgba(232,241,251,.55)}

/* quotes */
.pg-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #d9e2ea}
.pg-quote{margin:0;padding:36px 32px 0 0}
.pg-quote+.pg-quote{padding-left:32px;border-left:1px solid #d9e2ea}
.pg-quote p{font-family:var(--font-display);font-size:1.12rem;line-height:1.55;color:#0a1a2c;margin:0 0 20px}
.pg-quote strong{display:block;color:#0a1a2c}
.pg-quote span{font-size:.88rem;color:#6b7b8e}

/* faq */
.pg-faq{display:grid;gap:0}
.pg-faq details{border-bottom:1px solid rgba(255,255,255,.1)}
.pg-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:#fff}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:"+";font:400 1.6rem/1 var(--font-body);color:#7fd8ff;transition:transform .3s}
.pg-faq details[open] summary::after{transform:rotate(45deg)}
.pg-faq details p{margin:0 0 22px;font-size:.98rem;line-height:1.7;color:rgba(232,241,251,.66)}
.pg-light .pg-faq details{border-color:#d9e2ea}
.pg-light .pg-faq summary{color:#0a1a2c}
.pg-light .pg-faq summary::after{color:#0e7ac4}
.pg-light .pg-faq details p{color:#4b5b6e}

/* CTA band */
.pg-cta{position:relative;overflow:hidden;border-radius:34px;padding:64px;background:radial-gradient(600px 300px at 88% 10%,rgba(56,189,248,.35),transparent 70%),linear-gradient(135deg,#07213d,#030d1a);border:1px solid rgba(127,216,255,.18);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:30px;align-items:center}
.pg-cta h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem);line-height:1;letter-spacing:-.04em;color:#fff;margin:0 0 14px}
.pg-cta p{color:rgba(232,241,251,.7);margin:0;max-width:52ch}

/* contact */
.pg-contact{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:start}
.pg-form{padding:36px;border-radius:28px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09)}
body.inner .contact-form{display:grid;gap:18px}
body.inner .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
body.inner .form-group{display:grid;gap:8px}
body.inner .form-group label{font-weight:700;font-size:.86rem;color:#e8f1fb}
body.inner .form-group input,body.inner .form-group select,body.inner .form-group textarea{padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(3,13,26,.6);color:#fff;font:inherit;font-size:.96rem;transition:border-color .25s,box-shadow .25s}
body.inner .form-group select option{color:#0a1a2c}
body.inner .form-group input:focus,body.inner .form-group select:focus,body.inner .form-group textarea:focus{outline:none;border-color:#7fd8ff;box-shadow:0 0 0 4px rgba(127,216,255,.15)}
body.inner .contact-form .btn{justify-self:start}
.pg-info{display:grid;gap:12px}
.pg-info-item{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);transition:border-color .3s,background .3s}
a.pg-info-item:hover{border-color:rgba(127,216,255,.4);background:rgba(127,216,255,.05)}
.pg-info-item>.icon{width:42px;height:42px;padding:11px;border-radius:13px;background:rgba(127,216,255,.1);color:#7fd8ff;flex:none}
.pg-info-item h3{font-size:.95rem;margin:0 0 3px;color:#fff}
.pg-info-item p{margin:0;font-size:.93rem;color:rgba(232,241,251,.68)}
body.inner .alert{display:flex;gap:10px;align-items:flex-start;padding:16px 18px;border-radius:14px;margin-bottom:20px;font-weight:600}
body.inner .alert-success{background:rgba(52,211,153,.12);color:#6ee7b7;border:1px solid rgba(52,211,153,.3)}
body.inner .alert-error{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
body.inner .alert ul{margin:0;padding-left:18px}

/* responsive */
@media (max-width:1100px){
  .pg-svc-grid{grid-template-columns:1fr 1fr}
  .pg-why,.pg-steps{grid-template-columns:1fr 1fr}
  .pg-detail,.pg-split,.pg-contact{grid-template-columns:1fr;gap:40px}
  .pg-aside{position:relative;top:0}
  .pg-hero-grid{grid-template-columns:1fr}
  .pg-hero-visual{display:none}
}
@media (max-width:768px){
  .pg-hero{padding:128px 0 60px}
  .pg-hero h1{font-size:clamp(2.3rem,10vw,3.2rem)}
  .pg-sec{padding:70px 0}
  .pg-sec-tight{padding:56px 0}
  .pg-head{margin-bottom:34px}
  .h-display{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  .eyebrow-line{font-size:.8rem;letter-spacing:.16em}
  .pg-svc-grid,.pg-why,.pg-steps,.pg-offer,.pg-checks,.pg-quotes{grid-template-columns:1fr}
  .pg-svc-card{padding:26px 22px 24px}
  .pg-stats{grid-template-columns:1fr 1fr;gap:26px 0}
  .pg-stats div{padding:22px 16px 0 0;border-left:0}
  .pg-quote,.pg-quote+.pg-quote{padding:28px 0;border-left:0;border-bottom:1px solid #d9e2ea}
  .pg-cta{grid-template-columns:1fr;padding:36px 24px;border-radius:26px}
  .pg-form{padding:24px 20px}
  body.inner .form-row{grid-template-columns:1fr}
  body.inner .contact-form .btn{justify-self:stretch;justify-content:center}
  .pg-actions .btn{flex:1 1 auto;justify-content:center}
  .scene,.pg-sec,#faq{scroll-margin-top:84px}
}

/* ===== inner-page motion support ===== */
/* hero pre-hidden only while the motion system is active (removed on reduced motion or if JS fails) */
html.js-anim .pg-hero h1,html.js-anim .pg-hero .pg-crumbs,html.js-anim .pg-hero .eyebrow-line,html.js-anim .pg-hero .pg-lead,html.js-anim .pg-hero .pg-actions,html.js-anim .pg-hero-visual{opacity:0}
.grad-text .wi{background:linear-gradient(100deg,#7ff0ff,#38bdf8 45%,#818cf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-light .grad-text .wi{background:linear-gradient(100deg,#0e7ac4,#123a8f);-webkit-background-clip:text;background-clip:text}
/* cursor light */
.pg-glow{position:relative;isolation:isolate}
.pg-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(127,216,255,.14),transparent 65%);opacity:0;transition:opacity .35s}
.pg-glow:hover::after{opacity:1}
.pg-light .pg-glow::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(14,122,196,.1),transparent 65%)}
.pg-svc-card{will-change:transform}
/* method steps: progress line drawn by scroll */
.pg-steps{position:relative}
.pg-steps::before,.pg-steps::after{content:"";position:absolute;left:4%;right:4%;top:44px;height:1px;pointer-events:none}
.pg-steps::before{background:rgba(255,255,255,.08)}
.pg-steps::after{background:linear-gradient(90deg,#7ff0ff,#38bdf8,#818cf8);transform-origin:0 50%;transform:scaleX(var(--sp,1));box-shadow:0 0 12px rgba(56,189,248,.6)}
html.js-anim .pg-steps::after{transform:scaleX(var(--sp,0))}
.pg-step{z-index:1}
/* ambient light behind the page */
.pg-ambient{position:fixed;left:0;top:0;width:780px;height:780px;margin:-390px 0 0 -390px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(closest-side,rgba(31,150,255,.15),transparent 70%)}
@media (max-width:1100px){.pg-steps::before,.pg-steps::after{display:none}}
@media (max-width:768px){.pg-ambient{width:520px;height:520px;margin:-260px 0 0 -260px;opacity:.8}}

/* ===== static 3D hero objects (hero3d.js, no scroll linkage) ===== */
.pg-3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}
.pg-hero-visual>.pg-orb,.pg-hero-visual>.icon,.pg-hero-visual>.brand-drop{transition:opacity .5s}
.pg-hero-visual.has3d>.pg-orb,.pg-hero-visual.has3d>.icon,.pg-hero-visual.has3d>.brand-drop,.pg-hero-visual.has3d .pg-orb{display:none !important;opacity:0 !important;visibility:hidden !important}
.pg-hero-visual.has3d{background:radial-gradient(circle at 50% 50%,rgba(56,189,248,.1) 0%,rgba(56,189,248,.02) 48%,transparent 70%)}
.pg-hero-visual.has3d::before{opacity:.25;border-color:rgba(56,189,248,.25)}
.pg-hero-visual.has3d::after{opacity:.18;border-color:rgba(56,189,248,.2)}
@media (max-width:1100px){
  .pg-hero-visual{display:flex;max-width:min(70vw,320px);justify-self:center;margin:0 auto}
}
@media (max-width:768px){
  .pg-hero-grid{gap:18px}
  .pg-hero-visual{max-width:min(74vw,280px);margin:4px auto -14px}
}

/* SEO sections */
.pg-sectors{grid-template-columns:repeat(3,1fr)}
.pg-prose-light p{color:#44546a}
@media (max-width:1100px){.pg-sectors{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.pg-sectors{grid-template-columns:1fr}}

/* ===== blog ===== */
.pg-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 44px}
.pg-filter a{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:rgba(232,241,251,.75);font-weight:600;font-size:.9rem;transition:border-color .25s,color .25s,background .25s}
.pg-filter a:hover{border-color:var(--c,#7fd8ff);color:#fff}
.pg-filter a.on{background:#fff;border-color:#fff;color:#04121f}
.pg-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pg-post{position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:linear-gradient(170deg,color-mix(in srgb,var(--c) 10%,#071a2e),#050f1d 75%);border:1px solid color-mix(in srgb,var(--c) 22%,rgba(255,255,255,.06));transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
.pg-post:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 50%,transparent);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.pg-post-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--c) 40%,transparent),transparent 62%),#06182b}
.pg-post-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pg-post:hover .pg-post-media img{transform:scale(1.05)}
.pg-post-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pg-post-art::before{content:"";position:absolute;width:44%;aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);box-shadow:inset 0 0 70px color-mix(in srgb,var(--c) 30%,transparent)}
.pg-post-art .icon{width:20%;height:auto;color:var(--c);stroke-width:1.4;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pg-post:hover .pg-post-art .icon{transform:scale(1.12) rotate(-6deg)}
.pg-post-body{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px}
.pg-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px;font-size:.8rem;color:rgba(232,241,251,.5)}
.pg-post-cat{color:var(--c,#7fd8ff);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}
.pg-post h3{font-family:var(--font-display);font-size:1.2rem;line-height:1.28;letter-spacing:-.015em;margin:0 0 10px}
.pg-post h3 a{color:#fff}
.pg-post h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pg-post-body>p:not(.pg-post-meta){font-size:.94rem;line-height:1.6;color:rgba(232,241,251,.64);margin:0 0 18px}
.pg-post .link-arrow{margin-top:auto;color:var(--c,#7fd8ff)}
.pg-post-featured{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr}
.pg-post-featured .pg-post-media{aspect-ratio:auto;min-height:320px}
.pg-post-featured .pg-post-body{padding:40px;justify-content:center}
.pg-post-featured h3{font-size:clamp(1.5rem,2.3vw,2rem)}
.pg-pager{display:flex;justify-content:center;gap:8px;margin-top:44px}
.pg-pager a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid rgba(255,255,255,.12);color:#fff;font-weight:700}
.pg-pager a.on{background:#fff;color:#04121f}
/* article */
.pg-hero-post h1{font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.05}
.pg-post-meta-hero{margin:22px 0 0;font-size:.88rem;gap:8px 20px}
.pg-post-meta-hero span{display:inline-flex;align-items:center;gap:6px}
.pg-post-meta-hero .icon{color:var(--c,#7fd8ff)}
.pg-article h2{scroll-margin-top:100px}
.pg-prose strong{color:#fff;font-weight:700}
.pg-bullets{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.pg-bullets li{position:relative;padding-left:26px;font-size:1.04rem;line-height:1.7;color:rgba(232,241,251,.74)}
.pg-bullets li::before{content:"";position:absolute;left:4px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--c,#38bdf8);box-shadow:0 0 12px var(--c,#38bdf8)}
.pg-share{display:flex;align-items:center;gap:10px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);color:rgba(232,241,251,.6);font-weight:600}
.pg-share a{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;transition:background .25s,border-color .25s,color .25s}
.pg-share a:hover{background:var(--c,#38bdf8);border-color:var(--c,#38bdf8);color:#04121f}
.pg-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:2px}
.pg-toc li{counter-increment:toc}
.pg-toc a{display:flex;gap:10px;padding:8px 6px;border-radius:10px;font-size:.9rem;line-height:1.4;color:rgba(232,241,251,.72);transition:background .25s,color .25s}
.pg-toc a::before{content:counter(toc,decimal-leading-zero);color:var(--c,#7fd8ff);font-weight:700;font-size:.78rem;padding-top:2px}
.pg-toc a:hover{background:rgba(255,255,255,.05);color:#fff}
.pg-links-posts a{font-weight:500;font-size:.9rem;line-height:1.4}
.pg-card .link-arrow{display:inline-flex;margin-top:10px}
@media (max-width:1100px){
  .pg-blog-grid{grid-template-columns:1fr 1fr}
  .pg-post-featured{grid-template-columns:1fr}
  .pg-post-featured .pg-post-media{min-height:0;aspect-ratio:16/9}
}
@media (max-width:768px){
  .pg-blog-grid{grid-template-columns:1fr;gap:18px}
  .pg-post-featured .pg-post-body{padding:24px}
  .pg-hero-post h1{font-size:clamp(1.9rem,8vw,2.5rem)}
  .pg-filter{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 30px;padding:0 16px 6px;scrollbar-width:none}
  .pg-filter::-webkit-scrollbar{display:none}
  .pg-filter a{flex:none}
}