{"id":"gen-1784789392-6uy1sldrthJpBaePj8ll","choices":[{"finish_reason":"stop","index":0,"logprobs":null,"message":{"content":"Here's a premium, editorial-style hero section for a PMU artist — arch imagery, gold accents, staggered reveals, a rotating consult badge, and a services marquee. Fully self-contained in one HTML file:\n\n```html\n\n\n\n\n\n\nMara Voss — Permanent Makeup Artistry\n\n\n\n\n\n\n\n\n\n

\n\n\n

\n ✦Mara Voss\n \n Book Now\n \n

\n\n\n

\n\n

Permanent Makeup Artistry · Los Angeles✦

\n\n

\n The quiet luxury\n of effortless beauty,\n made to last.\n

\n\n

\n Certified PhiBrows artistry — hyper-natural microblading, soft\n powder brows and lip blush, meticulously mapped to your\n bone structure and skin tone. So you wake up every morning already put together.\n

\n\n

\n Book a Consultation →\n View the Portfolio ↗\n

\n\n

\n JR\n MK\n AS\n ✦\n

Trusted by 2,400+ clients for natural, undetectable results — 8 years of artistry.

\n\n

\n\n

\n ✦\n

PhiBrow Royal Artist

Certified · Branko Babić Academy

\n\n

\n 5.0\n

★★★★★

300+ verified reviews

\n\n \n \n ↗\n \n

\n\n \n

Scroll

\n\n

\n\n\n

Microblading ✦
Powder Brows ✦
Lip Blush ✦
PMU Eyeliner ✦
Scar Camouflage ✦
Saline Removal ✦

Microblading ✦
Powder Brows ✦
Lip Blush ✦
PMU Eyeliner ✦
Scar Camouflage ✦
Saline Removal ✦

\n\n\n\n```\n\n**Design highlights:**\n- **Editorial typography** — Cormorant Garamond serif with a gold-gradient italic accent, masked line-by-line reveal animation\n- **Signature arch image** — on-trend for beauty brands, with an offset gold outline, cinematic gradient overlay, and slow zoom on hover\n- **Floating trust elements** — frosted-glass certification card, 5.0 rating card, and a rotating \"Free Consultations\" badge with a hover state\n- **Premium texture** — subtle film grain, ambient rose/gold glows, dotted pattern, vertical location tag, animated scroll indicator\n- **Services marquee** — infinite, pause-on-hover ticker anchoring the hero\n- Fully responsive with reduced-motion support and a graceful gradient fallback behind the image\n\nSwap in your artist's name, city, stats, and a portrait photo to make it production-ready.","refusal":null,"role":"assistant","annotations":null,"audio":null,"function_call":null,"tool_calls":null,"reasoning":"The user wants a premium, high-end hero section for a landing page for a PMU (Permanent Makeup) artist. This should be HTML/CSS only, just the hero section, not a full website.\n\nPMU = Permanent Makeup artist - think microblading, lip blush, powder brows, permanent eyeliner, etc. The aesthetic should be:\n- Luxurious, elegant, feminine but sophisticated\n- Color palette: soft neutrals, blush/rose tones, gold accents, cream, champagne, maybe deep charcoal/black for contrast\n- Typography: elegant serif fonts (like Playfair Display, Cormorant Garamond) paired with clean sans-serif\n- Premium feel: generous whitespace, refined details, subtle animations\n\nKey elements for a high-end hero section:\n1. Navigation bar (minimal, elegant)\n2. Large headline with elegant typography\n3. Subheadline\n4. CTA buttons\n5. Hero image area (I can use CSS to create an elegant visual since I can't rely on external images... actually I could use placeholder gradients or CSS art, or use unsplash URLs - but those may break. Better to create an elegant CSS-based visual or use gradient/pattern compositions)\n6. Social proof elements (years experience, clients, certifications)\n7. Subtle animations for premium feel\n8. Decorative elements (fine lines, gold accents)\n\nLet me think about the design:\n\n**Layout option:** Split hero - left side with text content, right side with an image/visual composition. Or a centered layout with layered typography.\n\nFor the image, since I can't guarantee external images load, I could:\n- Use a CSS gradient composition that evokes elegance\n- Create an abstract shape composition\n- Actually, Unsplash source URLs sometimes work but are unreliable. Let me create a beautiful CSS-only visual instead - maybe an elegant arch shape (very trendy in beauty aesthetics) with gradient and texture.\n\nActually, for a truly premium look, I'll do:\n- Arch-shaped image container (very on-trend for beauty/lash/brow artists)\n- Layered decorative elements\n- Floating badge elements (like \"Certified Artist\", rating stars)\n- Marquee text strip at the bottom maybe\n- Fine line decorative elements\n\nTypography: Use Google Fonts - Cormorant Garamond or Playfair Display for headlines, Inter or Jost for body. Maybe add an italic accent word style.\n\nColor palette:\n- Background: warm cream/ivory (#FAF7F2 or similar)\n- Text: deep espresso/charcoal (#1C1917 or #2B2320)\n- Accent: muted rose/terracotta or gold (#B08D57 gold, or dusty rose #C9A092)\n- Gold gradient for luxury accents\n\nLet me design the structure:\n\n```\n

- nav with logo, links, CTA button\n

\n - Left: eyebrow text, big headline with italic serif accents, description, CTAs, social proof (avatars/ratings/stats)\n - Right: arch image composition with floating cards, decorative circle text rotating, etc.\n - Bottom: marquee strip or logos\n```\n\nPremium details to include:\n- Subtle grain/noise texture overlay\n- Rotating circular text badge (SVG textPath)\n- Fine border lines\n- Letter-spaced uppercase labels\n- Smooth entrance animations\n- Hover micro-interactions\n- Custom selection color\n- Marquee at bottom with services\n\nFor the \"image\" — I'll build a CSS composition: an arch with a gradient that mimics a portrait photo aesthetic. Hmm, but a gradient might look cheap. Alternative: use an actual Unsplash image URL. Many landing page demos use images.unsplash.com direct URLs which are stable. Let me use a direct Unsplash CDN URL (images.unsplash.com/photo-...) which are generally stable. I'll pick a beauty-related image. Risky if it breaks though. I could add a gradient fallback background behind it so it still looks fine if the image fails.\n\nLet me use: https://images.unsplash.com/photo-... something with a woman's face, brows, beauty. Some known stable ones:\n- photo-1487412947147-5cebf100ffc2 (woman beauty)\n- photo-1512496015851-a90fb38ba796 (makeup brushes? cosmetics)\n- photo-1522337660859-02fbefca4702 (beauty/spa)\n- photo-1560066984-138dadb4c035 (salon)\n- photo-1516975080664-ed2fc6a32937 (portrait)\n- photo-1500840216050-6ffa99d75160 (woman face)\n- photo-1583001931096-959e9a1a6223 (brows?)\n\nI'll use photo-1487412947147-5cebf100ffc2 (a classic beauty close-up) with a gradient fallback. Also add background-color so if it fails, the arch still looks intentional.\n\nActually let me layer: the arch container has a warm gradient background, and an inside with object-fit cover. If img fails, onerror hide it. I can add onerror=\"this.style.display='none'\" — but the user said HTML/CSS... a tiny inline onerror is fine, or I can just leave the gradient behind. Keep it simple: gradient behind image.\n\nLet me write the code with care for premium details:\n\n1. **Fonts:** \n - \"Cormorant Garamond\" (light, italic for accents) \n - \"Jost\" or \"Outfit\" for sans. Let me use \"Jost\" — elegant geometric sans. Actually \"Inter\" is safe but Jost feels more fashion. I'll go Jost with fallbacks.\n\n2. **Nav:** Logo \"ELENA VOSS\" or similar artist name with \"PMU ARTISTRY\" — maybe \"Atelier\" something. Name ideas: \"Mara Belle\", \"Studio Élan\", \"AVA LUNE\". Let me go with \"ATELIER LUMIÈRE\"? Simpler: \"MIRA SOLÉ\" — hmm. \"ÉLAN Studio\"? I'll use \"MARA VOSS — PMU ARTISTRY\" or just elegant \"M · V\". Let me do logo as \"Marlowe\" ... Keep it: \"ÉLISE MARLOWE\" might be too much. Simple: **\"Mara Ellison\"** or brand \"VELLURE\". I'll go with artist name \"Mara Voss\" and tagline \"PMU Artistry\". Logo: \"Mara Voss\" in serif with a small ® style or a dot.\n\n3. **Headline:** Something like:\n - \"Wake up with perfect brows, every single day.\"\n - \"The art of effortless beauty.\"\n - \"Where precision meets artistry.\"\n \n Premium approach: eyebrow \"PERMANENT MAKEUP ARTISTRY — EST. 2016\", then H1: \"Effortless beauty, *meticulously* crafted.\" with italic accent. Or \"Brows that speak before you do.\" Let me craft: \"Natural beauty, refined & made permanent.\" Hmm.\n \n I'll go: H1: \"The art of *effortless* beauty\" — clean. Or with more PMU specificity: \"Wake up flawless. Every brow, every line, perfected.\" \n \n Final: eyebrow: \"★ RATED 5.0 — PERMANENT MAKEUP STUDIO\", H1: \"Beauty that begins before you wake.\" or \"The quiet luxury of effortless beauty.\"\n \n I like: \"**The quiet luxury of effortless beauty.**\" with \"effortless\" in italic serif gold. Strong, premium, evocative.\n\n4. **Sub:** \"Specializing in hyper-realistic microblading, powder brows & lip blush. Natural results, meticulously designed for your unique features.\"\n\n5. **CTAs:** \"Book a Consultation\" (filled dark) + \"View Portfolio →\" (text with underline animation).\n\n6. **Social proof:** avatar stack (CSS circles with gradient initials or tiny unsplash faces — risky; use gradient circles with initials), \"500+ happy clients\" and \"8 years experience\". Stats row: \"2,400+ Procedures | 8 Yrs Experience | 5.0 Rating\".\n\n7. **Right visual:** \n - Arch image (border-radius top 999px)\n - Behind: offset gold arch outline\n - Floating card: \"Certified · PhiBrows Artist\" with icon\n - Floating badge: rotating circular text \"BOOK YOUR CONSULTATION • PMU ARTISTRY •\" with arrow in center\n - Small floating card: rating \"5.0 ★★★★★ 300+ reviews\"\n - Decorative dots pattern or fine lines\n\n8. **Bottom marquee:** \"MICROBLADING ✦ POWDER BROWS ✦ LIP BLUSH ✦ EYELINER ✦ SALINE REMOVAL ✦\" scrolling.\n\n9. **Animations:** fade-up on load with staggered delays, slow float on cards, rotation on circular text, marquee scroll, hover states on buttons (arrow slide), subtle image scale on hover.\n\n10. **Texture:** SVG noise overlay at low opacity for that premium grain feel.\n\nLet me also add a thin top announcement bar? Maybe not needed; keep nav clean.\n\nResponsive: stack on mobile, reduce sizes with clamp().\n\nLet me write the code carefully.\n\n```html\n\n\n\n\n\nMara Voss — PMU Artistry\n\n\n\n\n\n\n

(or body::after)\n\n

\n ✦ Mara Voss\n \n Book Now\n

\n\n

Permanent Makeup Artistry · Los Angeles

\n The quiet luxury of\n effortless beauty,\n made to last.\n

...

\n Book a Consultation→\n View the portfolio\n

...4 circles...

Trusted by 2,400+ clients across Los Angeles

2,400+Procedures

\n ...\n

\n\n

\n \n \n \n

...

\n \n ↗\n \n \n

\n\n \n

Scroll

\n\n

...

\n\n\n\n```\n\nHmm, placement of stats + proof both may be too much. Choose one: avatar proof row OR stats. I'll include avatar proof row, and skip separate stats row to avoid clutter — or small stats inside? Actually premium heroes often have stats. Let me include both but compact: proof row with avatars + short text; then a hairline; then stats inline small. Hmm might crowd. Alternative: put rating into proof row: avatars + \"4.9 ★ from 300+ reviews\". And stats integrated as three numbers below. I'll keep proof row only with avatars and rating text — cleaner. Then the marquee provides the services info. And floating cards provide cert + rating. Good, avoid redundancy: proof row = avatars + \"Trusted by 2,400+ clients · 8 years of artistry\".\n\nWait, card B is rating 5.0 — proof row can be avatars + \"2,400+ flawless results\". fine.\n\nHero bottom: marquee directly under hero as part of hero section conceptually. Place marquee inside main or right after; it's part of hero section visually. Keep as sibling section with borders.\n\nVertical side note: position absolute right center of hero, writing-mode vertical.\n\nScroll hint: absolute bottom left of hero above marquee.\n\nNow CSS details:\n\nNav link hover underline:\n```css\n.nav-links a { position:relative; }\n.nav-links a::after { content:\"\"; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.22,1,.36,1); }\n.nav-links a:hover::after { transform:scaleX(1); transform-origin:left; }\n```\n\nPrimary button:\n```css\n.btn-primary { background:var(--ink); color:var(--cream); border-radius:999px; padding: 18px 34px; display:inline-flex; gap:12px; align-items:center; font: 500 13px Jost; letter-spacing:.18em; text-transform:uppercase; transition: background .4s, transform .4s, box-shadow .4s; }\n.btn-primary:hover { background:var(--gold); transform:translateY(-2px); box-shadow: 0 18px 30px -18px rgba(176,141,87,.8); }\n.btn-arrow { transition: transform .4s; } .btn-primary:hover .btn-arrow { transform: translateX(6px); }\n```\n\nUnderline link:\n```css\n.link-underline { font: 500 13px Jost; letter-spacing:.18em; text-transform:uppercase; padding-bottom:6px; background: linear-gradient(var(--ink),var(--ink)) left bottom / 100% 1px no-repeat; transition: background-size .4s, color .4s; }\nhover: background-size 0 1px? Actually animate from 100% to 0 then... simpler: from left 0 width to full on hover with transform scaleX. Use ::after.\n```\nI'll do: base has ::after scaleX(1) and hover scaleX(0)? Reverse feel. Do: default hairline gold full, hover ink grows? Keep simple: underline appears/slides on hover with background-size from 0% to 100%, plus arrow ↗.\n\nEyebrow:\n```css\n.eyebrow { display:flex; align-items:center; gap:14px; font:500 11px/1 Jost; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-soft); }\n.eyebrow .rule { width:44px; height:1px; background:var(--gold); }\n```\n\nHeadline:\n```css\n.headline { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(2.9rem, 6.2vw, 5.4rem); line-height:1.02; letter-spacing:-0.01em; margin: 26px 0 28px; }\n.headline em { font-style:italic; font-weight:400; background:linear-gradient(100deg,#8f6b3f,#c9a15f 40%, #e5c98f 55%, #b08d57); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; }\n.mask{display:block; overflow:hidden;}\n.rise{display:inline-block; transform:translateY(110%); animation: rise 1.1s cubic-bezier(.22,1,.36,1) forwards; }\nmask:nth-child delays.\n@keyframes rise { to { transform:none; } }\n```\n\nLede: Jost 300/400 16-17px, color ink-soft, max-width 46ch, line-height 1.8.\n\nAvatars:\n```css\n.avatars { display:flex; }\n.avatar { width:42px;height:42px;border-radius:50%; border:2px solid var(--cream); margin-left:-12px; display:grid;place-items:center; color:#fff; font:500 13px Jost; }\nfirst margin-left:0. backgrounds: gradients rose/gold/taupe/ink.\n```\nText beside with strong.\n\nProof row: margin-top: 44px; padding-top: 28px; border-top: 1px solid line; max-width: 480px; display flex align center gap 18px.\n\nArch & visual:\n\n```css\n.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; min-height: 520px; }\n.arch { position:relative; width:min(400px, 34vw); aspect-ratio: 3/4.1; border-radius: 999px 999px 28px 28px; overflow:hidden; background: linear-gradient(160deg,#e8d9c8, #cbb29c); box-shadow: 0 40px 80px -40px rgba(33,27,22,.45); }\n.arch img { width:100%;height:100%;object-fit:cover; transform:scale(1.02); transition: transform 1.2s cubic-bezier(.22,1,.36,1); filter: saturate(.92) contrast(1.02); }\n.hero-visual:hover .arch img { transform: scale(1.06); }\n.arch::after { content:\"\"; position:absolute; inset:0; background: linear-gradient(to top, rgba(33,27,22,.28), transparent 45%); }\n.arch-outline { position:absolute; width:min(400px,34vw); aspect-ratio:3/4.1; border:1px solid rgba(176,141,87,.55); border-radius:999px 999px 28px 28px; transform: translate(26px,-26px); z-index:0; }\n```\nArch z-index 1 above outline. Actually outline behind: place outline first in DOM, arch after; set arch z-index:1.\n\nCards:\n```css\n.card { position:absolute; z-index:3; background: rgba(250,247,241,.85); backdrop-filter: blur(10px); border:1px solid rgba(33,27,22,.08); border-radius:16px; padding:16px 20px; box-shadow: 0 24px 50px -30px rgba(33,27,22,.35); animation: float 7s ease-in-out infinite; }\n.card-cert { top: 12%; right: 2%; }\n.card-rating { bottom: 14%; left: 0; animation-delay: -3.5s; }\n```\nCert card content: gold ✦ icon circle + text lines: \"PhiBrow Royal Artist\" serif-ish + small \"Certified · Branko Babić Academy\". \nRating card: big \"5.0\" Cormorant + stars (gold ★★★★★) + \"300+ verified reviews\".\n\nBadge: \n```css\n.badge { position:absolute; left: 6%; bottom: -34px; width:132px; height:132px; border-radius:50%; background: var(--ink); color:var(--cream); display:grid; place-items:center; z-index:4; box-shadow: 0 24px 44px -20px rgba(33,27,22,.5); transition: transform .4s; }\n.badge:hover { transform: scale(1.05); }\n.badge svg { position:absolute; inset:0; width:100%; height:100%; animation: spin 16s linear infinite; }\n.badge text { font: 600 10.5px Jost; letter-spacing: 2.6px; fill: var(--cream); text-transform: uppercase; }\n.badge-arrow { font-size: 22px; color: var(--gold-light); }\n```\nOverlap badge onto arch bottom-left. Position relative to hero-visual container; arch centered, so badge at left side of arch. I'll compute: arch width min(400px,34vw); badge left: calc(50% - 220px)? Simpler: absolutely position relative to visual container with percentage: left: 8%; bottom: 6%. It'll overlap arch corner roughly. Fine-tune: bottom: 8%; left: 4%.\n\nHmm — card-rating also left bottom. Conflict. Rearrange: badge bottom-left overlapping arch (left: 2%, bottom: 4%); card-rating top-left (top: 16%, left: -2%); card-cert right middle (top: 38%, right: -4%). Balance.\n\nLet me set:\n- card-cert: top: 10%; right: -2%.\n- card-rating: bottom: 18%; left: -4%.\n- badge: bottom: -2%; right: 12%? Or center-bottom-left. Put badge bottom-left overlapping arch: left: 6%; bottom: 2%. But card-rating is left too. Move card-rating to right-bottom: right: -2%, bottom: 20%. And badge left-bottom. Cert top-right might crowd with rating right-bottom — okay vertical separation.\n\nFinal: cert top-right (top:9%, right:-3%), rating mid-left (top: 44%, left:-5%), badge bottom-left (left:10%, bottom:-3%). Hmm badge bottom slightly outside visual; ensure hero has bottom padding/marquee gap. Give hero-visual padding-bottom or badge bottom: 0. Keep bottom: 0 overlapping arch bottom edge.\n\nDots pattern:\n```css\n.dots { position:absolute; right: -8%; bottom: 6%; width:180px; height:180px; background-image: radial-gradient(rgba(176,141,87,.5) 1.5px, transparent 1.6px); background-size: 18px 18px; z-index:0; }\n```\nMight overlap card-rating if right-bottom; move dots top-left: left:-10%; top:-4%. Behind everything z-index 0.\n\nSide note:\n```css\n.side-note { position:absolute; right: clamp(12px, 2vw, 28px); top:50%; transform: translateY(-50%); writing-mode: vertical-rl; font:500 11px Jost; letter-spacing:.4em; text-transform:uppercase; color: var(--ink-soft); display:flex; align-items:center; gap:16px; }\n.side-note::before/after hairline vertical.\n```\nHide below 1200px.\n\nScroll hint bottom-left of hero:\n```css\n.scroll-hint { position:absolute; left: clamp(20px,5vw,64px); bottom: 26px; display:flex; align-items:center; gap:12px; font:500 10px Jost; letter-spacing:.4em; uppercase; color: ink-soft; }\n.scroll-hint span { width:56px; height:1px; background: line; position:relative; overflow:hidden; }\n.scroll-hint span::after { content:\"\"; position:absolute; inset:0; background: var(--gold); transform: translateX(-100%); animation: slide 2.2s cubic-bezier(.65,0,.35,1) infinite; }\n@keyframes slide { 40%{transform:translateX(0)} 100%{transform:translateX(100%)} }\n```\n\nMarquee:\n```css\n.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding: 20px 0; background: rgba(255,255,255,.35); }\n.marquee-track { display:flex; width:max-content; animation: scroll 28s linear infinite; gap: 0; }\n.marquee:hover .marquee-track { animation-play-state: paused; }\n.marquee ul { display:flex; list-style:none; }\n.marquee li { display:flex; align-items:center; gap: 28px; padding-right: 28px; font: 400 13px Jost; letter-spacing:.35em; text-transform:uppercase; white-space:nowrap; color: var(--ink-soft); }\n.marquee li i / .star { color: gold; font-style:normal; }\n@keyframes scroll { to { transform: translateX(-50%); } }\n```\nTrack contains two identical ul for seamless -50%.\n\nEntrance animations for copy elements: eyebrow fade, lede fade-up delay .45, cta .55, proof .7, visual: arch scale-in .8, cards fade with delays 1.0/1.15, badge pop 1.2.\n\nDefine:\n```css\n@keyframes fadeUp { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform:none;} }\n@keyframes fadeIn { from {opacity:0} to {opacity:1} }\n@keyframes pop { from { opacity:0; transform: scale(.6);} to {opacity:1; transform: scale(1);} }\n```\nApply classes .a1... or inline via style. Use utility: `.fu { animation: fadeUp .9s cubic-bezier(.22,1,.36,1) both; }` with `style=\"animation-delay:.5s\"`.\n\nNav entrance: fadeDown slight.\n\nBody min-height, hero min-height: calc(100svh - 89px) maybe. Use `min-height: calc(100vh - 89px)` grid align center; but with marquee after, hero fits viewport nicely: 100vh total including nav+marquee? Marquee ~60px. hero min-height: calc(100vh - 89px - 62px). Eh, just min-height: calc(100vh - 90px) and marquee flows below fold slightly? Premium heroes often have marquee at bottom of viewport. Set hero min-height: calc(100svh - 89px - 61px). Use svh with vh fallback. I'll do:\n\n```css\n.hero { min-height: calc(100vh - 150px); }\n@supports (height: 100svh) { .hero { min-height: calc(100svh - 150px); } }\n```\nApprox nav 89 + marquee 61 = 150. \n\nResponsive:\n- max-width 1200: side-note display none.\n- 980: grid 1 column; visual order after copy; reduce headline; cards scale down? Keep absolute but sizes fine.\n- 640: nav-links hidden; show minimal menu button; hide scroll-hint; card padding smaller; badge 110px.\n\nAdd hamburger as pure CSS visual (three spans) non-functional — fine for hero demo.\n\nSelection:\n```css\n::selection { background: var(--gold); color: #fff; }\n```\n\nFocus-visible outlines.\n\nprefers-reduced-motion: kill animations (set animation: none; transform: none; but ensure .rise default translateY(110%) hidden! If animations disabled, rises stay hidden. So in reduced-motion, set .rise { transform: none; } etc. I'll add:\n```css\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }\n}\n```\nWith `both` fill and .01ms, final state applies. Good.\n\nGrain: body::before fixed noise. z-index 100 pointer-events none, opacity .5 with the rect alpha low. Use:\n```css\n.grain { position: fixed; inset: -50%; width:200%; height:200%; background-image:url(\"data:image/svg+xml,...\"); opacity:.05; pointer-events:none; z-index:60; }\n```\nStatic fine (no animation to keep calm). Actually subtle static grain ok.\n\nBackground decorations: \n```css\nbody { background: var(--cream); }\n.hero::before { radial gradient rose top-right }\n.hero::after? maybe huge watermark text via .watermark element: \"Artistry\" Cormorant italic, font-size 22vw, color transparent with -webkit-text-stroke? Outlined text could be chic but risky clutter. I'll add soft radial glows only:\n.hero::before { content:\"\"; position:absolute; top:-20%; right:-10%; width:60vw; height:60vw; background: radial-gradient(circle, rgba(201,160,146,.28), transparent 60%); z-index:-1/0 with pointer-events none }\nand a gold one bottom-left faint.\n```\nHero needs position:relative and overflow visible; glows with z-index 0 behind content z-index 1. Manage stacking: give hero-copy and hero-visual position relative z-index 1.\n\nNav: position sticky? Hero-only; keep static. border-bottom hairline.\n\nLet me now write the complete final file mentally then output.\n\nAlso the headline copy — refine: \"The quiet luxury of *effortless* beauty, made to last.\" Lines: \n1: \"The quiet luxury\"\n2: \"of *effortless* beauty,\"\n3: \"made to last.\"\nHmm \"made to last\" communicates permanence. Good.\n\nLede: \"Mara Voss is a certified PhiBrows artist specializing in hyper-natural microblading, powder brows, and lip blush — meticulously mapped to your features, so you wake up every morning already put together.\"\n\nProof: avatars + \"Loved by **2,400+ clients** · 8 years of artistry · 5.0★ rated\" maybe simpler: \"Trusted by 2,400+ clients for natural, undetectable results.\"\n\nNav links: Services, Portfolio, About, FAQ, Contact.\n\nStar icons: use ★ with gold color.\n\nBadge SVG text: \"BOOK A FREE CONSULTATION ✦ PMU ARTISTRY ✦ \" need textLength maybe. Path radius 44 on 120 viewBox, circumference ≈ 276px. Text at 10.5px letter-spacing 2.6 — \"BOOK A FREE CONSULT • PMU ARTISTRY •\" ~37 chars * ~ (6.3+2.6) ≈ 330 too long. Use 26-28 chars: \"FREE CONSULTATIONS • BOOK NOW •\" = 31 chars ≈ 276? 31*8.9≈276. Close. I can set font-size 10, ls 2.2 → 31*8.2=254 ok, add trailing dots. Or use textLength=\"276\". Safer: include textLength attribute = 273 with lengthAdjust=\"spacingAndGlyphs\"? That can distort. I'll just craft text \"BOOK YOUR CONSULTATION ✦ \" (25 chars incl spaces) and set textLength=\"272\". Hmm cross-browser ok. Let me use: text content \"BOOK A FREE CONSULT ✦ PMU ARTISTRY ✦\" and textLength 272 — browsers support textLength on textPath? textLength applies to text element; with textPath it applies along path in most browsers. To be safe I'll skip textLength and pick text sized to fit: radius 45, circumference 282.7. Chars: \"• BOOK A FREE CONSULTATION • PMU ARTISTRY \" count: let's count: \"BOOK A FREE CONSULTATION • PMU ARTISTRY • \" ≈ 43 chars. 282/43 ≈ 6.5px per char → font 9px with ls ~1.8 gives ~6.5/char avg (uppercase ~5.5px at 9px font + 1.8 = 7.3 → 43*7.3=314 too much). font 8.5 ls 1.2: avg ~6 → 258 + dots... It doesn't need to be exact; if slightly short there'd be a gap at seam; acceptable since rotating. I'll aim roughly and not obsess; add trailing \"✦\" repeated. Choose: font-size 9.5, letter-spacing 2.4, text \"BOOK A FREE CONSULT • PMU ARTISTRY • \" (37 chars) → 37 * (9.5*0.62≈5.9 + 2.4=8.3) ≈ 307 vs 283 — slightly over, will clip last chars at seam? Overlap actually (text longer than path just truncates beyond end). Slight truncation of trailing char maybe. Trim text to \"BOOK A FREE CONSULT • EST. 2016 • \" 35 chars ≈ 290 close. Or reduce ls to 1.8: 35*7.7=270. \n\nI'll use: \"BOOK A FREE CONSULT • WAKE UP FLAWLESS • \" count: B(1)... let me count precisely: \"BOOK A FREE CONSULT • WAKE UP FLAWLESS • \" = \"BOOK A FREE CONSULT\" (19) + \" • \" (3) + \"WAKE UP FLAWLESS\" (16) + \" • \" (3) = 41 chars. 41 * (5.9+1.6=7.5) = 307. over.\n\nPath with r=48 on 132 viewBox badge: circumference 301. Badge 132px, svg viewBox 0 0 132 132, path M66,66 m-48,0 a48,48... circumference 2π48=301.6. 41 chars at 7.35 avg → font 9.5 ls 1.45. Eh.\n\nSimplify: set svg viewBox \"0 0 100 100\", r=38 → C=238.8. text \"FREE CONSULTATIONS • PMU ARTISTRY •\" 36 chars → 6.63/char → font 9 ls 0.9 (avg 5.58+0.9=6.5→234 ✓). Good: font-size 9, letter-spacing .9px, text \"FREE CONSULTATIONS • PMU ARTISTRY •\" — count: \"FREE CONSULTATIONS\" 18 + \" • \" 3 + \"PMU ARTISTRY\" 12 + \" • \" 3 = 36 ✓.\n\ntextPath startOffset 0. Also add `textLength` optional skip.\n\nArrow center: \"↗\" 20px gold-light; on hover rotate 45? cute: .badge:hover .badge-arrow { transform: rotate(45deg) }? ↗ rotated 45 becomes →. Add transition.\n\nCert icon: small circle gold border with \"✦\" gold inside, 34px.\n\nStars: ★★★★★ color gold font-size 12 letter-spacing 2.\n\nCard typography: title Jost 600 13px ink; sub Jost 400 11px ink-soft letter-spacing .05em.\n\nRating card: left: big number Cormorant 500 34px \"5.0\"; right column: stars + \"300+ reviews\". Use flex row.\n\nOk. Also nav-cta style: border 1px ink, radius pill, padding 12px 24px, uppercase 11px ls .2em, hover background ink color cream.\n\nGrid: `.hero-inner`? I put grid directly on main.hero: grid-template-columns: 1.05fr .95fr; align-items:center; gap: clamp(40px, 5vw, 80px); padding: clamp(40px,7vh,80px) clamp(24px,6vw,84px);\n\nNav padding matches horizontal.\n\nCopy max-width 620px.\n\nLet me write final HTML/CSS now, complete and tidy. I'll include comments marking sections. Also small print: add ``? optional; include for polish.\n\nAlso ensure `Jost` fallback `font-family:'Jost', 'Helvetica Neue', Arial, sans-serif`.\n\nHeadline responsive at mobile: clamp handles.\n\nCards on small screens: reduce right/left offsets to 0 / scale .9. Badge smaller. Use media 640.\n\nAlso hide outline arch offset maybe keep.\n\nOne more flourish: gold ✦ decorative near headline? Add small floating \"✦\" absolutely in copy top-right with slow spin? Might be clutter; skip — eyebrow already has rule. Add tiny \"✦\" after eyebrow text instead.\n\nWrite it.\n\nAlso: the img alt \"Close-up of a woman's face with perfected brows\".\n\nFinal check on grain data URI encoding — must encode # as %23, quotes fine. I'll write:\n\n```css\n.grain{\n position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.055;\n background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n```\nopacity .055 maybe too subtle; .07. mix-blend-mode: multiply adds depth on cream. Use multiply with .08.\n\nAlso maybe animate grain position slightly? Skip.\n\nCompose delays:\n- nav: fadeDown .8s delay 0\n- eyebrow: fadeUp .8 delay .15\n- headline lines: rise 1.1 delays .25/.35/.45\n- lede: fadeUp .9 delay .55\n- cta: fadeUp .9 delay .68\n- proof: fadeUp .9 delay .8\n- visual container: fadeIn/scale .9 delay .35 (arch from scale .96 opacity 0)\n- outline: fade delay .55\n- cert card: fadeUp delay .95 + float after? Conflict: animation property both fadeUp and float infinite — use two animations: `animation: fadeUp .9s .95s both, float 7s 1.9s ease-in-out infinite;` float keyframes only translateY so after fade completes float takes transform control — transform conflicts resolved since later animation wins; ok.\n- rating card: delay 1.1, float 8s delay 2s offset.\n- badge: pop .8 delay 1.2.\n- marquee items fade in delay 1.2? marquee track animate fadeIn.\n- side-note fadeIn delay 1.4; scroll-hint fadeIn delay 1.5.\n\nFloat keyframes translateY(-10px) mid.\n\nCards position uses top/right etc; float transform fine.\n\nCareful: fadeUp sets transform translateY(24px)→none; then float animation transform translateY(0)→-10→0. Since float listed second, it overrides after its delay... during float delay (backwards fill none), fadeUp's both fill forwards holds final transform none. When float starts, it overrides. Slight jump from none→translateY(0) identical. \n\nNow badge pop keyframes scale .5→1 with opacity; hover scale conflict: pop animation fill both keeps scale(1) overriding hover transform... animation fill forwards overrides transitions on transform. So badge hover scale won't work while animation fill active. Solution: remove fill after end? Use animation-fill-mode both needed for delay start hidden... Set keyframes pop from {opacity:0; transform:scale(.5)} to {opacity:1; transform:scale(1)}; fill backwards only for start? During delay we need hidden → use both. After animation ends, fill forwards persists scale(1) which blocks :hover transform. Workaround: put hover transform on inner element? Or end state also scale(1) identical to base, but forwards fill still wins over :hover transition (animations override inline/hover styles). Trick: wrap arrow inside; scale the inner wrapper on hover instead of the badge. I'll apply hover effect to .badge:hover .badge-inner (scale) — inner span containing svg+arrow. Simpler: on hover, change badge background to gold? Transform conflict only for transform property. Do hover: background var(--gold) + arrow rotate. Good enough, plus cursor pointer.\n\nAlternatively use `animation: pop .8s 1.2s backwards;` — backwards fill only covers delay period; after end, no fill, base styles apply, hover works. But opacity during... after end base opacity 1 fine. Use `backwards` for badge. For fadeUp elements, no hover transforms on them except visual container; fine to keep both.\n\nFor cards float+fade both have fill... fadeUp both then float with delay 1.9s: during 0.9–1.9 fadeUp forwards holds; float not backwards-filled so no effect until start; good.\n\nFor .hero-visual entrance: scale from .96 opacity 0, use backwards with delay; hover img scale uses inner img (separate element) so no conflict.\n\nOK writing now. Also add `html { -webkit-font-smoothing: antialiased; }`.\n\nNav on mobile: show only logo + CTA + hamburger? Simpler: hide links, keep CTA. Add hamburger button (visual only) shown <860px with two lines. Fine.\n\nBottom marquee: also include on mobile smaller font.\n\nAlso add \"menu\" button functionality? Not required; hero only. Keep as button with aria-label.\n\nDouble-check contrast: ink #221C17 on cream #F7F3EC good.\n\nLet me now also think: do I want headline font-weight 500 with light italic? Cormorant 500 at big sizes looks elegant. Set h1 font-weight 500, letter-spacing -0.015em.\n\nItalic em gradient text: ensure padding-right to avoid clipping italic overhang; add display inline-block? Keep inline with padding-right .08em.\n\nProof avatars gradients:\n1: linear-gradient(135deg,#C9A092,#A97E6E)\n2: linear-gradient(135deg,#D9BE93,#B08D57)\n3: linear-gradient(135deg,#8C7B6C,#5E5044)\n4: linear-gradient(135deg,#2B241F,#4A3F36) with \"✦\"? initials: JR, MK, AS, +. Last circle: \"+2.4k\"? Keep initials + last shows \"+\". Actually: four circles: J, M, S, and last one ink with \"+99\" tiny? Text \"2.4k\" too small at 42px. Last: gold bg with \"✦\". Then text: \"Trusted by 2,400+ clients\".\n\nAlso add tiny \"5.0 ★\" inline in proof text? The rating card covers it. Fine.\n\nTime to output. Also include brief intro line before code and maybe a short note of features after (concise). User asked to build; deliver code block with everything. Keep post-code notes minimal (a few bullets).\n\nLet me write the whole CSS now in final form.\n\n```css\n:root{\n --cream:#F7F2EA;\n --cream-2:#F1EADF;\n --ink:#221C16;\n --ink-60:rgba(34,28,22,.62);\n --ink-40:rgba(34,28,22,.4);\n --line:rgba(34,28,22,.14);\n --gold:#AE8A58;\n --gold-2:#C9A76B;\n --gold-light:#E3CD9F;\n --rose:#C79B88;\n --serif:'Cormorant Garamond',Georgia,serif;\n --sans:'Jost','Helvetica Neue',Arial,sans-serif;\n --ease:cubic-bezier(.22,1,.36,1);\n}\n```\n\nEverything assembled. Also ensure `.hero` overflow hidden? The glows extend; set body overflow-x hidden. Badge bottom 0 within visual. Marquee separate.\n\nWrite hero paddings: top clamp(48px, 8vh, 96px) bottom clamp(56px, 9vh, 104px) to fit min-height.\n\nmin-height calc: nav ~89px, marquee ~ 62px → calc(100vh - 151px). Provide fallback then svh.\n\nSmall screens min-height auto.\n\nAlso `.mask` needs padding to avoid descender clipping? overflow hidden may clip descenders during rest? At rest transform none, fully visible — descenders fine within line box? line-height 1.02 with Cormorant descenders could get slightly clipped by overflow hidden on .mask since line box may be tight. Set line-height 1.06 and .mask padding-bottom .08em margin-bottom -.08em trick. I'll set headline line-height:1.08 and mask display block overflow hidden padding:0 .05em .1em; margin:0 -.05em -.1em. That prevents clipping of \"y\",\"g\",\"f\" descenders and italic overhang.\n\nRise from translateY(110%) — with padding included, 110% of element height includes padding, fine.\n\nNow final code output. Also include menu button CSS.\n\nCounting marquee items (6): MICROBLADING, POWDER BROWS, LIP BLUSH, PMU EYELINER, SCAR CAMOUFLAGE, SALINE REMOVAL. Each followed by ✦.\n\nAlright, write it.\n\nOne more consideration: the instruction says if external libraries used, include full HTML in same code block — I'm using Google Fonts links, included in head within same block. Good. Don't mention iframe. Provide the single HTML file.","reasoning_details":[{"type":"reasoning.text","text":"The user wants a premium, high-end hero section for a landing page for a PMU (Permanent Makeup) artist. This should be HTML/CSS only, just the hero section, not a full website.\n\nPMU = Permanent Makeup artist - think microblading, lip blush, powder brows, permanent eyeliner, etc. The aesthetic should be:\n- Luxurious, elegant, feminine but sophisticated\n- Color palette: soft neutrals, blush/rose tones, gold accents, cream, champagne, maybe deep charcoal/black for contrast\n- Typography: elegant serif fonts (like Playfair Display, Cormorant Garamond) paired with clean sans-serif\n- Premium feel: generous whitespace, refined details, subtle animations\n\nKey elements for a high-end hero section:\n1. Navigation bar (minimal, elegant)\n2. Large headline with elegant typography\n3. Subheadline\n4. CTA buttons\n5. Hero image area (I can use CSS to create an elegant visual since I can't rely on external images... actually I could use placeholder gradients or CSS art, or use unsplash URLs - but those may break. Better to create an elegant CSS-based visual or use gradient/pattern compositions)\n6. Social proof elements (years experience, clients, certifications)\n7. Subtle animations for premium feel\n8. Decorative elements (fine lines, gold accents)\n\nLet me think about the design:\n\n**Layout option:** Split hero - left side with text content, right side with an image/visual composition. Or a centered layout with layered typography.\n\nFor the image, since I can't guarantee external images load, I could:\n- Use a CSS gradient composition that evokes elegance\n- Create an abstract shape composition\n- Actually, Unsplash source URLs sometimes work but are unreliable. Let me create a beautiful CSS-only visual instead - maybe an elegant arch shape (very trendy in beauty aesthetics) with gradient and texture.\n\nActually, for a truly premium look, I'll do:\n- Arch-shaped image container (very on-trend for beauty/lash/brow artists)\n- Layered decorative elements\n- Floating badge elements (like \"Certified Artist\", rating stars)\n- Marquee text strip at the bottom maybe\n- Fine line decorative elements\n\nTypography: Use Google Fonts - Cormorant Garamond or Playfair Display for headlines, Inter or Jost for body. Maybe add an italic accent word style.\n\nColor palette:\n- Background: warm cream/ivory (#FAF7F2 or similar)\n- Text: deep espresso/charcoal (#1C1917 or #2B2320)\n- Accent: muted rose/terracotta or gold (#B08D57 gold, or dusty rose #C9A092)\n- Gold gradient for luxury accents\n\nLet me design the structure:\n\n```\n

- nav with logo, links, CTA button\n

(or body::after)\n\n

\n ✦ Mara Voss\n \n Book Now\n

\n\n

Permanent Makeup Artistry · Los Angeles

\n The quiet luxury of\n effortless beauty,\n made to last.\n

...

\n Book a Consultation→\n View the portfolio\n

...4 circles...

Trusted by 2,400+ clients across Los Angeles

2,400+Procedures

\n ...\n

\n\n

\n \n \n \n

...

\n \n ↗\n \n \n

\n\n \n

Scroll

\n\n

...

\n\n\n\n```\n\nHmm, placement of stats + proof both may be too much. Choose one: avatar proof row OR stats. I'll include avatar proof row, and skip separate stats row to avoid clutter — or small stats inside? Actually premium heroes often have stats. Let me include both but compact: proof row with avatars + short text; then a hairline; then stats inline small. Hmm might crowd. Alternative: put rating into proof row: avatars + \"4.9 ★ from 300+ reviews\". And stats integrated as three numbers below. I'll keep proof row only with avatars and rating text — cleaner. Then the marquee provides the services info. And floating cards provide cert + rating. Good, avoid redundancy: proof row = avatars + \"Trusted by 2,400+ clients · 8 years of artistry\".\n\nWait, card B is rating 5.0 — proof row can be avatars + \"2,400+ flawless results\". fine.\n\nHero bottom: marquee directly under hero as part of hero section conceptually. Place marquee inside main or right after; it's part of hero section visually. Keep as sibling section with borders.\n\nVertical side note: position absolute right center of hero, writing-mode vertical.\n\nScroll hint: absolute bottom left of hero above marquee.\n\nNow CSS details:\n\nNav link hover underline:\n```css\n.nav-links a { position:relative; }\n.nav-links a::after { content:\"\"; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.22,1,.36,1); }\n.nav-links a:hover::after { transform:scaleX(1); transform-origin:left; }\n```\n\nPrimary button:\n```css\n.btn-primary { background:var(--ink); color:var(--cream); border-radius:999px; padding: 18px 34px; display:inline-flex; gap:12px; align-items:center; font: 500 13px Jost; letter-spacing:.18em; text-transform:uppercase; transition: background .4s, transform .4s, box-shadow .4s; }\n.btn-primary:hover { background:var(--gold); transform:translateY(-2px); box-shadow: 0 18px 30px -18px rgba(176,141,87,.8); }\n.btn-arrow { transition: transform .4s; } .btn-primary:hover .btn-arrow { transform: translateX(6px); }\n```\n\nUnderline link:\n```css\n.link-underline { font: 500 13px Jost; letter-spacing:.18em; text-transform:uppercase; padding-bottom:6px; background: linear-gradient(var(--ink),var(--ink)) left bottom / 100% 1px no-repeat; transition: background-size .4s, color .4s; }\nhover: background-size 0 1px? Actually animate from 100% to 0 then... simpler: from left 0 width to full on hover with transform scaleX. Use ::after.\n```\nI'll do: base has ::after scaleX(1) and hover scaleX(0)? Reverse feel. Do: default hairline gold full, hover ink grows? Keep simple: underline appears/slides on hover with background-size from 0% to 100%, plus arrow ↗.\n\nEyebrow:\n```css\n.eyebrow { display:flex; align-items:center; gap:14px; font:500 11px/1 Jost; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-soft); }\n.eyebrow .rule { width:44px; height:1px; background:var(--gold); }\n```\n\nHeadline:\n```css\n.headline { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(2.9rem, 6.2vw, 5.4rem); line-height:1.02; letter-spacing:-0.01em; margin: 26px 0 28px; }\n.headline em { font-style:italic; font-weight:400; background:linear-gradient(100deg,#8f6b3f,#c9a15f 40%, #e5c98f 55%, #b08d57); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; }\n.mask{display:block; overflow:hidden;}\n.rise{display:inline-block; transform:translateY(110%); animation: rise 1.1s cubic-bezier(.22,1,.36,1) forwards; }\nmask:nth-child delays.\n@keyframes rise { to { transform:none; } }\n```\n\nLede: Jost 300/400 16-17px, color ink-soft, max-width 46ch, line-height 1.8.\n\nAvatars:\n```css\n.avatars { display:flex; }\n.avatar { width:42px;height:42px;border-radius:50%; border:2px solid var(--cream); margin-left:-12px; display:grid;place-items:center; color:#fff; font:500 13px Jost; }\nfirst margin-left:0. backgrounds: gradients rose/gold/taupe/ink.\n```\nText beside with strong.\n\nProof row: margin-top: 44px; padding-top: 28px; border-top: 1px solid line; max-width: 480px; display flex align center gap 18px.\n\nArch & visual:\n\n```css\n.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; min-height: 520px; }\n.arch { position:relative; width:min(400px, 34vw); aspect-ratio: 3/4.1; border-radius: 999px 999px 28px 28px; overflow:hidden; background: linear-gradient(160deg,#e8d9c8, #cbb29c); box-shadow: 0 40px 80px -40px rgba(33,27,22,.45); }\n.arch img { width:100%;height:100%;object-fit:cover; transform:scale(1.02); transition: transform 1.2s cubic-bezier(.22,1,.36,1); filter: saturate(.92) contrast(1.02); }\n.hero-visual:hover .arch img { transform: scale(1.06); }\n.arch::after { content:\"\"; position:absolute; inset:0; background: linear-gradient(to top, rgba(33,27,22,.28), transparent 45%); }\n.arch-outline { position:absolute; width:min(400px,34vw); aspect-ratio:3/4.1; border:1px solid rgba(176,141,87,.55); border-radius:999px 999px 28px 28px; transform: translate(26px,-26px); z-index:0; }\n```\nArch z-index 1 above outline. Actually outline behind: place outline first in DOM, arch after; set arch z-index:1.\n\nCards:\n```css\n.card { position:absolute; z-index:3; background: rgba(250,247,241,.85); backdrop-filter: blur(10px); border:1px solid rgba(33,27,22,.08); border-radius:16px; padding:16px 20px; box-shadow: 0 24px 50px -30px rgba(33,27,22,.35); animation: float 7s ease-in-out infinite; }\n.card-cert { top: 12%; right: 2%; }\n.card-rating { bottom: 14%; left: 0; animation-delay: -3.5s; }\n```\nCert card content: gold ✦ icon circle + text lines: \"PhiBrow Royal Artist\" serif-ish + small \"Certified · Branko Babić Academy\". \nRating card: big \"5.0\" Cormorant + stars (gold ★★★★★) + \"300+ verified reviews\".\n\nBadge: \n```css\n.badge { position:absolute; left: 6%; bottom: -34px; width:132px; height:132px; border-radius:50%; background: var(--ink); color:var(--cream); display:grid; place-items:center; z-index:4; box-shadow: 0 24px 44px -20px rgba(33,27,22,.5); transition: transform .4s; }\n.badge:hover { transform: scale(1.05); }\n.badge svg { position:absolute; inset:0; width:100%; height:100%; animation: spin 16s linear infinite; }\n.badge text { font: 600 10.5px Jost; letter-spacing: 2.6px; fill: var(--cream); text-transform: uppercase; }\n.badge-arrow { font-size: 22px; color: var(--gold-light); }\n```\nOverlap badge onto arch bottom-left. Position relative to hero-visual container; arch centered, so badge at left side of arch. I'll compute: arch width min(400px,34vw); badge left: calc(50% - 220px)? Simpler: absolutely position relative to visual container with percentage: left: 8%; bottom: 6%. It'll overlap arch corner roughly. Fine-tune: bottom: 8%; left: 4%.\n\nHmm — card-rating also left bottom. Conflict. Rearrange: badge bottom-left overlapping arch (left: 2%, bottom: 4%); card-rating top-left (top: 16%, left: -2%); card-cert right middle (top: 38%, right: -4%). Balance.\n\nLet me set:\n- card-cert: top: 10%; right: -2%.\n- card-rating: bottom: 18%; left: -4%.\n- badge: bottom: -2%; right: 12%? Or center-bottom-left. Put badge bottom-left overlapping arch: left: 6%; bottom: 2%. But card-rating is left too. Move card-rating to right-bottom: right: -2%, bottom: 20%. And badge left-bottom. Cert top-right might crowd with rating right-bottom — okay vertical separation.\n\nFinal: cert top-right (top:9%, right:-3%), rating mid-left (top: 44%, left:-5%), badge bottom-left (left:10%, bottom:-3%). Hmm badge bottom slightly outside visual; ensure hero has bottom padding/marquee gap. Give hero-visual padding-bottom or badge bottom: 0. Keep bottom: 0 overlapping arch bottom edge.\n\nDots pattern:\n```css\n.dots { position:absolute; right: -8%; bottom: 6%; width:180px; height:180px; background-image: radial-gradient(rgba(176,141,87,.5) 1.5px, transparent 1.6px); background-size: 18px 18px; z-index:0; }\n```\nMight overlap card-rating if right-bottom; move dots top-left: left:-10%; top:-4%. Behind everything z-index 0.\n\nSide note:\n```css\n.side-note { position:absolute; right: clamp(12px, 2vw, 28px); top:50%; transform: translateY(-50%); writing-mode: vertical-rl; font:500 11px Jost; letter-spacing:.4em; text-transform:uppercase; color: var(--ink-soft); display:flex; align-items:center; gap:16px; }\n.side-note::before/after hairline vertical.\n```\nHide below 1200px.\n\nScroll hint bottom-left of hero:\n```css\n.scroll-hint { position:absolute; left: clamp(20px,5vw,64px); bottom: 26px; display:flex; align-items:center; gap:12px; font:500 10px Jost; letter-spacing:.4em; uppercase; color: ink-soft; }\n.scroll-hint span { width:56px; height:1px; background: line; position:relative; overflow:hidden; }\n.scroll-hint span::after { content:\"\"; position:absolute; inset:0; background: var(--gold); transform: translateX(-100%); animation: slide 2.2s cubic-bezier(.65,0,.35,1) infinite; }\n@keyframes slide { 40%{transform:translateX(0)} 100%{transform:translateX(100%)} }\n```\n\nMarquee:\n```css\n.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding: 20px 0; background: rgba(255,255,255,.35); }\n.marquee-track { display:flex; width:max-content; animation: scroll 28s linear infinite; gap: 0; }\n.marquee:hover .marquee-track { animation-play-state: paused; }\n.marquee ul { display:flex; list-style:none; }\n.marquee li { display:flex; align-items:center; gap: 28px; padding-right: 28px; font: 400 13px Jost; letter-spacing:.35em; text-transform:uppercase; white-space:nowrap; color: var(--ink-soft); }\n.marquee li i / .star { color: gold; font-style:normal; }\n@keyframes scroll { to { transform: translateX(-50%); } }\n```\nTrack contains two identical ul for seamless -50%.\n\nEntrance animations for copy elements: eyebrow fade, lede fade-up delay .45, cta .55, proof .7, visual: arch scale-in .8, cards fade with delays 1.0/1.15, badge pop 1.2.\n\nDefine:\n```css\n@keyframes fadeUp { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform:none;} }\n@keyframes fadeIn { from {opacity:0} to {opacity:1} }\n@keyframes pop { from { opacity:0; transform: scale(.6);} to {opacity:1; transform: scale(1);} }\n```\nApply classes .a1... or inline via style. Use utility: `.fu { animation: fadeUp .9s cubic-bezier(.22,1,.36,1) both; }` with `style=\"animation-delay:.5s\"`.\n\nNav entrance: fadeDown slight.\n\nBody min-height, hero min-height: calc(100svh - 89px) maybe. Use `min-height: calc(100vh - 89px)` grid align center; but with marquee after, hero fits viewport nicely: 100vh total including nav+marquee? Marquee ~60px. hero min-height: calc(100vh - 89px - 62px). Eh, just min-height: calc(100vh - 90px) and marquee flows below fold slightly? Premium heroes often have marquee at bottom of viewport. Set hero min-height: calc(100svh - 89px - 61px). Use svh with vh fallback. I'll do:\n\n```css\n.hero { min-height: calc(100vh - 150px); }\n@supports (height: 100svh) { .hero { min-height: calc(100svh - 150px); } }\n```\nApprox nav 89 + marquee 61 = 150. \n\nResponsive:\n- max-width 1200: side-note display none.\n- 980: grid 1 column; visual order after copy; reduce headline; cards scale down? Keep absolute but sizes fine.\n- 640: nav-links hidden; show minimal menu button; hide scroll-hint; card padding smaller; badge 110px.\n\nAdd hamburger as pure CSS visual (three spans) non-functional — fine for hero demo.\n\nSelection:\n```css\n::selection { background: var(--gold); color: #fff; }\n```\n\nFocus-visible outlines.\n\nprefers-reduced-motion: kill animations (set animation: none; transform: none; but ensure .rise default translateY(110%) hidden! If animations disabled, rises stay hidden. So in reduced-motion, set .rise { transform: none; } etc. I'll add:\n```css\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }\n}\n```\nWith `both` fill and .01ms, final state applies. Good.\n\nGrain: body::before fixed noise. z-index 100 pointer-events none, opacity .5 with the rect alpha low. Use:\n```css\n.grain { position: fixed; inset: -50%; width:200%; height:200%; background-image:url(\"data:image/svg+xml,...\"); opacity:.05; pointer-events:none; z-index:60; }\n```\nStatic fine (no animation to keep calm). Actually subtle static grain ok.\n\nBackground decorations: \n```css\nbody { background: var(--cream); }\n.hero::before { radial gradient rose top-right }\n.hero::after? maybe huge watermark text via .watermark element: \"Artistry\" Cormorant italic, font-size 22vw, color transparent with -webkit-text-stroke? Outlined text could be chic but risky clutter. I'll add soft radial glows only:\n.hero::before { content:\"\"; position:absolute; top:-20%; right:-10%; width:60vw; height:60vw; background: radial-gradient(circle, rgba(201,160,146,.28), transparent 60%); z-index:-1/0 with pointer-events none }\nand a gold one bottom-left faint.\n```\nHero needs position:relative and overflow visible; glows with z-index 0 behind content z-index 1. Manage stacking: give hero-copy and hero-visual position relative z-index 1.\n\nNav: position sticky? Hero-only; keep static. border-bottom hairline.\n\nLet me now write the complete final file mentally then output.\n\nAlso the headline copy — refine: \"The quiet luxury of *effortless* beauty, made to last.\" Lines: \n1: \"The quiet luxury\"\n2: \"of *effortless* beauty,\"\n3: \"made to last.\"\nHmm \"made to last\" communicates permanence. Good.\n\nLede: \"Mara Voss is a certified PhiBrows artist specializing in hyper-natural microblading, powder brows, and lip blush — meticulously mapped to your features, so you wake up every morning already put together.\"\n\nProof: avatars + \"Loved by **2,400+ clients** · 8 years of artistry · 5.0★ rated\" maybe simpler: \"Trusted by 2,400+ clients for natural, undetectable results.\"\n\nNav links: Services, Portfolio, About, FAQ, Contact.\n\nStar icons: use ★ with gold color.\n\nBadge SVG text: \"BOOK A FREE CONSULTATION ✦ PMU ARTISTRY ✦ \" need textLength maybe. Path radius 44 on 120 viewBox, circumference ≈ 276px. Text at 10.5px letter-spacing 2.6 — \"BOOK A FREE CONSULT • PMU ARTISTRY •\" ~37 chars * ~ (6.3+2.6) ≈ 330 too long. Use 26-28 chars: \"FREE CONSULTATIONS • BOOK NOW •\" = 31 chars ≈ 276? 31*8.9≈276. Close. I can set font-size 10, ls 2.2 → 31*8.2=254 ok, add trailing dots. Or use textLength=\"276\". Safer: include textLength attribute = 273 with lengthAdjust=\"spacingAndGlyphs\"? That can distort. I'll just craft text \"BOOK YOUR CONSULTATION ✦ \" (25 chars incl spaces) and set textLength=\"272\". Hmm cross-browser ok. Let me use: text content \"BOOK A FREE CONSULT ✦ PMU ARTISTRY ✦\" and textLength 272 — browsers support textLength on textPath? textLength applies to text element; with textPath it applies along path in most browsers. To be safe I'll skip textLength and pick text sized to fit: radius 45, circumference 282.7. Chars: \"• BOOK A FREE CONSULTATION • PMU ARTISTRY \" count: let's count: \"BOOK A FREE CONSULTATION • PMU ARTISTRY • \" ≈ 43 chars. 282/43 ≈ 6.5px per char → font 9px with ls ~1.8 gives ~6.5/char avg (uppercase ~5.5px at 9px font + 1.8 = 7.3 → 43*7.3=314 too much). font 8.5 ls 1.2: avg ~6 → 258 + dots... It doesn't need to be exact; if slightly short there'd be a gap at seam; acceptable since rotating. I'll aim roughly and not obsess; add trailing \"✦\" repeated. Choose: font-size 9.5, letter-spacing 2.4, text \"BOOK A FREE CONSULT • PMU ARTISTRY • \" (37 chars) → 37 * (9.5*0.62≈5.9 + 2.4=8.3) ≈ 307 vs 283 — slightly over, will clip last chars at seam? Overlap actually (text longer than path just truncates beyond end). Slight truncation of trailing char maybe. Trim text to \"BOOK A FREE CONSULT • EST. 2016 • \" 35 chars ≈ 290 close. Or reduce ls to 1.8: 35*7.7=270. \n\nI'll use: \"BOOK A FREE CONSULT • WAKE UP FLAWLESS • \" count: B(1)... let me count precisely: \"BOOK A FREE CONSULT • WAKE UP FLAWLESS • \" = \"BOOK A FREE CONSULT\" (19) + \" • \" (3) + \"WAKE UP FLAWLESS\" (16) + \" • \" (3) = 41 chars. 41 * (5.9+1.6=7.5) = 307. over.\n\nPath with r=48 on 132 viewBox badge: circumference 301. Badge 132px, svg viewBox 0 0 132 132, path M66,66 m-48,0 a48,48... circumference 2π48=301.6. 41 chars at 7.35 avg → font 9.5 ls 1.45. Eh.\n\nSimplify: set svg viewBox \"0 0 100 100\", r=38 → C=238.8. text \"FREE CONSULTATIONS • PMU ARTISTRY •\" 36 chars → 6.63/char → font 9 ls 0.9 (avg 5.58+0.9=6.5→234 ✓). Good: font-size 9, letter-spacing .9px, text \"FREE CONSULTATIONS • PMU ARTISTRY •\" — count: \"FREE CONSULTATIONS\" 18 + \" • \" 3 + \"PMU ARTISTRY\" 12 + \" • \" 3 = 36 ✓.\n\ntextPath startOffset 0. Also add `textLength` optional skip.\n\nArrow center: \"↗\" 20px gold-light; on hover rotate 45? cute: .badge:hover .badge-arrow { transform: rotate(45deg) }? ↗ rotated 45 becomes →. Add transition.\n\nCert icon: small circle gold border with \"✦\" gold inside, 34px.\n\nStars: ★★★★★ color gold font-size 12 letter-spacing 2.\n\nCard typography: title Jost 600 13px ink; sub Jost 400 11px ink-soft letter-spacing .05em.\n\nRating card: left: big number Cormorant 500 34px \"5.0\"; right column: stars + \"300+ reviews\". Use flex row.\n\nOk. Also nav-cta style: border 1px ink, radius pill, padding 12px 24px, uppercase 11px ls .2em, hover background ink color cream.\n\nGrid: `.hero-inner`? I put grid directly on main.hero: grid-template-columns: 1.05fr .95fr; align-items:center; gap: clamp(40px, 5vw, 80px); padding: clamp(40px,7vh,80px) clamp(24px,6vw,84px);\n\nNav padding matches horizontal.\n\nCopy max-width 620px.\n\nLet me write final HTML/CSS now, complete and tidy. I'll include comments marking sections. Also small print: add ``? optional; include for polish.\n\nAlso ensure `Jost` fallback `font-family:'Jost', 'Helvetica Neue', Arial, sans-serif`.\n\nHeadline responsive at mobile: clamp handles.\n\nCards on small screens: reduce right/left offsets to 0 / scale .9. Badge smaller. Use media 640.\n\nAlso hide outline arch offset maybe keep.\n\nOne more flourish: gold ✦ decorative near headline? Add small floating \"✦\" absolutely in copy top-right with slow spin? Might be clutter; skip — eyebrow already has rule. Add tiny \"✦\" after eyebrow text instead.\n\nWrite it.\n\nAlso: the img alt \"Close-up of a woman's face with perfected brows\".\n\nFinal check on grain data URI encoding — must encode # as %23, quotes fine. I'll write:\n\n```css\n.grain{\n position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.055;\n background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n```\nopacity .055 maybe too subtle; .07. mix-blend-mode: multiply adds depth on cream. Use multiply with .08.\n\nAlso maybe animate grain position slightly? Skip.\n\nCompose delays:\n- nav: fadeDown .8s delay 0\n- eyebrow: fadeUp .8 delay .15\n- headline lines: rise 1.1 delays .25/.35/.45\n- lede: fadeUp .9 delay .55\n- cta: fadeUp .9 delay .68\n- proof: fadeUp .9 delay .8\n- visual container: fadeIn/scale .9 delay .35 (arch from scale .96 opacity 0)\n- outline: fade delay .55\n- cert card: fadeUp delay .95 + float after? Conflict: animation property both fadeUp and float infinite — use two animations: `animation: fadeUp .9s .95s both, float 7s 1.9s ease-in-out infinite;` float keyframes only translateY so after fade completes float takes transform control — transform conflicts resolved since later animation wins; ok.\n- rating card: delay 1.1, float 8s delay 2s offset.\n- badge: pop .8 delay 1.2.\n- marquee items fade in delay 1.2? marquee track animate fadeIn.\n- side-note fadeIn delay 1.4; scroll-hint fadeIn delay 1.5.\n\nFloat keyframes translateY(-10px) mid.\n\nCards position uses top/right etc; float transform fine.\n\nCareful: fadeUp sets transform translateY(24px)→none; then float animation transform translateY(0)→-10→0. Since float listed second, it overrides after its delay... during float delay (backwards fill none), fadeUp's both fill forwards holds final transform none. When float starts, it overrides. Slight jump from none→translateY(0) identical. \n\nNow badge pop keyframes scale .5→1 with opacity; hover scale conflict: pop animation fill both keeps scale(1) overriding hover transform... animation fill forwards overrides transitions on transform. So badge hover scale won't work while animation fill active. Solution: remove fill after end? Use animation-fill-mode both needed for delay start hidden... Set keyframes pop from {opacity:0; transform:scale(.5)} to {opacity:1; transform:scale(1)}; fill backwards only for start? During delay we need hidden → use both. After animation ends, fill forwards persists scale(1) which blocks :hover transform. Workaround: put hover transform on inner element? Or end state also scale(1) identical to base, but forwards fill still wins over :hover transition (animations override inline/hover styles). Trick: wrap arrow inside; scale the inner wrapper on hover instead of the badge. I'll apply hover effect to .badge:hover .badge-inner (scale) — inner span containing svg+arrow. Simpler: on hover, change badge background to gold? Transform conflict only for transform property. Do hover: background var(--gold) + arrow rotate. Good enough, plus cursor pointer.\n\nAlternatively use `animation: pop .8s 1.2s backwards;` — backwards fill only covers delay period; after end, no fill, base styles apply, hover works. But opacity during... after end base opacity 1 fine. Use `backwards` for badge. For fadeUp elements, no hover transforms on them except visual container; fine to keep both.\n\nFor cards float+fade both have fill... fadeUp both then float with delay 1.9s: during 0.9–1.9 fadeUp forwards holds; float not backwards-filled so no effect until start; good.\n\nFor .hero-visual entrance: scale from .96 opacity 0, use backwards with delay; hover img scale uses inner img (separate element) so no conflict.\n\nOK writing now. Also add `html { -webkit-font-smoothing: antialiased; }`.\n\nNav on mobile: show only logo + CTA + hamburger? Simpler: hide links, keep CTA. Add hamburger button (visual only) shown <860px with two lines. Fine.\n\nBottom marquee: also include on mobile smaller font.\n\nAlso add \"menu\" button functionality? Not required; hero only. Keep as button with aria-label.\n\nDouble-check contrast: ink #221C17 on cream #F7F3EC good.\n\nLet me now also think: do I want headline font-weight 500 with light italic? Cormorant 500 at big sizes looks elegant. Set h1 font-weight 500, letter-spacing -0.015em.\n\nItalic em gradient text: ensure padding-right to avoid clipping italic overhang; add display inline-block? Keep inline with padding-right .08em.\n\nProof avatars gradients:\n1: linear-gradient(135deg,#C9A092,#A97E6E)\n2: linear-gradient(135deg,#D9BE93,#B08D57)\n3: linear-gradient(135deg,#8C7B6C,#5E5044)\n4: linear-gradient(135deg,#2B241F,#4A3F36) with \"✦\"? initials: JR, MK, AS, +. Last circle: \"+2.4k\"? Keep initials + last shows \"+\". Actually: four circles: J, M, S, and last one ink with \"+99\" tiny? Text \"2.4k\" too small at 42px. Last: gold bg with \"✦\". Then text: \"Trusted by 2,400+ clients\".\n\nAlso add tiny \"5.0 ★\" inline in proof text? The rating card covers it. Fine.\n\nTime to output. Also include brief intro line before code and maybe a short note of features after (concise). User asked to build; deliver code block with everything. Keep post-code notes minimal (a few bullets).\n\nLet me write the whole CSS now in final form.\n\n```css\n:root{\n --cream:#F7F2EA;\n --cream-2:#F1EADF;\n --ink:#221C16;\n --ink-60:rgba(34,28,22,.62);\n --ink-40:rgba(34,28,22,.4);\n --line:rgba(34,28,22,.14);\n --gold:#AE8A58;\n --gold-2:#C9A76B;\n --gold-light:#E3CD9F;\n --rose:#C79B88;\n --serif:'Cormorant Garamond',Georgia,serif;\n --sans:'Jost','Helvetica Neue',Arial,sans-serif;\n --ease:cubic-bezier(.22,1,.36,1);\n}\n```\n\nEverything assembled. Also ensure `.hero` overflow hidden? The glows extend; set body overflow-x hidden. Badge bottom 0 within visual. Marquee separate.\n\nWrite hero paddings: top clamp(48px, 8vh, 96px) bottom clamp(56px, 9vh, 104px) to fit min-height.\n\nmin-height calc: nav ~89px, marquee ~ 62px → calc(100vh - 151px). Provide fallback then svh.\n\nSmall screens min-height auto.\n\nAlso `.mask` needs padding to avoid descender clipping? overflow hidden may clip descenders during rest? At rest transform none, fully visible — descenders fine within line box? line-height 1.02 with Cormorant descenders could get slightly clipped by overflow hidden on .mask since line box may be tight. Set line-height 1.06 and .mask padding-bottom .08em margin-bottom -.08em trick. I'll set headline line-height:1.08 and mask display block overflow hidden padding:0 .05em .1em; margin:0 -.05em -.1em. That prevents clipping of \"y\",\"g\",\"f\" descenders and italic overhang.\n\nRise from translateY(110%) — with padding included, 110% of element height includes padding, fine.\n\nNow final code output. Also include menu button CSS.\n\nCounting marquee items (6): MICROBLADING, POWDER BROWS, LIP BLUSH, PMU EYELINER, SCAR CAMOUFLAGE, SALINE REMOVAL. Each followed by ✦.\n\nAlright, write it.\n\nOne more consideration: the instruction says if external libraries used, include full HTML in same code block — I'm using Google Fonts links, included in head within same block. Good. Don't mention iframe. Provide the single HTML file.","format":"unknown","index":0}]},"native_finish_reason":"stop"}],"created":1784789392,"model":"moonshotai/kimi-k3","object":"chat.completion","service_tier":null,"system_fingerprint":"fpv0_15e428e8","usage":{"completion_tokens":19112,"prompt_tokens":184,"total_tokens":19296,"completion_tokens_details":{"accepted_prediction_tokens":null,"audio_tokens":0,"reasoning_tokens":13031,"rejected_prediction_tokens":null,"image_tokens":0},"prompt_tokens_details":{"audio_tokens":0,"cached_tokens":0,"cache_write_tokens":0,"video_tokens":0},"cost":0.287232,"is_byok":false,"cost_details":{"upstream_inference_cost":0.287232,"upstream_inference_prompt_cost":0.000552,"upstream_inference_completions_cost":0.28668}},"provider":"Moonshot AI"}

pmu website