/* ===================================================================== Adaptive Persona template — public homepage skin. One page that reshapes itself for CEO / CTO / CMO / HR / Team Lead / Curious visitors. Accent palette swaps via [data-persona] on . Content (name, projects, skills) is rendered from the database by Thymeleaf; this file only styles it. ===================================================================== */ :root[data-persona="ceo"] { --accent:#4f46e5; --accent-2:#0ea5e9; --tint:#eef1ff; --tint-2:#e6f6ff; } :root[data-persona="cto"] { --accent:#0d9488; --accent-2:#22c55e; --tint:#e6fbf6; --tint-2:#eafbe9; } :root[data-persona="cmo"] { --accent:#e11d8f; --accent-2:#f59e0b; --tint:#ffe9f5; --tint-2:#fff3e0; } :root[data-persona="hr"] { --accent:#7c3aed; --accent-2:#f472b6; --tint:#f2ecff; --tint-2:#ffeef7; } :root[data-persona="lead"] { --accent:#2563eb; --accent-2:#06b6d4; --tint:#e8f0ff; --tint-2:#e2fbff; } :root[data-persona="curious"] { --accent:#ea8a0c; --accent-2:#10b981; --tint:#fff4e2; --tint-2:#e7fbf1; } :root { --bg:#f7f8fc; --surface:#ffffff; --ink:#12131a; --body:#43465a; --muted:#71748c; --faint:#9a9db4; --line:#e7e8f2; --line-2:#eef0f8; --shadow:0 20px 50px rgba(20,22,50,.10); --shadow-lg:0 40px 90px rgba(20,22,50,.16); --radius:22px; --sans:"Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --mono:ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, monospace; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; max-width:100%; } body { max-width:100%; background:var(--bg); color:var(--body); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img, svg, video { max-width:100%; height:auto; } a, p, li, h1, h2, h3, h4, .chip, .tag, .stack b { overflow-wrap:anywhere; } input, textarea, select, button { max-width:100%; } .bg-blobs { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } .bg-blobs i { position:absolute; border-radius:50%; filter:blur(80px); transition:background 1.2s ease; } .bg-blobs i:nth-child(1){ width:44vw; height:44vw; left:-10vw; top:-12vw; background:var(--accent); opacity:.16; } .bg-blobs i:nth-child(2){ width:40vw; height:40vw; right:-12vw; top:2vw; background:var(--accent-2); opacity:.16; } .bg-blobs i:nth-child(3){ width:38vw; height:38vw; left:34vw; bottom:-16vw; background:var(--accent); opacity:.10; } .wrap { max-width:1160px; margin:0 auto; padding:0 24px; } .nav { position:sticky; top:0; z-index:40; backdrop-filter:blur(14px); background:rgba(247,248,252,.8); border-bottom:1px solid transparent; transition:border-color .3s; } .nav.scrolled { border-color:var(--line); } .nav-inner { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1160px; margin:0 auto; gap:14px; } .brand { min-width:0; display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; } .brand .mark { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent); transition:background 1.2s ease; } .brand em { font-style:normal; background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .brand span:last-child { min-width:0; max-width:clamp(8rem,32vw,16rem); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px; } .nav-link { color:var(--muted); text-decoration:none; font-weight:600; font-size:14.5px; padding:8px 12px; border-radius:9px; } .nav-link:hover { color:var(--ink); } .nav-cta { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:14.5px; color:#fff; background:linear-gradient(100deg,var(--accent),var(--accent-2)); padding:11px 20px; border-radius:11px; box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 34%, transparent); transition:transform .16s, background 1.2s ease; } .nav-cta:hover { transform:translateY(-2px); } @media (max-width:560px){ .nav-cta, .nav-link{ display:none; } } .persona-bar { padding:26px 0 6px; } .persona-bar .label { font-size:13px; color:var(--muted); font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px; } .persona-bar .label b { color:var(--accent); font-weight:700; } .persona-chips { display:flex; flex-wrap:wrap; gap:10px; } .chip { display:inline-flex; align-items:center; gap:9px; border:1.5px solid var(--line); background:var(--surface); color:var(--body); font-family:inherit; font-weight:600; font-size:14.5px; padding:11px 17px; border-radius:100px; cursor:pointer; transition:transform .15s, border-color .2s, box-shadow .2s, color .2s; user-select:none; } .chip .emoji { font-size:16px; } .chip:hover { transform:translateY(-2px); box-shadow:var(--shadow); } .chip[aria-pressed="true"] { border-color:transparent; color:#fff; background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 32%, transparent); } .hero { padding:34px 0 30px; } .hero .kicker { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--accent); background:var(--tint); border:1px solid color-mix(in srgb,var(--accent) 18%, transparent); padding:7px 15px; border-radius:100px; margin-bottom:22px; transition:background 1.2s, color 1.2s; } .hero h1 { font-size:clamp(38px, 6.4vw, 74px); line-height:1.02; letter-spacing:-.035em; font-weight:800; color:var(--ink); max-width:17ch; } .hero h1 .g { background:linear-gradient(100deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero p.lead { font-size:clamp(17px,2.1vw,21px); color:var(--muted); max-width:60ch; margin-top:22px; } .hero .cta-row { display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; } .btn { max-width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px; text-align:center; white-space:normal; text-decoration:none; font-family:inherit; font-weight:700; font-size:15.5px; padding:14px 26px; border-radius:13px; cursor:pointer; border:none; transition:transform .16s, box-shadow .16s, background 1.2s; } .btn-primary { color:#fff; background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 32%, transparent); } .btn-primary:hover { transform:translateY(-3px); } .btn-ghost { color:var(--ink); background:var(--surface); border:1.5px solid var(--line); } .btn-ghost:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 40%, var(--line)); } .swap { transition:opacity .35s ease, transform .35s ease; } .swap.out { opacity:0; transform:translateY(10px); } .mode-panel { margin-top:44px; background:var(--surface); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow-lg); overflow:hidden; min-height:320px; } .mode-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 22px; border-bottom:1px solid var(--line-2); background:linear-gradient(180deg, var(--tint), transparent); transition:background 1.2s; } .mode-head .title { display:flex; align-items:center; gap:11px; font-weight:700; color:var(--ink); font-size:15.5px; } .mode-head .title .ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-size:15px; transition:background 1.2s; } .mode-head .pill { font-size:12.5px; font-weight:600; color:var(--accent); background:var(--tint-2); padding:5px 12px; border-radius:100px; transition:background 1.2s,color 1.2s; } .mode-body { padding:26px 24px; } .tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .tile { border:1px solid var(--line); border-radius:16px; padding:22px; background:linear-gradient(180deg, var(--tint), var(--surface)); transition:background 1.2s, transform .2s; } .tile:hover { transform:translateY(-4px); } .tile b { display:block; font-size:clamp(30px,4vw,42px); font-weight:800; letter-spacing:-.03em; background:linear-gradient(120deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .tile span { color:var(--muted); font-size:13.5px; margin-top:6px; display:block; } @media (max-width:720px){ .tiles{ grid-template-columns:repeat(2,1fr);} } .term { font-family:var(--mono); background:#0c1017; border-radius:14px; overflow:hidden; border:1px solid #1b2230; } .term-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#0a0e14; border-bottom:1px solid #1b2230; } .term-bar i { width:11px; height:11px; border-radius:50%; } .term-bar i:nth-child(1){background:#ff5f57;} .term-bar i:nth-child(2){background:#febc2e;} .term-bar i:nth-child(3){background:#28c840;} .term-bar span { margin-left:8px; color:#5b6b82; font-size:12px; } .term-body { padding:16px 16px 10px; min-height:180px; font-size:13.5px; line-height:1.75; color:#cdd9e5; } .term-body .p{color:#22d3ee;} .term-body .g{color:#4ade80;} .term-body .w{color:#fbbf24;} .term-body .o{color:#8496ac;white-space:pre-wrap;} .term-body a { color:#22d3ee; } .term-in { display:flex; gap:8px; align-items:center; padding:0 16px 14px; font-family:var(--mono); } .term-in label { color:#22d3ee; font-size:13.5px; } .term-in input { min-width:0; flex:1; background:transparent; border:none; outline:none; color:#e7eef7; font:inherit; font-size:13.5px; caret-color:#4ade80; } .term-hint { color:#5b6b82; font-size:12px; padding:0 16px 14px; font-family:var(--mono); } .term-hint b { color:#4ade80; font-weight:600; } .roi { display:grid; gap:22px; } .roi .control label { font-weight:700; color:var(--ink); display:block; margin-bottom:10px; font-size:15px; } .roi .control input[type=range]{ width:100%; accent-color:var(--accent); height:6px; } .roi .rangeval { font-weight:800; color:var(--accent); } .roi .out { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .roi .out .box { text-align:center; border:1px solid var(--line); border-radius:16px; padding:22px 14px; background:linear-gradient(180deg,var(--tint-2),var(--surface)); transition:background 1.2s; } .roi .out .box b { display:block; font-size:clamp(24px,3.4vw,34px); font-weight:800; color:var(--ink); } .roi .out .box span { color:var(--muted); font-size:13px; margin-top:5px; display:block; } .roi .note { color:var(--faint); font-size:12.5px; } @media (max-width:620px){ .roi .out{ grid-template-columns:1fr; } } .checklist { display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; } .check { display:flex; gap:12px; align-items:flex-start; } .check .tick { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-size:14px; transition:background 1.2s; } .check b { color:var(--ink); font-size:15px; font-weight:700; } .check p { color:var(--muted); font-size:13.5px; margin-top:2px; } @media (max-width:620px){ .checklist{ grid-template-columns:1fr; } } .timeline { position:relative; padding-left:26px; } .timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); border-radius:2px; } .tl-item { position:relative; padding:0 0 20px 4px; } .tl-item:last-child { padding-bottom:0; } .tl-item::before { content:""; position:absolute; left:-23px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--surface); border:3px solid var(--accent); transition:border-color 1.2s; } .tl-item b { color:var(--ink); font-size:15.5px; font-weight:700; } .tl-item p { color:var(--muted); font-size:14px; margin-top:3px; } .tl-item .wk { font-family:var(--mono); font-size:12px; color:var(--accent); font-weight:600; } .friendly { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .fcard { border:1px solid var(--line); border-radius:18px; padding:24px; background:var(--surface); text-align:center; transition:transform .2s; } .fcard:hover { transform:translateY(-4px); box-shadow:var(--shadow); } .fcard .big { font-size:34px; } .fcard b { display:block; margin:12px 0 8px; color:var(--ink); font-size:17px; } .fcard p { color:var(--muted); font-size:14px; } @media (max-width:720px){ .friendly{ grid-template-columns:1fr; } } section { padding:78px 0; } .sec-head { margin-bottom:34px; } .sec-head .kicker { color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; transition:color 1.2s; } .sec-head h2 { font-size:clamp(28px,4.6vw,46px); letter-spacing:-.03em; font-weight:800; color:var(--ink); margin-top:12px; max-width:22ch; } .persona-lens { margin-top:16px; display:inline-flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink); background:var(--tint-2); border:1px solid color-mix(in srgb,var(--accent) 18%, transparent); border-left:3px solid var(--accent); padding:11px 16px; border-radius:0 12px 12px 0; transition:background 1.2s, border-color 1.2s; } .persona-lens .swap { display:inline; } .work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .wcard { display:block; color:inherit; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:relative; overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s; } .wcard:first-child { grid-column:1 / -1; } .wcard:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--accent) 26%, var(--line)); } .wcard::after { content:""; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .3s; background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--accent) 12%, transparent), transparent 60%); } .wcard:hover::after { opacity:1; } .wcard > * { position:relative; z-index:1; } .wcard .tag { display:inline-block; color:var(--accent); font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; background:var(--tint); padding:5px 12px; border-radius:100px; transition:background 1.2s,color 1.2s; } .wcard h3 { font-size:clamp(21px,2.6vw,27px); color:var(--ink); letter-spacing:-.02em; margin:16px 0 10px; font-weight:800; } .wcard p { color:var(--muted); font-size:15px; } .wcard .stack { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; } .wcard .stack b { font-weight:500; font-size:12.5px; color:var(--faint); border:1px solid var(--line); border-radius:100px; padding:5px 12px; } .wcard .more { display:inline-block; margin-top:16px; color:var(--accent); font-weight:700; text-decoration:none; font-size:14.5px; } .wcard .more:hover { text-decoration:underline; } @media (max-width:820px){ .work-grid{ grid-template-columns:1fr; } .wcard:first-child{ grid-column:auto; } } .profile-sync { display:grid; grid-template-columns:minmax(170px,240px) 1fr minmax(220px,.72fr); gap:26px; align-items:center; margin:10px 0 6px; padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .profile-sync-media img { width:100%; max-width:240px; aspect-ratio:1/1; object-fit:cover; border-radius:24px; box-shadow:var(--shadow-lg); } .profile-sync-kicker { color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; } .profile-sync h2 { color:var(--ink); font-size:clamp(25px,3.4vw,38px); line-height:1.12; letter-spacing:0; margin-bottom:14px; } .profile-sync-copy p { color:var(--muted); font-size:15.5px; margin-top:10px; } .profile-sync-links { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; } .profile-sync-links a { color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:7px 13px; text-decoration:none; font-size:13px; font-weight:700; } .profile-sync-links a:hover { border-color:color-mix(in srgb,var(--accent) 38%, var(--line)); color:var(--accent); } .profile-sync-proof { display:grid; gap:12px; } .profile-sync-proof div { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:15px; } .profile-sync-proof b { display:block; color:var(--ink); font-size:14px; } .profile-sync-proof span { display:block; color:var(--muted); font-size:12.5px; margin-top:4px; } @media (max-width:860px){ .profile-sync{ grid-template-columns:1fr; } .profile-sync-media img{ max-width:210px; } } .template-conversion { padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .template-conversion-main { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr); gap:24px; align-items:center; } .template-conversion-copy h2 { color:var(--ink); font-size:clamp(28px,4.4vw,46px); line-height:1.08; letter-spacing:0; } .template-conversion-copy p { color:var(--muted); font-size:16px; margin-top:14px; max-width:62ch; } .template-conversion-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } .template-conversion-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .template-conversion-stats article { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow); } .template-conversion-stats strong { display:block; color:var(--accent); font-size:clamp(28px,4vw,40px); line-height:1; } .template-conversion-stats span { display:block; color:var(--ink); font-weight:800; font-size:13.5px; margin-top:8px; } .template-next-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; } .template-next-steps article { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; } .template-next-steps span { display:inline-block; color:var(--accent); font-weight:800; font-size:12px; margin-bottom:6px; } .template-next-steps b { display:block; color:var(--ink); font-size:14px; } .template-next-steps p { color:var(--muted); font-size:13px; margin-top:5px; } .template-proof, .template-contact { padding:64px 0; border-bottom:1px solid var(--line); } .template-section-head { max-width:660px; margin-bottom:26px; } .template-kicker { color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; } .template-section-head h2 { color:var(--ink); font-size:clamp(28px,4.4vw,46px); line-height:1.08; letter-spacing:0; } .template-section-head p { color:var(--muted); font-size:16px; margin-top:14px; } .template-text-link { display:inline-flex; margin-top:18px; color:var(--accent); font-weight:800; text-decoration:none; } .template-text-link:hover { text-decoration:underline; } .template-proof-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .template-proof-metrics article { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow); } .template-proof-metrics strong { display:block; color:var(--accent); font-size:clamp(26px,4vw,38px); line-height:1; } .template-proof-metrics span { display:block; color:var(--ink); font-weight:800; font-size:13.5px; margin-top:8px; } .template-proof-metrics p { color:var(--muted); font-size:13px; margin-top:6px; } .template-contact-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); gap:24px; align-items:start; } .template-brief-form, .template-contact-direct { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:24px; box-shadow:var(--shadow); } .template-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .template-field { margin-bottom:14px; } .template-field label { display:block; color:var(--ink); font-weight:800; font-size:13px; margin-bottom:7px; } .template-field input, .template-field select, .template-field textarea { width:100%; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); font:inherit; padding:11px 12px; } .template-field textarea { resize:vertical; min-height:130px; } .template-field.invalid input, .template-field.invalid textarea { border-color:#ef4444; } .field-error, .form-status, .template-form-note { color:var(--faint); font-size:12.5px; margin-top:7px; } .error-text { color:#dc2626; } .template-form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .template-form-actions button { border:0; } .template-contact-direct h3 { color:var(--ink); margin-bottom:12px; } .template-contact-direct a { display:block; color:var(--accent); font-weight:800; text-decoration:none; margin:10px 0; } .template-contact-direct p { color:var(--muted); font-size:13px; margin-top:16px; } .hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } @media (max-width:820px){ .template-conversion-main,.template-conversion-stats,.template-next-steps,.template-proof-metrics,.template-contact-grid,.template-form-row{ grid-template-columns:1fr; } } .band { background:linear-gradient(120deg, var(--accent), var(--accent-2)); border-radius:30px; padding:60px 40px; color:#fff; transition:background 1.2s; box-shadow:var(--shadow-lg); } .band h2 { font-size:clamp(26px,4.4vw,44px); letter-spacing:-.03em; font-weight:800; max-width:20ch; } .band p { font-size:18px; opacity:.92; margin-top:16px; max-width:58ch; } .band .cta-row { margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; } .band .btn-white { background:#fff; color:var(--ink); box-shadow:0 14px 34px rgba(0,0,0,.16); } .band .btn-white:hover { transform:translateY(-3px); } .band .btn-line { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); } .reveal { opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity:1; transform:none; } footer { padding:56px 0 44px; border-top:1px solid var(--line); color:var(--faint); font-size:14px; text-align:center; } footer a { color:var(--accent); text-decoration:none; } @media (max-width:640px){ .wrap { padding-inline:16px; } .nav-inner { align-items:flex-start; flex-direction:column; padding:13px 16px; } .nav-actions { justify-content:flex-start; width:100%; gap:8px; } .nav-link, .nav-cta { display:inline-flex; align-items:center; justify-content:center; } .nav-link { border:1px solid var(--line); background:var(--surface); padding:7px 10px; } .nav-cta { padding:8px 12px; } .persona-bar { padding-top:20px; } .persona-bar .label, .persona-lens { align-items:flex-start; flex-wrap:wrap; } .chip { flex:1 1 136px; justify-content:center; padding-inline:12px; } .hero { padding-top:28px; } section, .template-proof, .template-contact { padding:48px 0; } .mode-head { align-items:flex-start; flex-direction:column; } .mode-body, .wcard, .template-brief-form, .template-contact-direct { padding:20px; } .band { border-radius:22px; padding:42px 22px; } } @media (max-width:380px){ .wrap { padding-inline:10px; } .brand span:last-child { max-width:12rem; } .hero h1 { font-size:clamp(32px,10vw,38px); } .btn { width:100%; padding-inline:16px; } .nav-actions a { flex:1 1 auto; } .tiles { grid-template-columns:1fr; } .term-in { align-items:flex-start; flex-direction:column; } }