:root {
  --ink:#171615;
  --paper:#f8f4ea;
  --pink:#f45c9f;
  --yellow:#ffda58;
  --blue:#348ee7;
  --muted:#68645e;
  --sans:'DM Sans',Arial,sans-serif;
  --hand:'Kalam','Patrick Hand',cursive;
  --marker:'Knewave','Kalam',cursive;
}
* { box-sizing:border-box }
html { min-width:320px; overflow-x:clip; scroll-behavior:smooth }
body {
  margin:0; min-width:320px; overflow-x:clip; color:var(--ink);
  font:16px/1.5 var(--sans); background:var(--paper) url('assets/individual/paper-background-opt.webp') center top/941px auto;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none }
button { font:inherit; color:inherit }
img { display:block; max-width:100% }
.start-shell { width:min(100% - 48px,1120px); margin:auto }
.start-header { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(23,22,21,.12) }
.start-brand { display:flex; align-items:flex-start; gap:8px; font:400 28px/.78 var(--marker); letter-spacing:-.075em; transform:rotate(-3deg) }
.start-brand svg { width:27px; height:30px; margin-top:-7px; overflow:visible }
.start-brand path { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round }
.header-right { display:flex; align-items:center; gap:24px }
.start-language { display:flex; gap:4px; align-items:center; font-size:13px; font-weight:700 }
.start-language a { min-width:30px; text-align:center; padding:5px 4px; border-radius:4px }
.start-language a[aria-current="page"] { background:#ffda58 }
.header-contact { border-bottom:2px solid var(--pink); font-weight:700; padding:7px 2px }
.start-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.94fr); align-items:center; gap:34px; padding:62px 0 76px; min-height:440px }
.start-kicker { display:flex; align-items:center; gap:10px; margin:0 0 16px; color:#514d47; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase }
.start-kicker::before { content:""; display:block; width:26px; height:4px; background:var(--pink); transform:rotate(-4deg) }
.start-hero h1 { max-width:620px; margin:0; font-size:clamp(42px,6vw,72px); line-height:.99; letter-spacing:-.055em; font-weight:700 }
.start-hero h1 span { position:relative; display:inline-block; z-index:0 }
.start-hero h1 span::after { content:""; position:absolute; z-index:-1; left:-4px; right:-8px; bottom:3px; height:.34em; background:var(--yellow); transform:rotate(-1.5deg) }
.start-intro { max-width:535px; margin:22px 0 0; color:#4f4b46; font-size:17px; line-height:1.65 }
.device-stage { position:relative; height:330px; isolation:isolate }
.device-stage::before { content:""; position:absolute; inset:25px 12px 6px 30px; z-index:-1; border-radius:50%; background:rgba(255,218,88,.22); filter:blur(4px) }
.laptop { position:absolute; right:1%; top:38px; width:min(88%,455px); transform:rotate(-3deg); filter:drop-shadow(8px 14px 9px rgba(40,32,22,.2)) }
.laptop-display { padding:10px; border:4px solid #191817; border-radius:14px 14px 9px 9px; background:#191817 }
.laptop-screen { min-height:208px; padding:16px 18px; border-radius:4px; background:#fbfaf6; overflow:hidden }
.screen-topbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid #e5e1d8; color:#625d55; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.screen-dots { display:flex; gap:4px }
.screen-dots i { width:6px; height:6px; border-radius:50%; background:#f45c9f }
.screen-dots i:nth-child(2) { background:#ffda58 }
.screen-dots i:nth-child(3) { background:#348ee7 }
.screen-content { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; align-items:center; padding-top:15px }
.screen-copy small { display:block; color:#858078; font-size:9px; letter-spacing:.1em; text-transform:uppercase }
.screen-copy strong { display:block; margin:5px 0 11px; font-size:16px; line-height:1.2 }
.screen-bars { display:flex; align-items:flex-end; gap:5px; height:47px; padding:4px 0 0; border-bottom:1px solid #ded9ce }
.screen-bars i { width:11%; border-radius:3px 3px 0 0; background:#f45c9f }
.screen-bars i:nth-child(2n) { background:#ffda58 }
.screen-bars i:nth-child(3n) { background:#348ee7 }
.screen-bars i:nth-child(1) { height:40% }.screen-bars i:nth-child(2) { height:72% }.screen-bars i:nth-child(3) { height:52% }.screen-bars i:nth-child(4) { height:88% }.screen-bars i:nth-child(5) { height:65% }.screen-bars i:nth-child(6) { height:100% }.screen-bars i:nth-child(7) { height:76% }
.screen-post { position:relative; overflow:hidden; height:113px; border-radius:5px; background:#d7c4a9 url('assets/landing/commercial-production.jpg') center 45%/cover }
.screen-post::after { content:"▶"; position:absolute; left:50%; top:50%; display:grid; place-items:center; width:27px; height:27px; color:white; background:rgba(20,19,18,.72); border-radius:50%; font-size:10px; transform:translate(-50%,-50%) }
.laptop-base { height:13px; margin:0 -18px; border-radius:0 0 40% 40%; background:linear-gradient(#d9d8d4,#8e8d8a 65%,#c8c7c3); clip-path:polygon(0 0,100% 0,94% 76%,79% 100%,20% 100%,5% 76%) }
.phone { position:absolute; z-index:3; left:1%; bottom:3px; width:122px; height:231px; padding:7px; border:4px solid #191817; border-radius:25px; background:#191817; transform:rotate(7deg); filter:drop-shadow(4px 8px 5px rgba(40,32,22,.18)) }
.phone-screen { position:relative; height:100%; padding:21px 8px 8px; overflow:hidden; border-radius:16px; background:#fbfaf6 }
.phone-speaker { position:absolute; left:50%; top:8px; width:29px; height:4px; border-radius:5px; background:#242321; transform:translateX(-50%) }
.phone-heading { margin:4px 0 10px; text-align:center; font-size:10px; font-weight:700 }
.phone-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.app-tile { display:grid; place-items:center; aspect-ratio:1; border-radius:9px }
.app-tile img { width:55%; height:55% }
.app-instagram { background:linear-gradient(135deg,#7d3ec8,#f34287 55%,#ff9b43) }
.app-youtube { background:#f32636 }
.app-tiktok { background:#111 }
.app-facebook { background:#1877f2 }
.phone-caption { margin:10px 0 0; color:#777169; text-align:center; font-size:8px; line-height:1.3 }
.device-tape { position:absolute; z-index:4; top:14px; right:10%; width:74px; height:22px; background:url('assets/paper/tape-pink.svg') center/100% 100%; transform:rotate(7deg) }
.areas { padding:45px 0 74px; border-top:1px solid rgba(23,22,21,.12) }
.areas-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px }
.areas-heading p { margin:0 0 4px; color:var(--muted); font-size:13px }
.areas-heading h2 { margin:0; font-size:clamp(25px,3.4vw,37px); line-height:1.15; letter-spacing:-.04em }
.areas-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.area-card { display:flex; flex-direction:column; min-width:0; padding:0; text-align:left; border:1px solid rgba(23,22,21,.14); border-radius:9px; background:rgba(255,253,248,.94); cursor:pointer; overflow:hidden; box-shadow:0 8px 18px rgba(46,38,27,.08); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease }
.area-card:hover,.area-card:focus-visible { transform:translateY(-5px); box-shadow:0 15px 28px rgba(46,38,27,.14); outline:none }
.area-card[aria-pressed="true"] { border-color:#1a1918; box-shadow:0 0 0 2px #1a1918,0 12px 24px rgba(46,38,27,.12) }
.area-image { position:relative; height:190px; overflow:hidden; background:#e9e2d4 }
.area-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease }
.area-card:hover .area-image img { transform:scale(1.045) }
.area-card:nth-child(1) .area-image img { object-position:47% 45% }
.area-card:nth-child(2) .area-image img { object-position:50% 52% }
.area-card:nth-child(3) .area-image img { object-position:50% 46% }
.photo-tag { position:absolute; left:13px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:4px; background:rgba(255,253,248,.95); font-size:10px; font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,.12) }
.photo-tag::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--pink) }
.area-card:nth-child(2) .photo-tag::before { background:var(--yellow) }
.area-card:nth-child(3) .photo-tag::before { background:var(--blue) }
.area-body { display:flex; flex:1; flex-direction:column; padding:18px 18px 17px }
.area-number { color:#8b857d; font-size:10px; font-weight:700; letter-spacing:.12em }
.area-title { margin:8px 0 6px; font-size:21px; line-height:1.15; letter-spacing:-.035em }
.area-desc { min-height:47px; margin:0; color:#5e5952; font-size:13px; line-height:1.5 }
.area-action { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:17px; padding-top:12px; border-top:1px solid rgba(23,22,21,.12); font-size:12px; font-weight:700 }
.area-action span:last-child { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--yellow); font-size:16px; transition:transform .2s ease }
.area-card:hover .area-action span:last-child { transform:translateX(3px) }
.selection-panel { display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; min-height:116px; margin-top:22px; padding:20px 24px; border-radius:8px; background:#171615; color:#fffdf7; box-shadow:0 8px 18px rgba(23,22,21,.12) }
.selection-panel[hidden] { display:none }
.selection-copy small { color:#ffda58; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase }
.selection-copy h3 { margin:4px 0 3px; font-size:20px; line-height:1.2 }
.selection-copy p { margin:0; color:rgba(255,253,247,.76); font-size:13px; line-height:1.45 }
.selection-cta { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-width:178px; padding:12px 17px; border-radius:4px; background:var(--yellow); color:#171615; font-size:12px; font-weight:700; transition:transform .2s ease }
.selection-cta:hover { transform:translateY(-2px) rotate(-1deg) }
.start-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 0 25px; border-top:1px solid rgba(23,22,21,.12); color:#625d56; font-size:11px }
.start-footer p { margin:0 }
.start-footer a { color:#272522; text-decoration:underline; text-underline-offset:3px }
.start-skip { position:fixed; z-index:30; left:12px; top:12px; padding:9px 12px; background:#ffda58; transform:translateY(-150%) }
.start-skip:focus { transform:translateY(0) }
@media(max-width:760px) {
  .start-shell { width:min(100% - 32px,560px) }
  .start-header { height:72px }
  .start-brand { font-size:24px }
  .header-right { gap:11px }
  .header-contact { display:none }
  .start-hero { grid-template-columns:1fr; gap:12px; padding:42px 0 40px; min-height:0 }
  .start-hero h1 { max-width:560px; font-size:clamp(42px,11vw,62px) }
  .start-intro { margin-top:15px; font-size:15px }
  .device-stage { width:min(100%,470px); height:265px; margin:8px auto 0 }
  .laptop { top:28px; width:85% }
  .laptop-screen { min-height:164px; padding:11px 13px }
  .screen-content { gap:9px; padding-top:10px }
  .screen-post { height:87px }
  .screen-copy strong { font-size:13px }
  .phone { width:100px; height:190px; left:0 }
  .device-tape { top:6px; right:11% }
  .areas { padding:33px 0 50px }
  .areas-heading { display:block; margin-bottom:17px }
  .areas-heading p { margin-top:7px }
  .areas-grid { grid-template-columns:1fr; gap:13px }
  .area-card { display:grid; grid-template-columns:38% 1fr; min-height:158px }
  .area-image { height:100%; min-height:158px }
  .area-body { padding:12px 13px }
  .area-title { margin-top:5px; font-size:18px }
  .area-desc { min-height:0; font-size:12px }
  .area-action { margin-top:11px; padding-top:8px; font-size:11px }
  .area-action span:last-child { width:24px; height:24px }
  .photo-tag { left:7px; bottom:7px; padding:5px 6px; font-size:8px }
  .selection-panel { grid-template-columns:1fr; gap:13px; padding:17px }
  .selection-cta { justify-self:start; min-width:0 }
  .start-footer { flex-wrap:wrap; justify-content:center; text-align:center; gap:8px 14px }
}
@media(max-width:390px) {
  .area-card { grid-template-columns:34% 1fr }
  .area-image { min-height:172px }
  .area-body { padding:11px }
  .area-title { font-size:16px }
  .area-desc { font-size:11px }
  .area-action { font-size:10px }
  .device-stage { height:235px }
  .laptop-display { padding:7px; border-width:3px }
  .laptop-screen { min-height:145px }
  .screen-post { height:78px }
  .phone { width:88px; height:169px }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important }
}