/*
 * assets/css/site.css
 *
 * Plain, hand-written CSS - no framework, no build step. That's a
 * deliberate choice for a shared-hosting project: what you see in this
 * file is exactly what ships, and any developer can open it and change a
 * color or spacing value directly without needing Node, Tailwind, or a
 * compile step. Fluid sizing (clamp()) handles most of the responsive
 * work instead of a long list of media queries.
 */

:root{
    --ink:#171821;
    --dim:#666a78;
    --border:#e4e3ea;
    --bg:#faf9fc;
    --surface:#ffffff;
    --violet:#6e56cf;
    --violet-soft:#efebfb;
    --coral:#ff6b57;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
    line-height:1.6;
}
a{ color:var(--violet); }
img{ max-width:100%; display:block; }
.wrap{ max-width:900px; margin:0 auto; padding:0 24px; }
.dim{ color:var(--dim); }

.btn{
    display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem;
    padding:.85rem 1.6rem; border-radius:999px; text-decoration:none; transition:transform .2s ease;
}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:#fff; border:1.5px solid var(--border); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--violet); transform:translateY(-2px); }

/* ---------- header ---------- */
.site-header{ padding:20px 0; }
.header-row{ display:flex; align-items:center; justify-content:space-between; }
.brand{ font-weight:800; font-size:1.1rem; text-decoration:none; color:var(--ink); }
.header-nav a{ margin-left:22px; text-decoration:none; color:var(--dim); font-size:.92rem; font-weight:500; }
.header-nav a:hover{ color:var(--ink); }

/*
 * ---------- hero ----------
 * Requested order is literal and kept identical at every screen size:
 * 1. Name (huge)  2. Photo  3. Tagline/bio/buttons.
 * Everything stays centered in a single column - fluid clamp() sizing
 * does the responsive work instead of restructuring the layout at
 * different breakpoints, so the order never changes.
 */
.hero{ padding:clamp(40px, 8vw, 90px) 0 clamp(50px, 8vw, 100px); text-align:center; }
.hero-inner{ display:flex; flex-direction:column; align-items:center; }

.hero-name{
    font-size:clamp(2.6rem, 9vw, 6rem);
    font-weight:800;
    line-height:1;
    letter-spacing:-.02em;
    margin:0 0 clamp(24px, 4vw, 40px);
}

.hero-photo{
    width:clamp(140px, 22vw, 240px);
    height:clamp(140px, 22vw, 240px);
    border-radius:50%;
    overflow:hidden;
    margin-bottom:clamp(24px, 4vw, 36px);
    box-shadow:0 20px 50px rgba(23,21,33,.14);
    border:4px solid #fff;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo-placeholder{
    display:flex; align-items:center; justify-content:center;
    background:var(--violet-soft); color:var(--violet);
    font-size:clamp(2.5rem, 6vw, 4rem); font-weight:800;
}

.hero-tagline{ font-size:clamp(1.05rem, 2.4vw, 1.3rem); font-weight:600; color:var(--violet); margin:0 0 12px; }
.hero-bio{ max-width:520px; color:var(--dim); font-size:1.02rem; margin:0 0 32px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ---------- sections ---------- */
.section{ padding:clamp(50px, 8vw, 90px) 0; }
.section h2{ font-size:clamp(1.6rem, 4vw, 2.1rem); text-align:center; margin:0 0 36px; }

.what-i-do-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:720px){ .what-i-do-grid{ grid-template-columns:repeat(3,1fr); } }
.do-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px; }
.do-card h3{ font-size:1.05rem; margin:0 0 8px; }
.do-card p{ color:var(--dim); font-size:.92rem; margin:0; }

.section-contact{ text-align:center; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-contact a{ font-weight:600; }

/* ---------- footer ---------- */
.site-footer{ padding:30px 0; }
.footer-row{ display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; font-size:.88rem; color:var(--dim); }
@media (min-width:640px){ .footer-row{ flex-direction:row; justify-content:space-between; text-align:left; } }
.footer-social a{ margin-left:16px; color:var(--dim); text-decoration:none; }
.footer-social a:first-child{ margin-left:0; }
.footer-social a:hover{ color:var(--violet); }

/* ---------- floating quick-message widget ---------- */
.qm-widget{ position:fixed; bottom:22px; right:22px; z-index:80; }
.qm-toggle{
    width:58px; height:58px; border-radius:50%; background:var(--violet); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px rgba(110,86,207,.35);
    transition:transform .2s ease;
}
.qm-toggle:hover{ transform:scale(1.07); }

.qm-panel{
    position:absolute; bottom:72px; right:0; width:300px; background:#fff; border:1px solid var(--border);
    border-radius:18px; box-shadow:0 20px 50px rgba(23,21,33,.18); overflow:hidden;
}
.qm-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.qm-panel-head button{ background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--dim); }
.qm-form{ padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.qm-form input, .qm-form textarea{
    border:1.5px solid var(--border); border-radius:10px; padding:.65rem .8rem; font-family:inherit; font-size:.9rem;
}
.qm-form input:focus, .qm-form textarea:focus{ outline:none; border-color:var(--violet); }
.qm-status{ font-size:.85rem; text-align:center; margin:0; }
.qm-status.is-success{ color:#1f9d63; }
.qm-status.is-error{ color:#d1414a; }

@media (max-width:400px){
    .qm-panel{ width:calc(100vw - 44px); right:-12px; }
}