/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --purple:#7C3AED;--orange:#F97316;--pink:#F472B6;
  --teal:#A8D2DF;--cream:#FFF7ED;
  --bg:#FFFFFF;--bg-soft:#FAF5FF;--bg-warm:#FFF7ED;
  --text:#1E1B4B;--text-muted:#6B7280;
  --radius:1rem;--radius-lg:1.5rem;--radius-xl:2rem;
  --shadow:0 4px 24px rgba(124,58,237,.08);
  --shadow-hover:0 20px 60px rgba(124,58,237,.15);
  --shadow-orange:0 8px 30px rgba(249,115,22,.2);
  --transition:all .35s cubic-bezier(.4,0,.2,1);
  --grad-main:linear-gradient(135deg,#7C3AED,#9333EA);
  --grad-orange:linear-gradient(135deg,#F97316,#FB923C);
  --grad-mix:linear-gradient(135deg,#7C3AED 0%,#F97316 50%,#FB923C 100%);
  --grad-soft:linear-gradient(135deg,#FAF5FF,#FFF7ED);
  --grad-hero:linear-gradient(160deg,#FAF5FF 0%,#FFFFFF 40%,#FFF7ED 100%);
}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}

/* ===== HEADER ===== */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(253,240,245,.85);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(137,121,179,.08);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:4rem;
}
.logo{display:flex;align-items:center;gap:.625rem}
.logo__text{font-weight:700;font-size:1.15rem;color:var(--text)}
.nav{display:flex;gap:1.5rem}
.nav__link{
  font-size:.875rem;font-weight:500;color:var(--text-muted);
  transition:var(--transition);position:relative;
}
.nav__link:hover{color:var(--purple)}
.nav__link::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--purple);border-radius:2px;transition:var(--transition);
}
.nav__link:hover::after{width:100%}

/* ===== HERO ===== */
.hero{
  position:relative;padding:5rem 0 4rem;text-align:center;
  overflow:hidden;background:var(--bg-soft);
}
.hero__inner{position:relative;z-index:2}
.hero__badge{
  display:inline-block;padding:.375rem 1rem;border-radius:2rem;
  font-size:.8rem;font-weight:600;color:var(--purple);
  background:rgba(137,121,179,.1);margin-bottom:1.5rem;
  letter-spacing:.02em;
}
.hero__title{
  font-size:clamp(2rem,5vw,3.5rem);font-weight:800;
  line-height:1.15;margin-bottom:1.25rem;color:var(--text);
}
.gradient-text{
  background:var(--grad-main);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero__subtitle{
  font-size:clamp(.95rem,2vw,1.2rem);color:var(--text-muted);
  max-width:540px;margin:0 auto 2rem;
}
.hero__cta{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.875rem 2rem;border-radius:24px;
  background:var(--grad-main);
  color:#fff;font-weight:600;font-size:1rem;
  transition:var(--transition);box-shadow:0 4px 20px rgba(137,121,179,.3);
}
.hero__cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(137,121,179,.4)}

/* Hero blobs */
.hero__blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;pointer-events:none}
.hero__blob--1{width:400px;height:400px;background:var(--purple);top:-100px;right:-100px}
.hero__blob--2{width:300px;height:300px;background:var(--pink);bottom:-50px;left:-50px}
.hero__blob--3{width:250px;height:250px;background:var(--teal);top:50%;left:60%;transform:translate(-50%,-50%)}

/* ===== SECTIONS ===== */
.section-title{
  font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;
  text-align:center;margin-bottom:.5rem;
  color:var(--purple);position:relative;display:inline-block;
}
/* Decorative sparkles on section titles */
.section-title::before{
  content:'\2726';position:absolute;top:-.2em;left:-.8em;
  font-size:.5em;color:var(--pink);opacity:.7;
}
.section-title::after{
  content:'\2727';position:absolute;bottom:0;right:-.8em;
  font-size:.45em;color:var(--teal);opacity:.6;
}
/* Center wrapper for section titles with sparkles */
.features .container > .section-title,
.about__content .section-title{
  display:block;
}
.section-subtitle{
  text-align:center;color:var(--text-muted);
  margin-bottom:3rem;font-size:1rem;
}

/* ===== FEATURES ===== */
.features{padding:5rem 0}

/* ===== CARDS GRID ===== */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
}
.card{
  position:relative;display:flex;flex-direction:column;
  padding:2rem;border-radius:16px;
  background:#fff;border:1px solid rgba(137,121,179,.08);
  box-shadow:var(--shadow);transition:var(--transition);
  overflow:hidden;cursor:pointer;color:var(--accent,var(--purple));
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--accent-grad,var(--grad-main));opacity:0;
  transition:var(--transition);border-radius:16px 16px 0 0;
}
.card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-hover);
}
.card:hover::before{opacity:1}

/* Icon wrap with gradient background circle */
.card__icon-wrap{
  width:64px;height:64px;border-radius:50%;
  background:var(--accent-grad,var(--grad-main));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;transition:var(--transition);
  color:#fff;
}
.card__icon-wrap svg{color:#fff}
.card:hover .card__icon-wrap{
  transform:scale(1.08);
  box-shadow:0 4px 16px rgba(137,121,179,.25);
}
.card__icon{width:32px;height:32px}
.card__title{
  font-size:1.15rem;font-weight:700;color:var(--text);
  margin-bottom:.5rem;
}
.card__desc{
  font-size:.875rem;color:var(--text-muted);line-height:1.6;
  flex:1;
}
.card__arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(137,121,179,.08);
  color:var(--purple);font-size:1.2rem;font-weight:700;
  margin-top:1rem;align-self:flex-end;
  transition:var(--transition);
}
.card:hover .card__arrow{
  background:var(--grad-main);color:#fff;
  transform:translateX(4px);
}

/* ===== ABOUT ===== */
.about{padding:5rem 0;background:var(--bg-soft)}
.about__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
}
.about__list{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.about__list li{display:flex;align-items:center;gap:.75rem;font-size:1rem}
.about__check{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--grad-main);
  color:#fff;font-size:.75rem;font-weight:700;
}
.about__visual{display:flex;align-items:center;justify-content:center}
.about__shapes{position:relative;width:280px;height:280px}
.about__shape{position:absolute;border-radius:var(--radius-xl);opacity:.6}
.about__shape--1{
  width:180px;height:180px;background:linear-gradient(135deg,var(--purple),transparent);
  top:0;left:0;animation:float 6s ease-in-out infinite;
}
.about__shape--2{
  width:140px;height:140px;background:linear-gradient(135deg,var(--pink),transparent);
  bottom:0;right:0;animation:float 6s ease-in-out infinite 2s;
}
.about__shape--3{
  width:100px;height:100px;background:linear-gradient(135deg,var(--teal),transparent);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:float3 6s ease-in-out infinite 4s;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
@keyframes float3{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%{transform:translate(-50%,-50%) translateY(-16px)}
}

/* ===== PAGE OVERLAYS ===== */
.page-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(253,240,245,.97);backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:2rem 1rem;
  opacity:0;pointer-events:none;visibility:hidden;
}
.page-overlay:target{opacity:1;pointer-events:all;visibility:visible}
.page-overlay__content{
  max-width:600px;width:100%;
  padding:2.5rem;border-radius:16px;
  background:#fff;box-shadow:0 8px 60px rgba(137,121,179,.12);
  margin-top:2rem;
  animation:slideUp .4s ease;
}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.page-overlay__back{
  display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:none;color:var(--text-muted);
  font-size:.9rem;cursor:pointer;margin-bottom:1.5rem;
  transition:var(--transition);font-family:inherit;
}
.page-overlay__back:hover{color:var(--purple)}
.page-overlay__content h2{
  font-size:1.75rem;font-weight:800;margin-bottom:.5rem;
  color:var(--purple);position:relative;display:inline-block;
}
/* Sparkles on overlay page titles */
.page-overlay__content h2::before{
  content:'\2726';position:absolute;top:-.15em;left:-.7em;
  font-size:.45em;color:var(--pink);opacity:.7;
}
.page-overlay__content h2::after{
  content:'\2727';position:absolute;bottom:.05em;right:-.7em;
  font-size:.4em;color:var(--teal);opacity:.6;
}
.page-overlay__desc{color:var(--text-muted);margin-bottom:1.5rem}

/* ===== FORMS ===== */
.demo-form{display:flex;flex-direction:column;gap:.75rem}
.demo-form label{font-size:.875rem;font-weight:600;color:var(--text)}
.demo-form textarea,
.demo-form select,
.demo-form input[type="number"]{
  width:100%;padding:.75rem 1rem;border:1.5px solid rgba(137,121,179,.15);
  border-radius:var(--radius);font-size:.9rem;font-family:inherit;
  transition:var(--transition);background:#fff;color:var(--text);
}
.demo-form textarea:focus,
.demo-form select:focus,
.demo-form input:focus{
  outline:none;border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(137,121,179,.12);
}
.demo-form__row{display:flex;gap:1rem}
.demo-form__row>div{flex:1}

/* Upload area */
.upload-area{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2.5rem 1rem;border:2px dashed rgba(168,210,223,.5);border-radius:var(--radius);
  cursor:pointer;transition:var(--transition);gap:.5rem;color:var(--text-muted);
}
.upload-area:hover{border-color:var(--teal);background:rgba(168,210,223,.06)}
.upload-area__icon{font-size:2rem}
.upload-area.has-file{border-color:var(--teal);background:rgba(168,210,223,.08)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.75rem 1.5rem;border-radius:24px;border:none;
  font-size:.9rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:var(--transition);gap:.5rem;
}
.btn--primary{
  background:var(--grad-main);
  color:#fff;box-shadow:0 4px 16px rgba(137,121,179,.25);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(137,121,179,.35);
}
.btn--primary:active{transform:translateY(0)}
.btn--primary.loading{opacity:.7;pointer-events:none}

/* Demo result */
.demo-result{
  margin-top:1rem;padding:1rem 1.25rem;border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid rgba(137,121,179,.1);
  font-size:.9rem;line-height:1.7;display:none;
  animation:fadeIn .4s ease;
}
.demo-result.visible{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Calculator -- wide overlay */
.page-overlay__content--wide{max-width:780px}
.page-overlay__content--extra-wide{max-width:960px}

/* Calculator -- shared */
.calc-field{display:flex;flex-direction:column;gap:.375rem}
.calc-inp{
  padding:.5rem .65rem;border:1.5px solid rgba(137,121,179,.15);border-radius:.6rem;
  font-size:.85rem;font-family:inherit;color:var(--text);background:#fff;
  transition:var(--transition);
}
.calc-inp:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(137,121,179,.12)}
.calc-inp--name{width:100%;min-width:100px}
.calc-inp--num{width:90px;text-align:right}
.calc-inp--unit{width:72px;padding:.5rem .35rem}

/* Tabs */
.calc-tabs{
  display:flex;gap:.5rem;margin-bottom:1.5rem;
  border-bottom:2px solid rgba(137,121,179,.1);padding-bottom:0;
}
.calc-tabs__btn{
  flex:1;padding:.7rem 1rem;border:none;background:none;
  font-size:.9rem;font-weight:600;font-family:inherit;
  color:var(--text-muted);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:var(--transition);border-radius:.5rem .5rem 0 0;
}
.calc-tabs__btn:hover{color:var(--purple);background:rgba(137,121,179,.04)}
.calc-tabs__btn--active{
  color:var(--purple);border-bottom-color:var(--purple);
  background:rgba(137,121,179,.06);
}

/* Table */
.calc-table-wrap{overflow-x:auto;margin-bottom:1rem;border-radius:var(--radius);border:1px solid rgba(137,121,179,.1)}
.calc-table{width:100%;border-collapse:collapse;font-size:.85rem}
.calc-table th{
  text-align:left;padding:.6rem .5rem;font-weight:600;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);
  background:var(--bg-soft);border-bottom:1px solid rgba(137,121,179,.1);white-space:nowrap;
}
.calc-table td{padding:.45rem .5rem;border-bottom:1px solid rgba(137,121,179,.06);vertical-align:middle}
.calc-table tbody tr:last-child td{border-bottom:none}
.calc-table tbody tr:hover{background:rgba(137,121,179,.03)}
.calc-row-cost{font-weight:700;color:var(--purple);white-space:nowrap;text-align:right;min-width:70px}
.calc-row-del{
  width:28px;height:28px;border:none;background:none;
  color:#c4b5d6;font-size:1.2rem;cursor:pointer;
  border-radius:50%;transition:var(--transition);
  display:flex;align-items:center;justify-content:center;
}
.calc-row-del:hover{color:#ef4444;background:rgba(239,68,68,.08)}

/* Add row button */
.btn--outline{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.2rem;border-radius:24px;
  border:1.5px dashed rgba(137,121,179,.3);background:none;
  font-size:.85rem;font-weight:600;cursor:pointer;
  font-family:inherit;color:var(--text-muted);
  transition:var(--transition);margin-bottom:1rem;
}
.btn--outline:hover{border-color:var(--purple);color:var(--purple);background:rgba(137,121,179,.04)}

/* Extras row */
.calc-extras{
  display:flex;gap:1rem;margin-bottom:1rem;
}
.calc-extras .calc-field{flex:1}
.calc-extras .calc-inp--num{width:100%}

/* Result block */
.calc-result-block{
  padding:1rem 1.25rem;border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid rgba(137,121,179,.1);
  margin-bottom:1rem;
}
.calc-result-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.35rem 0;
}
.calc-result-row span{color:var(--text-muted);font-size:.9rem}
.calc-result-row strong{
  font-size:1.15rem;font-weight:800;
  background:var(--grad-main);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Markup buttons */
.calc-markup{margin-top:.25rem}
.calc-markup__label{font-size:.8rem;font-weight:600;color:var(--text-muted);margin-bottom:.5rem;display:block}
.calc-markup__btns{display:flex;gap:.6rem}
.calc-markup__btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  padding:.75rem .5rem;border-radius:var(--radius);
  border:1.5px solid rgba(137,121,179,.15);background:#fff;cursor:pointer;
  transition:var(--transition);font-family:inherit;
}
.calc-markup__btn:hover{border-color:var(--purple);background:rgba(137,121,179,.04)}
.calc-markup__btn--active{
  border-color:var(--purple);background:rgba(137,121,179,.08);
  box-shadow:0 2px 12px rgba(137,121,179,.15);
}
.calc-markup__mult{font-size:.8rem;font-weight:700;color:var(--text-muted)}
.calc-markup__btn--active .calc-markup__mult{color:var(--purple)}
.calc-markup__price{
  font-size:1.1rem;font-weight:800;
  background:var(--grad-main);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ===== TAB 2: Resize ===== */
.resize-diameters{
  display:flex;gap:1rem;align-items:flex-end;margin-bottom:1rem;
}
.resize-diameters .calc-field{flex:1}
.resize-diameters .calc-inp--num{width:100%}
.resize-arrow-wrap{
  display:flex;align-items:center;justify-content:center;
  padding-bottom:.375rem;font-size:1.5rem;color:var(--purple);font-weight:700;
}
.resize-arrow{margin-top:1.2rem}

/* Quick buttons */
.resize-quick{margin-bottom:1rem}
.resize-quick__label{font-size:.8rem;font-weight:600;color:var(--text-muted);margin-bottom:.4rem;display:block}
.resize-quick__btns{display:flex;flex-wrap:wrap;gap:.4rem}
.resize-quick__btn{
  width:42px;height:36px;border-radius:24px;border:1.5px solid rgba(168,210,223,.4);
  background:#fff;font-size:.8rem;font-weight:600;cursor:pointer;
  font-family:inherit;color:var(--text-muted);transition:var(--transition);
}
.resize-quick__btn:hover{border-color:var(--teal);color:var(--teal);background:rgba(168,210,223,.08)}
.resize-quick__btn--active{
  border-color:var(--teal);color:#fff;
  background:var(--grad-third);box-shadow:0 2px 8px rgba(168,210,223,.3);
}

/* Coefficient badge */
.resize-coeff{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:2rem;
  background:rgba(168,210,223,.12);color:var(--teal);
  font-size:.9rem;font-weight:600;margin-bottom:1rem;
}
.resize-coeff strong{font-size:1.1rem;font-weight:800;color:var(--purple)}

/* New qty column */
.resize-new-qty{
  font-size:.9rem;color:var(--teal);white-space:nowrap;
}
.resize-new-qty strong{font-weight:800;font-size:1rem;color:var(--purple)}

/* ===== FOOTER ===== */
.footer{
  padding:2rem 0;border-top:1px solid rgba(137,121,179,.08);
  background:var(--bg);
}
.footer__inner{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.85rem;color:var(--text-muted);
}
.footer__brand{font-weight:600}

/* ===== SOCIAL CONTENT PAGE ===== */
.social-form{display:flex;flex-direction:column;gap:1.25rem}
.social-field{display:flex;flex-direction:column;gap:.4rem}
.social-field>label:first-child{font-size:.875rem;font-weight:600;color:var(--text)}
.social-input{
  width:100%;padding:.75rem 1rem;border:1.5px solid rgba(137,121,179,.15);
  border-radius:var(--radius);font-size:.9rem;font-family:inherit;
  transition:var(--transition);background:#fff;color:var(--text);
}
.social-input:focus{
  outline:none;border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(137,121,179,.12);
}

/* Radio card group (social network) */
.radio-group{display:flex;gap:.6rem;flex-wrap:wrap}
.radio-card{
  flex:1;min-width:100px;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.75rem .5rem;border-radius:var(--radius);
  border:1.5px solid rgba(137,121,179,.15);background:#fff;cursor:pointer;
  transition:var(--transition);text-align:center;
}
.radio-card input{position:absolute;opacity:0;pointer-events:none}
.radio-card__icon{font-size:1.5rem;line-height:1}
.radio-card__label{font-size:.8rem;font-weight:600;color:var(--text-muted)}
.radio-card:hover{border-color:var(--purple);background:rgba(137,121,179,.03)}
.radio-card--active,.radio-card:has(input:checked){
  border-color:var(--purple);background:rgba(137,121,179,.08);
  box-shadow:0 2px 12px rgba(137,121,179,.12);
}
.radio-card--active .radio-card__label,.radio-card:has(input:checked) .radio-card__label{color:var(--purple)}

/* Radio pill group (style) */
.radio-group--style{gap:.4rem}
.radio-pill{
  display:inline-flex;align-items:center;
  padding:.5rem 1rem;border-radius:2rem;
  border:1.5px solid rgba(137,121,179,.15);background:#fff;cursor:pointer;
  transition:var(--transition);font-size:.82rem;font-weight:600;
  color:var(--text-muted);
}
.radio-pill input{position:absolute;opacity:0;pointer-events:none}
.radio-pill:hover{border-color:var(--pink);color:var(--pink);background:rgba(223,164,199,.04)}
.radio-pill--active,.radio-pill:has(input:checked){
  border-color:var(--pink);color:#fff;
  background:var(--grad-main);
  box-shadow:0 2px 10px rgba(223,164,199,.25);
}

/* Social result */
.social-result{
  animation:fadeIn .4s ease;
}
.social-result__section{
  margin-top:1rem;padding:1.25rem;border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid rgba(137,121,179,.1);
}
.social-result__section+.social-result__section{margin-top:.75rem}
.social-result__header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.75rem;
}
.social-result__header h4{
  font-size:.9rem;font-weight:700;color:var(--text);margin:0;
}
.social-result__text{
  font-size:.88rem;line-height:1.75;color:var(--text);
  white-space:pre-wrap;
}
.social-result__hashtags{
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.social-result__hashtags .hashtag{
  display:inline-block;padding:.25rem .6rem;border-radius:2rem;
  background:rgba(137,121,179,.1);color:var(--purple);
  font-size:.8rem;font-weight:600;
}

/* Copy button */
.copy-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.35rem .75rem;border-radius:24px;
  border:1.5px solid rgba(137,121,179,.15);background:#fff;
  font-size:.78rem;font-weight:600;cursor:pointer;
  font-family:inherit;color:var(--text-muted);
  transition:var(--transition);
}
.copy-btn:hover{border-color:var(--purple);color:var(--purple);background:rgba(137,121,179,.04)}
.copy-btn--copied{
  border-color:var(--teal)!important;color:var(--teal)!important;
  background:rgba(168,210,223,.1)!important;
}

/* ===== IDEAS PAGE ===== */

/* Filter buttons row */
.ideas-filters{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem;
}
.ideas-filter{
  display:inline-flex;align-items:center;
  padding:.5rem 1rem;border-radius:2rem;
  border:1.5px solid rgba(137,121,179,.15);background:#fff;cursor:pointer;
  transition:var(--transition);font-size:.82rem;font-weight:600;
  color:var(--text-muted);font-family:inherit;
}
.ideas-filter:hover{border-color:var(--purple);color:var(--purple);background:rgba(137,121,179,.04)}
.ideas-filter--active{
  border-color:transparent;color:#fff;
  background:var(--grad-main);
  box-shadow:0 2px 10px rgba(137,121,179,.25);
}

/* Ideas grid: 3 cols desktop, 2 tablet, 1 mobile */
.ideas-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

/* Idea card */
.ideas-card{
  border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid rgba(137,121,179,.08);
  box-shadow:var(--shadow);transition:var(--transition);
}
.ideas-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}

/* Preview (color placeholder) */
.ideas-card__preview{
  position:relative;width:100%;aspect-ratio:4/3;
  display:flex;align-items:flex-start;justify-content:flex-end;
}

/* Favorite heart button */
.ideas-card__fav{
  position:absolute;top:.6rem;right:.6rem;
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.6);backdrop-filter:blur(4px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#c4b5d6;transition:var(--transition);
}
.ideas-card__fav:hover{
  background:rgba(255,255,255,.9);color:var(--pink);transform:scale(1.1);
}
.ideas-card__fav--active{
  color:var(--pink)!important;background:rgba(255,255,255,.9);
}
.ideas-card__fav--active:hover{transform:scale(1.15)}

/* Card body */
.ideas-card__body{padding:1rem}
.ideas-card__name{
  font-size:1rem;font-weight:700;color:var(--text);
  margin-bottom:.35rem;
}
.ideas-card__desc{
  font-size:.82rem;line-height:1.55;color:var(--text-muted);
  margin-bottom:.6rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Difficulty badges */
.ideas-diff{
  display:inline-block;padding:.2rem .6rem;border-radius:1rem;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
}
.ideas-diff--easy{
  background:rgba(16,185,129,.1);color:#059669;
}
.ideas-diff--medium{
  background:rgba(245,158,11,.1);color:#d97706;
}
.ideas-diff--hard{
  background:rgba(239,68,68,.1);color:#dc2626;
}

/* Empty state */
.ideas-empty{
  grid-column:1/-1;text-align:center;padding:3rem 1rem;
  color:var(--text-muted);font-size:.95rem;
}

/* ===== PHOTO ENHANCE PAGE ===== */
.photo-form{display:flex;flex-direction:column;gap:1.25rem}
.photo-field{display:flex;flex-direction:column;gap:.4rem}
.photo-field>label:first-child{font-size:.875rem;font-weight:600;color:var(--text)}

/* Upload zone */
.photo-upload{
  position:relative;display:block;
  border:2px dashed rgba(168,210,223,.5);border-radius:var(--radius);
  cursor:pointer;transition:var(--transition);overflow:hidden;
}
.photo-upload:hover{border-color:var(--teal);background:rgba(168,210,223,.04)}
.photo-upload--dragover{
  border-color:var(--purple);background:rgba(137,121,179,.06);
  box-shadow:0 0 0 4px rgba(137,121,179,.1);
}
.photo-upload--has-file{border-style:solid;border-color:var(--teal)}

/* Empty state inside upload */
.photo-upload__empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2.5rem 1rem;gap:.5rem;color:var(--text-muted);
}
.photo-upload__icon{color:var(--teal);opacity:.7}
.photo-upload__text{font-size:.9rem;font-weight:600}
.photo-upload__hint{font-size:.75rem;color:var(--text-muted);opacity:.7}

/* Preview state */
.photo-upload__preview{
  position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);min-height:180px;
}
.photo-upload__preview img{
  max-width:100%;max-height:300px;object-fit:contain;display:block;
  border-radius:calc(var(--radius) - 2px);
}
.photo-upload__remove{
  position:absolute;top:.6rem;right:.6rem;
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
  color:#fff;font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
.photo-upload__remove:hover{background:rgba(239,68,68,.8);transform:scale(1.1)}

/* Photo result */
.photo-result{animation:fadeIn .4s ease}
.photo-result__title{
  font-size:1rem;font-weight:700;color:var(--purple);
  margin-bottom:.75rem;text-align:center;
  position:relative;display:inline-block;width:100%;
}

/* Photo result grid: 3 cols desktop, 1 col mobile */
.photo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.photo-card{
  border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid rgba(137,121,179,.1);
  box-shadow:0 2px 16px rgba(137,121,179,.08);
  transition:var(--transition);
}
.photo-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(137,121,179,.15);
}

/* Placeholder image */
.photo-card__preview{
  position:relative;width:100%;aspect-ratio:4/3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;
}
.photo-card__label{
  font-size:1.2rem;font-weight:800;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
  letter-spacing:.02em;
}
.photo-card__badge{
  display:inline-block;padding:.25rem .7rem;border-radius:2rem;
  background:rgba(255,255,255,.25);backdrop-filter:blur(4px);
  color:#fff;font-size:.7rem;font-weight:600;
}

/* Card info */
.photo-card__info{padding:.75rem}
.photo-card__desc{
  font-size:.78rem;line-height:1.6;color:var(--text-muted);
  margin-bottom:.6rem;
}

/* Action buttons */
.photo-card__actions{display:flex;gap:.4rem}
.photo-card__btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  padding:.45rem .6rem;border-radius:24px;border:1.5px solid rgba(137,121,179,.15);
  background:#fff;font-size:.75rem;font-weight:600;cursor:pointer;
  font-family:inherit;color:var(--text-muted);transition:var(--transition);
}
.photo-card__btn--download:hover{
  border-color:var(--teal);color:var(--teal);background:rgba(168,210,223,.08);
}
.photo-card__btn--share:hover{
  border-color:var(--pink);color:var(--pink);background:rgba(223,164,199,.08);
}

/* ===== EXTRACT FROM CAKE PAGE ===== */
.extract-form{display:flex;flex-direction:column;gap:1.25rem}
.extract-field{display:flex;flex-direction:column;gap:.4rem}
.extract-field>label:first-child{font-size:.875rem;font-weight:600;color:var(--text)}
.extract-input{
  width:100%;padding:.75rem 1rem;border:1.5px solid rgba(137,121,179,.15);
  border-radius:var(--radius);font-size:.9rem;font-family:inherit;
  transition:var(--transition);background:#fff;color:var(--text);resize:vertical;
}
.extract-input:focus{
  outline:none;border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(137,121,179,.12);
}

/* Prompt block */
.extract-prompt-block{
  animation:fadeIn .4s ease;
  padding:1.25rem;border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid rgba(137,121,179,.1);
}
.extract-prompt-title{
  font-size:1rem;font-weight:700;color:var(--purple);
  margin-bottom:.75rem;
}
.extract-prompt-section{margin-bottom:.75rem}
.extract-prompt-section:last-of-type{margin-bottom:.5rem}
.extract-prompt-label{
  font-size:.75rem;font-weight:700;color:var(--text-muted);
  margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.04em;
}
.extract-prompt-text{
  font-size:.88rem;line-height:1.65;color:var(--text);
  padding:.6rem .8rem;border-radius:.6rem;background:#fff;
  border:1px solid rgba(137,121,179,.08);
  font-family:'Inter',system-ui,sans-serif;
}
.extract-copy-btn{margin-top:.5rem}

/* Extract result */
.extract-result{animation:fadeIn .4s ease;margin-top:.5rem}
.extract-result__title{
  font-size:1rem;font-weight:700;color:var(--purple);
  margin-bottom:.75rem;text-align:center;
  position:relative;display:inline-block;width:100%;
}
.extract-result__card{
  border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid rgba(137,121,179,.1);
  box-shadow:0 2px 16px rgba(137,121,179,.08);
  max-width:480px;margin:0 auto;
}
.extract-result__preview{
  width:100%;aspect-ratio:1/1;overflow:hidden;
}

/* Checkerboard pattern to simulate transparency */
.extract-result__checkerboard{
  width:100%;height:100%;
  background-image:
    linear-gradient(45deg, #f0e6f0 25%, transparent 25%),
    linear-gradient(-45deg, #f0e6f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f0e6f0 75%),
    linear-gradient(-45deg, transparent 75%, #f0e6f0 75%);
  background-size:24px 24px;
  background-position:0 0, 0 12px, 12px -12px, -12px 0px;
  background-color:#fff;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.75rem;
}
.extract-result__placeholder-icon{
  font-size:3rem;opacity:.6;
}
.extract-result__placeholder-text{
  font-size:1.1rem;font-weight:700;color:var(--purple);opacity:.7;
}
.extract-result__resolution{
  font-size:.75rem;font-weight:600;color:var(--text-muted);
  padding:.25rem .7rem;border-radius:2rem;
  background:rgba(137,121,179,.1);
}
.extract-result__actions{
  display:flex;gap:.6rem;padding:1rem;justify-content:center;
}
.extract-result__btn{
  flex:0 1 auto;min-width:140px;
}

/* ===== DESIGN CAKE PAGE ===== */
.design-form{display:flex;flex-direction:column;gap:1.25rem}
.design-field{display:flex;flex-direction:column;gap:.4rem}
.design-field>label:first-child{font-size:.875rem;font-weight:600;color:var(--text)}
.design-select,
.design-input{
  width:100%;padding:.75rem 1rem;border:1.5px solid rgba(137,121,179,.15);
  border-radius:var(--radius);font-size:.9rem;font-family:inherit;
  transition:var(--transition);background:#fff;color:var(--text);
}
.design-select:focus,.design-input:focus{
  outline:none;border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(137,121,179,.12);
}

/* Chips */
.design-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.design-chip{
  display:inline-flex;align-items:center;
  padding:.5rem 1rem;border-radius:2rem;
  border:1.5px solid rgba(137,121,179,.15);background:#fff;cursor:pointer;
  transition:var(--transition);font-size:.82rem;font-weight:600;
  color:var(--text-muted);font-family:inherit;
}
.design-chip:hover{border-color:var(--purple);color:var(--purple);background:rgba(137,121,179,.04)}
.design-chip--active{
  border-color:transparent;color:#fff;
  background:var(--grad-main);
  box-shadow:0 2px 10px rgba(137,121,179,.25);
}

/* Color pickers */
.design-colors{display:flex;gap:1rem;flex-wrap:wrap}
.design-color-pick{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.design-color-pick input[type="color"]{
  width:52px;height:52px;border:2px solid rgba(137,121,179,.15);border-radius:var(--radius);
  padding:2px;cursor:pointer;background:#fff;transition:var(--transition);
}
.design-color-pick input[type="color"]:hover{border-color:var(--purple)}
.design-color-pick input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
.design-color-pick input[type="color"]::-webkit-color-swatch{border:none;border-radius:.5rem}
.design-color-label{font-size:.72rem;font-weight:600;color:var(--text-muted)}

/* Design result grid 2x2 */
.design-result{animation:fadeIn .4s ease}
.design-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;
  margin-top:1rem;
}
.design-card{
  border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid rgba(137,121,179,.1);
  box-shadow:0 2px 16px rgba(137,121,179,.08);
  transition:var(--transition);
}
.design-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(137,121,179,.15);
}

/* Placeholder image */
.design-card__preview{
  position:relative;width:100%;aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;
}
.design-card__label{
  font-size:1.3rem;font-weight:800;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
  letter-spacing:.02em;
}
.design-card__badge{
  display:inline-block;padding:.25rem .7rem;border-radius:2rem;
  background:rgba(255,255,255,.25);backdrop-filter:blur(4px);
  color:#fff;font-size:.7rem;font-weight:600;
}

/* Card info */
.design-card__info{padding:.75rem}
.design-card__meta{margin-bottom:.4rem}
.design-card__occasion{
  display:inline-block;padding:.15rem .5rem;border-radius:1rem;
  background:rgba(137,121,179,.1);color:var(--purple);
  font-size:.7rem;font-weight:600;
}
.design-card__desc{
  font-size:.78rem;line-height:1.6;color:var(--text-muted);
  margin-bottom:.6rem;
}

/* Action buttons */
.design-card__actions{display:flex;gap:.4rem}
.design-card__btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  padding:.45rem .6rem;border-radius:24px;border:1.5px solid rgba(137,121,179,.15);
  background:#fff;font-size:.75rem;font-weight:600;cursor:pointer;
  font-family:inherit;color:var(--text-muted);transition:var(--transition);
}
.design-card__btn--download:hover{
  border-color:var(--teal);color:var(--teal);background:rgba(168,210,223,.08);
}
.design-card__btn--share:hover{
  border-color:var(--pink);color:var(--pink);background:rgba(223,164,199,.08);
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .cards-grid{grid-template-columns:1fr}
  .about__inner{grid-template-columns:1fr;text-align:center}
  .about__inner .section-title{text-align:center!important}
  .about__list{align-items:center}
  .about__visual{margin-top:2rem}
  .hero{padding:3.5rem 0 3rem}
  .features{padding:3rem 0}
  .about{padding:3rem 0}
  .page-overlay__content{padding:1.5rem;margin-top:1rem}
  .footer__inner{flex-direction:column;gap:.5rem;text-align:center}
  .calc-extras{flex-direction:column}
  .resize-diameters{flex-direction:column}
  .resize-arrow-wrap{transform:rotate(90deg);padding:0}
  .resize-arrow{margin-top:0}
  .calc-markup__btns{flex-direction:column}
  .calc-table{font-size:.78rem}
  .calc-inp--num{width:70px}
  .calc-inp--unit{width:60px}
  .radio-group{flex-direction:column}
  .radio-card{flex-direction:row;gap:.5rem;min-width:unset}
  .radio-group--style{flex-direction:row;flex-wrap:wrap}
  .social-result__header{flex-direction:column;align-items:flex-start;gap:.4rem}
  .design-grid{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:1fr}
  .extract-result__card{max-width:100%}
  .extract-result__actions{flex-direction:column}
  .extract-result__btn{min-width:unset;width:100%}
  .design-chips{gap:.3rem}
  .design-chip{padding:.4rem .75rem;font-size:.78rem}
  .design-colors{justify-content:center}
  .ideas-grid{grid-template-columns:1fr}
  .ideas-filters{gap:.3rem}
  .ideas-filter{padding:.4rem .75rem;font-size:.78rem}
}
@media(max-width:480px){
  .header__inner{height:3.5rem}
  .nav{gap:1rem}
  .nav__link{font-size:.8rem}
  .hero__cta{width:100%;justify-content:center}
  .demo-form__row{flex-direction:column;gap:.75rem}
}
@media(min-width:481px) and (max-width:768px){
  .ideas-grid{grid-template-columns:repeat(2,1fr)}
}

/* Photo sliders */
.photo-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #EDE5F5, #8979B3);
    outline: none;
    cursor: pointer;
}
.photo-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8979B3;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(137,121,179,0.3);
    cursor: pointer;
}
.photo-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8979B3;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(137,121,179,0.3);
    cursor: pointer;
}

/* Photo preview overflow for vignette */
.photo-upload__preview {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
.photo-upload__preview img {
    display: block;
    width: 100%;
}


/* ===== DESIGN UPGRADE 2.0 ===== */

/* Playfair Display for headings */
.hero__title, .section-title, h2 {
    font-family: 'Playfair Display', 'Inter', serif;
}

/* Enhanced gradient text */
.gradient-text {
    background: linear-gradient(135deg, #8979B3 0%, #E056A0 40%, #DFA4C7 70%, #A8D2DF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Hero badge dot (pulsing) */
.hero__badge-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* Hero badge enhanced */
.hero__badge {
    background: rgba(137,121,179,0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(137,121,179,0.15);
}

/* Hero stats */
.hero__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 3rem;
    padding: 20px 32px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    border: 1px solid rgba(137,121,179,0.1);
    box-shadow: 0 8px 32px rgba(137,121,179,0.08);
}
.hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.hero__stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--purple);
    font-family: 'Playfair Display', serif;
}
.hero__stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.hero__stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(137,121,179,0.15);
}

/* Hero buttons */
.hero__buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Enhanced hero blobs - more vivid */
.hero__blob--1 { opacity: 0.25; animation: blobFloat1 8s ease-in-out infinite; }
.hero__blob--2 { opacity: 0.2; animation: blobFloat2 10s ease-in-out infinite; }
.hero__blob--3 { opacity: 0.15; animation: blobFloat3 12s ease-in-out infinite; }
@keyframes blobFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,20px)} }
@keyframes blobFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }
@keyframes blobFloat3 { 0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(calc(-50% + 25px),calc(-50% - 20px))} }

/* Glassmorphism cards */
.card--glass {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6) !important;
    cursor: default;
    pointer-events: none;
}
.card--glass:hover {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(137,121,179,0.2) !important;
}
.card--glass::before { display: none; }
.card--glass::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 16px;
    background: var(--accent-grad);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Card emoji icon */
.card__emoji {
    font-size: 3rem;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
    transition: transform 0.3s ease;
}

/* Card tag badges */
.card__tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #8979B3, #DFA4C7);
    color: #fff;
    margin-top: 12px;
    align-self: flex-start;
}
.card__tag--new {
    background: linear-gradient(135deg, #E056A0, #8B5CF6);
}

/* Enhanced buttons */
.btn--primary {
    background: var(--grad-main);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(137,121,179,0.25);
    position: relative;
    overflow: hidden;
}
.btn--primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.btn--primary:hover::after {
    left: 100%;
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(137,121,179,0.35);
}

.btn--outline {
    background: transparent;
    color: var(--purple);
    border: 2px solid rgba(137,121,179,0.25);
    padding: 10px 24px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn--outline:hover {
    border-color: var(--purple);
    background: rgba(137,121,179,0.06);
    transform: translateY(-1px);
}

/* Header enhanced */
.header {
    background: rgba(253,240,245,0.8) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(137,121,179,0.06) !important;
}

/* Features section enhanced */
.features {
    background: linear-gradient(180deg, var(--bg) 0%, #fff 50%, var(--bg) 100%);
}

/* About section enhanced */
.about {
    background: linear-gradient(135deg, var(--bg-soft) 0%, rgba(168,210,223,0.08) 100%);
}

/* Page overlay enhanced */

/* Smooth scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7568a0; }

/* Selection color */
::selection {
    background: rgba(137,121,179,0.2);
    color: var(--text);
}


/* Mobile responsive hero stats */
@media (max-width: 600px) {
    .hero__stats {
        flex-direction: column;
        gap: 12px;
        padding: 16px 20px;
    }
    .hero__stat-divider {
        width: 60px;
        height: 1px;
    }
    .hero__stat { flex-direction: row; gap: 8px; }
    .cards-grid { grid-template-columns: 1fr; }
}


/* =============================================================
   REDESIGN: Editorial + Playful — Purple / Orange / White
   ============================================================= */

/* --- Typography --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

body {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* --- Header --- */
.header {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(124,58,237,0.06) !important;
}
.logo__text { color: var(--text) !important; font-weight: 700; }
.nav__link { color: var(--text-muted) !important; font-weight: 500; }
.nav__link:hover { color: var(--purple) !important; }
.nav__link::after { background: var(--purple) !important; }

/* --- Hero Redesign --- */
.hero {
    background: var(--grad-hero) !important;
    padding: 7rem 0 5rem !important;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -300px; left: -200px;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.hero__badge {
    background: rgba(124,58,237,0.08) !important;
    border: 1px solid rgba(124,58,237,0.12) !important;
    color: var(--purple) !important;
    font-weight: 600;
    backdrop-filter: blur(10px);
}
.hero__badge-dot {
    background: var(--orange) !important;
}

.hero__title {
    font-family: 'Playfair Display', 'Space Grotesk', serif !important;
    font-size: clamp(2.5rem, 6vw, 4.2rem) !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(135deg, #7C3AED 0%, #F97316 60%, #FB923C 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% 200% !important;
    animation: gradientShift 4s ease-in-out infinite !important;
}

.hero__subtitle {
    font-size: clamp(1rem, 2.2vw, 1.25rem) !important;
    color: var(--text-muted) !important;
    max-width: 580px !important;
    line-height: 1.7 !important;
}

.hero__cta {
    background: var(--purple) !important;
    color: #fff !important;
    padding: 1rem 2.5rem !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    box-shadow: 0 8px 30px rgba(124,58,237,0.3) !important;
    transition: all 0.35s ease !important;
}
.hero__cta:hover {
    background: linear-gradient(135deg,#7C3AED,#9333EA) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 40px rgba(124,58,237,0.4) !important;
}

/* Hero blobs — purple + orange */
.hero__blob--1 {
    background: var(--purple) !important;
    opacity: 0.06 !important;
    width: 500px !important; height: 500px !important;
}
.hero__blob--2 {
    background: var(--orange) !important;
    opacity: 0.05 !important;
    width: 400px !important; height: 400px !important;
}
.hero__blob--3 {
    background: var(--pink) !important;
    opacity: 0.04 !important;
}

/* Hero stats */
.hero__stats {
    background: rgba(255,255,255,0.8) !important;
    border: 1px solid rgba(124,58,237,0.08) !important;
    box-shadow: 0 8px 40px rgba(124,58,237,0.06) !important;
    border-radius: 24px !important;
    padding: 24px 40px !important;
}
.hero__stat-num {
    color: var(--purple) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.8rem !important;
}
.hero__stat-divider {
    background: rgba(124,58,237,0.1) !important;
}

/* --- Features Section --- */
.features {
    background: #fff !important;
    padding: 6rem 0 !important;
}
.section-title {
    font-family: 'Playfair Display', 'Space Grotesk', serif !important;
    color: var(--text) !important;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    font-weight: 800 !important;
}
.section-title::before { color: var(--orange) !important; }
.section-title::after { color: var(--purple) !important; }
.section-subtitle { color: var(--text-muted) !important; }

/* --- Cards — Editorial Playful Style --- */
.cards-grid {
    gap: 1.75rem !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}

.card--glass {
    background: #fff !important;
    backdrop-filter: none !important;
    border: 2px solid rgba(124,58,237,0.06) !important;
    border-radius: 24px !important;
    padding: 2.25rem !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}
.card--glass::before { display: none !important; }
.card--glass::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    width: 120px !important; height: 120px !important;
    background: var(--accent-grad) !important;
    opacity: 0.06 !important;
    border-radius: 0 0 0 100% !important;
    transition: all 0.4s ease !important;
    z-index: 0 !important;
}
.card--glass:hover::after {
    opacity: 0.12 !important;
    width: 160px !important;
    height: 160px !important;
}
.card--glass:hover {
    border-color: rgba(124,58,237,0.15) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 60px rgba(124,58,237,0.1) !important;
}

/* Emoji icons — bigger, with colored bg circle */
.card__emoji {
    font-size: 2.8rem !important;
    width: 72px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    margin-bottom: 20px !important;
    position: relative;
    z-index: 1;
    filter: none !important;
}
/* Alternate emoji bg colors */
.card--glass:nth-child(odd) .card__emoji {
    background: rgba(124,58,237,0.08);
}
.card--glass:nth-child(even) .card__emoji {
    background: rgba(249,115,22,0.08);
}

.card__title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-bottom: 0.6rem !important;
    position: relative;
    z-index: 1;
}
.card__desc {
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    position: relative;
    z-index: 1;
}

/* Tags */
.card__tag {
    background: var(--purple) !important;
    color: #fff !important;
    font-size: 0.68rem !important;
    padding: 5px 14px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
}
.card__tag--new {
    background: var(--orange) !important;
}

/* --- About Section --- */
.about {
    background: var(--bg-soft) !important;
    padding: 6rem 0 !important;
}
.about__check {
    background: var(--purple) !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
}
.about__shape--1 {
    background: linear-gradient(135deg, var(--purple), transparent) !important;
    border-radius: 28px !important;
}
.about__shape--2 {
    background: linear-gradient(135deg, var(--orange), transparent) !important;
    border-radius: 28px !important;
}
.about__shape--3 {
    background: linear-gradient(135deg, var(--pink), transparent) !important;
    border-radius: 28px !important;
}

/* --- CTA Section --- */
#cta-register {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 1rem 3rem;
    background: var(--orange) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 30px rgba(249,115,22,0.3) !important;
    cursor: pointer;
    transition: all 0.35s ease !important;
}
#cta-register:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 40px rgba(249,115,22,0.4) !important;
}

/* --- Footer --- */
.footer {
    background: var(--text) !important;
    padding: 3rem 0 !important;
    border-top: none !important;
}
.footer__inner {
    color: rgba(255,255,255,0.6) !important;
}
.footer__brand {
    color: #fff !important;
    font-weight: 700 !important;
}
.footer__tagline {
    color: rgba(255,255,255,0.5) !important;
}

/* --- Buttons global fix --- */
.btn--primary {
    background: var(--grad-main) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(124,58,237,0.25) !important;
}
.btn--primary:hover {
    box-shadow: 0 8px 30px rgba(124,58,237,0.35) !important;
}
.btn--primary::after { display: none !important; }

.btn--outline {
    border-color: rgba(124,58,237,0.2) !important;
    color: var(--purple) !important;
    border-radius: 16px !important;
}
.btn--outline:hover {
    border-color: var(--purple) !important;
    background: rgba(124,58,237,0.05) !important;
}

/* --- Page overlays --- */
/* --- Form inputs --- */
.demo-form textarea:focus,
.demo-form select:focus,
.demo-form input:focus,
.social-input:focus,
.calc-inp:focus {
    border-color: var(--purple) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
}

/* --- Auth modal --- */
#auth-modal {
    border-radius: 24px !important;
}

/* --- Cabinet tool cards --- */
#cab-tools-grid .card {
    border: 2px solid rgba(124,58,237,0.06) !important;
    border-radius: 20px !important;
    background: #fff !important;
}
#cab-tools-grid .card:hover {
    border-color: rgba(124,58,237,0.15) !important;
    box-shadow: 0 12px 40px rgba(124,58,237,0.1) !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar-thumb {
    background: var(--purple) !important;
}
::-webkit-scrollbar-thumb:hover {
    background: #6D28D9 !important;
}

/* --- Selection --- */
::selection {
    background: rgba(124,58,237,0.15) !important;
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .hero { padding: 5rem 0 3rem !important; }
    .cards-grid { grid-template-columns: 1fr !important; }
    .hero__title { font-size: 2.2rem !important; }
}
@media (max-width: 480px) {
    .hero__cta { width: 100%; justify-content: center; }
    .hero__title { font-size: 1.8rem !important; }
}

/* --- Decorative floating shapes (new) --- */
.features::before {
    content: '';
    position: absolute;
    top: 60px; right: -80px;
    width: 200px; height: 200px;
    background: rgba(249,115,22,0.04);
    border-radius: 40px;
    transform: rotate(15deg);
    pointer-events: none;
}
.features {
    position: relative;
    overflow: hidden;
}
.features::after {
    content: '';
    position: absolute;
    bottom: 40px; left: -60px;
    width: 160px; height: 160px;
    background: rgba(124,58,237,0.03);
    border-radius: 30px;
    transform: rotate(-20deg);
    pointer-events: none;
}


/* --- About features list --- */
.about-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.about-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(124,58,237,0.06);
    transition: all 0.3s ease;
}
.about-feature:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 20px rgba(124,58,237,0.08);
}
.about-feature__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* --- About showcase (images) --- */
.about-showcase {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.about-showcase__img {
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}
.about-showcase__img--1 {
    width: 100%;
    position: relative;
    z-index: 1;
}
.about-showcase__img--2 {
    width: 55%;
    position: absolute;
    bottom: -30px;
    right: -30px;
    z-index: 2;
    border: 4px solid #fff;
}
.about-showcase:hover .about-showcase__img--1 {
    transform: rotate(-2deg) scale(1.02);
}
.about-showcase:hover .about-showcase__img--2 {
    transform: rotate(3deg) scale(1.05);
}
.about-showcase__badge {
    position: absolute;
    top: 20px;
    left: -20px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    animation: floatBadge 3s ease-in-out infinite;
}
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 768px) {
    .about__inner { grid-template-columns: 1fr !important; }
    .about-showcase { max-width: 300px; margin-top: 2rem; }
    .about-showcase__img--2 { right: -10px; bottom: -20px; }
    .about-showcase__badge { left: -10px; }
    .about-feature:hover { transform: translateX(4px); }
}


/* =============================================================
   BENTO GRID — Editorial Playful Cards
   ============================================================= */

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
}

/* Base bento card */
.bento-card {
    position: relative;
    border-radius: 28px;
    padding: 2rem;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    border: 2px solid transparent;
}
.bento-card:hover {
    transform: translateY(-6px) scale(1.01);
}

/* Card number (editorial touch) */
.bento-card__number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.06;
    color: currentColor;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.bento-card:hover .bento-card__number {
    opacity: 0.12;
}

/* Content layer */
.bento-card__content {
    position: relative;
    z-index: 2;
}

/* Emoji */
.bento-card__emoji {
    font-size: 2.5rem;
    margin-bottom: 16px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
}

.bento-card__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
}
.bento-card__desc {
    font-size: 0.88rem;
    line-height: 1.65;
    opacity: 0.8;
}

/* Badge */
.bento-card__badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
    color: #fff;
    margin-bottom: 12px;
}
.bento-card__badge--new {
    background: var(--orange);
    color: #fff;
}

/* ---- CARD VARIANTS ---- */

/* Hero card — spans 2 cols, photo background */
.bento-card--hero {
    grid-column: span 2;
    min-height: 340px;
    color: #fff;
    border-color: transparent;
}
.bento-card--hero .bento-card__title { color: #fff; font-size: 1.6rem; }
.bento-card--hero .bento-card__desc { color: rgba(255,255,255,0.85); }
.bento-card--hero .bento-card__emoji { background: rgba(255,255,255,0.15); }
.bento-card--hero .bento-card__number { color: #fff; opacity: 0.1; font-size: 5rem; }
.bento-card--hero:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.2); }

/* Background image layer */
.bento-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 28px;
    overflow: hidden;
}
.bento-card__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.bento-card:hover .bento-card__bg img {
    transform: scale(1.05);
}
.bento-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(124,58,237,0.3) 0%, rgba(30,27,75,0.75) 100%);
    z-index: 1;
}
.bento-card__overlay--light {
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(30,27,75,0.7) 100%);
}

/* Accent purple */
.bento-card--accent-purple {
    background: #FAF5FF;
    border-color: rgba(124,58,237,0.1);
    color: var(--text);
}
.bento-card--accent-purple .bento-card__emoji { background: rgba(124,58,237,0.1); }
.bento-card--accent-purple .bento-card__title { color: var(--text); }
.bento-card--accent-purple .bento-card__desc { color: var(--text-muted); opacity: 1; }
.bento-card--accent-purple:hover {
    border-color: rgba(124,58,237,0.25);
    box-shadow: 0 20px 50px rgba(124,58,237,0.1);
    background: #F5F0FF;
}

/* Corner decorative icon */
.bento-card__corner-icon {
    position: absolute;
    bottom: -10px;
    right: -10px;
    opacity: 0.4;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.bento-card:hover .bento-card__corner-icon { opacity: 0.7; }

/* Accent orange */
.bento-card--accent-orange {
    background: #FFF7ED;
    border-color: rgba(249,115,22,0.1);
    color: var(--text);
}
.bento-card--accent-orange .bento-card__emoji { background: rgba(249,115,22,0.1); }
.bento-card--accent-orange .bento-card__title { color: var(--text); }
.bento-card--accent-orange .bento-card__desc { color: var(--text-muted); opacity: 1; }
.bento-card--accent-orange:hover {
    border-color: rgba(249,115,22,0.25);
    box-shadow: 0 20px 50px rgba(249,115,22,0.1);
    background: #FFF2E5;
}

/* Dots decoration */
.bento-card__dots {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: flex;
    gap: 6px;
    pointer-events: none;
}
.bento-card__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    opacity: 0.3;
}
.bento-card__dots span:nth-child(2) { opacity: 0.2; width: 6px; height: 6px; }
.bento-card__dots span:nth-child(3) { opacity: 0.1; width: 5px; height: 5px; }

/* White card */
.bento-card--white {
    background: #fff;
    border-color: rgba(124,58,237,0.08);
    color: var(--text);
    box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}
.bento-card--white .bento-card__emoji { background: rgba(124,58,237,0.06); }
.bento-card--white .bento-card__title { color: var(--text); }
.bento-card--white .bento-card__desc { color: var(--text-muted); opacity: 1; }
.bento-card--white:hover {
    border-color: rgba(124,58,237,0.18);
    box-shadow: 0 20px 50px rgba(124,58,237,0.08);
}

/* Image card */
.bento-card--image {
    color: #fff;
    border-color: transparent;
}
.bento-card--image .bento-card__title { color: #fff; }
.bento-card--image .bento-card__desc { color: rgba(255,255,255,0.85); }
.bento-card--image .bento-card__emoji { background: rgba(255,255,255,0.15); }
.bento-card--image:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.2); }

/* Gradient card */
.bento-card--gradient {
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    color: #fff;
    border-color: transparent;
}
.bento-card--gradient .bento-card__title { color: #fff; }
.bento-card--gradient .bento-card__desc { color: rgba(255,255,255,0.85); }
.bento-card--gradient .bento-card__emoji { background: rgba(255,255,255,0.15); }
.bento-card--gradient .bento-card__number { color: #fff; }
.bento-card--gradient:hover {
    box-shadow: 0 24px 60px rgba(124,58,237,0.3);
    transform: translateY(-6px) scale(1.01);
}

/* Ring decoration */
.bento-card__ring {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.15);
    pointer-events: none;
    transition: all 0.4s ease;
}
.bento-card:hover .bento-card__ring {
    transform: scale(1.2);
    border-color: rgba(255,255,255,0.25);
}

/* Dark card */
.bento-card--dark {
    grid-column: span 2;
    background: var(--text);
    color: #fff;
    border-color: transparent;
}
.bento-card--dark .bento-card__title { color: #fff; font-size: 1.4rem; }
.bento-card--dark .bento-card__desc { color: rgba(255,255,255,0.65); }
.bento-card--dark .bento-card__emoji { background: rgba(255,255,255,0.08); }
.bento-card--dark .bento-card__number { color: #fff; opacity: 0.05; font-size: 4rem; }
.bento-card--dark:hover {
    box-shadow: 0 24px 60px rgba(30,27,75,0.3);
    background: #252347;
}

/* Grid lines decoration (dark card) */
.bento-card__grid-lines {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    pointer-events: none;
    z-index: 0;
}
.bento-card__grid-lines span {
    border-right: 1px solid rgba(255,255,255,0.04);
    height: 100%;
}
.bento-card__grid-lines span:last-child { border-right: none; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .bento-card--hero { grid-column: span 2; min-height: 280px; }
    .bento-card--dark { grid-column: span 2; }
    .bento-card { min-height: 220px; padding: 1.5rem; }
}
@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .bento-card--hero { grid-column: span 1; min-height: 260px; }
    .bento-card--dark { grid-column: span 1; }
    .bento-card { min-height: 200px; padding: 1.25rem; border-radius: 20px; }
    .bento-card__bg { border-radius: 20px; }
    .bento-card__title { font-size: 1.15rem !important; }
    .bento-card__number { font-size: 2.5rem !important; }
}

/* Hide old cards-grid styles for showcase */
.cards-grid .card--glass { display: none; }




/* =============================================================
   BACKGROUND v3 — BRIGHT gradient zones + dot pattern
   ============================================================= */

/* Body — visible dot pattern */
body {
    background-color: #FEFCFF !important;
    background-image:
        radial-gradient(rgba(124,58,237,0.055) 1.3px, transparent 1.3px) !important;
    background-size: 26px 26px !important;
}

/* Hero — ЯРКИЙ фиолетово-оранжевый */
.hero {
    background:
        radial-gradient(ellipse 60% 55% at 10% 70%, rgba(124,58,237,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 50% 45% at 90% 20%, rgba(249,115,22,0.15) 0%, transparent 65%),
        radial-gradient(ellipse 30% 30% at 50% 90%, rgba(244,114,182,0.08) 0%, transparent 60%),
        linear-gradient(180deg, #EDE5FF 0%, #FFF5EE 40%, #FEFCFF 100%) !important;
}

/* Features — яркие пятна за карточками */
.features {
    background:
        radial-gradient(ellipse 40% 35% at 92% 15%, rgba(249,115,22,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 35% 30% at 5% 85%, rgba(124,58,237,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 25% 25% at 50% 50%, rgba(249,115,22,0.05) 0%, transparent 60%),
        linear-gradient(180deg, #FEFCFF 0%, #FFF8F2 35%, #FFF5EE 50%, #FFF8F2 65%, #FEFCFF 100%) !important;
    position: relative;
    overflow: hidden;
}

/* Декоративная полоса между hero и features */
.features::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,0.15), rgba(249,115,22,0.15), transparent);
    border-radius: 2px;
    pointer-events: none;
}

/* About — насыщенный переход */
.about {
    background:
        radial-gradient(ellipse 50% 45% at 80% 40%, rgba(249,115,22,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 45% 50% at 15% 55%, rgba(124,58,237,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 30% 20% at 50% 10%, rgba(244,114,182,0.06) 0%, transparent 60%),
        linear-gradient(160deg, #EDE5FF 0%, #FFF5EE 50%, #F5F0FF 100%) !important;
}

/* CTA зона — оранжевое свечение */
div[style*="text-align:center"][style*="margin:48px"] {
    position: relative;
    padding: 3rem 0;
}
div[style*="text-align:center"][style*="margin:48px"]::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; height: 250px;
    background: radial-gradient(ellipse, rgba(249,115,22,0.1) 0%, rgba(124,58,237,0.05) 50%, transparent 75%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

/* Footer — глубокий с фиолетовым верхом */
.footer {
    background: linear-gradient(180deg, #252060 0%, #13102B 100%) !important;
    border-top: 3px solid;
    border-image: linear-gradient(90deg, #7C3AED, #F97316) 1;
}

/* Header — с лёгким градиентом */
.header {
    background: linear-gradient(180deg, rgba(237,229,255,0.95), rgba(255,255,255,0.9)) !important;
    backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(124,58,237,0.08) !important;
}


/* =============================================================
   HERO FLOATING IMAGES — cakes & cupcakes
   ============================================================= */
.hero__float-img {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0,0,0,0.12);
    transition: transform 0.4s ease;
}
.hero__float-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero__float-img--1 {
    width: 220px;
    height: 280px;
    top: 12%;
    right: 5%;
    transform: rotate(4deg);
    animation: heroFloat1 6s ease-in-out infinite;
    border: 4px solid rgba(255,255,255,0.8);
}
.hero__float-img--2 {
    width: 150px;
    height: 150px;
    bottom: 15%;
    left: 5%;
    transform: rotate(-5deg);
    border-radius: 20px;
    animation: heroFloat2 7s ease-in-out infinite;
    border: 4px solid rgba(255,255,255,0.8);
}
@keyframes heroFloat1 {
    0%, 100% { transform: rotate(4deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(-15px); }
}
@keyframes heroFloat2 {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    50% { transform: rotate(-5deg) translateY(-12px); }
}

/* Hide on mobile — overlaps text */
@media (max-width: 900px) {
    .hero__float-img { display: none; }
}


/* =============================================================
   FIX: Overlay pages — padding, centered title, back button
   ============================================================= */

/* More padding inside overlay content */

/* Back button — proper spacing from top */

/* Title — centered, full width */

/* Remove sparkles that break centering */
.page-overlay__content h2::before,

/* Description — centered too */

/* Mobile fix */
@media (max-width: 768px) {
}


/* === CAROUSEL STYLES === */
.social-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: rgba(124,58,237,0.04);
    padding: 6px;
    border-radius: 16px;
}
.social-tab {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}
.social-tab--active {
    background: #fff;
    color: var(--purple);
    box-shadow: 0 2px 12px rgba(124,58,237,0.1);
}
.csrc-tabs {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.csrc-tab {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid rgba(124,58,237,0.1);
    background: #fff;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}
.csrc-tab--active {
    border-color: var(--purple);
    color: var(--purple);
    background: rgba(124,58,237,0.04);
}
.car-slides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.car-slide {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(124,58,237,0.08);
    transition: all 0.3s ease;
    background: #fff;
}
.car-slide:hover {
    border-color: rgba(124,58,237,0.2);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(124,58,237,0.1);
}
.car-slide__img { width: 100%; display: block; }
.car-slide__num {
    position: absolute; top: 8px; left: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--purple); color: #fff;
    font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.car-slide__dl {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--purple); font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; opacity: 0;
    transition: all 0.2s;
}
.car-slide:hover .car-slide__dl { opacity: 1; }
.spinner-small {
    width: 20px; height: 20px;
    border: 3px solid rgba(124,58,237,0.15);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.carousel-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 600px) {
    .car-slides-grid { grid-template-columns: repeat(2, 1fr); }
    .csrc-tabs { flex-direction: column; }
}

/* ============================================================
   CABINET REDESIGN v4 — BOLD Light + 3D + Neon
   ============================================================ */

/* Overlay — vivid mesh gradient background */
.page-overlay {
  background: 
    radial-gradient(ellipse at 10% 0%, rgba(124,58,237,0.15) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 10%, rgba(249,115,22,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(224,86,160,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 60%, rgba(59,130,246,0.06) 0%, transparent 40%),
    #F5F0FF !important;
  backdrop-filter: none !important;
}

.page-overlay::before,
.page-overlay::after {
  display: none !important;
}

/* Content card — bold 3D card with colored border */
.page-overlay__content {
  background: rgba(255,255,255,0.95) !important;
  border: 2px solid rgba(124,58,237,0.08) !important;
  border-radius: 32px !important;
  padding: 3rem !important;
  box-shadow: 
    0 25px 80px rgba(124,58,237,0.12),
    0 10px 30px rgba(0,0,0,0.06),
    0 0 0 1px rgba(124,58,237,0.04) !important;
  margin-top: 2.5rem;
  position: relative;
  overflow: visible !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

/* Thick animated gradient stripe at top */
.page-overlay__content::before {
  content: '' !important;
  position: absolute !important;
  top: -3px !important; left: -3px !important; right: -3px !important;
  height: 6px !important;
  background: linear-gradient(90deg, #7C3AED, #F97316, #E056A0, #3B82F6, #7C3AED) !important;
  background-size: 300% 100% !important;
  animation: shimmerBorder 3s linear infinite !important;
  border-radius: 32px 32px 0 0 !important;
  z-index: 2 !important;
}

@keyframes shimmerBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Big colorful glow orb */
.page-overlay__content::after {
  content: '' !important;
  position: absolute !important;
  width: 300px !important; height: 300px !important;
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, rgba(249,115,22,0.08) 40%, transparent 70%) !important;
  border-radius: 50% !important;
  top: -100px !important; right: -80px !important;
  z-index: -1 !important;
  animation: floatOrb 5s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 20px) scale(1.2); }
}

/* ---- BACK BUTTON — bold purple pill ---- */
.page-overlay__back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #F5F0FF, #FFF5EE) !important;
  border: 2px solid rgba(124,58,237,0.15) !important;
  color: #7C3AED !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  border-radius: 50px !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  margin-bottom: 1.8rem !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.08) !important;
}

.page-overlay__back:hover {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateX(-6px) !important;
  box-shadow: 0 8px 30px rgba(124,58,237,0.3) !important;
}

/* ---- TITLE — big bold gradient ---- */
.page-overlay__content h2 {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 30%, #F97316 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.03em !important;
}

.page-overlay__content h2::before,
.page-overlay__content h2::after {
  display: none !important;
}

/* ---- DESCRIPTION ---- */
.page-overlay__desc {
  color: #7B7B95 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin-bottom: 2rem !important;
}

/* ---- INPUTS — soft purple background ---- */
.demo-form textarea,
.demo-form select,
.demo-form input[type="text"],
.demo-form input[type="number"],
.demo-form input[type="url"],
.social-input,
.calc-inp {
  background: #F5F0FF !important;
  border: 2.5px solid rgba(124,58,237,0.1) !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  font-size: 0.95rem !important;
  color: #1a1a2e !important;
  transition: all 0.3s ease !important;
  font-family: "Space Grotesk", sans-serif !important;
}

.demo-form textarea:focus,
.demo-form select:focus,
.demo-form input:focus,
.social-input:focus,
.calc-inp:focus {
  border-color: #7C3AED !important;
  background: #fff !important;
  box-shadow: 0 0 0 5px rgba(124,58,237,0.1), 0 6px 20px rgba(124,58,237,0.08) !important;
  outline: none !important;
  transform: translateY(-2px) !important;
}

/* ---- LABELS ---- */
.demo-form label,
.social-field label {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #5B21B6 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ---- PRIMARY BUTTON — big gradient with shine ---- */
.btn--primary {
  background: linear-gradient(135deg, #7C3AED 0%, #9333EA 40%, #F97316 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 16px 32px !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  box-shadow: 
    0 8px 28px rgba(124,58,237,0.35),
    0 3px 8px rgba(249,115,22,0.15) !important;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em !important;
}

.btn--primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s ease;
}

.btn--primary:hover::before { left: 100%; }

.btn--primary:hover {
  background-position: 100% 0 !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 
    0 14px 40px rgba(124,58,237,0.4),
    0 6px 16px rgba(249,115,22,0.2) !important;
}

.btn--primary:active {
  transform: translateY(-1px) scale(1) !important;
}

/* ---- OUTLINE BUTTON ---- */
.btn--outline {
  background: #fff !important;
  color: #7C3AED !important;
  border: 2.5px solid rgba(124,58,237,0.15) !important;
  border-radius: 18px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.06) !important;
}

.btn--outline:hover {
  border-color: #7C3AED !important;
  background: #F5F0FF !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(124,58,237,0.12) !important;
}

/* ---- UPLOAD AREA — big dashed card ---- */
.upload-area {
  border: 3px dashed rgba(124,58,237,0.2) !important;
  border-radius: 28px !important;
  padding: 48px 32px !important;
  text-align: center !important;
  cursor: pointer;
  transition: all 0.35s ease !important;
  background: linear-gradient(145deg, #F8F5FF, #FFF8F2) !important;
}

.upload-area:hover {
  border-color: #7C3AED !important;
  border-style: solid !important;
  background: linear-gradient(145deg, #F0EAFF, #FFF0E6) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(124,58,237,0.12) !important;
}

/* ---- RADIO PILLS ---- */
.radio-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 22px !important;
  border: 2.5px solid rgba(124,58,237,0.1) !important;
  border-radius: 50px !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(124,58,237,0.05) !important;
}

.radio-pill:hover {
  border-color: #7C3AED !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(124,58,237,0.1) !important;
}

.radio-pill--active,
.radio-pill:has(input:checked) {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 28px rgba(124,58,237,0.35) !important;
  transform: translateY(-3px) !important;
}

.radio-pill input { display: none !important; }

/* ---- SOCIAL TABS ---- */
.social-tab {
  padding: 12px 28px !important;
  border-radius: 50px !important;
  border: 2.5px solid rgba(124,58,237,0.08) !important;
  background: #fff !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.05) !important;
  font-size: 0.95rem !important;
}

.social-tab--active {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 28px rgba(124,58,237,0.3) !important;
  transform: translateY(-3px) !important;
}

/* ---- SOURCE TABS ---- */
.csrc-tab {
  padding: 10px 22px !important;
  border-radius: 50px !important;
  border: 2.5px solid rgba(249,115,22,0.12) !important;
  background: #fff !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  font-size: 0.88rem !important;
}

.csrc-tab--active {
  background: linear-gradient(135deg, #F97316, #FB923C) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(249,115,22,0.3) !important;
  transform: translateY(-3px) !important;
}

/* ---- RESULT IMAGES — 3D tilt ---- */
.demo-result img,
#social-img-res {
  border-radius: 24px !important;
  box-shadow: 0 20px 56px rgba(0,0,0,0.1), 0 6px 16px rgba(124,58,237,0.08) !important;
  transition: all 0.4s ease !important;
  border: 3px solid rgba(124,58,237,0.06) !important;
}

.demo-result img:hover,
#social-img-res:hover {
  transform: perspective(800px) rotateY(-3deg) rotateX(2deg) scale(1.03) !important;
  box-shadow: 0 30px 70px rgba(124,58,237,0.15), 0 10px 24px rgba(0,0,0,0.08) !important;
}

/* ---- CAROUSEL SLIDES — 3D card tilt ---- */
.car-slide {
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(124,58,237,0.08) !important;
  border: 2px solid rgba(124,58,237,0.06) !important;
  transition: all 0.4s ease !important;
  background: #fff !important;
}

.car-slide:hover {
  transform: perspective(600px) rotateY(-4deg) translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(124,58,237,0.15), 0 8px 20px rgba(0,0,0,0.06) !important;
  border-color: #7C3AED !important;
}

/* ---- CALC TABS ---- */
.calc-tabs__btn {
  padding: 12px 28px !important;
  border-radius: 50px !important;
  border: 2.5px solid rgba(124,58,237,0.08) !important;
  background: #fff !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
}

.calc-tabs__btn--active {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 28px rgba(124,58,237,0.3) !important;
}

/* ---- CALC TABLE ---- */
.calc-table {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(124,58,237,0.06) !important;
}

.calc-table th {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  padding: 16px 18px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.calc-table td {
  padding: 14px 18px !important;
  border-bottom: 1.5px solid rgba(124,58,237,0.05) !important;
}

.calc-table tr:hover td {
  background: rgba(124,58,237,0.03) !important;
}

/* ---- RESIZE BUTTONS ---- */
.resize-quick__btn {
  border-radius: 14px !important;
  border: 2.5px solid rgba(124,58,237,0.1) !important;
  background: #fff !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
}

.resize-quick__btn:hover {
  transform: translateY(-3px) !important;
  border-color: #7C3AED !important;
  box-shadow: 0 6px 20px rgba(124,58,237,0.1) !important;
}

.resize-quick__btn--active {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(124,58,237,0.3) !important;
}

/* ---- CREDITS WIDGET ---- */
#credits-widget {
  background: #fff !important;
  border: 2px solid rgba(124,58,237,0.1) !important;
  border-radius: 50px !important;
  padding: 8px 20px !important;
  font-size: 0.82rem !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.06) !important;
}

/* ---- SCROLLBAR ---- */
.page-overlay::-webkit-scrollbar { width: 6px; }
.page-overlay::-webkit-scrollbar-track { background: transparent; }
.page-overlay::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7C3AED, #F97316);
  border-radius: 10px;
}

/* ---- SMOOTH ENTRANCE ---- */
.page-overlay__content > * {
  animation: fadeSlideIn 0.5s ease both;
}
.page-overlay__content > *:nth-child(1) { animation-delay: 0.05s; }
.page-overlay__content > *:nth-child(2) { animation-delay: 0.1s; }
.page-overlay__content > *:nth-child(3) { animation-delay: 0.15s; }
.page-overlay__content > *:nth-child(4) { animation-delay: 0.2s; }
.page-overlay__content > *:nth-child(5) { animation-delay: 0.25s; }
.page-overlay__content > *:nth-child(6) { animation-delay: 0.3s; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- MOBILE ---- */
@media(max-width:600px) {
  .page-overlay__content {
    padding: 1.8rem !important;
    margin-top: 1rem;
    border-radius: 24px !important;
  }
  .page-overlay__content h2 { font-size: 1.6rem !important; }
  .btn--primary { padding: 14px 24px !important; border-radius: 16px !important; }
  .car-slide:hover, .demo-result img:hover { transform: none !important; }
}

/* ============================================================
   TOOL CARDS v2 — AI Job Finder inspired, 3D + gradients
   ============================================================ */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 0 20px;
}

/* ---- Base card ---- */
.tool-card {
  position: relative;
  border-radius: 28px;
  padding: 32px 28px;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
  border: 2px solid rgba(124,58,237,0.06);
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(124,58,237,0.04);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tool-card:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-8px);
  box-shadow: 
    0 24px 64px rgba(124,58,237,0.12),
    0 8px 24px rgba(0,0,0,0.06);
  border-color: rgba(124,58,237,0.12);
}

/* ---- Glow orbs ---- */
.tool-card__glow {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
  transition: all 0.5s ease;
}

.tool-card:hover .tool-card__glow { opacity: 0.7; transform: scale(1.3); }

.tool-card__glow--purple { background: #7C3AED; top: -60px; right: -40px; }
.tool-card__glow--orange { background: #F97316; top: -50px; left: -40px; }
.tool-card__glow--blue { background: #3B82F6; bottom: -60px; right: -30px; }
.tool-card__glow--pink { background: #E056A0; top: -40px; left: -50px; }
.tool-card__glow--multi {
  background: linear-gradient(135deg, #7C3AED, #F97316);
  top: -80px; right: -60px;
  width: 250px; height: 250px;
}

/* ---- Content ---- */
.tool-card__content {
  position: relative;
  z-index: 2;
}

/* ---- Icon wrap — 3D floating icon ---- */
.tool-card__icon-wrap {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: all 0.4s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.tool-card:hover .tool-card__icon-wrap {
  transform: translateY(-4px) rotate(-3deg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.tool-card__icon { font-size: 1.6rem; }

.tool-card__icon-wrap--purple {
  background: linear-gradient(135deg, #EDE5FF, #F5F0FF);
  border: 2px solid rgba(124,58,237,0.1);
}

.tool-card__icon-wrap--white {
  background: rgba(255,255,255,0.25);
  border: 2px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
}

.tool-card__icon-wrap--glass {
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
}

.tool-card__icon-wrap--gradient {
  background: linear-gradient(135deg, #F3EEFF, #FFF5EE);
  border: 2px solid rgba(124,58,237,0.08);
}

/* ---- Title ---- */
.tool-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

/* ---- Description ---- */
.tool-card__desc {
  font-size: 0.85rem;
  color: #8B8BA3;
  line-height: 1.55;
  margin-bottom: 4px;
}

/* ---- Arrow ---- */
.tool-card__arrow {
  position: absolute;
  bottom: 28px; right: 28px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(124,58,237,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #7C3AED;
  font-weight: 700;
  transition: all 0.35s ease;
  z-index: 2;
}

.tool-card:hover .tool-card__arrow {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}

/* ---- Tag / Badge ---- */
.tool-card__tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  background: rgba(124,58,237,0.08);
  color: #7C3AED;
}

.tool-card__tag--new {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  box-shadow: 0 4px 12px rgba(249,115,22,0.2);
}

/* ============= CARD VARIANTS ============= */

/* -- Hero card (wide, with background image) -- */
.tool-card--hero {
  grid-column: span 2;
  min-height: 280px;
  padding: 0;
}

.tool-card--hero .tool-card__content {
  padding: 32px 32px 36px;
}

.tool-card--hero .tool-card__title { color: #fff; font-size: 1.7rem; }
.tool-card--hero .tool-card__desc { color: rgba(255,255,255,0.85); }
.tool-card--hero .tool-card__arrow { background: rgba(255,255,255,0.15); color: #fff; }
.tool-card--hero:hover .tool-card__arrow { background: #fff; color: #7C3AED; }

.tool-card--hero:hover {
  box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}

/* -- Background image -- */
.tool-card__bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 28px;
  overflow: hidden;
}

.tool-card__bg-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tool-card:hover .tool-card__bg-img img {
  transform: scale(1.06);
}

.tool-card__bg-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.65) 100%);
}

/* -- Glass card (frosted) -- */
.tool-card--glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px);
  border: 2px solid rgba(124,58,237,0.06);
}

.tool-card--glass:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(124,58,237,0.15);
}

/* -- Gradient orange card -- */
.tool-card--gradient-orange {
  background: linear-gradient(145deg, #FFF7ED 0%, #FFEDD5 100%);
  border-color: rgba(249,115,22,0.1);
}

.tool-card--gradient-orange .tool-card__title { color: #C2410C; }
.tool-card--gradient-orange .tool-card__arrow { background: rgba(249,115,22,0.1); color: #F97316; }
.tool-card--gradient-orange:hover .tool-card__arrow { background: #F97316; color: #fff; }
.tool-card--gradient-orange:hover {
  border-color: rgba(249,115,22,0.2);
  box-shadow: 0 24px 64px rgba(249,115,22,0.12), 0 8px 24px rgba(0,0,0,0.04);
}

/* -- Image card (with background) -- */
.tool-card--image {
  padding: 0;
  min-height: 240px;
}

.tool-card--image .tool-card__content { padding: 28px 28px 32px; }
.tool-card--image .tool-card__title { color: #fff; }
.tool-card--image .tool-card__desc { color: rgba(255,255,255,0.8); }
.tool-card--image .tool-card__arrow { background: rgba(255,255,255,0.15); color: #fff; }
.tool-card--image:hover .tool-card__arrow { background: #fff; color: #7C3AED; }

.tool-card--image:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}

/* -- Gradient purple card -- */
.tool-card--gradient-purple {
  background: linear-gradient(145deg, #7C3AED 0%, #5B21B6 60%, #4C1D95 100%);
  border-color: transparent;
}

.tool-card--gradient-purple .tool-card__title { color: #fff; }
.tool-card--gradient-purple .tool-card__desc { color: rgba(255,255,255,0.8); }
.tool-card--gradient-purple .tool-card__arrow { background: rgba(255,255,255,0.12); color: #fff; }
.tool-card--gradient-purple:hover .tool-card__arrow { background: #fff; color: #7C3AED; }
.tool-card--gradient-purple:hover {
  box-shadow: 0 24px 64px rgba(124,58,237,0.3), 0 8px 24px rgba(0,0,0,0.08);
}

/* -- Dark wide card -- */
.tool-card--dark-wide {
  grid-column: span 1;
  background: linear-gradient(145deg, #1E1B4B 0%, #0F0D2E 100%);
  border-color: transparent;
  min-height: 180px;
}

.tool-card--dark-wide .tool-card__content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.tool-card--dark-wide .tool-card__icon-wrap { margin-bottom: 0; flex-shrink: 0; }
.tool-card--dark-wide .tool-card__title { color: #fff; font-size: 1.4rem; margin-bottom: 6px; }
.tool-card--dark-wide .tool-card__desc { color: rgba(255,255,255,0.55); }
.tool-card--dark-wide .tool-card__arrow { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.tool-card--dark-wide:hover .tool-card__arrow { background: linear-gradient(135deg, #7C3AED, #F97316); color: #fff; }
.tool-card--dark-wide:hover {
  box-shadow: 0 24px 64px rgba(30,27,75,0.4), 0 8px 24px rgba(0,0,0,0.15);
}

/* Grid background decoration for dark card */
.tool-card__grid-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
  z-index: 0;
}

.tool-card__grid-bg span {
  border-right: 1px solid rgba(124,58,237,0.06);
  border-bottom: 1px solid rgba(124,58,237,0.04);
}

/* ---- Floating circles (3D decoration) ---- */
.tool-card__float-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.tool-card__float-circle--1 {
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.12);
  top: 20px; right: 20px;
  animation: floatBubble 6s ease-in-out infinite;
}

.tool-card__float-circle--2 {
  width: 40px; height: 40px;
  background: rgba(249,115,22,0.1);
  border: 1.5px solid rgba(249,115,22,0.15);
  top: 80px; right: 80px;
  animation: floatBubble 5s ease-in-out 1s infinite;
}

.tool-card__float-circle--3 {
  width: 100px; height: 100px;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.1);
  bottom: -20px; right: -20px;
  animation: floatBubble 7s ease-in-out infinite;
}

@keyframes floatBubble {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-8px, -12px); }
  66% { transform: translate(6px, 8px); }
}

/* Dots decoration */
.tool-card__dots {
  position: absolute;
  top: 24px; left: 24px;
  display: flex;
  gap: 6px;
  pointer-events: none;
  z-index: 1;
}

.tool-card__dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(249,115,22,0.4);
}
.tool-card__dots span:nth-child(2) { opacity: 0.6; width: 6px; height: 6px; }
.tool-card__dots span:nth-child(3) { opacity: 0.3; width: 5px; height: 5px; }

/* Decorative ring SVG */
.tool-card__decor-ring {
  position: absolute;
  width: 120px; height: 120px;
  bottom: -20px; right: -20px;
  pointer-events: none;
  opacity: 0.6;
  transition: all 0.5s ease;
  z-index: 1;
}

.tool-card:hover .tool-card__decor-ring {
  opacity: 1;
  transform: rotate(30deg) scale(1.15);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-card--hero { grid-column: span 2; }
  .tool-card--dark-wide { grid-column: span 2; }
  .tool-card--dark-wide .tool-card__content { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .tool-grid { grid-template-columns: 1fr; gap: 16px; }
  .tool-card--hero,
  .tool-card--dark-wide { grid-column: span 1; }
  .tool-card { min-height: 180px; padding: 24px 22px; border-radius: 22px; }
  .tool-card:hover { transform: translateY(-4px); }
  .tool-card--dark-wide .tool-card__content { flex-direction: column; }
}

\n
/* ============================================================
   CABINET INTERIOR — AI Job Finder Style Cards
   ============================================================ */

/* --- Cabinet header / user info --- */
.cabinet-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.cabinet-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff; font-weight: 700;
  box-shadow: 0 4px 20px rgba(124,58,237,0.3);
}
.cabinet-user-name {
  font-size: 1.25rem; font-weight: 700;
  background: linear-gradient(135deg, #7C3AED, #E056A0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.cabinet-user-email {
  font-size: 0.85rem; color: #9CA3AF; margin-top: 2px;
}

/* --- Stat cards row --- */
.cabinet-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.cabinet-stat {
  position: relative;
  padding: 20px 18px;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cabinet-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.cabinet-stat::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.12;
  border-radius: 20px;
  z-index: 0;
}
.cabinet-stat--purple { background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(124,58,237,0.04)); border: 1px solid rgba(124,58,237,0.15); }
.cabinet-stat--purple::before { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.cabinet-stat--pink { background: linear-gradient(135deg, rgba(224,86,160,0.12), rgba(224,86,160,0.04)); border: 1px solid rgba(224,86,160,0.15); }
.cabinet-stat--pink::before { background: linear-gradient(135deg, #E056A0, #F472B6); }
.cabinet-stat--blue { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04)); border: 1px solid rgba(59,130,246,0.15); }
.cabinet-stat--blue::before { background: linear-gradient(135deg, #3B82F6, #60A5FA); }
.cabinet-stat__icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 10px; position: relative; z-index: 1;
}
.cabinet-stat--purple .cabinet-stat__icon { background: linear-gradient(135deg, #7C3AED, #9333EA); color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,0.3); }
.cabinet-stat--pink .cabinet-stat__icon { background: linear-gradient(135deg, #E056A0, #EC4899); color: #fff; box-shadow: 0 4px 12px rgba(224,86,160,0.3); }
.cabinet-stat--blue .cabinet-stat__icon { background: linear-gradient(135deg, #3B82F6, #2563EB); color: #fff; box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
.cabinet-stat__number {
  font-size: 1.6rem; font-weight: 800; position: relative; z-index: 1;
  background: linear-gradient(135deg, #1E1B4B, #7C3AED);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.cabinet-stat__label {
  font-size: 0.78rem; color: #9CA3AF; margin-top: 2px; position: relative; z-index: 1;
}

/* --- Tools section --- */
.cabinet-tools-title {
  font-size: 1.1rem; font-weight: 700; color: #1E1B4B;
  margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
}
.cabinet-tools-title::before {
  content: ""; display: inline-block;
  width: 4px; height: 20px; border-radius: 4px;
  background: linear-gradient(180deg, #7C3AED, #F97316);
}

/* --- Tool cards grid --- */
.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.cab-card {
  position: relative;
  padding: 22px 16px 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(124,58,237,0.08);
  box-shadow: 0 4px 16px rgba(124,58,237,0.06), 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s, border-color 0.3s;
  text-decoration: none; color: inherit; display: block;
}
.cab-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(124,58,237,0.15), 0 4px 12px rgba(0,0,0,0.06);
  border-color: rgba(124,58,237,0.2);
}

/* Glow orb */
.cab-card::before {
  content: "";
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  top: -20px; right: -20px;
  opacity: 0.15;
  transition: opacity 0.3s, transform 0.4s;
  z-index: 0;
}
.cab-card:hover::before {
  opacity: 0.3;
  transform: scale(1.3);
}

/* Color variants */
.cab-card--purple::before { background: radial-gradient(circle, #7C3AED, transparent 70%); }
.cab-card--orange::before { background: radial-gradient(circle, #F97316, transparent 70%); }
.cab-card--pink::before { background: radial-gradient(circle, #E056A0, transparent 70%); }
.cab-card--blue::before { background: radial-gradient(circle, #3B82F6, transparent 70%); }
.cab-card--green::before { background: radial-gradient(circle, #10B981, transparent 70%); }
.cab-card--red::before { background: radial-gradient(circle, #EF4444, transparent 70%); }
.cab-card--teal::before { background: radial-gradient(circle, #14B8A6, transparent 70%); }

/* Icon bubble */
.cab-card__icon {
  width: 48px; height: 48px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 14px;
  position: relative; z-index: 1;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cab-card:hover .cab-card__icon {
  transform: scale(1.1) rotate(-3deg);
}
.cab-card--purple .cab-card__icon { background: linear-gradient(135deg, #7C3AED, #9333EA); color: #fff; box-shadow: 0 6px 18px rgba(124,58,237,0.25); }
.cab-card--orange .cab-card__icon { background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; box-shadow: 0 6px 18px rgba(249,115,22,0.25); }
.cab-card--pink .cab-card__icon { background: linear-gradient(135deg, #E056A0, #F472B6); color: #fff; box-shadow: 0 6px 18px rgba(224,86,160,0.25); }
.cab-card--blue .cab-card__icon { background: linear-gradient(135deg, #3B82F6, #60A5FA); color: #fff; box-shadow: 0 6px 18px rgba(59,130,246,0.25); }
.cab-card--green .cab-card__icon { background: linear-gradient(135deg, #10B981, #34D399); color: #fff; box-shadow: 0 6px 18px rgba(16,185,129,0.25); }
.cab-card--red .cab-card__icon { background: linear-gradient(135deg, #EF4444, #F87171); color: #fff; box-shadow: 0 6px 18px rgba(239,68,68,0.25); }
.cab-card--teal .cab-card__icon { background: linear-gradient(135deg, #14B8A6, #2DD4BF); color: #fff; box-shadow: 0 6px 18px rgba(20,184,166,0.25); }

/* Text */
.cab-card__title {
  font-size: 0.95rem; font-weight: 700; color: #1E1B4B;
  margin-bottom: 6px; position: relative; z-index: 1;
  line-height: 1.3;
}
.cab-card__desc {
  font-size: 0.78rem; color: #9CA3AF; line-height: 1.45;
  position: relative; z-index: 1;
}

/* Arrow indicator */
.cab-card__arrow {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(124,58,237,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, transform 0.3s;
  z-index: 1;
}
.cab-card__arrow::after {
  content: "→"; font-size: 0.85rem; color: #7C3AED; font-weight: 700;
}
.cab-card:hover .cab-card__arrow {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  transform: translateX(3px);
}
.cab-card:hover .cab-card__arrow::after { color: #fff; }

/* Floating mini circles */
.cab-card__float {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  opacity: 0.08;
  animation: floatBubble 6s ease-in-out infinite alternate;
}
.cab-card__float--1 { width: 30px; height: 30px; bottom: 10px; left: 10px; background: currentColor; animation-delay: 0s; }
.cab-card__float--2 { width: 18px; height: 18px; top: 40%; left: 60%; background: currentColor; animation-delay: -2s; }

@keyframes floatBubble {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-12px) scale(1.15); }
}

/* --- Saved items section --- */
.cabinet-saves-title {
  font-size: 1.1rem; font-weight: 700; color: #1E1B4B;
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.cabinet-saves-title::before {
  content: ""; display: inline-block;
  width: 4px; height: 20px; border-radius: 4px;
  background: linear-gradient(180deg, #F97316, #E056A0);
}

/* Filter pills */
.cabinet-filters {
  display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;
}
.cabinet-filter {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(124,58,237,0.12);
  background: rgba(124,58,237,0.04);
  font-size: 0.82rem; font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.25s;
}
.cabinet-filter:hover {
  border-color: rgba(124,58,237,0.25);
  background: rgba(124,58,237,0.08);
  color: #7C3AED;
}
.cabinet-filter--active {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(124,58,237,0.25);
}

/* Items grid */
.cabinet-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* Empty state */
.cabinet-empty {
  text-align: center;
  padding: 40px 20px;
  color: #D1D5DB;
}
.cabinet-empty svg { opacity: 0.4; margin-bottom: 12px; }
.cabinet-empty p { font-size: 0.9rem; color: #9CA3AF; }

/* --- Mobile --- */
@media (max-width: 600px) {
  .cabinet-stats { grid-template-columns: 1fr; gap: 10px; }
  .cabinet-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cab-card { padding: 16px 12px 14px; border-radius: 18px; }
  .cab-card__icon { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 12px; }
  .cab-card__title { font-size: 0.85rem; }
  .cabinet-items-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   SMART HELPER — Calculator Tab 3
   ============================================================ */
.smart-helper {
  padding-top: 8px;
}

/* Steps */
.smart-step {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-start;
}
.smart-step__number {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124,58,237,0.25);
}
.smart-step__content {
  flex: 1;
}
.smart-label {
  font-weight: 700; color: #1E1B4B;
  font-size: 1rem; margin-bottom: 10px; display: block;
}

/* Recipe buttons */
.smart-recipes {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.smart-recipe-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(124,58,237,0.12);
  background: rgba(124,58,237,0.04);
  font-size: 0.85rem; font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.25s;
}
.smart-recipe-btn:hover {
  border-color: rgba(124,58,237,0.3);
  background: rgba(124,58,237,0.08);
  color: #7C3AED;
  transform: translateY(-1px);
}
.smart-recipe-btn--active {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.3);
}

/* Shape buttons */
.smart-shapes {
  display: flex; gap: 12px;
}
.smart-shape-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 14px 20px;
  border-radius: 18px;
  border: 2px solid rgba(124,58,237,0.1);
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  color: #9CA3AF;
  font-size: 0.82rem; font-weight: 600;
  min-width: 90px;
}
.smart-shape-btn:hover {
  border-color: rgba(124,58,237,0.3);
  color: #7C3AED;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,58,237,0.1);
}
.smart-shape-btn--active {
  border-color: #7C3AED !important;
  background: rgba(124,58,237,0.06) !important;
  color: #7C3AED !important;
  box-shadow: 0 8px 24px rgba(124,58,237,0.15);
}
.smart-shape-btn svg {
  transition: transform 0.3s;
}
.smart-shape-btn--active svg {
  transform: scale(1.1);
}

/* Dimensions */
.smart-dims {
  display: flex; flex-wrap: wrap; gap: 16px;
}
.smart-dim {
  flex: 1; min-width: 140px;
}
.smart-dim label {
  display: block; font-size: 0.82rem;
  color: #6B7280; font-weight: 600;
  margin-bottom: 6px;
}
.smart-dim-quick {
  display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap;
}
.smart-dim-quick button {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1.5px solid rgba(124,58,237,0.12);
  background: rgba(124,58,237,0.04);
  font-size: 0.78rem; font-weight: 700;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.2s;
}
.smart-dim-quick button:hover {
  border-color: #7C3AED;
  color: #7C3AED;
  background: rgba(124,58,237,0.1);
}
.smart-dim-quick button.active {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff;
  border-color: transparent;
}

/* Result */
.smart-result-header h3 {
  font-size: 1.15rem; font-weight: 800;
  background: linear-gradient(135deg, #7C3AED, #F97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#smart-table tbody tr {
  transition: background 0.2s;
}
#smart-table tbody tr:hover {
  background: rgba(124,58,237,0.04);
}
#smart-table tbody td:nth-child(2) {
  color: #7C3AED;
  font-size: 1rem;
}

#smart-tips {
  position: relative;
  overflow: hidden;
}
#smart-tips::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #7C3AED, #F97316);
  border-radius: 4px;
}
#smart-tips {
  padding-left: 20px !important;
}

/* Loading spinner override */
#smart-loading .spinner,
#tab-smart .spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(124,58,237,0.15);
  border-top-color: #7C3AED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Mobile */
@media (max-width: 600px) {
  .smart-step { flex-direction: column; gap: 10px; }
  .smart-step__number { width: 30px; height: 30px; font-size: 0.82rem; }
  .smart-shapes { flex-direction: column; }
  .smart-shape-btn { flex-direction: row; min-width: auto; padding: 10px 16px; }
  .smart-recipes { gap: 6px; }
  .smart-recipe-btn { font-size: 0.78rem; padding: 6px 12px; }
  .smart-dims { flex-direction: column; }
}


/* Smart helper — total weight */
.smart-weight-block {
  margin-top: 18px;
  padding: 18px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(249,115,22,0.06));
  border: 1.5px solid rgba(124,58,237,0.12);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.smart-weight-block::before {
  content: "⚖️";
  position: absolute;
  top: 12px; left: 16px;
  font-size: 1.3rem;
  opacity: 0.6;
}
.smart-weight-number {
  font-size: 1.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, #7C3AED, #F97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}
.smart-weight-kg {
  font-size: 1.1rem;
  font-weight: 700;
  color: #7C3AED;
  margin-left: 4px;
}
.smart-weight-note {
  font-size: 0.75rem;
  color: #9CA3AF;
  margin-top: 6px;
  font-style: italic;
}


/* Smart helper — cream section */
.smart-cream-btn--active {
  background: linear-gradient(135deg, #E056A0, #EC4899) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(224,86,160,0.3);
}
.smart-coating-btn--active {
  background: linear-gradient(135deg, #F97316, #FB923C) !important;
  color: #fff !important;
  border-color: transparent !important;
}
#smart-cream-table tbody td:nth-child(2) {
  color: #E056A0;
  font-size: 1rem;
}
#smart-cream-result h4 {
  background: linear-gradient(135deg, #E056A0, #F97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fix: ensure hero elements are visible (no AOS) */
.hero__badge, .hero__title, .hero__subtitle, .hero__buttons, .hero__stats {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Cabinet overlay — centered titles, spacing from back button */
.page-overlay__content > h2,
.page-overlay__content h2 {
  text-align: center !important;
  margin-top: 0px !important;
  margin-bottom: 12px !important;
  padding-top: 0px !important;
}
.page-overlay__content > .page-overlay__desc,
.page-overlay__content .page-overlay__desc {
  text-align: center !important;
  margin-bottom: 32px !important;
}
.page-overlay__back {
  margin-bottom: 16px !important;
  display: inline-block !important;
}

/* Force large gap between back button and title */
.page-overlay__back + h2,
button.page-overlay__back + h2 {
  margin-top: 0px !important;
  padding-top: 0px !important;
}


/* ============================================================
   CONTENT PLAN — Multi-step flow
   ============================================================ */

/* Progress bar */
.cp-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 28px;
  flex-wrap: wrap;
}
.cp-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(124,58,237,0.05);
  border: 1px solid rgba(124,58,237,0.1);
  font-size: 0.82rem;
  color: #9CA3AF;
  transition: all 0.3s;
}
.cp-step__num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(124,58,237,0.1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem;
  color: #7C3AED;
}
.cp-step--active {
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(249,115,22,0.08));
  border-color: rgba(124,58,237,0.25);
  color: #1E1B4B;
  font-weight: 600;
}
.cp-step--active .cp-step__num {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}
.cp-step--done {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.2);
  color: #10B981;
}
.cp-step--done .cp-step__num {
  background: linear-gradient(135deg, #10B981, #34D399);
  color: #fff;
}

/* Card container */
.cp-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px;
  border: 1px solid rgba(124,58,237,0.08);
  box-shadow: 0 4px 24px rgba(124,58,237,0.06);
  margin-bottom: 20px;
}
.cp-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1E1B4B;
  margin-bottom: 8px;
  text-align: center;
}
.cp-hint {
  font-size: 0.85rem;
  color: #9CA3AF;
  margin-bottom: 16px;
  text-align: center;
}

/* Niche buttons */
.cp-niches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.cp-niche {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(124,58,237,0.12);
  background: rgba(124,58,237,0.04);
  font-size: 0.85rem;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.25s;
}
.cp-niche:hover {
  border-color: rgba(124,58,237,0.3);
  background: rgba(124,58,237,0.08);
  color: #7C3AED;
}
.cp-niche--active {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.3);
}

/* Input */
.cp-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(124,58,237,0.12);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
  margin-top: 6px;
}
.cp-input:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

/* Next button */
.cp-next-btn {
  display: block;
  margin: 20px auto 0;
  padding: 12px 36px;
  font-size: 0.95rem;
}

/* Questions */
.cp-question {
  margin-bottom: 16px;
}
.cp-q-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1E1B4B;
  display: block;
  margin-bottom: 6px;
}
.cp-textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(124,58,237,0.12);
  font-size: 0.88rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
  font-family: inherit;
}
.cp-textarea:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

/* Button row */
.cp-btn-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* TA result */
.cp-ta-result {
  background: rgba(124,58,237,0.03);
  border: 1px solid rgba(124,58,237,0.1);
  border-radius: 16px;
  padding: 20px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #374151;
  margin: 16px 0;
  max-height: 500px;
  overflow-y: auto;
}

/* Loading */
.cp-loading {
  text-align: center;
  padding: 24px;
  color: #7C3AED;
  font-size: 0.9rem;
  animation: cpPulse 1.5s ease-in-out infinite;
}
@keyframes cpPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Post cards */
.cp-post-card {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(124,58,237,0.08);
  box-shadow: 0 2px 12px rgba(124,58,237,0.05);
}
.cp-post-day {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.cp-post-topic {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1E1B4B;
  margin-bottom: 12px;
}

/* Platform tabs */
.cp-platform-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.cp-ptab {
  padding: 6px 16px;
  border-radius: 16px;
  border: 1px solid rgba(124,58,237,0.12);
  background: rgba(124,58,237,0.04);
  font-size: 0.8rem;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.25s;
}
.cp-ptab:hover {
  border-color: rgba(124,58,237,0.25);
  color: #7C3AED;
}
.cp-ptab--active {
  background: linear-gradient(135deg, #7C3AED, #9333EA) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Post text */
.cp-post-text {
  background: rgba(124,58,237,0.02);
  border: 1px solid rgba(124,58,237,0.06);
  border-radius: 14px;
  padding: 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #374151;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px;
}

/* Post actions */
.cp-post-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.btn--sm {
  padding: 6px 14px !important;
  font-size: 0.8rem !important;
  border-radius: 12px !important;
}

/* Post image */
.cp-post-image {
  margin-top: 8px;
}
.cp-post-image img {
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Mobile */
@media (max-width: 600px) {
  .cp-card { padding: 18px 14px; border-radius: 18px; }
  .cp-niches { gap: 6px; }
  .cp-niche { padding: 6px 12px; font-size: 0.8rem; }
  .cp-post-card { padding: 14px; }
  .cp-platform-tabs { flex-wrap: wrap; }
  .cp-progress { gap: 4px; }
  .cp-step { padding: 6px 10px; font-size: 0.75rem; }
  .cp-step__label { display: none; }
}

/* === Mobile fixes === */
@media (max-width: 600px) {
  /* Pricing grid in cabinet - stack vertically */
  #page-pricing .page-overlay__content--wide > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Pricing table on landing - smaller font */
  #pricing-landing table {
    font-size: 0.7em !important;
  }
  #pricing-landing th,
  #pricing-landing td {
    padding: 8px 4px !important;
  }

  /* Tool cards - ensure single column */
  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Page overlay content - less padding */
  .page-overlay__content {
    padding: 1rem !important;
    margin: 0.5rem !important;
  }
  .page-overlay__content--wide {
    max-width: 100% !important;
  }
  .page-overlay__content--extra-wide {
    max-width: 100% !important;
  }

  /* Photoshoot, calculator, content-plan specific fixes */
  #page-photoshoot .page-overlay__content,
  #page-calculator .page-overlay__content,
  #page-contentplan .page-overlay__content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Fix any wide elements inside overlays */
  .page-overlay__content img,
  .page-overlay__content canvas,
  .page-overlay__content video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Scene buttons wrap */
  .scene-btn {
    font-size: 0.8em !important;
    padding: 6px 10px !important;
  }
}

@media (max-width: 400px) {
  /* Very small screens */
  #pricing-landing table {
    font-size: 0.6em !important;
  }
  .cards-grid {
    gap: 0.75rem !important;
  }
}

/* === Fix long words on mobile === */
@media (max-width: 600px) {
  /* Neuro photoshoot card */
  div[onclick*="page-photoshoot"] h3 {
    font-size: 1.1em !important;
    word-break: break-word;
  }
  div[onclick*="page-photoshoot"] p {
    font-size: 0.82em !important;
  }
  div[onclick*="page-photoshoot"] {
    flex-wrap: wrap;
    padding: 20px 16px !important;
  }
  div[onclick*="page-photoshoot"] div[style*="font-size:3.5em"] {
    font-size: 2.5em !important;
  }

  /* All tool card titles - prevent overflow */
  .tool-card__title {
    font-size: 1em !important;
    word-break: break-word;
  }


}

/* Mobile pricing: show cards, hide table */
@media (max-width: 600px) {
  #pricing-mobile {
    display: flex !important;
  }
  #pricing-desktop {
    display: none !important;
  }
  /* Fix calculator word break */
  .tool-card__title {
    word-break: normal !important;
    overflow-wrap: break-word;
    hyphens: none;
    font-size: 0.95em !important;
  }
  .tool-card__desc {
    font-size: 0.82em !important;
  }
}

/* Fix calculator + content plan row on mobile */
@media (max-width: 600px) {
  div[style*="grid-template-columns:2fr 3fr"] {
    grid-template-columns: 1fr !important;
  }
  .tool-card__title {
    font-size: 1.1em !important;
    white-space: nowrap;
  }
  .tool-card__desc {
    font-size: 0.8em !important;
    word-break: normal;
  }
  /* Себестоимость text fix */
  .tool-card--gradient-purple .tool-card__desc {
    white-space: normal !important;
    line-height: 1.4;
  }
}

/* Auth modal mobile fix */
@media (max-width: 600px) {
  #auth-modal > div {
    padding: 20px 16px !important;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px !important;
    width: 95% !important;
    margin: auto;
  }
  #auth-modal {
    align-items: flex-start !important;
    padding-top: 5vh;
  }
  #auth-modal input {
    padding: 10px !important;
    font-size: 0.9em !important;
  }
  #auth-modal h2 {
    font-size: 1.2em !important;
    margin-bottom: 4px !important;
  }
  #auth-modal p {
    font-size: 0.8em !important;
    margin-bottom: 12px !important;
  }
  #auth-modal label {
    font-size: 0.82em !important;
    margin-bottom: 4px !important;
  }
  #auth-modal div[style*="margin-bottom:16px"] {
    margin-bottom: 10px !important;
  }
  #auth-modal div[style*="margin-bottom:20px"] {
    margin-bottom: 12px !important;
  }
  #auth-modal button[style*="padding:14px"] {
    padding: 10px !important;
  }
}

/* Cost table fixes */
.calc-inp--name{width:130px;min-width:90px;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.calc-inp--num{width:100px;min-width:85px;max-width:none}
.calc-inp--unit{max-width:55px;padding:4px!important;font-size:0.85em}
.calc-table th,.calc-table td{padding:6px 5px!important;font-size:0.85em;white-space:nowrap}
.calc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Saved items in cabinet */
.saved-item-text{max-height:200px;overflow-y:auto;font-size:0.85em;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.saved-item h3{font-size:1em!important;margin-bottom:6px!important}
@media(max-width:600px){
  .calc-inp--name{width:70px;min-width:60px;max-width:none}
  .calc-inp--num{width:65px;min-width:55px;max-width:none}
  .calc-table th,.calc-table td{padding:4px 2px!important;font-size:0.75em}
}

/* Tooltip for ingredient names */
.calc-inp--name-wrap{position:relative;display:inline-block;width:100%}
.calc-inp--name-wrap .calc-tooltip{display:none;position:absolute;bottom:110%;left:0;background:#fff;color:#1F2937;border:1px solid #E5E7EB;padding:6px 12px;border-radius:8px;font-size:0.85em;white-space:nowrap;z-index:200;box-shadow:0 4px 15px rgba(0,0,0,0.2);pointer-events:none}
.calc-inp--name-wrap .calc-tooltip::after{content:'';position:absolute;top:100%;left:20px;border:6px solid transparent;border-top-color:#fff}
.calc-inp--name-wrap:hover .calc-tooltip{display:block}

/* Saved items scrollable content */
#cabinet-items-grid div[style*="overflow-y:auto"]{scrollbar-width:thin;scrollbar-color:#E5E7EB transparent}
#cabinet-items-grid div[style*="overflow-y:auto"]::-webkit-scrollbar{width:4px}
#cabinet-items-grid div[style*="overflow-y:auto"]::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:4px}

/* Admin panel wider */
#page-admin .page-overlay__content{max-width:95vw!important;width:95vw!important}
@media(min-width:1400px){#page-admin .page-overlay__content{max-width:90vw!important}}