:root{
    --ink:#630270;
    --paper:#F2F2F2;
    --mist:#E9DEF2;
    --violet:#550B70;
    --coral:#8F13BD;
    --sun:#720F96;
    --mint:#C019FC;
    --tex:url('../assets/hero-texture.jpg');
  }
  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  h1,h2,h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-0.035em; margin:0; }
  p{ margin:0; }
  a{ color:inherit; }
  ::selection{ background:var(--violet); color:#fff; }
  .wrap{ max-width:1120px; margin:0 auto; }
  section{ padding:clamp(64px,9vw,130px) clamp(20px,5vw,56px); }

  .chip{ display:inline-block; padding:7px 15px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.01em; margin-bottom:22px; }

  .btn{ display:inline-block; text-decoration:none; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; border-radius:999px; padding:17px 34px; font-size:16px; transition:transform .18s ease, box-shadow .18s ease; }
  .btn-sun{ background:var(--sun); color:#fff; box-shadow:5px 5px 0 var(--ink); }
  .btn-sun:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
  .btn-ink{ background:var(--ink); color:#fff; }
  .btn-ink:hover{ transform:translateY(-2px); }
  .btn-ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); }
  .btn-ghost:hover{ border-color:#fff; transform:translateY(-2px); }

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

  /* NAV */
  header.nav{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:14px clamp(20px,5vw,56px); transition:background .25s ease, box-shadow .25s ease, padding .25s ease; }
  header.nav .navlinks{ display:flex; align-items:center; gap:28px; }
  header.nav .brand{ display:inline-flex; text-decoration:none; color:#fff; transition:transform .2s ease, color .25s ease; }
  header.nav .brand:hover{ transform:scale(1.09) rotate(-3deg); }
  header.nav a.link{ position:relative; text-decoration:none; font-size:15px; font-weight:600; color:#fff; opacity:.92; transition:opacity .2s ease; }
  header.nav a.link:hover{ opacity:1; }
  header.nav a.link::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--mint); transform:scaleX(0); transform-origin:left center; transition:transform .28s ease; }
  header.nav a.link:hover::after, header.nav a.link.active::after{ transform:scaleX(1); }
  header.nav a.link.active{ opacity:1; }
  header.nav.scrolled{ background:var(--paper); box-shadow:0 6px 30px rgba(99,2,112,.09); padding-top:9px; padding-bottom:9px; }
  header.nav.scrolled a.link{ color:var(--ink); }
  header.nav.scrolled .brand{ color:var(--ink); }
  .nav-cta{ text-decoration:none; background:var(--sun); color:#fff; font-weight:700; font-size:14px; padding:11px 20px; border-radius:999px; transition:transform .18s ease, box-shadow .18s ease; }
  .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(99,2,112,.28); }
  @media(max-width:860px){ header.nav .navlinks a.link{ display:none; } }

  /* HERO */
  .hero{ position:relative; min-height:100svh; background:var(--violet) var(--tex) center/cover no-repeat; background-blend-mode:soft-light; color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; padding-top:120px; overflow:hidden; }
  .hero-inner{ position:relative; z-index:3; width:100%; min-width:0; max-width:1160px; animation:riseIn 1s ease both; }
  .hero h1{ font-size:min(7.4vw,96px); line-height:.98; }
  .hero h1 .hline{ display:block; white-space:nowrap; }
  .hero .sub{ max-width:620px; margin:30px auto 0; display:flex; flex-direction:column; gap:14px; font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:rgba(255,255,255,.92); font-weight:500; }

  /* CARDS */
  .cards3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px; }
  .card{ background:#FFFFFF; border-radius:22px; padding:32px; border:1.5px solid rgba(99,2,112,.09); }
  .card .bar{ width:44px; height:6px; border-radius:999px; margin-bottom:20px; }
  .card h3{ font-size:22px; margin-bottom:10px; }
  .card p{ font-size:15.5px; line-height:1.65; color:rgba(99,2,112,.72); }

  /* SERVICES */
  .grp-label{ display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:14px; font-weight:700; }
  .grp-dot{ width:12px; height:12px; border-radius:50%; }
  .serv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; align-items:start; }
  .serv{ background:#FFFFFF; border:1.5px solid rgba(99,2,112,.1); border-radius:20px; padding:26px; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .serv:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(99,2,112,.16); border-color:transparent; }
  .serv h3{ font-size:19px; margin-bottom:8px; padding-right:38px; }
  .serv .who{ font-size:13.5px; font-weight:700; color:var(--violet); margin-bottom:10px; }
  .serv .desc{ font-size:14.5px; line-height:1.6; color:rgba(99,2,112,.7); }
  .serv .plus{ position:absolute; top:22px; right:20px; width:30px; height:30px; border-radius:50%; border:1.5px solid rgba(99,2,112,.18); display:none; align-items:center; justify-content:center; font-size:20px; line-height:1; color:var(--violet); transition:transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease; }
  @media (hover:hover) and (pointer:fine){
    .serv .plus{ display:flex; }
    .serv .desc{ max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .32s ease, opacity .3s ease, margin-top .32s ease; }
    .serv:hover .desc{ max-height:280px; opacity:1; margin-top:12px; }
    .serv:hover .plus{ transform:rotate(45deg); background:var(--violet); color:#fff; border-color:var(--violet); }
  }

  /* METHOD */
  .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
  .step{ background:#FFFFFF; border-radius:20px; padding:28px; border:1.5px solid rgba(99,2,112,.08); }
  .step .num{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:46px; line-height:1; margin-bottom:14px; }
  .step h3{ font-size:20px; margin-bottom:8px; }
  .step p{ font-size:14.5px; line-height:1.6; color:rgba(99,2,112,.7); }

  /* BEFORE/AFTER */
  .ba{ display:flex; flex-direction:column; gap:14px; }
  .ba-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:14px; }
  .ba-row .before, .ba-row .after{ display:flex; align-items:center; font-size:15px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:18px 22px; transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
  .ba-row:hover .before, .ba-row:hover .after{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.45); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
  .ba-row .before{ color:rgba(255,255,255,.78); }
  .ba-row .after{ color:#fff; font-weight:600; }
  .ba-row .arrow{ align-self:center; color:var(--mint); font-weight:800; font-size:30px; line-height:1; text-shadow:0 3px 10px rgba(0,0,0,.55); }
  @media(max-width:640px){
    .ba{ gap:22px; }
    .ba-row{ grid-template-columns:1fr; gap:8px; }
    .ba-row .arrow{ justify-self:center; transform:rotate(90deg); }
  }

  /* FAQ */
  .faq-item{ border-bottom:1.5px solid rgba(99,2,112,.12); }
  .faq-q{ width:100%; background:none; border:none; cursor:pointer; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px 4px; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(16px,1.7vw,19px); font-weight:600; color:var(--ink); }
  .faq-ic{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:24px; color:var(--violet); flex:none; transition:transform .25s ease; }
  .faq-a{ overflow:hidden; max-height:0; opacity:0; transition:max-height .3s ease, opacity .3s ease; }
  .faq-a p{ padding:0 4px 24px; font-size:15.5px; line-height:1.7; color:rgba(99,2,112,.72); max-width:760px; }

  .metodo{ position:relative; background:var(--mist); }
  .metodo-inner{ max-width:1120px; margin:0 auto; padding:clamp(56px,7.5vw,104px) clamp(20px,5vw,56px); }
  .metodo-h{ font-size:clamp(30px,4.6vw,58px); line-height:1.02; max-width:18ch; }
  .metodo-sub{ max-width:640px; margin:18px 0 40px; font-size:17px; line-height:1.7; color:rgba(99,2,112,.7); }
  .metodo-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:40px; }
  .mtab{ background:none; border:none; padding:0; text-align:left; cursor:pointer; font-family:inherit; color:rgba(99,2,112,.4); transition:color .3s ease; }
  .mtab-num{ display:block; font-weight:800; font-size:19px; }
  .mtab-title{ display:block; font-weight:700; font-size:14.5px; margin-top:2px; }
  .mtab.is-active{ color:var(--violet); }
  .mtab-bar{ display:block; height:4px; border-radius:999px; background:rgba(99,2,112,.12); margin-top:12px; overflow:hidden; }
  .mtab-fill{ display:block; height:100%; width:0%; background:var(--violet); border-radius:999px; transition:width .12s linear; }
  .mpanel-num{ display:block; font-weight:800; font-size:clamp(30px,4vw,52px); color:var(--violet); line-height:1; }
  .mpanel h3{ font-size:clamp(22px,2.6vw,34px); margin:8px 0 12px; }
  .mpanel p{ font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:rgba(99,2,112,.75); max-width:680px; }
  .mtab:nth-child(1) .mtab-fill{ background:var(--violet); }
  .mtab:nth-child(2) .mtab-fill{ background:var(--coral); }
  .mtab:nth-child(3) .mtab-fill{ background:var(--sun); }
  .mtab:nth-child(4) .mtab-fill{ background:var(--mint); }
  .mtab:nth-child(2).is-active{ color:var(--coral); }
  .mtab:nth-child(3).is-active{ color:var(--sun); }
  .mtab:nth-child(4).is-active{ color:var(--mint); }
  .mpanel:nth-child(2) .mpanel-num{ color:var(--coral); }
  .mpanel:nth-child(3) .mpanel-num{ color:var(--sun); }
  .mpanel:nth-child(4) .mpanel-num{ color:var(--mint); }
  @media (min-width:861px){
    .metodo{ height:300vh; }
    .metodo-inner{ position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; padding-top:clamp(88px,9vh,112px); padding-bottom:clamp(48px,6vh,72px); }
    .metodo-panels{ position:relative; min-height:clamp(160px,24vh,240px); }
    .mpanel{ position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateX(26px); transition:opacity .45s ease, transform .45s ease; }
    .mpanel.is-active{ opacity:1; visibility:visible; transform:translateX(0); }
  }
  @media (max-width:860px){
    .metodo-tabs{ display:none; }
    .metodo-panels .mpanel{ margin-bottom:30px; border-left:3px solid var(--violet); padding-left:18px; }
  }

  .rotor{ display:inline-block; white-space:pre; }
  .rotor-cursor{ display:inline-block; margin-left:3px; color:var(--sun); font-weight:800; animation:blink 1.05s steps(1) infinite; }
  @keyframes blink{ 0%,50%{ opacity:1 } 50.01%,100%{ opacity:0 } }
  .grad{ background:linear-gradient(90deg,#EBB6FF,#C019FC); -webkit-background-clip:text; background-clip:text; color:transparent; }