body { font-family:400 16px/1.65 Manrope,system-ui,sans-serif; }
.templates-page h1,.templates-page h2,.templates-page h3,.preview-modal h3 { font-family:"Space Grotesk",sans-serif; }

.templates-page{position:relative;z-index:2;padding:96px 0 0;pointer-events:auto}
.templates-page .container{width:min(100% - 48px,var(--max,1220px));margin:auto}
footer.footer,.temp-cta-section{position:relative;z-index:2}
.page-header{margin-bottom:60px}

.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;margin-bottom:22px;border:1px solid var(--ln);border-radius:99px;background:var(--s);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--cy)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 12px var(--cy);animation:ttPulse 2s infinite}
@keyframes ttPulse{50%{opacity:.3;transform:scale(.7)}}

.accent-text{font-style:normal;color:transparent;background:linear-gradient(95deg,var(--cy),var(--vi),var(--cy));background-size:200%;-webkit-background-clip:text;background-clip:text;animation:ttShine 6s linear infinite}
@keyframes ttShine{to{background-position:200%}}

.tpl-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:min(92vh,780px);overflow:hidden;padding:20px 0 40px}
.tpl-hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(50% 60% at 78% 35%,rgba(99,221,255,.16),transparent 70%),radial-gradient(40% 50% at 95% 95%,rgba(146,123,255,.16),transparent 70%)}
body.light .tpl-hero::before{background:radial-gradient(50% 60% at 78% 35%,rgba(10,143,181,.2),transparent 70%),radial-gradient(40% 50% at 95% 95%,rgba(106,79,224,.16),transparent 70%)}

.tpl-copy{position:relative;z-index:3;pointer-events:none}
.tpl-copy>*{max-width:600px;pointer-events:auto;animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.tpl-copy>:nth-child(2){animation-delay:.1s}.tpl-copy>:nth-child(3){animation-delay:.2s}.tpl-copy>:nth-child(4){animation-delay:.3s}.tpl-copy>:nth-child(5){animation-delay:.4s}
.tpl-copy h1{margin:0 0 24px;font-size:clamp(2.8rem,5.4vw,5.4rem);line-height:.95;letter-spacing:-.065em;color:var(--tx);text-align:left}
.tpl-copy p{margin:0 0 30px;font-size:17px;line-height:1.65;color:var(--mu)}
.hero-features-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content: space-between;font-size: 14px;}

.tpl-wall{position:absolute;z-index:1;right:-4vw;top:-10%;width:min(66vw,980px);height:120%;perspective:1800px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 24%,#000 48%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 24%,#000 48%)}
.wall-tilt{position:absolute;inset:0;transform:rotateX(calc(16deg + var(--ry,0deg))) rotateY(calc(-20deg + var(--rx,0deg))) rotateZ(9deg) scale(1.08);transform-style:preserve-3d;transition:transform .5s ease-out}
.wall-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.wall-col{display:flex;flex-direction:column;gap:22px;animation:wallUp 42s linear infinite;will-change:transform}
.wall-col:nth-child(2){animation-name:wallDown;animation-duration:50s;margin-top:-90px}
.wall-col:nth-child(3){animation-duration:58s;margin-top:50px}
@keyframes wallUp{to{transform:translateY(calc(-50% - 11px))}}
@keyframes wallDown{from{transform:translateY(calc(-50% - 11px))}to{transform:none}}
.tpl-hero:hover .wall-col{animation-play-state:paused}

.wall-card{position:relative;margin:0;overflow:hidden;border:1px solid var(--ln);border-radius:14px;background:var(--s);box-shadow:0 22px 50px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
body.light .wall-card{box-shadow:0 22px 50px rgba(10,30,70,.18)}
.wall-card::before{content:"";display:block;height:30px;border-bottom:1px solid var(--ln);
  background:radial-gradient(circle at 16px 50%,var(--mu) 3.5px,transparent 4px),radial-gradient(circle at 30px 50%,var(--mu) 3.5px,transparent 4px),radial-gradient(circle at 44px 50%,var(--mu) 3.5px,transparent 4px),var(--s2)}
.wall-card img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top}
.wall-card figcaption{position:absolute;left:10px;bottom:10px;padding:5px 11px;border:1px solid var(--ln);border-radius:99px;background:var(--s);backdrop-filter:blur(10px);font-size:12px;font-weight:700;color:var(--tx)}
.wall-card:hover{transform:translateZ(60px) scale(1.04);border-color:var(--cy);box-shadow:0 30px 70px rgba(10,143,181,.3)}

@media(max-width:980px){
  .tpl-hero{flex-direction:column;align-items:stretch;min-height:0;padding-top:10px}
  .tpl-wall{position:relative;right:auto;top:auto;width:100%;height:420px;margin-top:26px;
    -webkit-mask-image:none;mask-image:none}
  .wall-tilt{transform:rotateX(14deg) rotateY(-10deg) rotateZ(5deg) scale(1.15)}
  .tpl-copy{order:-1}
}
@media(max-width:720px){.tpl-wall{height:340px}.wall-cols{gap:14px}.wall-col{gap:14px}.wall-card figcaption{display:none}}
@media(max-width:560px){.hero-features-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.feature-box{padding:8px 10px 8px 8px;font-size:12.5px;gap:8px}}
@media(prefers-reduced-motion:reduce){.wall-col{animation:none}}

.f-icon{margin-bottom: 8px;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;border:1px solid var(--ln);background:var(--s2);color:var(--cy);font-size:20px}

.filter-section{position:relative;z-index:10;margin:50px 0 80px;padding: 20px 0 50px;text-align:center;background: var(--bg3);}
.filter-eyebrow{margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--cy)}
.filter-section h2{margin:0 0 28px;font-size:clamp(2.4rem,4.8vw,4.6rem);line-height:1.02;letter-spacing:-.055em;color:var(--tx)}
.filter-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

.pill-btn{display:inline-flex;align-items:center;padding:10px 22px;border:1px solid var(--ln);border-radius:12px;background:var(--s);color:var(--tx);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .25s,border-color .25s,background .25s,color .25s}
.pill-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(10,143,181,.2)}
.pill-btn.active{border-color:var(--tx);background:var(--tx);color:var(--bg)}

.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:26px}
.template-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ln);border-radius:18px;background:var(--s);backdrop-filter:blur(12px);cursor:pointer;transition:transform .2s,border-color .3s}
.template-card:hover{transform:translateY(-8px);border-color:rgba(10,143,181,.4)}
.template-card.hide,.template-card.hidden{display:none}

.card-img-wrapper{position:relative;height:230px;overflow:hidden;background:var(--bg2)}
.card-img-wrapper img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;transition:transform .6s ease}
.template-card:hover .card-img-wrapper img{transform:scale(1.06)}

.card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.template-card:hover .card-overlay{opacity:1}

.preview-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--tx);border-radius:12px;background:var(--tx);color:var(--bg);font-family:inherit;font-size:14px;font-weight:700;transform:translateY(20px);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.template-card:hover .preview-btn{transform:translateY(0);box-shadow:0 10px 30px rgba(10,143,181,.2)}

.page-count-badge{position:absolute;right:12px;top:12px;z-index:3;padding:4px 12px;border-radius:50px;background:rgb(10 24 45 / 49%);border:1px solid var(--ln);color:#ffffff;font-size:13px;font-weight:700;backdrop-filter:blur(10px)}

.card-info{flex:1;padding:28px}
.card-info h3{margin:0 0 8px;font-size:22px;color:var(--tx)}
.card-info p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:14px;color:var(--mu)}

.temp-cta-section{padding:90px 20px 50px}
.cta-glass-panel{position:relative;overflow:hidden;max-width:920px;margin:0 auto;padding:80px 20px;border:1px solid var(--ln);border-radius:20px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(10,143,181,.16),transparent 50%),var(--s);backdrop-filter:blur(14px)}
.cta-content{position:relative}
.cta-content h2{margin:0 auto;max-width:850px;font-size:clamp(2.4rem,4.8vw,4.6rem);line-height:1.02;letter-spacing:-.055em;color:var(--tx)}
.cta-content p{max-width:480px;margin:20px auto 28px;font-size:16px;color:var(--mu)}

.preview-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .3s}
.preview-modal.active{opacity:1;pointer-events:auto}

.template-modal-container{display:flex;flex-direction:column;overflow:hidden;width:95vw;height:90vh;border:1px solid var(--ln);border-radius:20px;background:var(--bg2);transform:scale(.97);transition:transform .3s;animation:up .4s both}
.preview-modal.active .template-modal-container{transform:scale(1)}

.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 40px;border-bottom:1px solid var(--ln);background:var(--bg2)}
.modal-title-area h3{margin:0;font-size:26px;letter-spacing:-.04em;color:var(--tx)}

.modal-tabs{display:flex;gap:8px;padding:4px;border:1px solid var(--ln);border-radius:12px;background:var(--s2)}
.tab-btn{padding:11px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--mu);font-size:14px;cursor:pointer;transition:.2s}
.tab-btn:hover{color:var(--tx)}
.tab-btn.active{background:var(--s);border-color:var(--cy);color:var(--tx)}

.close-modal-btn{position:relative;width:34px;height:34px;border-radius:9px;border:1px solid var(--ln);background:var(--s);color:var(--tx);cursor:pointer;font-size:20px;display:grid;place-items:center;transition:.2s;flex:none}
.close-modal-btn:hover{border-color:var(--cy);color:var(--cy)}

.modal-body{position:relative;flex:1;background:#fff} 
.modal-body iframe{display:block;width:100%;height:100%;border:0}

@media(max-width:992px){
  .templates-page{padding-top:84px}
  .hero-features-grid{justify-content:center}
  .template-modal-container{border-radius:12px;width:100vw;height:100vh}
  .modal-header{flex-direction:column;height:auto;padding:20px;gap:10px;position:relative}
  .close-modal-btn{position:absolute;right:20px;top:20px}
  .modal-tabs{flex-wrap:wrap;justify-content:center;width:100%}
}
@media(max-width:768px){
  .temp-cta-section{padding:60px 16px 30px}.cta-glass-panel{padding:40px 20px}
  .pill-btn{padding:8px 16px;font-size:13px}.filter-pills{gap:8px}
}

.reveal {opacity: 0;transform: translateY(24px);transition: opacity 0.8s, transform 0.8s, }
.reveal.active {opacity: 1;transform: none}
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }
.reveal.eff-3d { transform: perspective(1200px) translateY(40px); transform-origin: center bottom; transition: opacity 0.9s, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }

@media (max-width: 992px) {
    .hr.mobile-active {position: absolute;top: 100%;left: 0;width: 100%;background: var(--bg2);display: flex;flex-direction: column;padding: 20px;gap: 15px;border-bottom: 1px solid var(--ln);box-shadow: 0 20px 40px rgba(0,0,0,0.15);animation: slideDownMenu 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
    .hr.mobile-active .hcta, .hr.mobile-active .button {display: flex;width: 100%;justify-content: center;}
    @keyframes slideDownMenu { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); }}
}