/* svc-design.css — UI/UX Design · unified blue/cyan — no orange */
.hero-design {
    background: linear-gradient(140deg, #0B1426 0%, #0F1E38 50%, #0B1426 100%);
}
.hero-design .svc-hero__bg::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 70% 30%, rgba(37,99,235,.12) 0%, transparent 55%);
    pointer-events:none;
}
.hero-design .svc-h1            { color:#fff; }
.hero-design .svc-sub           { color:#94A3B8; }
.hero-design .hero-tag          { color:#38BDF8; background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.22); }
.hero-design .svc-bc            { color:rgba(255,255,255,.45); }
.hero-design .svc-bc a          { color:rgba(255,255,255,.45); }
.hero-design .svc-bc a:hover    { color:#fff; }
.hero-design .svc-bc i          { color:rgba(255,255,255,.22); }
.hero-design .svc-proof-item    { color:rgba(255,255,255,.65); }
.hero-design .svc-proof-item i  { color:#38BDF8; }

/* Figma canvas — dark version */
.canvas-box {
    background:#0d1626; border-radius:13px; padding:20px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 56px rgba(0,0,0,.45); overflow:hidden; position:relative;
}
.canvas-toolbar {
    display:flex; align-items:center; gap:5px; margin-bottom:13px;
    padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.06);
}
.c-tool {
    width:28px; height:28px; border-radius:6px; display:flex; align-items:center;
    justify-content:center; font-size:.8rem; color:rgba(255,255,255,.4); cursor:pointer;
    transition:background var(--t-fast),color var(--t-fast);
}
.c-tool.act { background:#2563EB; color:#fff; }
.c-tool:hover:not(.act) { background:rgba(255,255,255,.1); color:#fff; }
.c-sep { width:1px; height:16px; background:rgba(255,255,255,.1); margin:0 3px; }
.canvas-board {
    background:#060d1a; border-radius:9px; padding:16px; min-height:180px; position:relative; overflow:hidden;
}
.w-nav  { height:8px; background:rgba(255,255,255,.08); border-radius:4px; margin-bottom:12px; }
.w-hero {
    height:64px; background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(6,182,212,.08));
    border-radius:6px; margin-bottom:9px;
    display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.06);
}
.w-hero span { font-size:.55rem; color:rgba(255,255,255,.25); font-family:var(--font-mono); }
.w-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.w-card {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
    border-radius:5px; height:44px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.w-card span { display:block; height:4px; border-radius:3px; background:rgba(255,255,255,.12); }
.w-card span:first-child{width:60%}.w-card span:last-child{width:38%}
.swatches { display:flex; gap:6px; margin-top:10px; }
.sw {
    width:24px; height:24px; border-radius:50%; cursor:pointer;
    transition:transform var(--t-fast); box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.sw.act { outline:2px solid #38BDF8; outline-offset:2px; transform:scale(1.15); }
.sw:hover:not(.act) { transform:scale(1.1); }
/* cursor uses blue not orange */
.design-cursor {
    position:absolute; width:12px; height:12px; pointer-events:none;
    animation:cursorMove 5s ease-in-out infinite; z-index:10;
}
.design-cursor::before {
    content:''; display:block; width:0; height:0;
    border-left:6px solid transparent; border-right:6px solid transparent;
    border-bottom:11px solid #38BDF8; transform:rotate(-30deg);
}
@keyframes cursorMove {
    0%{top:25%;left:18%}25%{top:52%;left:58%}50%{top:38%;left:72%}75%{top:65%;left:32%}100%{top:25%;left:18%}
}
/* annotation boxes — blue not yellow */
.annot {
    position:absolute; background:#2563EB; color:#fff;
    font-size:.6rem; font-weight:700; padding:3px 7px; border-radius:4px; white-space:nowrap;
    box-shadow:0 2px 6px rgba(37,99,235,.4);
}
.annot::after { content:''; position:absolute; bottom:-4px; left:8px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #2563EB; }
.annot-1 { top:22%;left:52%;animation:stkFloat 5s ease-in-out infinite; }
.annot-2 { bottom:28%;right:8%;animation:stkFloat 5s ease-in-out infinite 2s; }

.cta-design { background:linear-gradient(135deg,#0B1426 0%,#0d1a2e 100%); }
.cta-design h2 { color:#fff; }
.cta-design .svc-cta-sub { color:#94A3B8; }
.cta-design .svc-cta-trust { color:rgba(255,255,255,.5); }
.cta-design .svc-cta-trust i { color:#38BDF8; }