@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Great+Vibes&family=Inter:wght@400;500;600;700&display=swap');
:root{--ink:#27372f;--green:#294238;--cream:#f8f2e9;--paper:#fffdf9;--gold:#b89467;--line:#e5dbce;--accent:#b89467}
*{box-sizing:border-box}input[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,Arial,sans-serif;background:var(--paper)}
.nav{height:72px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:#fffdf9ee;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.logo{font-size:13px;letter-spacing:2px}.logo:first-letter{color:var(--accent);font-size:22px}.nav nav{display:flex;gap:18px;align-items:center}.nav nav a{font-size:11px;color:var(--ink);text-decoration:none}.nav nav a:hover{color:var(--accent)}.btn,button{font:inherit}.btn{display:inline-block;border:1px solid var(--green);border-radius:25px;padding:12px 19px;background:var(--green);color:#fff;text-decoration:none;font-size:11px;font-weight:700;cursor:pointer}.btn.small{padding:10px 14px}.btn.ghost{background:transparent;color:var(--green)}.btn.light{background:#fff;color:var(--green)}
.hero{min-height:650px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);align-items:center;padding:70px 8vw;background:linear-gradient(120deg,#f6eee4,#fffdf9 58%,#e7ddd0)}.hero-copy{max-width:680px}.eyebrow,.heading>span,.cta>div>span{font-size:10px;letter-spacing:4px;font-weight:700;color:var(--accent)}h1{font:500 clamp(52px,6.5vw,90px)/.9 "Cormorant Garamond",serif;margin:20px 0}h1 em{font:400 clamp(55px,7vw,95px)/1 "Great Vibes",cursive}.hero-copy>p{max-width:600px;color:#716b63;line-height:1.8;font-size:14px}.actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}.trust{display:flex;gap:20px;margin-top:27px;font-size:10px;color:#6d756e}.hero-visual{height:530px;display:grid;place-items:center;overflow:visible}.phone{width:270px;height:520px;border:9px solid #1e2622;border-radius:38px;padding:7px;background:#1e2622;transform:rotate(5deg);box-shadow:0 30px 70px #33261625;position:relative}.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:92px;height:22px;border-radius:0 0 15px 15px;background:#1e2622;z-index:2}.phone-screen{height:100%;border-radius:25px;background:radial-gradient(circle at top,#fff,#e8dac9);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:13px;font-family:"Cormorant Garamond",serif}.phone-screen strong{font-size:48px;line-height:.82;font-weight:500}.phone-screen small{font-size:10px;letter-spacing:3px}.phone-screen span{font-size:12px;letter-spacing:2px}.phone-screen button{border:0;background:var(--green);color:#fff;border-radius:20px;padding:9px 14px;font-size:9px;text-transform:uppercase}
.section{padding:85px 6vw}.soft{background:#f1e9de}.heading{text-align:center;max-width:750px;margin:0 auto 42px}.heading h2{font:600 48px/1 "Cormorant Garamond",serif;margin:11px 0}.heading p{color:#756f67;font-size:13px;line-height:1.7}.theme-categories{max-width:1200px;margin:auto;display:flex;flex-direction:column;gap:34px}.theme-category{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:18px;padding:20px}.theme-category.empty{padding:24px;text-align:center}.category-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px;border-bottom:1px solid var(--line);padding-bottom:13px}.category-head span{font-size:8px;letter-spacing:2px;color:var(--accent);font-weight:800}.category-head h3{font:600 31px/1 "Cormorant Garamond",serif;margin:5px 0 0}.category-head small{font-size:10px;color:#777}.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.theme-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;cursor:pointer;transition:.25s}.theme-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px #38261714}.theme-card img{width:100%;height:275px;display:block;object-fit:cover;background:#eee}.theme-info{padding:14px}.theme-info h3{font:600 23px "Cormorant Garamond",serif;margin:0}.theme-info p{font-size:11px;color:#777;margin:5px 0 8px}.theme-actions{display:flex;gap:7px;margin-top:10px}.theme-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;border-radius:20px;padding:9px 10px;font-size:9px;font-weight:800;text-decoration:none;cursor:pointer}.theme-btn.preview{border:1px solid var(--green);background:#fff;color:var(--green)}.theme-btn.order{border:1px solid var(--green);background:var(--green);color:#fff}.theme-mini select{display:block;width:100%;margin-top:5px;border:1px solid #ddd;border-radius:8px;padding:9px;font:inherit;font-size:12px;background:#fff}.feature-grid{max-width:1000px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.feature{background:#fffaf4;border:1px solid #e0d5c6;border-radius:15px;padding:23px}.feature .icon{font-size:25px}.feature h3{font:600 23px "Cormorant Garamond",serif;margin:11px 0 5px}.feature p{font-size:12px;color:#777;line-height:1.6;margin:0}
.pricing-grid{max-width:1080px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}.price-card{position:relative;background:#fff;border:1px solid #dfd5c8;border-radius:18px;overflow:visible;display:flex;flex-direction:column;min-height:385px;padding:27px 26px 22px;box-shadow:0 8px 24px #3826170b;transition:transform .25s,box-shadow .25s}.price-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #38261716}.price-card.popular{background:var(--green);color:#fff;border:1px solid var(--green);transform:translateY(-8px);box-shadow:0 18px 38px #244a3a2b}.price-card.popular:hover{transform:translateY(-12px)}.popular-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#b89467;color:#fff;border:3px solid #f1e9de;border-radius:20px;padding:6px 15px;font-size:8px;font-weight:800;letter-spacing:1px;white-space:nowrap}.price-head{padding:0;background:transparent;text-align:left}.price-head small{display:block;color:#b89467;font-size:8px;letter-spacing:1.7px;font-weight:800;margin-bottom:9px}.popular .price-head small{color:#dcc6a4}.price-head h3{font:600 29px/1.1 "Cormorant Garamond",serif;margin:0;color:var(--ink)}.popular .price-head h3{color:#fff}.price{font:700 24px "Cormorant Garamond",serif;text-align:left;margin:17px 0 7px;color:var(--ink)}.popular .price{color:#fff}.price-card ul{list-style:none;padding:0;margin:8px 0 12px;min-height:0;flex:1;font-size:11px;line-height:2}.price-card li{color:#756f67}.popular li{color:#eee8de}.price-card li:before{content:"✓";color:#b89467;font-weight:700;margin-right:9px}.popular li:before{color:#dcc6a4}.price-action{display:block;margin:10px 0 0;padding:12px 15px;border-radius:22px;background:#eee0ce;text-align:center;color:var(--ink);font-size:10px;font-weight:800;text-decoration:none;transition:.2s}.price-action:hover{filter:brightness(.97)}.popular .price-action{background:#f1e5d3}
.steps-grid{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.step-card{background:#fffaf4;border:1px solid #e0d5c6;border-radius:16px;padding:25px 21px;min-height:225px;position:relative}.step-number{font:600 31px "Cormorant Garamond",serif;color:var(--accent);margin-bottom:17px}.step-card h3{font:600 24px "Cormorant Garamond",serif;margin:0 0 8px}.step-card p{font-size:11px;color:#777;line-height:1.7;margin:0}.step-card:not(:last-child):after{content:"→";position:absolute;right:-15px;top:50%;width:28px;height:28px;border-radius:50%;background:#e6d6c2;display:grid;place-items:center;font-size:11px;z-index:2}
.testimonial-grid{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.testimonial{background:#fff;border:1px solid var(--line);border-radius:17px;padding:27px 24px;box-shadow:0 8px 24px #38261708}.quote{font:700 52px/0.7 "Cormorant Garamond",serif;color:var(--accent)}.testimonial>p{font:italic 18px/1.55 "Cormorant Garamond",serif;margin:17px 0 24px;color:#4e554f}.person{border-top:1px solid var(--line);padding-top:13px;display:flex;flex-direction:column;gap:3px}.person strong{font-size:11px}.person span{font-size:9px;color:#8a837b}
.faq-list{max-width:800px;margin:auto}.faq-item{border-bottom:1px solid var(--line)}.faq-q{padding:18px 5px;display:flex;justify-content:space-between;font-size:13px;font-weight:700;cursor:pointer}.faq-a{display:none;padding:0 5px 18px;color:#777;font-size:12px;line-height:1.7}.faq-item.open .faq-a{display:block}.cta{padding:70px 9vw;background:var(--green);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{font:500 53px/1 "Cormorant Garamond",serif;margin:12px 0}.cta p{font-size:12px;opacity:.75}.cta>div{max-width:700px}footer{background:#1e3027;color:#fff;padding:28px 6vw;display:flex;justify-content:space-between;gap:20px;font-size:10px}footer b{letter-spacing:2px}
.backdrop{display:none;position:fixed;inset:0;background:#0008;z-index:50}.editor{display:none;position:fixed;z-index:51;right:0;top:0;width:min(480px,100vw);height:100vh;background:#fff;overflow:auto;padding:20px;box-shadow:-20px 0 55px #0004}.editor-top{display:flex;justify-content:space-between;gap:15px}.editor-top h3{margin:0;font-size:21px}.editor-top small{color:#777;display:block;margin-top:4px;font-size:10px}.close{border:0;background:#eee;border-radius:50%;width:32px;height:32px;font-size:21px;cursor:pointer}.toolbar{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.toolbar button:not(.btn){border:0;background:#eee;border-radius:8px;padding:9px 11px;font-size:11px;cursor:pointer}.tabs{display:flex;gap:4px;overflow:auto;border-bottom:1px solid #ddd}.tab{border:0;background:transparent;padding:10px 12px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}.tab.active{color:var(--green);border-bottom:2px solid var(--green)}.tab-panel{display:none;padding-top:12px}.tab-panel.active{display:block}label{display:block;font-size:11px;font-weight:700;margin:12px 0}label small{font-weight:400;color:#888}input,textarea{display:block;width:100%;margin-top:5px;border:1px solid #ddd;border-radius:8px;padding:9px;font:inherit;font-size:12px}input[type=color]{height:40px;padding:3px}.mini{background:#f7f3ed;border-radius:10px;padding:11px;margin:10px 0}.mini-head{display:flex;justify-content:space-between;align-items:center}.mini-head b{font-size:12px}.danger{border:0;background:#f3d9d5;color:#9b3e31;border-radius:7px;padding:5px 8px;font-size:10px;cursor:pointer}.image-row{display:grid;grid-template-columns:70px 1fr;gap:9px;align-items:center}.thumb{width:70px;height:80px;border-radius:8px;object-fit:cover;background:#ddd}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel-title>button{border:0;background:#e8dfd2;border-radius:8px;padding:8px 10px;font-size:10px;font-weight:700;cursor:pointer}.hint{font-size:10px;color:#777;line-height:1.6;background:#f6f1e9;padding:12px;border-radius:9px}
@media(max-width:1050px){.theme-grid{grid-template-columns:repeat(2,1fr)}.nav nav{gap:10px}.nav nav a:nth-child(n+6){display:none}.steps-grid{grid-template-columns:repeat(2,1fr)}.step-card:not(:last-child):after{display:none}}
@media(max-width:900px){.nav nav{display:none}.hero{grid-template-columns:1fr;padding:55px 7vw}.hero-visual{order:-1;height:450px}.phone{height:430px;width:225px}.theme-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr;max-width:620px}.price-card.popular,.price-card.popular:hover{transform:none}.steps-grid{grid-template-columns:1fr;max-width:620px}.testimonial-grid{grid-template-columns:1fr;max-width:620px}.cta{flex-direction:column;align-items:flex-start}.cta h2{font-size:44px}footer{flex-direction:column}}
@media(max-width:500px){.theme-grid{grid-template-columns:1fr;gap:9px}.category-head h3{font-size:27px}.theme-card img{height:195px}.heading h2{font-size:39px}.hero h1{font-size:50px}.hero h1 em{font-size:58px}.pricing-grid{gap:18px}.price-card{min-height:360px;padding:24px 21px 19px}.price-head h3{font-size:27px}.price{font-size:23px}}

/* Premium theme catalogue */
.theme-filter-wrap{display:flex;justify-content:center;margin:-8px auto 34px;position:relative;z-index:2}.theme-filter{display:inline-flex;gap:5px;padding:6px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:999px;box-shadow:0 12px 35px rgba(55,38,23,.08);backdrop-filter:blur(12px)}.theme-filter-btn{border:0;background:transparent;color:#6f675f;border-radius:999px;padding:11px 20px;font-size:10px;font-weight:800;letter-spacing:.4px;cursor:pointer;transition:.25s}.theme-filter-btn:hover{color:var(--green);background:#f5efe7}.theme-filter-btn.active{background:var(--green);color:#fff;box-shadow:0 7px 18px rgba(30,60,45,.18)}.theme-category{position:relative;overflow:hidden;box-shadow:0 12px 35px rgba(55,38,23,.045)}.theme-category:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent);opacity:.85}.theme-category.premium:before{background:#b89467}.theme-category.exclusive:before{background:#3d5547}.category-head{align-items:center}.category-head h3{font-size:36px}.category-head p{margin:7px 0 0;font-size:10px;color:#8a8278}.theme-card{position:relative;box-shadow:0 8px 22px rgba(55,38,23,.05)}.theme-image-wrap{position:relative;overflow:hidden}.theme-card img{transition:transform .45s ease,filter .45s ease}.theme-card:hover img{transform:scale(1.045);filter:saturate(1.04)}.theme-badge{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);font-size:8px;font-weight:900;letter-spacing:1.4px;color:var(--green);box-shadow:0 5px 16px rgba(0,0,0,.1)}.theme-category.premium .theme-badge{color:#8b6840}.theme-category.exclusive .theme-badge{color:#334b3d}.theme-info h3{font-size:25px}.theme-actions{gap:8px}.theme-btn{min-height:36px}.theme-btn.preview{background:#fffaf4}.theme-btn.order{box-shadow:0 7px 15px rgba(30,60,45,.14)}
@media(max-width:600px){.theme-filter{width:100%;justify-content:space-between}.theme-filter-btn{padding:10px 11px;font-size:9px}.theme-category{padding:14px}.category-head h3{font-size:30px}.category-head p{font-size:9px}.theme-filter-wrap{margin-bottom:25px}}
/* Premium katalog v3 */
.theme-toolbar{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:-18px auto 38px}.theme-filter{display:flex;gap:6px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 30px #392d2110}.theme-filter-btn{border:0;background:transparent;color:#6d675f;border-radius:999px;padding:11px 18px;font-size:10px;font-weight:800;letter-spacing:.8px;cursor:pointer;transition:.25s}.theme-filter-btn.active,.theme-filter-btn:hover{background:var(--green);color:#fff}.theme-search{height:42px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:0 14px;min-width:210px;box-shadow:0 10px 30px #392d2110}.theme-search span{font-size:20px;color:var(--accent)}.theme-search input{border:0;outline:0;background:transparent;width:100%;font-size:11px;color:var(--ink)}
.theme-category{padding:28px;border:1px solid var(--line);border-radius:28px;margin-bottom:24px;position:relative;overflow:hidden;background:linear-gradient(145deg,#fffdf9,#faf5ed)}.theme-category.premium{background:linear-gradient(145deg,#fffdf9,#f5efe6)}.theme-category.exclusive{background:linear-gradient(145deg,#fffdf9,#eee7db);border-color:#d9c5a8}.category-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:24px}.category-head>div>span{font-size:9px;letter-spacing:3px;color:var(--accent);font-weight:800}.category-head h3{font:600 34px/1 "Cormorant Garamond",serif;margin:7px 0 4px}.category-head p{margin:0;color:#7b756d;font-size:11px}.category-head small{font-size:10px;color:#7d756b;white-space:nowrap}.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.theme-card{background:#fff;border:1px solid #e9dfd2;border-radius:22px;overflow:hidden;box-shadow:0 14px 35px #3a2d1b0b;transition:.3s;position:relative}.theme-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px #3a2d1b18}.theme-image-wrap{height:285px;background:#eee;position:relative;overflow:hidden;padding:12px}.theme-image-wrap:after{content:"";position:absolute;inset:12px;border:1px solid #ffffff70;border-radius:15px;pointer-events:none}.theme-image-wrap img{width:100%;height:100%;object-fit:cover;border-radius:15px;transition:.5s}.theme-card:hover .theme-image-wrap img{transform:scale(1.04)}.theme-badge{position:absolute;left:23px;top:23px;background:#fffdf9e8;color:var(--green);border:1px solid #ffffffaa;padding:7px 10px;border-radius:20px;font-size:8px;font-weight:900;letter-spacing:1.3px;z-index:2}.theme-label{position:absolute;right:23px;top:23px;background:var(--green);color:#fff;padding:7px 10px;border-radius:20px;font-size:7px;font-weight:900;letter-spacing:1px;z-index:2}.theme-info{padding:17px 18px 19px}.theme-info h3{font:600 25px/1 "Cormorant Garamond",serif;margin:0 0 5px}.theme-info p{font-size:10px;color:#817a71;margin:0 0 11px}.theme-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.theme-price{font-size:11px;font-weight:800;color:var(--green)}.theme-fav{border:0;background:#f8f3eb;width:30px;height:30px;border-radius:50%;cursor:pointer;color:#a18b70;font-size:15px}.theme-fav.active{color:#a35d55;background:#f4e4df}.theme-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-btn{display:flex;justify-content:center;align-items:center;border-radius:13px;padding:10px;border:1px solid var(--green);font-size:9px;font-weight:800;text-decoration:none;cursor:pointer}.theme-btn.preview{background:#fff;color:var(--green)}.theme-btn.order{background:var(--green);color:#fff}.theme-category.empty{padding:35px;text-align:center}.theme-category.empty .category-head{margin-bottom:10px}.theme-category.empty p{font-size:11px;color:#817a71}.phone{overflow:hidden}.phone-screen{position:relative}.phone-screen:before{content:"LIVE PREVIEW";position:absolute;top:18px;right:18px;font:700 7px Inter,sans-serif;letter-spacing:1.5px;color:#7e7569}
@media(max-width:900px){.theme-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.theme-toolbar{align-items:stretch}.theme-filter{width:100%;overflow:auto;justify-content:flex-start}.theme-filter-btn{white-space:nowrap;padding:10px 14px}.theme-search{width:100%}.theme-category{padding:18px;border-radius:22px}.theme-grid{grid-template-columns:1fr}.theme-image-wrap{height:300px}.category-head{align-items:start}.category-head h3{font-size:30px}}

footer{align-items:center;flex-wrap:wrap}footer a{color:#fff;text-decoration:none}footer a:hover{color:#dcc6a4}.footer-brand{display:flex;align-items:center;gap:8px}.footer-icon,.ig-icon{width:25px;height:25px;border:1px solid #ffffff44;border-radius:50%;display:inline-grid;place-items:center;font-size:12px}.footer-instagram{display:flex;align-items:center;gap:8px}
/* Theme catalogue: compact first view + show all */
.theme-more{display:flex;justify-content:center;margin-top:24px}.theme-more-btn{border:1px solid var(--green);background:#fffdf9;color:var(--green);border-radius:999px;padding:11px 20px;font-size:10px;font-weight:800;letter-spacing:.5px;cursor:pointer;transition:.25s}.theme-more-btn:hover{background:var(--green);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px #1e3c2d18}

/* =========================================
   PREMIUM PHONE HERO
   ========================================= */

.premium-phone {
  position: relative;
  width: 235px;
  height: 480px;
  padding: 9px;
  border-radius: 42px;
  background: linear-gradient(145deg, #252525, #090909);
  box-shadow:
    0 35px 80px rgba(0,0,0,.28),
    0 10px 30px rgba(0,0,0,.18),
    inset 0 1px 2px rgba(255,255,255,.18);
  transform: rotate(2deg);
  transition: transform .5s ease, box-shadow .5s ease;
}

.premium-phone:hover {
  transform: rotate(0deg) translateY(-8px);
  box-shadow:
    0 45px 90px rgba(0,0,0,.32),
    0 15px 35px rgba(0,0,0,.2);
}

.premium-phone .notch {
  position: absolute;
  z-index: 10;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 25px;
  background: #050505;
  border-radius: 0 0 18px 18px;
}

.premium-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: #222;
}

/* Foto background */

.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=900&q=85");
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}

/* Overlay agar tulisan tetap jelas */

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(20,15,12,.28) 0%,
      rgba(20,15,12,.05) 35%,
      rgba(20,15,12,.62) 72%,
      rgba(10,8,6,.92) 100%
    );
}

/* Isi undangan */

.hero-content {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 38px 20px 24px;
  text-align: center;
  color: #fff;
}

.hero-content small {
  margin-bottom: 12px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
  opacity: .9;
}

.hero-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.hero-names strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  font-weight: 400;
  letter-spacing: .5px;
  text-shadow: 0 3px 15px rgba(0,0,0,.35);
}

.hero-names span {
  margin: 5px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  opacity: .9;
}

.hero-date {
  margin-top: 13px;
  font-size: 10px;
  letter-spacing: 3px;
  opacity: .9;
}

.hero-line {
  width: 42px;
  height: 1px;
  margin: 17px 0 20px;
  background: rgba(255,255,255,.7);
}

.hero-open-btn {
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 30px;
  padding: 9px 19px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 10px;
  letter-spacing: .5px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all .3s ease;
}

.hero-open-btn:hover {
  background: rgba(255,255,255,.25);
  transform: translateY(-2px);
}

/* Mobile */

@media (max-width: 768px) {
  .premium-phone {
    width: 215px;
    height: 440px;
    border-radius: 36px;
  }

  .premium-screen {
    border-radius: 29px;
  }

  .premium-phone .notch {
    width: 78px;
    height: 21px;
  }

  .hero-content {
    padding: 35px 20px 25px;
  }

  .hero-names strong {
    font-size: 31px;
  }

  .hero-names span {
    font-size: 17px;
  }
}

/* Katalog 2x2 premium layout */
.feature,.price-card,.step-card,.testimonial{min-width:0}.feature{padding:22px}.step-card:not(:last-child):after{display:none}.price-card.popular{transform:none}.price-card.popular:hover{transform:translateY(-4px)}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding:55px 7vw 45px}.hero-copy{text-align:center;margin:auto}.hero-copy>p{margin-left:auto;margin-right:auto}.actions,.trust{justify-content:center}.hero-visual{height:455px;margin-top:10px}.feature-grid,.pricing-grid,.steps-grid,.testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.feature,.price-card,.step-card,.testimonial{padding:17px}.feature h3,.step-card h3{font-size:20px}.feature p,.step-card p{font-size:10px}.price-card{min-height:330px}.price-head h3{font-size:24px}.price{font-size:21px}.price-card ul{font-size:10px;line-height:1.75}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.theme-image-wrap{height:210px}.theme-info{padding:12px}.theme-info h3{font-size:20px}.theme-info p{font-size:9px}.theme-actions{grid-template-columns:1fr}.theme-btn{font-size:8px}}
@media(max-width:430px){.hero-visual{height:420px}.premium-phone{width:205px;height:420px}.feature-grid,.pricing-grid,.steps-grid,.testimonial-grid{gap:10px}.feature,.price-card,.step-card,.testimonial{padding:14px}.feature .icon{font-size:21px}.feature h3,.step-card h3{font-size:18px}.feature p,.step-card p,.price-card li{font-size:9px}.price-card{min-height:305px}.price-head h3{font-size:21px}.price{font-size:19px}.price-action{font-size:8px;padding:10px}.theme-image-wrap{height:180px}}

/* FINAL CATALOG POLISH */
.hero-visual{height:500px;overflow:visible}
.premium-phone{width:225px!important;height:455px!important;transform:rotate(3deg) translateY(4px)!important}
.phone{width:235px;height:465px;transform:rotate(3deg);}
.phone-screen strong{font-size:42px}
@media(max-width:900px){.hero-visual{height:430px}.premium-phone{width:205px!important;height:415px!important}.phone{width:210px;height:420px}.feature-grid,.pricing-grid,.steps-grid,.testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.feature-grid,.pricing-grid,.steps-grid,.testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hero-visual{height:390px}.premium-phone{width:190px!important;height:385px!important}}
@media(max-width:430px){.feature-grid,.pricing-grid,.steps-grid,.testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.premium-phone{width:178px!important;height:360px!important}.phone{width:185px;height:370px}.hero-visual{height:365px}}


/* ===== PREMIUM EDITORIAL FINISH v5 ===== */
.nav{padding:0 clamp(22px,5vw,70px);height:68px}.nav nav{gap:16px}.nav nav a{font-size:10px;letter-spacing:.2px}
.hero{min-height:690px;grid-template-columns:minmax(0,1.18fr) minmax(270px,.82fr);padding:72px clamp(28px,7vw,96px);position:relative;overflow:hidden;background:radial-gradient(circle at 82% 38%,#eadfce 0,#f8f2e9 28%,#fffdf9 65%)}
.hero:before{content:"";position:absolute;width:480px;height:480px;border:1px solid #b8946726;border-radius:50%;right:-150px;top:95px}.hero:after{content:"";position:absolute;width:320px;height:320px;border:1px solid #b894671c;border-radius:50%;right:-70px;top:175px}
.hero-copy{position:relative;z-index:2;max-width:640px}.eyebrow{display:inline-flex;align-items:center;gap:10px}.eyebrow:before{content:"";width:28px;height:1px;background:var(--gold)}
.hero-copy h1{max-width:650px;letter-spacing:-1px}.hero-copy>p{max-width:540px;font-size:13px}.trust{gap:13px;flex-wrap:wrap}.trust span{padding:7px 10px;border:1px solid #d9cdbd;border-radius:999px;background:#fffaf4aa}
.hero-visual{height:510px;position:relative;z-index:2}.hero-visual:before{content:"";position:absolute;width:350px;height:350px;border-radius:50%;background:#d9c8af45;filter:blur(2px)}
.premium-phone{width:205px!important;height:415px!important;transform:rotate(4deg) translate(8px,4px)!important;border-width:8px;box-shadow:0 28px 65px #33261626}.premium-screen{border-radius:23px!important}.phone-screen strong{font-size:39px}.phone-screen:after{content:"";position:absolute;inset:9px;border:1px solid #ffffff45;border-radius:21px;pointer-events:none}

.section{padding:96px clamp(22px,6vw,80px)}.heading{max-width:720px;margin-bottom:46px}.heading>span{display:inline-flex;align-items:center;gap:9px;font-size:9px;letter-spacing:3.5px}.heading>span:before,.heading>span:after{content:"";width:20px;height:1px;background:#b8946755}.heading h2{font-size:52px;letter-spacing:-.4px}.heading p{max-width:600px;margin:12px auto 0}
#themes .heading>span:before{content:"01";width:auto;height:auto;background:none;font-size:8px;color:#8e795d;font-family:Inter,sans-serif;letter-spacing:1px}#features .heading>span:before{content:"02";width:auto;height:auto;background:none;font-size:8px;color:#8e795d;font-family:Inter,sans-serif;letter-spacing:1px}#pricing .heading>span:before{content:"03";width:auto;height:auto;background:none;font-size:8px;color:#8e795d;font-family:Inter,sans-serif;letter-spacing:1px}#howto .heading>span:before{content:"04";width:auto;height:auto;background:none;font-size:8px;color:#8e795d;font-family:Inter,sans-serif;letter-spacing:1px}#testimonials .heading>span:before{content:"05";width:auto;height:auto;background:none;font-size:8px;color:#8e795d;font-family:Inter,sans-serif;letter-spacing:1px}#faq .heading>span:before{content:"06";width:auto;height:auto;background:none;font-size:8px;color:#8e795d;font-family:Inter,sans-serif;letter-spacing:1px}
#themes{background:#fffdf9}.theme-toolbar{max-width:1200px;margin:0 auto 25px}.theme-categories{max-width:1200px;gap:52px}.theme-category{background:transparent;border:0;border-radius:0;padding:0}.category-head{margin-bottom:18px;padding:0 2px 13px;border-bottom:1px solid var(--line)}.category-head h3{font-size:34px}.category-head p{margin:5px 0 0;font-size:10px;color:#8a8176}.theme-grid{gap:22px}.theme-card{border-radius:20px;box-shadow:0 16px 40px #3a2d1b0d}.theme-image-wrap{height:320px;padding:11px}.theme-info{padding:18px 19px 20px}.theme-info h3{font-size:27px}.theme-price{font-family:"Cormorant Garamond",serif;font-size:16px}.theme-btn{border-radius:12px;padding:11px;font-size:9px}.theme-more{text-align:center;margin-top:18px}.theme-more-btn{border:1px solid var(--line);background:#fffaf4;color:var(--green);border-radius:999px;padding:10px 17px;font-size:9px;font-weight:800;cursor:pointer}

.feature-grid,.pricing-grid,.steps-grid,.testimonial-grid{max-width:1050px;gap:20px}.feature,.step-card,.testimonial{border-radius:18px;background:#fffdf9;border:1px solid #e4d9ca;box-shadow:0 12px 30px #3a2d1b08}.feature{min-height:180px;padding:25px}.feature .icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#f1e7d9;font-size:20px}.feature h3{font-size:24px}.step-card{min-height:205px;padding:25px}.step-number{font-size:36px}.testimonial{min-height:205px;padding:28px}.testimonial>p{font-size:19px}
.pricing-grid{align-items:stretch}.price-card{min-height:360px;border-radius:20px}.price-card.popular{box-shadow:0 20px 45px #244a3a24}.popular-badge{font-size:7px}
#howto .steps-grid{counter-reset:steps}#howto .step-card{overflow:hidden}#howto .step-card:before{content:"";position:absolute;right:-25px;bottom:-35px;width:105px;height:105px;border:1px solid #b8946728;border-radius:50%}
#testimonials{background:#fffdf9}.quote{font-size:58px}
#faq .faq-list{max-width:900px;margin:auto}.faq-list details{background:#fffdf9;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:4px 17px}.faq-list summary{padding:14px 0;font-family:"Cormorant Garamond",serif;font-size:19px;font-weight:600}
.cta{position:relative;overflow:hidden}.cta:before{content:"";position:absolute;width:300px;height:300px;border:1px solid #ffffff20;border-radius:50%;right:-80px;top:-100px}

@media(max-width:760px){.hero{min-height:auto;grid-template-columns:1fr;padding:58px 7vw 35px}.hero-copy{text-align:center}.hero-copy h1{font-size:clamp(46px,12vw,68px)}.hero-copy>p{margin-left:auto;margin-right:auto}.eyebrow{justify-content:center}.hero-visual{height:410px;margin-top:4px}.hero-visual:before{width:290px;height:290px}.premium-phone{width:190px!important;height:385px!important}.section{padding:72px 5vw}.heading h2{font-size:43px}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.theme-image-wrap{height:225px}.theme-info{padding:13px}.theme-info h3{font-size:21px}.theme-info p{font-size:9px}.theme-meta{margin-bottom:9px}.theme-price{font-size:13px}.theme-actions{grid-template-columns:1fr}.feature-grid,.pricing-grid,.steps-grid,.testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.feature,.price-card,.step-card,.testimonial{padding:17px}.feature{min-height:170px}.feature h3,.step-card h3{font-size:20px}.feature p,.step-card p,.price-card li{font-size:10px}.price-card{min-height:315px}.price-head h3{font-size:23px}.price{font-size:21px}.testimonial>p{font-size:16px}.category-head h3{font-size:29px}.category-head p{font-size:9px}}
@media(max-width:430px){.nav{height:62px}.nav nav{gap:9px}.nav nav a{font-size:8px}.hero-visual{height:375px}.premium-phone{width:178px!important;height:360px!important}.section{padding:62px 4vw}.heading{margin-bottom:34px}.heading h2{font-size:38px}.theme-grid,.feature-grid,.pricing-grid,.steps-grid,.testimonial-grid{gap:9px}.theme-image-wrap{height:185px;padding:8px}.theme-image-wrap:after{inset:8px}.theme-badge{left:16px;top:16px;padding:5px 7px;font-size:6px}.theme-label{right:16px;top:16px;padding:5px 7px;font-size:6px}.theme-info h3{font-size:18px}.theme-info p{font-size:8px}.theme-price{font-size:11px}.theme-fav{width:26px;height:26px}.theme-btn{padding:9px 6px;font-size:7px}.feature,.price-card,.step-card,.testimonial{padding:12px;border-radius:14px}.feature .icon{width:34px;height:34px;font-size:17px}.feature h3,.step-card h3{font-size:17px}.feature p,.step-card p,.price-card li{font-size:8px;line-height:1.55}.price-card{min-height:300px}.price-head small{font-size:6px}.price-head h3{font-size:19px}.price{font-size:17px}.price-action{font-size:7px;padding:9px}.testimonial>p{font-size:14px}.person strong,.person span{font-size:9px}.category-head{display:block}.category-head small{display:block;margin-top:7px}}

/* Final responsive guard */
@media(max-width:760px){.nav{gap:14px}.nav nav{min-width:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.nav nav::-webkit-scrollbar{display:none}.logo{white-space:nowrap}.theme-card,.feature,.price-card,.step-card,.testimonial{min-width:0;overflow:hidden}}

/* ===== HERO COVER REVAMP v6 — TEXT FIRST / PHONE AS SUPPORTING VISUAL ===== */
.hero{
  min-height:610px;
  grid-template-columns:minmax(0,1.45fr) minmax(250px,.75fr);
  gap:28px;
  padding:62px clamp(28px,7vw,92px) 58px;
  align-items:center;
  background:radial-gradient(circle at 78% 48%,#eee4d5 0,#f8f2e9 24%,#fffdf9 66%);
}
.hero:before{width:390px;height:390px;right:-145px;top:105px;border-color:#b8946720}
.hero:after{width:255px;height:255px;right:-70px;top:172px;border-color:#b8946719}
.hero-copy{max-width:650px;padding:8px 0;}
.hero-copy .eyebrow{font-size:9px;letter-spacing:3.5px;}
.hero-copy h1{font-size:clamp(54px,6vw,78px);line-height:.94;max-width:610px;margin:18px 0 18px;letter-spacing:-1.4px}
.hero-copy h1 em{font-size:clamp(57px,6.3vw,82px);line-height:.98}
.hero-copy>p{max-width:510px;font-size:13px;line-height:1.75;margin-bottom:0}
.actions{gap:12px;margin-top:23px}
.actions .btn{min-width:135px;text-align:center;padding:12px 18px}
.actions .btn.ghost{background:#fffdf9b8}
.trust{gap:0;margin-top:25px;align-items:center;}
.trust span{border:0;border-radius:0;background:transparent;padding:4px 14px;color:#6d756e;position:relative;font-size:10px}
.trust span:first-child{padding-left:0}
.trust span+span:before{content:"";position:absolute;left:0;top:50%;width:1px;height:15px;background:#d9cdbd;transform:translateY(-50%)}
.hero-visual{height:430px;position:relative;display:grid;place-items:center;}
.hero-visual:before{width:275px;height:275px;background:#d9c8af35;filter:none;right:28px;left:auto;top:74px}
.hero-visual:after{content:"";position:absolute;width:220px;height:220px;border:1px solid #b8946724;border-radius:50%;right:55px;top:101px;pointer-events:none}
.premium-phone{
  width:178px!important;
  height:365px!important;
  transform:rotate(4deg) translate(5px,0)!important;
  border-width:7px;
  border-radius:34px;
  padding:7px;
  box-shadow:0 25px 55px #33261622;
  z-index:2;
}
.premium-screen{border-radius:22px!important}
.premium-phone .notch{width:70px;height:18px;border-radius:0 0 12px 12px}
.phone-screen strong{font-size:34px}
.phone-screen small{font-size:8px;letter-spacing:2.5px}
.phone-screen span{font-size:10px;letter-spacing:1.5px}
.phone-screen button{padding:8px 12px;font-size:8px}
.phone-screen:before{top:13px;right:13px;font-size:6px;letter-spacing:1.2px}
.hero-visual .premium-phone:after{content:"LIVE PREVIEW";position:absolute;right:-76px;top:72px;font:600 8px/1 "Cormorant Garamond",serif;letter-spacing:1.3px;color:#71685c;transform:rotate(-4deg);white-space:nowrap}
.hero-visual .premium-phone:before{content:"";position:absolute;right:-58px;top:84px;width:38px;height:24px;border-top:1px solid #8e806d;transform:rotate(-24deg);border-radius:50%}

/* Keep the following sections unchanged in character; only give the first collection section a cleaner visual handoff. */
#themes{position:relative;}
#themes:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#b8946718}

@media(max-width:900px){
  .hero{min-height:590px;grid-template-columns:minmax(0,1.3fr) minmax(210px,.7fr);gap:10px;padding:54px 6vw 50px}
  .hero-copy h1{font-size:clamp(48px,6.6vw,68px)}
  .hero-copy h1 em{font-size:clamp(51px,7vw,72px)}
  .hero-visual{height:390px}
  .premium-phone{width:165px!important;height:340px!important}
  .hero-visual:before{width:245px;height:245px;right:2px;top:72px}
  .hero-visual:after{width:195px;height:195px;right:28px;top:96px}
}

@media(max-width:760px){
  .hero{min-height:auto;grid-template-columns:1fr;gap:6px;padding:52px 7vw 44px;text-align:center}
  .hero-copy{order:1;margin:auto;max-width:650px}
  .hero-copy h1{max-width:600px;margin:16px auto 16px;font-size:clamp(47px,12vw,64px)}
  .hero-copy h1 em{font-size:clamp(51px,13vw,69px)}
  .hero-copy>p{margin-left:auto;margin-right:auto;max-width:520px}
  .eyebrow{justify-content:center}
  .actions,.trust{justify-content:center}
  .trust span:first-child{padding-left:10px}
  .hero-visual{order:2;height:325px;margin-top:2px}
  .hero-visual:before{width:225px;height:225px;right:50%;transform:translateX(50%);top:43px}
  .hero-visual:after{width:180px;height:180px;right:50%;transform:translateX(50%);top:66px}
  .premium-phone{width:152px!important;height:315px!important;transform:rotate(3deg)!important}
  .hero-visual .premium-phone:after{right:-69px;top:60px;font-size:7px}
  .hero-visual .premium-phone:before{right:-51px;top:70px;width:34px}
}

@media(max-width:430px){
  .hero{padding:46px 5vw 38px}
  .hero-copy h1{font-size:clamp(43px,12.5vw,55px);letter-spacing:-.8px}
  .hero-copy h1 em{font-size:clamp(47px,13.5vw,61px)}
  .actions{gap:8px}
  .actions .btn{min-width:125px;padding:11px 13px;font-size:10px}
  .trust{flex-wrap:wrap;row-gap:2px;margin-top:20px}
  .trust span{font-size:8px;padding:4px 9px}
  .trust span+span:before{height:12px}
  .hero-visual{height:285px}
  .premium-phone{width:136px!important;height:280px!important;border-width:6px;padding:6px}
  .premium-phone .notch{width:57px;height:15px}
  .phone-screen strong{font-size:27px}
  .phone-screen small{font-size:6px;letter-spacing:1.8px}
  .phone-screen span{font-size:8px}
  .phone-screen button{padding:6px 9px;font-size:6px}
  .hero-visual .premium-phone:after{right:-61px;top:51px;font-size:6px}
  .hero-visual .premium-phone:before{right:-43px;top:60px;width:29px}
}


/* ===== HERO BALANCED SIDE-BY-SIDE FINISH ===== */
.hero,
.hero-section,
.hero-content-wrap {
  position: relative;
}

.hero-content,
.hero-inner,
.hero-grid,
.hero-wrapper {
  align-items: center;
}

@media (min-width: 769px) {
  .hero-grid,
  .hero-inner,
  .hero-content-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, .72fr);
    gap: clamp(28px, 5vw, 72px);
  }

  .hero-copy,
  .hero-text,
  .hero-left {
    text-align: left;
    max-width: 650px;
  }

  .hero-visual,
  .hero-image,
  .hero-right,
  .hero-mockup {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }

  .hero-visual img,
  .hero-image img,
  .hero-right img,
  .hero-mockup img {
    width: min(310px, 82%);
    max-width: 310px;
    height: auto;
    margin: 0 auto;
    transform: none;
  }

  .hero-visual .phone,
  .hero-right .phone,
  .hero-mockup .phone {
    width: min(300px, 80%);
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .hero-grid,
  .hero-inner,
  .hero-content-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .hero-copy,
  .hero-text,
  .hero-left {
    text-align: center;
    margin-inline: auto;
  }

  .hero-visual,
  .hero-image,
  .hero-right,
  .hero-mockup {
    justify-content: center;
  }

  .hero-visual img,
  .hero-image img,
  .hero-right img,
  .hero-mockup img {
    width: min(250px, 68vw);
    max-width: 250px;
    margin-inline: auto;
  }
}


/* =========================================================
   FINAL PHONE PREVIEW COVER — DESKTOP SIDE BY SIDE
   Text LEFT / Phone RIGHT
   ========================================================= */
@media (min-width: 769px) {
  /* Common hero wrappers */
  .hero,
  .hero-section,
  .hero-banner,
  .cover,
  .cover-section {
    overflow: hidden;
  }

  .hero-content,
  .hero-inner,
  .hero-grid,
  .hero-wrapper,
  .hero-main,
  .cover-inner,
  .cover-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(230px, .68fr) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(22px, 4vw, 58px) !important;
  }

  .hero-copy,
  .hero-text,
  .hero-left,
  .cover-copy,
  .cover-text {
    order: 1 !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 620px !important;
  }

  .hero-visual,
  .hero-image,
  .hero-right,
  .hero-mockup,
  .cover-visual,
  .cover-image,
  .cover-phone,
  .phone-preview {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-visual img,
  .hero-image img,
  .hero-right img,
  .hero-mockup img,
  .cover-visual img,
  .cover-image img,
  .cover-phone img,
  .phone-preview img {
    display: block !important;
    width: min(280px, 78%) !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .hero-visual .phone,
  .hero-right .phone,
  .hero-mockup .phone,
  .cover-phone .phone,
  .phone-preview .phone {
    width: min(275px, 76%) !important;
    max-width: 275px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* Prevent old mobile/centered rules from forcing the phone below */
  .hero-content > *,
  .hero-inner > *,
  .hero-grid > *,
  .hero-wrapper > *,
  .cover-inner > *,
  .cover-content > * {
    align-self: center !important;
  }
}

/* Actual phone preview viewport: desktop keeps its internal cover split too. */
@media (min-width: 769px) {
  .preview-phone .preview-cover,
  .phone-frame .preview-cover,
  .phone-screen .preview-cover,
  .mockup-phone .preview-cover {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(85px, .58fr) !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: left !important;
  }

  .preview-phone .preview-cover-text,
  .phone-frame .preview-cover-text,
  .phone-screen .preview-cover-text,
  .mockup-phone .preview-cover-text {
    text-align: left !important;
  }

  .preview-phone .preview-cover-phone,
  .phone-frame .preview-cover-phone,
  .phone-screen .preview-cover-phone,
  .mockup-phone .preview-cover-phone {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* Mobile preview remains vertical for readability. */
@media (max-width: 768px) {
  .hero-content,
  .hero-inner,
  .hero-grid,
  .hero-wrapper,
  .hero-main,
  .cover-inner,
  .cover-content {
    grid-template-columns: 1fr !important;
  }

  .hero-copy,
  .hero-text,
  .hero-left,
  .cover-copy,
  .cover-text {
    text-align: center !important;
  }

  .hero-visual img,
  .hero-image img,
  .hero-right img,
  .hero-mockup img,
  .cover-visual img,
  .cover-image img,
  .cover-phone img,
  .phone-preview img {
    width: min(230px, 62vw) !important;
    max-width: 230px !important;
  }
}


/* =========================================================
   PREVIEW HP — COMPACT COVER SIDE BY SIDE
   Only active for index.html?catalogPreview=1
   ========================================================= */
body.catalog-preview .hero {
  min-height: 100%;
  height: auto;
  display: grid !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(82px, .78fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 30px 14px 24px !important;
  overflow: hidden !important;
}

body.catalog-preview .hero-copy {
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
}

body.catalog-preview .hero-copy .eyebrow {
  font-size: 7px !important;
  letter-spacing: 2px !important;
}

body.catalog-preview .hero h1 {
  font-size: clamp(27px, 8vw, 38px) !important;
  line-height: .93 !important;
  margin: 9px 0 !important;
}

body.catalog-preview .hero h1 em {
  font-size: clamp(29px, 8.5vw, 41px) !important;
  line-height: .95 !important;
}

body.catalog-preview .hero-copy > p {
  font-size: 8px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

body.catalog-preview .actions {
  gap: 5px !important;
  margin-top: 12px !important;
  flex-wrap: nowrap !important;
}

body.catalog-preview .actions .btn {
  padding: 8px 10px !important;
  font-size: 7px !important;
  white-space: nowrap !important;
}

body.catalog-preview .trust {
  gap: 7px !important;
  margin-top: 12px !important;
  font-size: 6px !important;
  white-space: nowrap !important;
}

body.catalog-preview .hero-visual {
  order: initial !important;
  height: auto !important;
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

body.catalog-preview .hero-visual .phone {
  width: min(108px, 30vw) !important;
  height: min(208px, 58vw) !important;
  border-width: 5px !important;
  border-radius: 19px !important;
  padding: 4px !important;
  transform: rotate(4deg) !important;
  margin: 0 auto !important;
}

body.catalog-preview .hero-visual .notch {
  width: 39px !important;
  height: 10px !important;
  border-radius: 0 0 7px 7px !important;
}

body.catalog-preview .hero-visual .phone-screen {
  border-radius: 14px !important;
  gap: 6px !important;
}

body.catalog-preview .hero-visual .phone-screen strong {
  font-size: 19px !important;
  line-height: .84 !important;
}

body.catalog-preview .hero-visual .phone-screen small {
  font-size: 5px !important;
  letter-spacing: 1.3px !important;
}

body.catalog-preview .hero-visual .phone-screen span {
  font-size: 6px !important;
  letter-spacing: 1px !important;
}

body.catalog-preview .hero-visual .phone-screen button {
  padding: 5px 7px !important;
  font-size: 5px !important;
  border-radius: 12px !important;
}

/* Keep the rest of the catalogue readable inside the phone. */
body.catalog-preview .section {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

body.catalog-preview .heading h2 {
  font-size: 25px !important;
}

body.catalog-preview .theme-grid,
body.catalog-preview .feature-grid,
body.catalog-preview .pricing-grid,
body.catalog-preview .steps-grid,
body.catalog-preview .testimonial-grid {
  grid-template-columns: 1fr 1fr !important;
}

body.catalog-preview .theme-grid { gap: 7px !important; }
body.catalog-preview .feature-grid,
body.catalog-preview .pricing-grid,
body.catalog-preview .steps-grid,
body.catalog-preview .testimonial-grid { gap: 7px !important; }

@media (max-width: 340px) {
  body.catalog-preview .hero {
    grid-template-columns: minmax(0, 1.18fr) minmax(76px, .82fr) !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
    gap: 6px !important;
  }

  body.catalog-preview .hero-visual .phone {
    width: 94px !important;
    height: 184px !important;
  }

  body.catalog-preview .hero h1 {
    font-size: 25px !important;
  }

  body.catalog-preview .hero h1 em {
    font-size: 27px !important;
  }
}


/* =========================================================
   PREVIEW HP — DEFINITIVE COVER LAYOUT V2
   The iframe is narrow, so this rule intentionally applies
   at ALL viewport widths while catalogPreview=1 is active.
   Text LEFT + inner phone RIGHT, fully contained in the
   outer editor phone frame.
   ========================================================= */
body.catalog-preview .hero {
  min-height: 335px !important;
  height: 335px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(92px, .72fr) !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 24px 13px 20px !important;
  overflow: hidden !important;
}
body.catalog-preview .hero-copy {
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
}
body.catalog-preview .hero-copy .eyebrow {
  display:block !important;
  font-size: 6px !important;
  letter-spacing: 1.5px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.catalog-preview .hero h1 {
  font-size: 27px !important;
  line-height: .88 !important;
  margin: 8px 0 9px !important;
}
body.catalog-preview .hero h1 em {
  font-size: 29px !important;
  line-height: .9 !important;
}
body.catalog-preview .hero-copy > p {
  font-size: 7px !important;
  line-height: 1.45 !important;
  max-width: 150px !important;
  margin: 0 !important;
}
body.catalog-preview .actions {
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  margin-top:10px !important;
}
body.catalog-preview .actions .btn {
  min-width:0 !important;
  padding:7px 8px !important;
  font-size:6px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
body.catalog-preview .trust {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px 7px !important;
  margin-top:9px !important;
  font-size:5.5px !important;
  line-height:1.2 !important;
}
body.catalog-preview .hero-visual {
  min-width:0 !important;
  width:100% !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  order:2 !important;
}
body.catalog-preview .hero-visual .premium-phone,
body.catalog-preview .hero-visual .phone {
  width:92px !important;
  height:190px !important;
  min-width:92px !important;
  max-width:92px !important;
  min-height:190px !important;
  max-height:190px !important;
  border-width:4px !important;
  border-radius:18px !important;
  padding:4px !important;
  margin:0 auto !important;
  transform:rotate(2deg) !important;
  box-shadow:0 15px 28px rgba(0,0,0,.18) !important;
}
body.catalog-preview .hero-visual .notch {
  top:0 !important;
  width:38px !important;
  height:9px !important;
  border-radius:0 0 7px 7px !important;
}
body.catalog-preview .hero-visual .premium-screen,
body.catalog-preview .hero-visual .phone-screen {
  width:100% !important;
  height:100% !important;
  border-radius:13px !important;
  overflow:hidden !important;
}
body.catalog-preview .hero-visual .hero-content {
  padding:22px 7px 11px !important;
  gap:5px !important;
}
body.catalog-preview .hero-visual .hero-content small {
  margin-bottom:3px !important;
  font-size:4px !important;
  letter-spacing:1px !important;
}
body.catalog-preview .hero-visual .hero-names strong {
  font-size:16px !important;
  line-height:.82 !important;
}
body.catalog-preview .hero-visual .hero-names span {
  margin:2px 0 !important;
  font-size:7px !important;
}
body.catalog-preview .hero-visual .hero-date {
  font-size:5px !important;
}
body.catalog-preview .hero-visual .hero-line {
  width:26px !important;
}
body.catalog-preview .hero-visual .hero-open-btn,
body.catalog-preview .hero-visual .phone-screen button {
  padding:4px 6px !important;
  font-size:4px !important;
  border-radius:10px !important;
}
/* Never let the first section overlap the hero inside the phone. */
body.catalog-preview #themes {
  padding-top:25px !important;
}
/* Preview-only 2x2 catalogue cards remain compact. */
body.catalog-preview .theme-grid,
body.catalog-preview .feature-grid,
body.catalog-preview .pricing-grid,
body.catalog-preview .steps-grid,
body.catalog-preview .testimonial-grid {
  grid-template-columns:1fr 1fr !important;
  gap:6px !important;
}

/* The actual editor phone itself: keep the entire iframe visible and centered. */
.preview-card iframe { display:block !important; }


/* =========================================================
   PREMIUM FINISHING — MICRO INTERACTIONS & VISUAL POLISH
   Keeps the approved cover layout intact.
   ========================================================= */
:root{
  --premium-ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}

body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

a,button,.btn,.theme-card,.feature-card,.pricing-card,.step-card,.testimonial-card,.faq-item{
  transition:
    transform .28s var(--premium-ease),
    box-shadow .28s var(--premium-ease),
    border-color .28s ease,
    background-color .28s ease,
    color .28s ease,
    opacity .28s ease;
}

.theme-card:hover,.feature-card:hover,.pricing-card:hover,.step-card:hover,.testimonial-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(24,54,46,.10);
}

.theme-card img{
  transition:transform .55s var(--premium-ease);
}
.theme-card:hover img{
  transform:scale(1.035);
}

.btn:hover{
  transform:translateY(-2px);
}

.btn:active{
  transform:translateY(0);
}

.section{
  scroll-margin-top:88px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition:none!important;
    animation:none!important;
  }
}

/* Soft section reveal; JS adds .is-visible when supported. */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s var(--premium-ease),transform .65s var(--premium-ease);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Approved Preview HP cover remains untouched; only its controls get polish. */
.preview-phone .btn:hover,
.phone-preview .btn:hover{
  transform:none;
}


/* =========================================================
   TITLE COLOR FINISH — SAME GREEN AS PRIMARY BUTTON
   ========================================================= */
:root{
  --heading-green: var(--green);
}

/* Main cover title */
.hero h1,
.hero h1 strong,
.hero h1 em{
  color:var(--heading-green) !important;
}

/* All major section headings */
.heading h2,
.section h2,
.section-title,
.section-heading h2,
.category-head h3{
  color:var(--heading-green) !important;
}

/* Major card/package titles */
.theme-card h3,
.feature-card h3,
.pricing-card h3,
.step-card h3,
.testimonial-card h3{
  color:var(--heading-green) !important;
}

/* Keep small labels and decorative numbers in the existing accent/gold. */
.heading > span,
.eyebrow,
.step-number{
  color:var(--gold);
}