/*
Theme Name: Style Mi
Theme URI: https://example.com/style-mi
Author: Style Mi
Description: A fashion-forward, interactive WordPress theme for Style Mi — AI styling, community, designer marketplace and app promotion.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: style-mi
*/

:root{
  --sm-bg:#08060d;
  --sm-bg-2:#11091c;
  --sm-card:rgba(255,255,255,.075);
  --sm-card-2:rgba(255,255,255,.11);
  --sm-purple:#8b5cf6;
  --sm-purple-2:#b892ff;
  --sm-purple-3:#5b21b6;
  --sm-lilac:#e9ddff;
  --sm-pink:#ff77c8;
  --sm-ink:#f8f6fb;
  --sm-muted:#bdb3c9;
  --sm-line:rgba(255,255,255,.12);
  --sm-max:1240px;
  --sm-radius:28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--sm-bg)}
body{margin:0;background:
  radial-gradient(circle at 12% 5%,rgba(139,92,246,.22),transparent 28%),
  radial-gradient(circle at 90% 20%,rgba(255,119,200,.10),transparent 24%),
  linear-gradient(180deg,#09060f 0%,#07050b 100%);
  color:var(--sm-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.20;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 72%);z-index:-1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
::selection{background:var(--sm-purple);color:#fff}

.sm-wrap{width:min(calc(100% - 40px),var(--sm-max));margin-inline:auto}
.sm-kicker{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--sm-line);padding:8px 12px;border-radius:999px;color:var(--sm-lilac);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.04);backdrop-filter:blur(18px)}
.sm-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--sm-purple-2),var(--sm-pink));box-shadow:0 0 18px var(--sm-purple-2)}
.sm-section{padding:112px 0;position:relative}
.sm-title{font-family:"DM Sans",Inter,sans-serif;font-size:clamp(42px,7vw,88px);line-height:.92;letter-spacing:-.065em;margin:22px 0 20px;max-width:1000px}
.sm-title em{font-style:normal;color:transparent;background:linear-gradient(110deg,#fff 0%,#d9c6ff 44%,#ff9ddd 100%);-webkit-background-clip:text;background-clip:text}
.sm-section-title{font-family:"DM Sans",Inter,sans-serif;font-size:clamp(34px,4.7vw,62px);line-height:1;letter-spacing:-.045em;margin:18px 0 16px}
.sm-copy{color:var(--sm-muted);font-size:clamp(16px,2vw,20px);line-height:1.7;max-width:720px}
.sm-grid{display:grid;gap:22px}

/* Header */
.sm-site-header{position:fixed;top:0;left:0;right:0;z-index:999;padding:14px 0;transition:.3s ease}
.sm-site-header.is-scrolled{background:rgba(8,6,13,.72);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.08)}
.sm-nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.sm-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em;font-size:21px}
.sm-brand-mark{width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,var(--sm-purple-2),var(--sm-purple-3));display:grid;place-items:center;box-shadow:0 10px 32px rgba(139,92,246,.35);position:relative;overflow:hidden}
.sm-brand-mark:before{content:"";width:15px;height:15px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg) translateY(-2px)}
.sm-nav-links{display:flex;gap:28px;color:#d8d1e0;font-size:14px}
.sm-nav-links a{position:relative}
.sm-nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--sm-purple-2);transition:.25s}
.sm-nav-links a:hover:after{right:0}
.sm-nav-cta,.sm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 20px;font-weight:700;transition:.25s ease;border:1px solid transparent}
.sm-nav-cta{background:#fff;color:#140a20;padding:11px 17px;font-size:14px}
.sm-btn:hover,.sm-nav-cta:hover{transform:translateY(-2px)}
.sm-btn-primary{background:linear-gradient(135deg,#a674ff 0%,#7c3aed 65%,#6822c6 100%);color:#fff;box-shadow:0 18px 48px rgba(124,58,237,.28)}
.sm-btn-ghost{border-color:var(--sm-line);background:rgba(255,255,255,.04)}
.sm-menu-toggle{display:none;background:none;border:0;color:#fff;font-size:24px}

/* Hero */
.sm-hero{min-height:100vh;display:flex;align-items:center;padding:138px 0 70px;position:relative}
.sm-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:58px}
.sm-hero .sm-copy{max-width:650px}
.sm-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.sm-mini-note{font-size:12px;color:#94899f;margin-top:15px}
.sm-orbit{position:absolute;width:460px;height:460px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-150px;top:140px;animation:smSpin 26s linear infinite}
.sm-orbit:after,.sm-orbit:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--sm-purple-2);box-shadow:0 0 32px var(--sm-purple-2)}
.sm-orbit:before{top:35px;left:90px}.sm-orbit:after{right:25px;bottom:115px;background:var(--sm-pink)}
@keyframes smSpin{to{transform:rotate(360deg)}}

.sm-phone-stage{position:relative;min-height:650px;display:grid;place-items:center}
.sm-phone-glow{position:absolute;width:390px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.38),transparent 65%);filter:blur(20px)}
.sm-phone{width:330px;border-radius:48px;background:#0c0910;border:9px solid #20172c;box-shadow:0 45px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);padding:13px;position:relative;z-index:2;transform:rotate(4deg);transition:.35s cubic-bezier(.2,.8,.2,1)}
.sm-phone:hover{transform:rotate(0deg) translateY(-8px)}
.sm-phone-screen{height:610px;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#f6f2ff,#eee5ff 54%,#eadcfb);position:relative;color:#24112f}
.sm-phone-top{display:flex;align-items:center;justify-content:space-between;padding:19px 18px 10px;font-size:13px;font-weight:800}
.sm-mobile-card{margin:8px 12px;border-radius:23px;overflow:hidden;background:#fff;box-shadow:0 15px 35px rgba(64,26,91,.14);position:relative}
.sm-mobile-card img{width:100%;height:420px;object-fit:cover}
.sm-mobile-badge{position:absolute;top:14px;left:14px;background:rgba(20,10,26,.75);color:#fff;padding:8px 10px;border-radius:999px;font-size:10px;backdrop-filter:blur(8px)}
.sm-mobile-actions{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 15px}
.sm-chip-row{display:flex;gap:6px}.sm-chip{background:#f0e7ff;color:#6d28d9;font-size:10px;padding:6px 8px;border-radius:999px;font-weight:700}
.sm-floating-card{position:absolute;z-index:5;padding:14px 16px;border:1px solid var(--sm-line);background:rgba(18,10,29,.78);backdrop-filter:blur(18px);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.25);font-size:12px;color:#d9d0e2;animation:smFloat 5s ease-in-out infinite}
.sm-floating-card strong{display:block;color:#fff;font-size:14px;margin-bottom:4px}
.sm-float-a{left:5%;top:17%}.sm-float-b{right:0;bottom:17%;animation-delay:-2s}
@keyframes smFloat{50%{transform:translateY(-12px)}}

/* Marquee */
.sm-marquee{overflow:hidden;border-block:1px solid var(--sm-line);background:rgba(255,255,255,.025);padding:18px 0}
.sm-marquee-track{display:flex;width:max-content;gap:38px;animation:smMarquee 25s linear infinite;color:#d9d0e2;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800}
.sm-marquee-track span{display:flex;align-items:center;gap:38px}.sm-marquee-track span:after{content:"◆";color:var(--sm-purple-2)}
@keyframes smMarquee{to{transform:translateX(-50%)}}

/* Steps */
.sm-steps{grid-template-columns:repeat(4,1fr);margin-top:48px}
.sm-step{min-height:320px;padding:28px;border:1px solid var(--sm-line);border-radius:var(--sm-radius);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));position:relative;overflow:hidden;transition:.3s}
.sm-step:hover{transform:translateY(-8px);border-color:rgba(184,146,255,.5)}
.sm-step-num{font-size:12px;color:var(--sm-purple-2);font-weight:800;letter-spacing:.12em}
.sm-step h3{font-size:25px;line-height:1.1;letter-spacing:-.03em;margin:75px 0 12px}
.sm-step p{color:var(--sm-muted);line-height:1.65;font-size:14px}
.sm-step-art{position:absolute;right:-35px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.3),rgba(139,92,246,.08) 42%,transparent 70%);border:1px solid rgba(255,255,255,.08)}

/* Feature editorial */
.sm-editorial{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;margin-top:50px}
.sm-editorial-card{border-radius:34px;overflow:hidden;position:relative;min-height:660px;background:#171020;border:1px solid var(--sm-line)}
.sm-editorial-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.sm-editorial-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,6,13,.88) 100%)}
.sm-editorial-copy{position:absolute;left:30px;right:30px;bottom:28px;z-index:2}
.sm-editorial-copy h3{font-size:clamp(30px,4vw,48px);letter-spacing:-.045em;margin:0 0 10px}
.sm-editorial-copy p{color:#d5ccd9;max-width:500px;line-height:1.6}
.sm-editorial-side{display:grid;gap:24px}
.sm-feature-card{border-radius:30px;padding:30px;min-height:318px;border:1px solid var(--sm-line);background:linear-gradient(145deg,rgba(139,92,246,.17),rgba(255,255,255,.035));position:relative;overflow:hidden}
.sm-feature-card:nth-child(2){background:linear-gradient(145deg,rgba(255,119,200,.09),rgba(255,255,255,.035))}
.sm-feature-card h3{font-size:30px;letter-spacing:-.04em;margin:0 0 12px}
.sm-feature-card p{color:var(--sm-muted);line-height:1.65;max-width:430px}
.sm-feature-icon{position:absolute;right:24px;bottom:18px;font-size:72px;opacity:.18;transform:rotate(-7deg)}

/* Community */
.sm-community-grid{grid-template-columns:1fr 1fr 1fr;margin-top:44px;align-items:stretch}
.sm-community-tile{position:relative;min-height:370px;border-radius:28px;overflow:hidden;border:1px solid var(--sm-line);background:#171020}
.sm-community-tile:nth-child(2){margin-top:70px}.sm-community-tile:nth-child(3){margin-top:20px}
.sm-community-tile img{width:100%;height:100%;object-fit:cover;transition:.55s ease}
.sm-community-tile:hover img{transform:scale(1.045)}
.sm-community-overlay{position:absolute;inset:auto 14px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center;background:rgba(12,8,18,.64);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.13);padding:11px 13px;border-radius:17px;font-size:12px}
.sm-community-actions{display:flex;gap:10px}
.sm-community-actions span{display:inline-flex;align-items:center;gap:4px}

/* Marketplace */
.sm-market-shell{margin-top:48px;border:1px solid var(--sm-line);border-radius:38px;background:linear-gradient(120deg,rgba(139,92,246,.16),rgba(255,255,255,.03));padding:36px;display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center;overflow:hidden}
.sm-market-card{background:#fff;color:#23152b;border-radius:28px;padding:25px;box-shadow:0 30px 70px rgba(0,0,0,.25);transform:rotate(-2deg);transition:.3s}
.sm-market-card:hover{transform:rotate(0deg) translateY(-4px)}
.sm-market-head{display:flex;justify-content:space-between;align-items:center}
.sm-verified{font-size:11px;background:#efe7ff;color:#6d28d9;padding:7px 9px;border-radius:999px;font-weight:800}
.sm-market-profile{display:flex;gap:14px;align-items:center;margin:28px 0}.sm-avatar{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#6d28d9,#c084fc);display:grid;place-items:center;color:#fff;font-weight:900}
.sm-market-card h4{margin:0;font-size:20px}.sm-market-card p{margin:4px 0 0;color:#75687a;font-size:13px}
.sm-quote-row{display:flex;justify-content:space-between;padding:15px 0;border-top:1px solid #ece4ef;font-size:13px}.sm-quote-row strong{font-size:17px}.sm-market-actions{display:flex;gap:8px;margin-top:12px}.sm-market-actions span{flex:1;text-align:center;padding:12px;border-radius:13px;font-weight:800;font-size:12px;background:#eee7f6}.sm-market-actions .accept{background:#7c3aed;color:white}
.sm-market-copy h3{font-size:clamp(34px,5vw,58px);letter-spacing:-.055em;line-height:.98;margin:0 0 18px}.sm-market-copy p{color:var(--sm-muted);line-height:1.7}.sm-market-list{display:grid;gap:11px;margin-top:22px}.sm-market-list div{display:flex;gap:10px;align-items:flex-start;color:#ded5e4;font-size:14px}.sm-market-list b{color:var(--sm-purple-2)}

/* Bento */
.sm-bento{grid-template-columns:1.25fr .75fr .75fr;grid-auto-rows:240px;margin-top:48px}
.sm-bento-card{border:1px solid var(--sm-line);border-radius:28px;padding:26px;background:rgba(255,255,255,.04);position:relative;overflow:hidden;transition:.3s}
.sm-bento-card:hover{background:rgba(255,255,255,.07);transform:translateY(-4px)}
.sm-bento-card.tall{grid-row:span 2}.sm-bento-card.wide{grid-column:span 2}
.sm-bento-card h3{font-size:25px;letter-spacing:-.04em;margin:0 0 10px}.sm-bento-card p{color:var(--sm-muted);line-height:1.6;font-size:14px;max-width:430px}
.sm-bento-shape{position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border:1px solid rgba(255,255,255,.09);border-radius:38% 62% 55% 45% / 55% 39% 61% 45%;background:radial-gradient(circle at 35% 35%,rgba(184,146,255,.35),rgba(139,92,246,.06) 55%,transparent);transform:rotate(25deg)}

/* CTA / stores */
.sm-download-card{border-radius:42px;padding:70px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:linear-gradient(135deg,#25103d 0%,#6d28d9 50%,#b65bba 100%);box-shadow:0 35px 120px rgba(92,40,160,.25)}
.sm-download-card:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid rgba(255,255,255,.16);right:-120px;top:-180px;box-shadow:0 0 0 60px rgba(255,255,255,.035),0 0 0 120px rgba(255,255,255,.025)}
.sm-download-card h2{font-size:clamp(42px,6vw,76px);line-height:.95;letter-spacing:-.055em;margin:0 0 18px;max-width:850px;position:relative;z-index:1}.sm-download-card p{position:relative;z-index:1;max-width:650px;color:#eee7f6;line-height:1.7}
.sm-store-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;position:relative;z-index:2}.sm-store{display:flex;align-items:center;gap:12px;background:#09070c;color:#fff;padding:12px 17px;border-radius:16px;min-width:180px;box-shadow:0 15px 35px rgba(0,0,0,.22);transition:.25s}.sm-store:hover{transform:translateY(-3px)}.sm-store-icon{font-size:25px}.sm-store small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#bbb}.sm-store strong{display:block;font-size:16px}

/* Footer */
.sm-footer{padding:58px 0 34px}.sm-footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:28px;padding-bottom:42px;border-bottom:1px solid var(--sm-line)}.sm-footer-copy{color:var(--sm-muted);max-width:440px;line-height:1.7;font-size:14px}.sm-footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#9d91a8}.sm-footer-links{display:grid;gap:11px;color:#ddd4e3;font-size:14px}.sm-socials{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.sm-socials a{border:1px solid var(--sm-line);padding:9px 11px;border-radius:12px;font-size:12px;color:#d7cfdd}.sm-footer-bottom{display:flex;justify-content:space-between;gap:20px;color:#7e7386;font-size:12px;padding-top:24px}

/* Cursor + reveal */
.sm-cursor-glow{position:fixed;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.10),transparent 65%);transform:translate(-50%,-50%);pointer-events:none;z-index:1;transition:opacity .2s}.sm-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.sm-reveal.is-visible{opacity:1;transform:none}

/* Page fallbacks */
.sm-content{width:min(calc(100% - 40px),900px);margin:140px auto 80px}.sm-content h1{font-size:clamp(42px,7vw,70px);letter-spacing:-.05em}.sm-content p,.sm-content li{color:var(--sm-muted);line-height:1.7}

@media(max-width:980px){
  .sm-nav-links{display:none}.sm-menu-toggle{display:block}.sm-nav-cta{display:none}.sm-nav-links.is-open{display:flex;position:absolute;top:64px;left:20px;right:20px;flex-direction:column;padding:24px;background:rgba(12,8,18,.96);border:1px solid var(--sm-line);border-radius:20px;backdrop-filter:blur(18px)}
  .sm-hero-grid,.sm-editorial,.sm-market-shell{grid-template-columns:1fr}.sm-hero{padding-top:120px}.sm-phone-stage{min-height:600px}.sm-steps{grid-template-columns:repeat(2,1fr)}.sm-bento{grid-template-columns:1fr 1fr}.sm-bento-card.tall{grid-row:span 1}.sm-bento-card.wide{grid-column:span 1}.sm-community-grid{grid-template-columns:1fr 1fr}.sm-community-tile:nth-child(2),.sm-community-tile:nth-child(3){margin-top:0}.sm-footer-grid{grid-template-columns:1fr 1fr}.sm-footer-grid>div:first-child{grid-column:span 2}.sm-download-card{padding:48px}
}
@media(max-width:640px){
  .sm-wrap{width:min(calc(100% - 28px),var(--sm-max))}.sm-section{padding:82px 0}.sm-title{font-size:54px}.sm-hero-grid{gap:30px}.sm-hero-actions{flex-direction:column;align-items:stretch}.sm-btn{width:100%}.sm-phone{width:286px}.sm-phone-screen{height:540px}.sm-mobile-card img{height:360px}.sm-phone-stage{min-height:560px}.sm-floating-card{display:none}.sm-steps,.sm-community-grid,.sm-bento,.sm-footer-grid{grid-template-columns:1fr}.sm-footer-grid>div:first-child{grid-column:auto}.sm-step{min-height:280px}.sm-editorial-card{min-height:520px}.sm-market-shell{padding:22px}.sm-download-card{padding:38px 24px;border-radius:28px}.sm-footer-bottom{flex-direction:column}.sm-community-tile{min-height:440px}.sm-cursor-glow{display:none}
}