html,body{height:100%}
.cw, .cw * { box-sizing: border-box; }
body.cw{
  --accent:#765cd6; --ink:#0b0c10; --muted:#3b3f4c; --border:rgba(0,0,0,.12);
  --shadow-sm:0 12px 36px rgba(0,0,0,.10); --ease:cubic-bezier(.2,.8,.2,1);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
  color:var(--ink); background:#fff; line-height:1.6; overflow-x:hidden; min-height:100%;
  position:relative;
}
.cw-wrap{ max-width:1150px; margin:0 auto; padding:clamp(26px,6vw,60px); }
.cw-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,6vw,64px); align-items:start; }
@media (max-width:960px){ .cw-grid{ grid-template-columns:1fr; } }
.cw-title{ font-size:clamp(30px,6.6vw,56px); font-weight:800; letter-spacing:-.01em; margin:0 0 .4rem; }
.cw-desc{ margin:.2rem 0 0; color:var(--muted); max-width:54ch; }


.cw-dots{ position:relative; padding-top:.25rem; margin-bottom:1rem; }
.cw-dots::before{
  content:""; position:absolute; inset:-8px auto auto -8px; width:240px; height:170px; opacity:.14;
  background:radial-gradient(circle at center, var(--accent) 2px, transparent 3px) 0 0/22px 22px;
  filter:blur(.2px);
}


.cw-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  contain: size layout paint style;
}
.cw-bg__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.cw-bg__blobs{ position:absolute; inset:-20% -10% -10% -10%; filter:blur(28px); mix-blend-mode:multiply; opacity:.20; contain:paint; }
.cw-blob{ position:absolute; border-radius:50%; will-change:transform; }
.cw-blob--a{ width:40vmax; height:40vmax; left:-10vmax; top:0;
  background:radial-gradient(circle at 30% 30%, rgba(118,92,214,.65), rgba(118,92,214,0) 60%);
  animation:cwBlobA 58s var(--ease) infinite alternate; }
.cw-blob--b{ width:36vmax; height:36vmax; right:-12vmax; bottom:-4vmax;
  background:radial-gradient(circle at 70% 60%, rgba(86,162,255,.55), rgba(86,162,255,0) 60%);
  animation:cwBlobB 66s var(--ease) infinite alternate; }
.cw-blob--c{ width:32vmax; height:32vmax; left:55%; top:-8vmax;
  background:radial-gradient(circle at 40% 50%, rgba(118,92,214,.5), rgba(118,92,214,0) 60%);
  animation:cwBlobC 74s var(--ease) infinite alternate; }
@keyframes cwBlobA{ to{ transform:translate3d(6vmax,3vmax,0) scale(1.06) } }
@keyframes cwBlobB{ to{ transform:translate3d(-5vmax,-4vmax,0) scale(1.05) } }
@keyframes cwBlobC{ to{ transform:translate3d(-4vmax,4vmax,0) scale(1.05) } }


.cw-card{
  position:relative; background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-sm); padding:clamp(16px,3vw,22px);
  transition:box-shadow .9s var(--ease), border-color .9s var(--ease), transform .9s var(--ease), opacity .9s var(--ease);
  --rx:0deg; --ry:0deg; --ty:0px; --scale:1;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)) scale(var(--scale));
  will-change:transform,opacity;
}
.cw-card::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg,transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-120%); animation:cwSheen 14s var(--ease) infinite; opacity:.36;
}
@keyframes cwSheen{
  0%{ transform:translateX(-120%); opacity:0 }
  25%{ opacity:.36 }
  55%{ transform:translateX(120%); opacity:0 }
  100%{ transform:translateX(120%); opacity:0 }
}
.cw-card.is-hover{ --ty:-3px; --scale:1.006; border-color:rgba(118,92,214,.35); box-shadow:0 20px 54px rgba(0,0,0,.14); }


.cw-field{ position:relative; margin:10px 0 14px; }
.cw-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .cw-row{ grid-template-columns:1fr; } }
.cw-input, .cw-textarea{
  width:100%; border:1px solid var(--border); border-radius:12px; padding:1.05rem .9rem .75rem;
  font:inherit; color:var(--ink); background:#f7f7fb;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .45s var(--ease);
  will-change:auto;
}
.cw-textarea{ min-height:120px; resize:vertical; }
.cw-label{
  position:absolute; left:.9rem; top:.95rem; font-size:14px; color:#384058; pointer-events:none;
  transform-origin:left center; transition: transform .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
  opacity:.9; background:transparent; padding:0 .2rem;
}
.cw-input:focus, .cw-textarea:focus{ outline:none; border-color:rgba(118,92,214,.6); background:#fff; box-shadow:0 0 0 4px rgba(118,92,214,.12); }
.cw-input:focus + .cw-label,
.cw-textarea:focus + .cw-label,
.cw-input:not(:placeholder-shown) + .cw-label,
.cw-textarea:not(:placeholder-shown) + .cw-label{
  transform: translateY(-1.05rem) scale(.86); color:var(--accent); opacity:.95; background:#fff;
}


.cw-actions{ margin-top:12px; display:flex; align-items:center; gap:12px; }
.cw-btn{
  --bty:0px; --bscale:1;
  position:relative; display:inline-grid; place-items:center; overflow:hidden;
  padding:.78rem 1.2rem; border-radius:12px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; font-weight:700; user-select:none; cursor:pointer;
  transform:translateY(var(--bty)) scale(var(--bscale));
  box-shadow:0 14px 34px rgba(118,92,214,.26);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cw-btn.is-hover{ --bty:-1.5px; --bscale:1.01; box-shadow:0 22px 48px rgba(118,92,214,.32); }
.cw-btn:active{ --bty:0px; --bscale:.997; transition-duration:160ms; }
.cw-ripple{
  position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background:rgba(255,255,255,.6); pointer-events:none;
  animation:cwRipple .85s var(--ease) forwards;
}
@keyframes cwRipple{ to{ transform:translate(-50%,-50%) scale(16); opacity:0 } }

.cw-status{ margin-top:.4rem; font-size:13px; min-height:1.2em; opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease); }
.cw-status.is-show{ opacity:1; transform:translateY(0); }
.cw-status--ok{ color:#127a2a; } .cw-status--err{ color:#b42318; }


.cw-reveal{ opacity:0; transform:translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.cw-reveal.is-in{ opacity:1; transform:translateY(0); }


@media (prefers-reduced-motion: reduce){
  .cw-bg__blobs, .cw-bg__canvas { display:none !important; }
  .cw, .cw * { transition:none !important; animation:none !important; }
}