.template-library-page,.template-detail-page{background:#fff}.template-hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#041d35 0%,#07345b 56%,#0b5074 100%);color:#fff}.template-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 24%,rgba(5,191,238,.24),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.02),transparent 60%)}.template-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center;min-height:620px;padding:82px 0}.template-hero .eyebrow{color:#75ddff}.template-hero h1{color:#fff;font-size:clamp(2.8rem,5.1vw,5.05rem);letter-spacing:-.052em}.template-hero h1 span{color:#36c5f4}.template-hero p{max-width:720px;font-size:1.12rem;color:#e2eff7}.template-hero .button.outline{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}.template-trust{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.template-trust span{padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#dff5ff;font-size:.86rem;font-weight:750}.devices{position:relative;height:430px}.device{position:absolute;background:#071728;border:8px solid #152a3c;box-shadow:0 28px 70px rgba(0,0,0,.35);overflow:hidden}.device-screen{width:100%;height:100%;overflow:hidden;background:#eef4f7}.device-screen img{width:100%;height:100%;object-fit:cover}.device-laptop{width:78%;height:270px;right:6%;top:38px;border-radius:14px}.device-laptop:after{content:"";position:absolute;left:-9%;right:-9%;height:18px;bottom:-24px;background:#b8c3cc;border-radius:4px 4px 20px 20px}.device-tablet{width:43%;height:270px;left:0;bottom:15px;border-width:7px;border-radius:18px;transform:rotate(-3deg)}.device-phone{width:25%;height:245px;right:2%;bottom:0;border-width:6px;border-radius:25px;transform:rotate(3deg)}.template-catalog{background:linear-gradient(180deg,#fff,#f5f9fc)}.template-filters{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 38px}.template-filter{appearance:none;border:1px solid #d9e7f1;background:#fff;color:#0a3155;border-radius:999px;padding:10px 16px;font:inherit;font-weight:780;cursor:pointer;transition:.2s}.template-filter:hover,.template-filter.active{background:#075bd8;color:#fff;border-color:#075bd8}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.template-card{overflow:hidden;background:#fff;border:1px solid #dce9f5;border-radius:24px;box-shadow:0 14px 36px rgba(5,42,91,.08);transition:transform .2s ease,box-shadow .2s ease}.template-card:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(5,42,91,.14)}.template-card[hidden]{display:none}.template-image{position:relative;display:block;height:235px;overflow:hidden;background:#e9f2f7}.template-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.template-card:hover .template-image img{transform:scale(1.035)}.template-image span{position:absolute;left:14px;bottom:14px;padding:6px 10px;background:rgba(4,29,53,.9);color:#fff;border-radius:999px;font-size:.7rem;font-weight:800}.template-card-body{padding:22px}.template-category{color:#075bd8;font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.template-card h3{margin:7px 0 6px;font-size:1.42rem}.template-card h3 a{text-decoration:none}.template-card p{margin:0;color:#56657a}.template-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}.template-tags span{padding:5px 9px;background:#f2f6f9;border-radius:999px;color:#43566b;font-size:.74rem;font-weight:720}.template-actions{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}.template-actions .button{padding:10px 14px;font-size:.84rem}.template-how{background:linear-gradient(180deg,#f7f9fc 0%,#eef5fa 100%);color:#0f172a;border-top:1px solid #e2ebf2;border-bottom:1px solid #e2ebf2}.template-how-intro{max-width:920px;margin-bottom:38px}.template-how .eyebrow{color:#075bd8}.template-how h2{color:#0f172a;font-size:clamp(2rem,4vw,3.45rem);line-height:1.08;letter-spacing:-.035em;margin:8px 0 18px}.template-how-intro>p{max-width:850px;color:#475569;font-size:1.08rem;line-height:1.78;margin:0}.template-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.template-how-grid article{position:relative;padding:32px 30px 30px;border:1px solid #dbe7ef;border-radius:24px;background:#fff;box-shadow:0 16px 38px rgba(5,42,91,.07);overflow:hidden}.template-how-grid article:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#16b9f2,#075bd8)}.template-how-grid strong{display:block;color:#16aee8;font-size:2rem;line-height:1;font-weight:900;margin-bottom:22px}.template-how-grid h3{color:#0f172a;font-size:1.16rem;line-height:1.35;margin:0 0 12px}.template-how-grid p{color:#52657a;line-height:1.72;margin:0}.template-detail-hero{background:linear-gradient(135deg,#f9f4e9 0%,#fff 48%,#e9f7ff 100%);padding:74px 0}.detail-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}.template-detail-hero h1{font-size:clamp(2.7rem,5vw,4.8rem)}.detail-lead{font-size:1.12rem;color:#40536c}.detail-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.detail-meta span{padding:7px 11px;border:1px solid #dce9f5;background:#fff;border-radius:999px;font-size:.8rem;font-weight:750;color:#173b5e}.detail-visual{position:relative;border-radius:30px;overflow:hidden;box-shadow:0 22px 55px rgba(5,42,91,.16);background:#fff}.detail-visual img{width:100%;height:440px;object-fit:cover}.detail-visual span{position:absolute;left:18px;bottom:18px;background:rgba(4,29,53,.88);color:#fff;border-radius:999px;padding:8px 12px;font-size:.75rem;font-weight:800}.detail-preview-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:30px;align-items:start}.detail-browser{overflow:hidden;border-radius:22px;border:1px solid #dbe8f1;box-shadow:0 18px 44px rgba(5,42,91,.1);background:#fff}.browser-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#eff4f7;color:#6b7d8e;font-size:.78rem}.browser-bar i{width:9px;height:9px;border-radius:50%;background:#c7d2da}.browser-bar span{margin-left:8px}.detail-browser img{width:100%;height:520px;object-fit:cover;object-position:top}.detail-specs{padding:26px;border:1px solid #dce9f5;border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(5,42,91,.07)}.detail-specs h3{margin-top:0}.detail-specs h3:not(:first-child){margin-top:26px}.detail-specs ul{margin:0;padding-left:20px;color:#465b71}.detail-specs li{margin:7px 0}.detail-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.detail-feature-grid article{padding:26px;border:1px solid #dce9f5;border-radius:22px;background:#fff}.detail-feature-grid span{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#e7f7ff;color:#075bd8;font-weight:900;margin-bottom:16px}.detail-feature-grid p{color:#56657a}@media(max-width:1000px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-hero-grid,.detail-grid,.detail-preview-layout{grid-template-columns:1fr}.devices{max-width:650px;margin:auto;width:100%}.detail-visual img{height:400px}.template-how-grid,.detail-feature-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.template-hero-grid{padding:58px 0;min-height:auto}.template-hero h1{font-size:2.75rem}.devices{height:330px}.device-laptop{width:82%;height:210px}.device-tablet{height:205px}.device-phone{height:185px}.template-grid,.template-how-grid,.detail-feature-grid{grid-template-columns:1fr}.template-image{height:220px}.template-filter{padding:9px 12px;font-size:.86rem}.detail-visual img{height:300px}.detail-browser img{height:330px}}
.template-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.88rem;font-weight:700;color:#66788a}
.template-breadcrumb a{color:#075bd8;text-decoration:none}
.template-breadcrumb a:hover{text-decoration:underline}
.template-breadcrumb-hero{position:relative;z-index:2;padding-top:24px;color:#d8edf8}
.template-breadcrumb-hero a{color:#8fe2ff}
.template-detail-hero .template-breadcrumb{margin-bottom:22px}
.template-detail-hero .template-breadcrumb span[aria-current="page"]{color:#445a6f}

.template-seo-note{margin:-10px 0 24px;color:#52677b;font-size:.82rem;font-weight:750;letter-spacing:.015em}

.template-faq{background:#fff}
.template-faq .section-intro{max-width:860px}
.template-faq-list{display:grid;gap:14px;max-width:980px}
.template-faq-list details{border:1px solid #dce7ef;border-radius:18px;background:#f9fbfd;overflow:hidden;box-shadow:0 8px 24px rgba(5,42,91,.04)}
.template-faq-list summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:800;color:#0f172a;position:relative}
.template-faq-list summary::-webkit-details-marker{display:none}
.template-faq-list summary:after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.35rem;color:#0b78d0}
.template-faq-list details[open] summary:after{content:"–"}
.template-faq-list details p{margin:0;padding:0 24px 22px;color:#4f6276;line-height:1.75}


/* FAQ CARDS PREMIUM 2026-09-28 */
.template-faq{
  background:linear-gradient(180deg,#ffffff 0%,#f6faff 100%);
  border-top:1px solid #e4edf5;
  border-bottom:1px solid #e4edf5;
}
.template-faq .section-intro{
  max-width:900px;
  margin-bottom:38px;
}
.template-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  align-items:start;
  max-width:1120px;
}
.faq-card{
  position:relative;
  overflow:hidden;
  border:1px solid #d9e5ef;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 30px rgba(5,42,91,.06);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.faq-card:before{
  content:"";
  display:block;
  height:4px;
  width:100%;
  background:linear-gradient(90deg,#11b7f3 0%,#075bd8 100%);
}
.faq-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(5,42,91,.11);
  border-color:#bed8e9;
}
.faq-card[open]{
  border-color:#92cef2;
  box-shadow:0 22px 48px rgba(5,42,91,.13);
}
.faq-card summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:24px 74px 22px 24px;
  color:#0f172a;
  font-size:1.06rem;
  font-weight:850;
  line-height:1.45;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.faq-card summary::-webkit-details-marker{display:none}
.faq-card summary:after{
  content:"+";
  position:absolute;
  right:20px;
  top:20px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#075bd8;
  background:#edf7ff;
  border:1px solid #cce7f8;
  font-size:1.42rem;
  font-weight:800;
  box-shadow:0 5px 12px rgba(7,91,216,.09);
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.faq-card[open] summary:after{
  content:"–";
  color:#fff;
  background:linear-gradient(135deg,#11b7f3,#075bd8);
  border-color:transparent;
  transform:rotate(180deg);
}
.faq-card p{
  margin:0;
  padding:0 24px 26px;
  color:#4d6176;
  font-size:1rem;
  line-height:1.78;
}
@media(max-width:900px){
  .template-faq-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .template-faq-grid{gap:14px}
  .faq-card summary{
    padding:20px 64px 18px 20px;
    font-size:1rem;
  }
  .faq-card summary:after{
    right:15px;
    top:16px;
    width:36px;
    height:36px;
    font-size:1.25rem;
  }
  .faq-card p{
    padding:0 20px 22px;
    font-size:.97rem;
  }
}


/* WARM CREAM BACKGROUND 2026-09-28 */
.template-library-page,
.template-detail-page{
  background:#fbf8f2;
}
.template-catalog,
.template-faq,
.template-detail-hero,
.template-detail-page .section{
  background-color:#fbf8f2;
}
.template-catalog{
  background:linear-gradient(180deg,#fbf8f2 0%,#f5f1e9 100%);
}
.template-faq{
  background:linear-gradient(180deg,#fbf8f2 0%,#f7f2ea 100%);
}
.template-detail-hero{
  background:linear-gradient(135deg,#f8f1e5 0%,#fbf8f2 48%,#edf7fb 100%);
}
.template-card,
.faq-card,
.detail-specs,
.detail-feature-grid article,
.detail-browser{
  background:#fffdf9;
}