/* KotisivuTaito — Ilmainen Demo lead form
   Tokens below are copied from the bound KotisivuTaito Design System
   (tokens/colors.css, typography.css, spacing.css, effects.css) — these
   ARE the real brand values, not placeholders. */
:root{
--orange-700:#b85a02;--orange-600:#c5610a;--orange-500:#e87502;--orange-400:#f0860f;--orange-300:#f59f3e;--orange-200:#fbcd95;--orange-100:#fde8d2;--orange-50:#fdf3e8;
--black:#000000;--ink-950:#0a0b0d;--ink-900:#14161a;--ink-800:#1e2632;--ink-700:#2b3340;--ink-600:#475063;--ink-500:#5b6470;--ink-400:#818b98;--ink-300:#aab2bd;--ink-200:#d4d8df;--ink-100:#e5e8ed;
--white:#ffffff;--surface-page:#edeff2;--surface-card:#ffffff;--border-light:#e1e4ea;
--success:#1f9d57;--success-bg:#e6f5ec;--danger:#d23b3b;--danger-bg:#fbeaea;
--font-sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
--fs-h1:2.5rem;--fs-lead:1.1875rem;--fs-body:1rem;--fs-sm:.875rem;--fs-xs:.75rem;
--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-16:64px;--space-24:96px;
--container-max:1200px;--container-pad:clamp(20px,5vw,64px);
--radius-md:12px;--radius-xl:28px;--radius-pill:999px;
--shadow-lg:0 24px 60px rgba(20,22,26,.12);--shadow-orange:0 12px 28px rgba(232,117,2,.32);
--ring:0 0 0 3px rgba(232,117,2,.35);
--ease-out:cubic-bezier(0.22,1,0.36,1);--dur-base:220ms;
--bg-blob-dark:radial-gradient(60% 80% at 18% 18%,#1a1c20 0%,rgba(10,11,13,0) 60%),radial-gradient(50% 70% at 82% 30%,#17181b 0%,rgba(10,11,13,0) 58%),radial-gradient(70% 90% at 70% 92%,#141518 0%,rgba(10,11,13,0) 60%);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);background:var(--surface-page);color:var(--ink-800);-webkit-font-smoothing:antialiased}
.page{min-height:100vh;display:flex;flex-direction:column}
.hero{background:var(--bg-blob-dark);background-color:var(--black);padding:var(--space-24) var(--container-pad) 140px;text-align:center}
.hero__inner{max-width:640px;margin:0 auto}
.wordmark{font-weight:800;font-size:1.375rem;letter-spacing:-0.02em;color:#fff;margin-bottom:var(--space-6)}
.wordmark__k,.wordmark__t{color:var(--orange-500)}
.eyebrow{color:var(--orange-500);font-weight:600;font-size:var(--fs-sm);letter-spacing:.18em;text-transform:uppercase;margin:0 0 var(--space-4)}
.hero h1{color:#fff;font-size:var(--fs-h1);font-weight:800;letter-spacing:-0.01em;line-height:1.15;margin:0 0 var(--space-4)}
.lead{color:rgba(255,255,255,.72);font-size:var(--fs-lead);line-height:1.65;margin:0}
.card-wrap{flex:1;display:flex;justify-content:center;padding:0 var(--container-pad) var(--space-24);margin-top:-96px}
.card{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-10) var(--space-8);max-width:640px;width:100%}
.field{margin-bottom:var(--space-5)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-bottom:var(--space-5)}
.field-row .field{margin-bottom:0}
label{display:block;font-weight:600;font-size:.9375rem;color:var(--ink-800);margin-bottom:6px}
.req{color:var(--orange-500)}
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],select,textarea{
width:100%;padding:12px 16px;font-family:var(--font-sans);font-size:var(--fs-body);color:var(--ink-800);
background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);
transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange-500);box-shadow:var(--ring)}
input[type="file"]{padding:10px 14px;background:#fff;cursor:pointer}
input[type="file"]::file-selector-button{
font-family:var(--font-sans);font-size:.875rem;font-weight:600;color:#fff;
background:var(--orange-500);border:none;border-radius:var(--radius-pill);padding:8px 16px;
margin-right:12px;cursor:pointer;transition:background var(--dur-base) var(--ease-out);
}
input[type="file"]::file-selector-button:hover{background:var(--orange-400)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-submit{
width:100%;padding:16px 24px;font-family:var(--font-sans);font-size:1rem;font-weight:600;letter-spacing:.01em;
color:#fff;background:var(--orange-500);border:none;border-radius:var(--radius-pill);box-shadow:var(--shadow-orange);
cursor:pointer;transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.btn-submit:hover{background:var(--orange-400);transform:translateY(-2px)}
.btn-submit:active{background:var(--orange-600);transform:translateY(0)}
.btn-submit:focus-visible{outline:none;box-shadow:var(--ring),var(--shadow-orange)}
.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.form-status{margin:var(--space-5) 0 0;padding:0;font-size:.9375rem;line-height:1.5}
.form-status.is-success{padding:12px 16px;border-radius:var(--radius-md);background:var(--success-bg);color:var(--success)}
.form-status.is-error{padding:12px 16px;border-radius:var(--radius-md);background:var(--danger-bg);color:var(--danger)}
.success-panel{text-align:center;padding:var(--space-6) 0}
.success-panel__title{font-size:1.375rem;font-weight:700;color:var(--ink-800);margin:0 0 var(--space-4)}
.success-panel__body{color:var(--ink-500);font-size:var(--fs-body);line-height:1.65;margin:0}
.success-panel__link{margin:var(--space-5) 0 0}
.success-panel__link a{display:inline-block;padding:12px 28px;background:var(--orange-500);color:#fff;font-weight:600;border-radius:var(--radius-pill);box-shadow:var(--shadow-orange);transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.success-panel__link a:hover{background:var(--orange-400);color:#fff;text-decoration:none;transform:translateY(-2px)}
.field-hint{margin:6px 0 0;font-size:.8125rem;color:var(--ink-400)}
.site-footer{text-align:center;padding:var(--space-8) var(--container-pad);color:var(--ink-400);font-size:var(--fs-xs)}
a{color:var(--orange-500);text-decoration:none}
a:hover{color:var(--orange-400);text-decoration:underline}
@media (max-width:640px){
.hero{padding:var(--space-16) var(--container-pad) 120px}
.hero h1{font-size:1.875rem}
.card{padding:var(--space-8) var(--space-5)}
.field-row{grid-template-columns:1fr}
.card-wrap{margin-top:-80px}
}