/* V4 casual diary scroll | brand: orange #F97316 cream #FFF8F0 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--orange:#F97316;--orange-dark:#EA580C;--orange-light:#FFF7ED;--cream:#FFF8F0;--white:#FFF;--ink:#1E293B;--muted:#475569;--muted-lt:#94A3B8;--border:#E2E8F0;--green:#16A34A;--green-bg:#F0FDF4;--red:#E11D48;--red-bg:#FFF1F2;--r:16px;--rs:10px;--rxs:6px;--sh:0 4px 24px rgba(0,0,0,.06);--sh-lg:0 8px 40px rgba(0,0,0,.1);--tr:250ms cubic-bezier(.4,0,.2,1)}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{font-family:'Nunito',system-ui,sans-serif;font-size:clamp(.95rem,2.5vw,1.05rem);line-height:1.7;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;padding-bottom:80px}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;line-height:1.2;color:var(--ink)}
a{color:var(--orange);text-decoration:none;cursor:pointer}
strong{color:var(--ink);font-weight:700}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.ic{flex-shrink:0}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(255,248,240,.85);border-bottom:1px solid var(--border)}
.nav-in{max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.logo{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.logo-dot{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--orange);border-radius:6px}
.logo-dot::before{content:"";display:block;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6-6 6 6M6 18l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.nav-cta{font-weight:700;font-size:.8rem;background:var(--orange);color:var(--white);padding:8px 16px;border-radius:99px;min-height:36px;display:flex;align-items:center;transition:background var(--tr),transform var(--tr);cursor:pointer}
.nav-cta:hover{background:var(--orange-dark);transform:translateY(-1px)}

/* HERO */
.hero{padding:calc(80px + 40px) 20px 40px;text-align:center;background:linear-gradient(180deg,var(--cream),var(--orange-light))}
.hero-inner{max-width:600px;margin:0 auto}
.hero-halo{font-family:'Nunito',sans-serif;font-weight:700;font-size:1rem;color:var(--muted);margin-bottom:2px;letter-spacing:.02em}
.hero-name{font-family:'Caveat',cursive;font-size:clamp(2rem,6vw,3.2rem);color:var(--orange);line-height:1.1;margin-bottom:16px;font-weight:700}
.hero h1{font-size:clamp(1.8rem,5.5vw,2.8rem);margin-bottom:16px}
.hero h1 em{color:var(--orange);font-style:italic}
.hero-sub{font-size:clamp(.9rem,2.5vw,1.05rem);color:var(--muted);max-width:480px;margin:0 auto 24px}
.hero-photos{display:flex;gap:20px;margin:0 auto 28px;max-width:380px}
.hero-photo{position:relative;flex:1;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg);border:3px solid var(--white)}
.hero-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.hero-photo-tag{position:absolute;bottom:8px;right:8px;font-family:'Nunito',sans-serif;font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:99px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(0,0,0,.1);white-space:nowrap}
.tag-before{background:rgba(255,241,242,.88);color:var(--red)}
.tag-after{background:rgba(240,253,244,.88);color:var(--green)}
.hero-btn{margin:0 auto}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.95rem;padding:14px 28px;border-radius:99px;border:none;min-height:52px;cursor:pointer;transition:background var(--tr),transform var(--tr),box-shadow var(--tr)}
.btn-primary{background:var(--orange);color:var(--white);box-shadow:0 4px 16px rgba(249,115,22,.3)}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 6px 24px rgba(249,115,22,.4)}

/* STORY */
.story{max-width:640px;margin:0 auto;padding:48px 20px 0}
.story-date{display:inline-flex;align-items:center;gap:8px;font-family:'Caveat',cursive;font-size:1.3rem;font-weight:700;color:var(--orange);background:var(--orange-light);padding:8px 16px;border-radius:99px;margin-bottom:20px}
.narrative{margin-bottom:40px}
.narrative p{margin-bottom:14px;color:var(--ink)}
.narrative p:last-child{margin-bottom:0}
.narrative-accent{font-size:1.05rem;background:var(--orange-light);border-left:3px solid var(--orange);padding:16px 20px;border-radius:0 var(--rs) var(--rs) 0;color:var(--muted)}
.narrative-highlight{font-size:1.1rem;font-weight:700;color:var(--orange);font-family:'DM Serif Display',serif;font-style:italic;text-align:center;padding:8px 0}

/* QUOTE */
.quote-section{max-width:640px;margin:0 auto;padding:16px 20px 48px}
.quote-card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:56px 28px 28px 60px;box-shadow:var(--sh)}
.quote-icon{position:absolute;top:20px;left:20px}
blockquote{font-family:'DM Serif Display',serif;font-size:clamp(1.1rem,3vw,1.35rem);color:var(--ink);line-height:1.5;margin-bottom:12px;padding-left:0}
cite{font-style:normal;font-family:'Nunito',sans-serif;font-size:.85rem;color:var(--muted-lt);font-weight:600;padding-left:0}

/* JOURNEY */
.journey{max-width:720px;margin:0 auto;padding:0 20px 48px}
.journey h2{font-size:clamp(1.4rem,4vw,1.8rem);text-align:center;margin-bottom:6px}
.journey-sub{text-align:center;color:var(--muted);margin-bottom:28px;font-size:.95rem}
.journey-steps{display:flex;justify-content:space-between;gap:8px;position:relative}
.journey-steps::before{content:"";position:absolute;top:24px;left:0;right:0;height:2px;background:var(--border);z-index:0}
.journey-step{position:relative;z-index:1;text-align:center;flex:1}
.journey-step-num{width:32px;height:32px;border-radius:50%;background:var(--orange);color:var(--white);font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 12px rgba(249,115,22,.25)}
.journey-step-img{width:100%;aspect-ratio:3/4;border-radius:var(--rs);overflow:hidden;margin-bottom:10px;box-shadow:var(--sh);background-size:cover;background-position:center;background-repeat:no-repeat}
.journey-step-img img{width:100%;height:100%;object-fit:cover;display:block}
.journey-step-tag{font-weight:700;font-size:.8rem;color:var(--ink);margin-bottom:6px}
.journey-step-desc{font-size:.85rem;color:var(--muted);line-height:1.5}
@media(max-width:480px){
  .journey-steps{flex-direction:column}
  .journey-steps::before{top:0;left:50%;right:auto;width:2px;height:100%;transform:translateX(-50%)}
  .journey-step{flex:0}
  .footer-links{gap:12px}
  .footer-links a{font-size:.8rem}
}

/* BENEFITS */
.benefits{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:48px 20px}
.benefits-inner{max-width:640px;margin:0 auto}
.benefits h2{font-size:clamp(1.4rem,4vw,1.8rem);text-align:center;margin-bottom:6px}
.benefits-sub{text-align:center;color:var(--muted);margin-bottom:28px;font-size:.95rem}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.benefit-card{background:var(--cream);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color var(--tr),transform var(--tr)}
.benefit-card:hover{border-color:rgba(249,115,22,.3);transform:translateY(-2px)}
.benefit-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.benefit-card strong{display:block;font-size:.9rem;padding:12px 14px 4px;color:var(--ink);font-weight:700}
.benefit-card span{display:block;font-size:.82rem;color:var(--muted);padding:0 14px 14px;line-height:1.5}

/* BRIDGE */
.bridge{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:48px 20px}
.bridge-inner{max-width:600px;margin:0 auto;text-align:center}
.bridge-inner p{margin-bottom:14px;color:var(--ink)}
.bridge-accent{font-size:1.15rem;font-weight:800;color:var(--orange);margin:20px 0!important}

/* EBOOK */
.ebook{padding:48px 20px;background:linear-gradient(180deg,var(--cream),var(--orange-light))}
.ebook-inner{max-width:600px;margin:0 auto;text-align:center}
.ebook-badge{display:inline-block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);background:var(--white);border:1px solid rgba(249,115,22,.2);padding:4px 14px;border-radius:99px;margin-bottom:12px}
.ebook-header h2{font-size:clamp(1.6rem,4.5vw,2.2rem);margin-bottom:10px}
.ebook-sub{color:var(--muted);margin-bottom:28px;font-size:.95rem}
.ebook-features{display:flex;flex-direction:column;gap:12px;text-align:left;margin-bottom:32px}
.ef-item{display:flex;gap:14px;align-items:center;background:var(--white);border:1px solid var(--border);border-radius:var(--rs);padding:16px;transition:border-color var(--tr)}
.ef-item:hover{border-color:rgba(249,115,22,.3)}
.ef-icon{flex-shrink:0;width:40px;height:40px;border-radius:var(--rxs);background:var(--orange-light);display:flex;align-items:center;justify-content:center;margin-top:2px}
.ef-item strong{display:block;font-size:.9rem;margin-bottom:2px}
.ef-item span{font-size:.82rem;color:var(--muted);line-height:1.4}
.ef-price{margin-left:auto;padding-left:16px;flex-shrink:0}
.ef-price-new{font-size:1rem;font-weight:700;color:var(--orange)}
.ebook-total{text-align:center;margin:24px 0;padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--rs)}
.ebook-total-sum{font-size:.85rem;color:var(--muted-lt)}
.ebook-total-sum s{color:#E11D48}
.ebook-total-final{font-size:1.1rem;margin-top:4px}
.ebook-total-final strong{color:var(--orange);font-size:1.3rem}
.ebook-once{font-size:.8rem;color:#fff;background:var(--orange);padding:3px 10px;border-radius:99px;font-weight:700;letter-spacing:.02em;box-shadow:0 2px 8px rgba(249,115,22,.3)}
.ebook .btn{margin:0 auto}

/* WHO */
.who{max-width:640px;margin:0 auto;padding:48px 20px}
.who h2{font-size:clamp(1.3rem,4vw,1.7rem);text-align:center;margin-bottom:6px}
.who-sub{text-align:center;color:var(--muted);margin-bottom:24px;font-size:.9rem}
.who-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.who-list li{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--border);border-radius:var(--rs);padding:14px 16px;font-size:.92rem;color:var(--ink);transition:border-color var(--tr)}
.who-list li:hover{border-color:rgba(249,115,22,.3)}
.who-x{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--red-bg);display:flex;align-items:center;justify-content:center}
.who-emph{text-align:center;font-weight:700;color:var(--orange);font-family:'DM Serif Display',serif;font-style:italic;font-size:1.05rem}

/* FINAL CTA */
.final{text-align:center;padding:80px 20px;background:url('https://calonpramugari.com/images-webp/final.webp') center/cover no-repeat;background-attachment:fixed;color:var(--white)}
.final-ch{font-family:'Caveat',cursive;font-size:clamp(1.1rem,3vw,1.4rem);color:var(--orange);display:block;margin-bottom:12px}
.final h2{color:var(--white);font-size:clamp(1.4rem,4vw,2rem);margin-bottom:16px}
.final p{color:rgba(255,255,255,.7);max-width:480px;margin:0 auto 28px;font-size:.95rem}
.final .btn{background:var(--orange);color:var(--white);box-shadow:0 4px 16px rgba(249,115,22,.3)}
.final .btn:hover{background:var(--orange-dark);transform:translateY(-2px)}

/* FOOTER */
.footer{max-width:640px;margin:0 auto;padding:32px 20px;text-align:center;border-top:1px solid var(--border)}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:16px}
.footer-links a{color:var(--muted);font-weight:600;font-size:.85rem;transition:color var(--tr);min-height:44px;display:flex;align-items:center;padding:4px 4px}
.footer-links a:hover{color:var(--orange)}
.footer-social{display:flex;justify-content:center;gap:16px;margin-bottom:16px}
.footer-social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--orange-light);color:var(--orange);transition:background var(--tr),color var(--tr)}
.footer-social a:hover{background:var(--orange);color:var(--white)}
.footer-email{color:var(--muted);font-size:.85rem;margin-bottom:8px}
.footer-email a{color:var(--muted)}
.footer-email a:hover{color:var(--orange)}
.footer-copy{color:var(--muted-lt);font-size:.78rem}

/* STICKY BOTTOM CTA */
.sticky{position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(255,248,240,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:12px 20px;display:flex;justify-content:center;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.sticky.show{transform:translateY(0)}
.sticky .btn{width:100%;max-width:400px;justify-content:center}

/* TOAST */
.toast-wrap{position:fixed;bottom:80px;right:16px;z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--border);border-radius:var(--rs);padding:10px 14px;box-shadow:var(--sh);font-size:.8rem;color:var(--ink);transition:opacity .4s,transform .4s;pointer-events:auto;max-width:300px}
.toast .avatar{width:32px;height:32px;border-radius:50%;background:var(--orange);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;flex-shrink:0}
.toast .txt b{color:var(--ink)}
.toast .city{display:block;font-size:.72rem;color:var(--muted-lt);margin-top:2px}

/* WA FLOAT */
.wa-float{position:fixed;bottom:80px;left:20px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.3);transition:transform var(--tr);cursor:pointer}
.wa-float:hover{transform:scale(1.08)}

/* TIKTOK GALLERY */
.tiktok-gallery{padding:48px 20px;background:linear-gradient(180deg,var(--orange-light),var(--cream))}
.tiktok-inner{max-width:640px;margin:0 auto;text-align:center}
.tiktok-gallery h2{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:8px}
.tiktok-sub{color:var(--muted);margin-bottom:28px;font-size:.95rem}
.tt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:28px}
.tt-card{display:block;background:var(--white);border:1px solid var(--border);border-radius:var(--rs);overflow:hidden;transition:border-color var(--tr),transform var(--tr)}
.tt-card:hover{border-color:rgba(249,115,22,.3);transform:translateY(-2px)}
.tt-thumb{position:relative;width:100%;height:0;padding-bottom:177.78%;background:var(--orange-light);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tt-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.tt-play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tt-label{display:block;padding:12px 16px;font-size:.85rem;font-weight:600;color:var(--ink)}
.tiktok-embed{max-width:100%;border-radius:var(--rs);overflow:hidden}
.tiktok-cta{text-align:center}
.btn-tiktok{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:var(--white);padding:12px 24px;border-radius:99px;font-weight:700;transition:background var(--tr)}
.btn-tiktok:hover{background:var(--orange-dark);transform:translateY(-1px)}

/* RESPONSIVE */
@media(min-width:700px){
  .hero{padding:calc(80px + 60px) 24px 60px}
  .story,.journey,.who,.ebook,.quote-section,.bridge,.tiktok-gallery{padding-left:24px;padding-right:24px}
  .footer{padding:40px 24px}
}