/* ============================================================
   CODESTAN · CONTACT — Smart Project Builder + live solution
   visualization (IDEA → SYSTEM). Reuses tokens (styles.css)
   and product.css scaffolding. Accent: --brand only.
   ============================================================ */

.page-contact{overflow-x:hidden}
.page-contact [hidden]{display:none!important}

/* ============ HERO / BUILDER LAYOUT ============ */
.ct-hero{padding:120px 0 90px;overflow:visible}
.ct-head{margin-bottom:44px}
.ct-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:34px;align-items:start}

/* ============ BUILDER CARD ============ */
.ct-card{background:#111411;border:1px solid #262a26;border-radius:24px;padding:28px 28px 24px;
  box-shadow:var(--shadow-sharp)}

/* progress */
.ct-prog{margin-bottom:22px}
.ct-prog-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.ct-prog-step{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--brand);font-variation-settings:'wdth' 104}
.ct-prog-name{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-p2)}
.ct-rail{display:flex;gap:5px}
.ct-seg{flex:1;height:3px;border-radius:2px;background:#2a2e2a;transition:background .45s var(--ease)}
.ct-seg.done{background:var(--brand)}
.ct-seg.cur{background:var(--brand);animation:pdPulse 1.6s ease-in-out infinite}

/* step head */
.ct-step-title{font-size:clamp(21px,2.4vw,28px);color:#eef4ee;line-height:1.15;margin-bottom:8px;outline:none}
.ct-step-hint{font-size:14px;color:var(--text-p2);line-height:1.6;margin:0 0 18px}
.ct-note{font-size:13.5px;color:var(--brand);background:var(--brand-dim);border:1px solid var(--brand-line);
  border-radius:var(--r-sm);padding:11px 15px;margin:0 0 18px;line-height:1.55}
.ct-note[hidden]{display:none}
.ct-step-err{font-size:13px;color:#f0b8a8;background:rgba(240,150,120,.07);border:1px solid rgba(240,150,120,.25);
  border-radius:var(--r-sm);padding:10px 14px;margin:14px 0 0}
.ct-step-err[hidden]{display:none}

/* ============ OPTIONS ============ */
.ct-opts{display:flex;flex-direction:column;gap:10px}
.ct-opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ct-opt-grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ct-grp-t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-p2);margin:10px 0 -2px}
.ct-grp-t:first-child{margin-top:0}

.ct-opt{position:relative;display:flex;align-items:center;gap:10px;text-align:start;cursor:pointer;
  font:inherit;font-size:14px;font-weight:550;color:var(--text-p1);
  padding:13px 15px;border-radius:13px;background:#141714;border:1px solid #2a2e2a;
  transition:border-color .3s,background .3s,transform .3s var(--ease)}
.ct-opt:hover{border-color:#3d453d;transform:translateY(-1px)}
.ct-opt.sel{border-color:var(--brand-line);background:var(--brand-dim);color:#eef4ee}
.ct-opt.sel:hover{border-color:var(--brand)}
.ct-opt .op-body{flex:1;min-width:0}
.ct-opt .op-tick{flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:1.5px solid #3a3f3a;
  display:grid;place-items:center;transition:border-color .3s,background .3s;margin-inline-start:auto}
.ct-opt .op-tick svg{width:10px;height:10px;stroke:#121212;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:.25s var(--ease)}
.ct-opt.sel .op-tick{background:var(--brand);border-color:var(--brand)}
.ct-opt.sel .op-tick svg{opacity:1;transform:scale(1)}
.ct-opt .op-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--pc,var(--brand))}
.ct-opt small{display:block;font-size:11px;color:var(--text-p2);font-weight:400;margin-top:2px}

/* ============ FIELDS (steps 3 & 11) ============ */
.ct-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--text-p1)}
.ct-field.full{grid-column:1 / -1}
.ct-field .req{color:var(--brand);font-style:normal}
.ct-retry-btn{font:inherit;font-size:12px;font-weight:600;color:var(--brand);
  border:1px solid var(--brand-line);border-radius:var(--r-pill);padding:4px 12px;margin-inline-start:8px}
.ct-retry-btn:hover{background:var(--brand-dim)}
.ct-field input,.ct-field select,.ct-field textarea{
  font:inherit;font-weight:400;font-size:14.5px;color:var(--text);
  background:var(--bg-second);border:1px solid var(--stroke);border-radius:var(--r-sm);
  padding:12px 14px;transition:border-color var(--dur-2),box-shadow var(--dur-2);width:100%}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--text-ph)}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(162,250,163,.15)}
.ct-field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23989898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-inline-end:40px}
[dir="rtl"] .ct-field select{background-position:left 12px center}
.ct-field textarea{resize:vertical;min-height:74px}
.ct-field input.bad,.ct-field select.bad{border-color:rgba(240,150,120,.6)}
.ct-ferr{font-size:12px;font-weight:400;color:#f0b8a8;margin:0}
.ct-ferr[hidden]{display:none}
.ct-opt-note{font-size:12px;color:var(--text-ph);margin:2px 0 0}

/* actions */
.ct-actions{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap}
.ct-actions .btn-primary{margin-inline-start:auto}
.ct-actions .btn[disabled]{opacity:.45;pointer-events:none}

/* digital plan block (prefill from Solution Builder) */
.ct-plan{border:1px solid var(--brand-line);background:var(--brand-dim);border-radius:16px;
  padding:16px 18px;margin-bottom:18px}
.ct-plan[hidden]{display:none}
.ct-plan h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.ct-plan-row{display:flex;gap:8px;font-size:13px;color:var(--text-p1);padding:4px 0;line-height:1.5}
.ct-plan-row b{color:#eef4ee;font-weight:600;flex:0 0 auto;min-width:120px}
.ct-plan-row span{color:var(--text-p1)}

/* ============ LIVE VISUALIZATION ============ */
.ct-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.ct-visual{position:relative;background:#0d100d;border:1px solid #262a26;border-radius:24px;
  padding:14px;overflow:hidden}
.ct-visual::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 300px at 50% 46%,rgba(162,250,163,.05),transparent 70%)}
#ctSvg{width:100%;height:auto;display:block;position:relative}
.ct-visual-cap{display:flex;align-items:center;justify-content:center;gap:9px;margin:6px 0 2px;
  font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--brand)}
.ct-visual-cap[hidden]{display:none}
.ct-visual-cap i{width:7px;height:7px;border-radius:50%;background:var(--brand);
  animation:pdPulse 1.8s ease-in-out infinite}

/* svg nodes */
.ct-link{fill:none;stroke:#2f342f;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1s var(--ease),stroke .5s}
.ct-link.on{stroke:var(--brand-line);stroke-dashoffset:0}
.ct-flow{fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:.02 .05;opacity:0;transition:opacity .6s;animation:ctFlow 2.6s linear infinite}
.ct-flow.on{opacity:.75}
@keyframes ctFlow{to{stroke-dashoffset:-1}}

.ct-node .nd-ring{fill:#121512;stroke:#2f342f;stroke-width:1.5;stroke-dasharray:3 4;
  transition:stroke .5s,fill .5s}
.ct-node .nd-core{fill:#3a3f3a;transform-box:fill-box;transform-origin:center;
  transition:fill .45s,transform .45s var(--ease)}
.ct-node.on .nd-ring{fill:#141b14;stroke:var(--brand-line);stroke-dasharray:none}
.ct-node.on .nd-core{fill:var(--brand);transform:scale(1.5)}
.ct-node .nd-lab{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  fill:#7d8b7d;text-anchor:middle;transition:fill .5s}
.ct-node.on .nd-lab{fill:#cfe8cf}
.ct-node .nd-val{font-size:10.5px;font-weight:600;fill:var(--brand);text-anchor:middle;
  opacity:0;transition:opacity .6s}
.ct-node.on .nd-val{opacity:1}

.ct-hub .hub-ring{fill:#141b14;stroke:var(--brand-line);stroke-width:1.8;
  transition:fill .6s,stroke .6s}
.ct-hub .hub-lab{font-size:11.5px;font-weight:700;letter-spacing:.08em;fill:#eef4ee;text-anchor:middle}
.ct-hub .hub-pulse{fill:none;stroke:var(--brand);stroke-width:1.4;opacity:0;
  transform-box:fill-box;transform-origin:center}
.ct-visual.is-final .hub-pulse{opacity:1;animation:ctHubPulse 2.6s ease-out infinite}
.ct-visual.is-final .hub-ring{fill:#18231a;stroke:var(--brand)}
@keyframes ctHubPulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}

/* submit — ecosystem assembling (not a spinner) */
.ct-visual.is-assembling .ct-link.on{stroke:var(--brand);
  animation:ctRedraw 1.3s var(--ease) infinite}
.ct-visual.is-assembling .ct-node.on .nd-core{animation:pdPulse 1s ease-in-out infinite}
.ct-visual.is-assembling .hub-ring{animation:pdPulse 1.2s ease-in-out infinite}
@keyframes ctRedraw{0%{stroke-dashoffset:1}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* ============ PROJECT BRIEF ============ */
.ct-brief{background:#111411;border:1px solid #262a26;border-radius:24px;padding:22px 24px}
.ct-brief h3{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin-bottom:12px}
.ct-brief-empty{font-size:13px;color:var(--text-p2);margin:0;line-height:1.6}
.ct-brief-list{margin:0;display:flex;flex-direction:column;gap:0}
.ct-brief-list .br{display:flex;gap:14px;padding:8px 0;border-top:1px solid #20241f;font-size:13px}
.ct-brief-list .br:first-child{border-top:0}
.ct-brief-list dt{flex:0 0 132px;color:var(--text-p2);font-size:12px;padding-top:1px}
.ct-brief-list dd{margin:0;color:#e8f0e8;line-height:1.5;font-weight:550;min-width:0;overflow-wrap:anywhere}
.ct-brief-list .br.plan dt{color:var(--brand)}

/* ============ TALK FIRST ============ */
.ct-talk{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ct-talk h2{font-size:clamp(24px,3vw,34px);color:#f0f6f0;margin-bottom:10px}
.ct-talk p{font-size:15px;color:var(--text-p2);max-width:52ch;margin:0}
.ct-talk .eyebrow{margin-bottom:12px}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .ct-grid{grid-template-columns:1fr;gap:22px}
  .ct-side{position:static}
  .ct-visual{max-width:560px;margin-inline:auto;width:100%}
  .ct-brief{max-width:560px;margin-inline:auto;width:100%}
}
@media (max-width:860px){
  .ct-hero{padding:120px 0 70px}
  .ct-card{padding:20px 18px}
  .ct-fields{grid-template-columns:1fr}
  .ct-opt-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .ct-opt-grid.cols-2{grid-template-columns:1fr}
  .ct-actions .btn-primary{margin-inline-start:0}
  .ct-actions{gap:10px}
  #ctSvg{margin-top:-8px}
  .ct-visual{padding:8px}
  .ct-brief-list dt{flex-basis:110px}
}
@media (max-width:560px){
  .ct-opt-grid{grid-template-columns:1fr 1fr}
  .ct-opt{font-size:13px;padding:12px 12px}
  .ct-actions .btn{flex:1 1 auto;justify-content:center}
  .ct-step-title{font-size:20px}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .ct-seg.cur,.ct-visual-cap i{animation:none}
  .ct-link{transition:none}
  .ct-flow{animation:none;stroke-dasharray:none;opacity:0}
  .ct-flow.on{opacity:.35;stroke-dasharray:2 5}
  .ct-node .nd-core,.ct-node .nd-ring,.ct-node .nd-val,.ct-node .nd-lab{transition:none}
  .ct-visual.is-final .hub-pulse{animation:none;opacity:0}
  .ct-visual.is-assembling .ct-link.on,
  .ct-visual.is-assembling .ct-node.on .nd-core,
  .ct-visual.is-assembling .hub-ring{animation:none}
  .ct-opt{transition:none}
}