/* AlbumPeel homepage: modern, colourful. Source of truth for site/style.css (build_site.py copies it). */
:root{
  --bg:#f5f6fb; --card:#ffffff; --ink:#171a2b; --sub:#5d6480; --line:#e3e6f2;
  --navy:#0d1030; --violet:#6c4cff; --pink:#ff4f9a; --cyan:#22c7ff; --amber:#ffb74a; --mint:#2fe3a8;
  --grad:linear-gradient(120deg,#6c4cff 0%,#ff4f9a 55%,#ffb74a 100%);
  --grad2:linear-gradient(120deg,#22c7ff,#6c4cff);
  --r:20px;
  --shadow:0 18px 50px rgba(40,40,90,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Pretendard","Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;word-break:keep-all;overflow-wrap:break-word}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
a{color:var(--violet)}
img{max-width:100%}

/* ---------- top navigation (glass) ---------- */
.topnav{position:sticky;top:0;z-index:20;background:rgba(13,16,48,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.topnav .wrap{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.topnav .brand{font-weight:800;font-size:1.2rem;margin-right:18px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:.2px}
.topnav .brand img{width:32px;height:32px;border-radius:9px}
.topnav a.nav{padding:7px 15px;border-radius:999px;color:#c9cdf0;text-decoration:none;font-size:.93rem;transition:.2s}
.topnav a.nav:hover{background:rgba(255,255,255,.1);color:#fff}
.topnav a.nav.on{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(255,79,154,.35)}
.topnav .lang{margin-left:auto;font-size:.85rem;border:1px solid rgba(255,255,255,.25)}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:14px 30px;border-radius:999px;background:var(--grad);color:#fff!important;text-decoration:none;font-weight:700;margin:6px 10px 6px 0;border:0;box-shadow:0 10px 28px rgba(255,79,154,.38);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(255,79,154,.5)}
.btn.alt{background:rgba(255,255,255,.12);color:#fff!important;border:1px solid rgba(255,255,255,.35);box-shadow:none;backdrop-filter:blur(6px)}
.btn.alt:hover{background:rgba(255,255,255,.2)}
section .btn.alt,.page-title .btn.alt{background:#fff;color:var(--violet)!important;border:1px solid var(--line)}
.note{font-size:.85rem;color:var(--sub)}

/* ---------- hero ---------- */
header.hero2{position:relative;overflow:hidden;color:#fff;padding:84px 0 96px;background:
  radial-gradient(900px 520px at 12% 8%,rgba(108,76,255,.55),transparent 60%),
  radial-gradient(800px 520px at 92% 30%,rgba(255,79,154,.42),transparent 60%),
  radial-gradient(700px 500px at 60% 110%,rgba(34,199,255,.35),transparent 60%),var(--navy)}
header.hero2 .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;position:relative;z-index:2}
.hero2 .pill{display:inline-block;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);font-size:.85rem;letter-spacing:.04em}
.hero2 h1{font-size:2.7rem;line-height:1.18;margin:.45em 0 .4em;font-weight:900;letter-spacing:-.5px}
.hero2 h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 p.lead{font-size:1.12rem;color:#d3d7f5;max-width:34em}
.hero2 .meta{margin-top:18px;font-size:.88rem;color:#aab0dc}
.hero2 .shot{position:relative}
.hero2 .shot img.main{width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.25);box-shadow:0 40px 80px rgba(0,0,0,.5);transform:perspective(1400px) rotateY(-9deg) rotateX(3deg);transition:transform .5s}
.hero2 .shot:hover img.main{transform:perspective(1400px) rotateY(-2deg) rotateX(1deg)}
.hero2 .shot .float{position:absolute;left:-26px;bottom:-34px;width:42%;border-radius:16px;border:3px solid #fff;box-shadow:0 22px 44px rgba(0,0,0,.45);animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;z-index:1;animation:drift 9s ease-in-out infinite}
.orb.a{width:160px;height:160px;left:46%;top:-40px;background:radial-gradient(circle at 30% 30%,#fff,var(--violet));}
.orb.b{width:90px;height:90px;right:8%;bottom:40px;background:radial-gradient(circle at 30% 30%,#fff,var(--pink));animation-delay:-3s}
@keyframes drift{50%{transform:translate(18px,-22px)}}

/* ---------- stat strip ---------- */
.stats{margin-top:-46px;position:relative;z-index:5}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 10px}
.stats .s{text-align:center;padding:6px 10px;border-right:1px solid var(--line)}
.stats .s:last-child{border-right:0}
.stats b{display:block;font-size:1.7rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:.86rem;color:var(--sub)}

/* ---------- sections ---------- */
section{padding:76px 0}
section.alt{background:#fff}
section.dark{background:var(--navy);color:#e9ebff}
section.dark h2,section.dark h3{color:#fff}
section h2{font-size:2rem;margin:0 0 .6em;font-weight:900;letter-spacing:-.3px}
section h2 small{display:block;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.lead2{font-size:1.06rem;color:var(--sub);max-width:46em}
section.dark .lead2{color:#b7bce6}

/* ---------- feature cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border-radius:var(--r);padding:26px 24px 28px;background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(60,50,140,.2)}
.card .ic{width:48px;height:48px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:12px;box-shadow:0 10px 22px rgba(108,76,255,.35)}
.card:nth-child(2) .ic{background:var(--grad2)}
.card:nth-child(3) .ic{background:linear-gradient(120deg,#ffb74a,#ff4f9a)}
.card:nth-child(4) .ic{background:linear-gradient(120deg,#2fe3a8,#22c7ff)}
.card:nth-child(5) .ic{background:linear-gradient(120deg,#6c4cff,#22c7ff)}
.card:nth-child(6) .ic{background:linear-gradient(120deg,#ff4f9a,#6c4cff)}
.card h3{margin:.1em 0 .35em;font-size:1.12rem}
.card p{margin:0;color:var(--sub);font-size:.96rem}
section.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
section.dark .card p{color:#b7bce6}

/* ---------- before / after, two columns ---------- */
.ba{display:grid;grid-template-columns:1fr 1.25fr;gap:28px;align-items:start}
.ba figure,.two figure{margin:0}
.ba img{width:100%;border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line)}
figcaption{font-size:.86rem;color:var(--sub);margin-top:8px}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.results img{width:100%;height:150px;object-fit:contain;background:linear-gradient(135deg,#eef0fb,#f8f0f6);border-radius:12px;border:1px solid var(--line);box-shadow:none}
.arrow{display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--pink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.two img{width:100%;border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line)}

/* ---------- steps ---------- */
ol.steps{padding-left:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;margin:1em 0;padding-left:60px;position:relative}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-3px;width:42px;height:42px;border-radius:14px;background:var(--grad);color:#fff;font-weight:800;text-align:center;line-height:42px;box-shadow:0 8px 20px rgba(255,79,154,.35)}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:q}
.steps3 .st{background:var(--card);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);border:1px solid var(--line);position:relative}
.steps3 .st::before{counter-increment:q;content:"0" counter(q);font-size:2.6rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;line-height:1;margin-bottom:6px}
.steps3 .st h3{margin:.1em 0 .3em}.steps3 .st p{margin:0;color:var(--sub)}

ul{padding-left:1.2em}
ul li::marker{color:var(--pink)}
code{background:#eef0fb;border-radius:7px;padding:2px 7px;font-size:.9em}

/* ---------- tables, details ---------- */
table{border-collapse:separate;border-spacing:0;width:100%;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line)}
th,td{border-bottom:1px solid var(--line);padding:13px 18px;text-align:left;font-size:.96rem;vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
th{background:#f1f2fb;width:24%;font-weight:700}
details{border-radius:16px;padding:14px 20px;margin:12px 0;background:var(--card);border:1px solid var(--line);box-shadow:0 6px 18px rgba(40,40,90,.06)}
details[open]{border-color:var(--violet)}
summary{cursor:pointer;font-weight:700}

/* ---------- pricing ---------- */
.price{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px}
.plan{background:var(--card);border-radius:24px;padding:32px;box-shadow:var(--shadow);border:1px solid var(--line)}
.plan.pro{background:var(--navy);color:#fff;border:0;position:relative;box-shadow:0 30px 70px rgba(108,76,255,.45)}
.plan.pro::before{content:"";position:absolute;inset:-2px;border-radius:26px;background:var(--grad);z-index:-1}
.plan h3{margin:0 0 4px;font-size:1.2rem}
.plan .amt{font-size:2.8rem;font-weight:900;line-height:1.1}
.plan.pro .amt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan ul{margin:14px 0 20px;padding-left:1.1em;color:var(--sub)}
.plan.pro ul{color:#cdd1f5}

/* ---------- inner pages ---------- */
.page-title{color:#fff;padding:62px 0 54px;background:
  radial-gradient(700px 360px at 10% 0%,rgba(108,76,255,.6),transparent 60%),
  radial-gradient(700px 360px at 95% 40%,rgba(255,79,154,.4),transparent 60%),var(--navy)}
.page-title h1{margin:0;font-size:2.4rem;font-weight:900}
.page-title p{margin:.4em 0 0;color:#c3c8ee}
.blogcard{border-radius:var(--r);padding:20px 24px;background:var(--card);margin:14px 0;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .2s}
.blogcard:hover{transform:translateX(6px)}
.blogcard b.n{display:inline-block;width:32px;height:32px;border-radius:10px;background:var(--grad);color:#fff;text-align:center;line-height:32px;margin-right:10px}
.tag{display:inline-block;font-size:.75rem;background:#eef0fb;border-radius:999px;padding:1px 12px;color:var(--violet);margin-left:8px;font-weight:700}
.board{width:100%}
.board th{width:auto;text-align:left}
.board td.d,.board td.t{white-space:nowrap;color:var(--sub);width:1%}
.post h2{font-size:1.4rem}
.langpick{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;background:
  radial-gradient(800px 500px at 15% 10%,rgba(108,76,255,.6),transparent 60%),
  radial-gradient(800px 500px at 90% 80%,rgba(255,79,154,.45),transparent 60%),var(--navy)}
.langpick h1{font-size:3rem;margin:.3em 0}
.langpick .btn{font-size:1.15rem;padding:16px 40px}

/* ---------- CTA + footer ---------- */
.cta{background:var(--grad);color:#fff;text-align:center;padding:70px 0}
.cta h2{color:#fff;margin:0 0 .3em}
.cta .btn{background:#fff;color:var(--violet)!important;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.cta .btn.alt{background:rgba(255,255,255,.18);color:#fff!important;border:1px solid rgba(255,255,255,.6)}
footer{padding:36px 0;background:var(--navy);font-size:.85rem;color:#98a0d4}
footer a{color:#c3c8ee}

@media(max-width:900px){
  header.hero2 .wrap,.ba,.two,.price{grid-template-columns:1fr}
  .grid3,.steps3{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}.stats .s{border-right:0}
  .hero2 h1{font-size:2.2rem}.results{grid-template-columns:repeat(2,1fr)}
  .hero2 .shot .float{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* blog feed (Blogger) */
.feed .card img.thumb{width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:10px}
.feed .card h3 a{color:var(--ink);text-decoration:none}.feed .card h3 a:hover{color:var(--violet)}
ul.feedlist{list-style:none;padding:0;margin:0}
ul.feedlist li{padding:12px 4px;border-bottom:1px solid var(--line)}
ul.feedlist .fdate{display:inline-block;min-width:110px;color:var(--sub);font-size:.88rem}
ul.feedlist a{color:var(--ink);text-decoration:none;font-weight:600}ul.feedlist a:hover{color:var(--violet)}