/*
Theme Name: Canva Pro Landing
Description: Canva Pro landing page theme with WhatsApp order button.
Version: 1.0
Author: Canva Pro Store
*/
:root{--p:#7d2ae8;--p2:#00c4cc;--ink:#1a1033;--muted:#5b5675;--bg:#faf8ff;--card:#fff;--wa:#25d366}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Hind Siliguri',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;font-size:18px;padding:15px 28px;border-radius:50px;box-shadow:0 8px 24px rgba(37,211,102,.35);transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,211,102,.45)}
.btn svg{width:24px;height:24px;fill:#fff}
.hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;padding:70px 0 90px;text-align:center;position:relative;overflow:hidden}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1)}
.hero:before{width:320px;height:320px;top:-120px;left:-80px}
.hero:after{width:260px;height:260px;bottom:-100px;right:-60px}
.badge{display:inline-block;background:rgba(255,255,255,.2);padding:6px 18px;border-radius:30px;font-size:15px;margin-bottom:18px}
.hero h1{font-size:clamp(30px,6vw,52px);line-height:1.25;margin-bottom:14px}
.hero p{font-size:19px;opacity:.95;max-width:620px;margin:0 auto 28px}
.price{display:inline-block;background:#fff;color:var(--p);border-radius:20px;padding:10px 28px;margin-bottom:28px}
.price b{font-size:46px}
.price small{display:block;font-size:14px;color:var(--muted)}
section{padding:64px 0}
h2{text-align:center;font-size:clamp(24px,4vw,34px);margin-bottom:34px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.card{background:var(--card);border-radius:18px;padding:26px;box-shadow:0 6px 22px rgba(125,42,232,.08);text-align:center}
.card .ic{font-size:36px;margin-bottom:10px}
.card h3{font-size:19px;margin-bottom:6px}
.card p{color:var(--muted);font-size:15px}
.steps{counter-reset:s;max-width:620px;margin:0 auto;list-style:none}
.steps li{counter-increment:s;background:var(--card);border-radius:14px;padding:16px 18px 16px 64px;margin-bottom:14px;position:relative;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.steps li:before{content:counter(s);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font-weight:700}
.cta{background:var(--ink);color:#fff;text-align:center}
.cta p{opacity:.85;margin-bottom:24px;font-size:18px}
details{background:var(--card);border-radius:14px;padding:16px 20px;margin:0 auto 12px;max-width:720px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
summary{cursor:pointer;font-weight:600}
details p{margin-top:10px;color:var(--muted)}
footer{text-align:center;padding:22px;font-size:14px;color:var(--muted)}
.float{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.25);z-index:99;animation:pulse 2s infinite}
.float svg{width:32px;height:32px;fill:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}