@font-face { font-family: Manrope; src: url("manrope-400.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url("manrope-600.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url("manrope-800.ttf"); font-weight: 800; font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Manrope, Arial, sans-serif; }
img { display: block; width: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.demo-header {
  position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; padding: 0 clamp(22px, 4vw, 68px);
}
.demo-logo { font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 800; letter-spacing: -.06em; }
.demo-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); font-size: .76rem; font-weight: 600; }
.language { display: flex; align-items: center; gap: 5px; }
.language button { padding: 4px; border: 0; color: inherit; background: none; cursor: pointer; opacity: .5; font-size: .7rem; font-weight: 800; }
.language button.active { opacity: 1; }
.language span { opacity: .35; }
.hero-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 27px;
  border: 0; font-size: .76rem; font-weight: 800; transition: transform .2s ease;
}
.hero-button:hover { transform: translateY(-3px); }
.section { padding: clamp(64px, 8vw, 120px) clamp(22px, 4vw, 68px); }
.section-title { margin: 0; font-size: clamp(2rem, 4vw, 4.6rem); line-height: .98; letter-spacing: -.06em; }
.kicker { display: block; margin-bottom: 18px; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.demo-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 54px clamp(22px, 4vw, 68px); }
.demo-footer p { max-width: 460px; margin: 0; font-size: .75rem; line-height: 1.7; opacity: .72; }
.back-link { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reveal { animation: rise .7s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* Florist */
.flower { color: #233026; background: #fbf8f4; }
.flower .demo-header { background: #fbf8f4; }
.flower .demo-logo, .flower .section-title, .flower h1, .flower h2, .flower h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.flower-hero { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 650px; }
.flower-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 70px clamp(34px, 5vw, 90px); background: #f8f2ee; }
.flower h1 { max-width: 650px; margin: 0; color: #292725; font-size: clamp(3.8rem, 6vw, 7.4rem); line-height: .84; letter-spacing: -.065em; }
.flower-hero p { max-width: 460px; margin: 32px 0; color: #64615c; line-height: 1.75; }
.flower .hero-button { align-self: flex-start; color: white; background: #40533a; }
.flower-hero > img { height: 100%; min-height: 650px; }
.bouquet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 46px; }
.bouquet-card img { aspect-ratio: 3/4; }
.bouquet-card h3 { margin: 15px 0 6px; font-size: 1.25rem; }
.bouquet-card p { margin: 0; color: #40533a; font-weight: 600; }
.flower-occasions { background: #f2e4e2; }
.occasion-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 42px; border-top: 1px solid #cdbebb; }
.occasion-row article { min-height: 170px; padding: 28px 24px; border-right: 1px solid #cdbebb; }
.occasion-row article:last-child { border: 0; }
.occasion-row span { font-family: Georgia, serif; font-size: 2.4rem; color: #536a4d; }
.occasion-row h3 { font-size: 1.25rem; }
.flower-process { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; }
.flower-process img { min-height: 470px; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-content: center; }
.steps article { border-top: 1px solid #b8b5ad; padding-top: 20px; }
.steps strong { font-family: Georgia, serif; font-size: 2rem; font-weight: 400; }
.steps p { color: #666; line-height: 1.65; font-size: .82rem; }
.flower .demo-footer { color: #edf2e9; background: #40533a; }

/* Beauty */
.beauty { color: #111; background: #f2f0ed; }
.beauty .demo-header { color: white; background: #0e0e0e; }
.beauty .demo-logo { letter-spacing: -.08em; }
.beauty-hero { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 690px; color: white; background: #0e0e0e; }
.beauty-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 70px 7vw; border-left: 1px solid #555; }
.beauty h1 { max-width: 620px; margin: 0; font-size: clamp(4rem, 7vw, 8rem); line-height: .82; letter-spacing: -.075em; text-transform: uppercase; }
.beauty-hero p { max-width: 430px; margin: 35px 0; color: #c8c5c2; line-height: 1.7; }
.beauty .hero-button { align-self: flex-start; background: #e86245; color: white; }
.beauty-hero img { height: 100%; min-height: 690px; filter: saturate(.45) contrast(1.03); }
.price-list { margin-top: 45px; border-top: 1px solid #aaa; }
.price-list article { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 25px; min-height: 118px; border-bottom: 1px solid #bbb; }
.price-list span { color: #e86245; }
.price-list h3 { margin: 0; font-size: clamp(1.1rem, 2vw, 2rem); text-transform: uppercase; }
.price-list strong { font-size: clamp(1.5rem, 3vw, 3.3rem); letter-spacing: -.06em; }
.beauty-manifesto { display: grid; grid-template-columns: 1fr 1fr; color: white; background: #111; }
.beauty-manifesto img { height: 100%; min-height: 560px; }
.beauty-manifesto div { display: flex; flex-direction: column; justify-content: center; padding: 8vw; }
.beauty-manifesto p { color: #aaa; line-height: 1.8; }
.beauty-process { color: #111; background: #e86245; }
.beauty-process .steps { margin-top: 42px; grid-template-columns: repeat(4, 1fr); }
.beauty-process .steps article { border-color: #9f3c28; }
.beauty-gallery { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 12px; margin-top: 42px; }
.beauty-gallery img { height: 420px; filter: grayscale(.3); }
.beauty .demo-footer { color: white; background: #111; }

/* Cafe */
.cafe { color: #39251c; background: #f5efe4; }
.cafe .demo-header { position: absolute; inset: 0 0 auto; color: #f7f0e5; background: transparent; }
.cafe .demo-logo, .cafe h1, .cafe h2, .cafe h3, .cafe .section-title { font-family: Georgia, serif; font-weight: 400; }
.cafe-hero-v2 { min-height: 760px; display: flex; align-items: center; padding: 120px clamp(24px, 5vw, 82px) 70px; color: #f9f2e7; background: linear-gradient(90deg, rgba(40,22,15,.9) 0 39%, rgba(40,22,15,.06) 68%), url("../cafe/assets/hero-v2.png") center/cover; }
.cafe-hero-copy { max-width: 660px; }
.cafe h1 { margin: 0; color: #f5efe4; font-size: clamp(4rem, 7.2vw, 8.5rem); line-height: .86; letter-spacing: -.06em; }
.cafe-hero p { max-width: 440px; margin: 32px 0; line-height: 1.75; }
.cafe .hero-button { color: white; background: #1f4894; }
.cafe-menu-v2 { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7vw; align-items: center; }
.cafe-menu-v2 .section-title { max-width: 640px; font-size: clamp(2.8rem, 5vw, 5.6rem); }
.menu-list-v2 { margin-top: 38px; border-top: 1px solid #b7a797; }
.menu-list-v2 article { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 17px 0; border-bottom: 1px solid #d2c6b8; }
.menu-list-v2 h3 { margin: 0; font-size: 1.25rem; }
.menu-list-v2 p { margin: 5px 0 0; color: #857366; font: .7rem/1.55 Manrope, sans-serif; }
.menu-list-v2 strong { color: #a93f29; font-size: 1rem; }
.cafe-menu-v2 > img { min-height: 680px; height: 100%; }
.cafe-bakery-v2 { display: grid; grid-template-columns: .72fr 1.28fr; color: #fff4e8; background: #a43c27; }
.cafe-bakery-v2 > div { display: flex; flex-direction: column; justify-content: center; padding: 8vw 5vw; }
.cafe-bakery-v2 p, .cafe-coffee-v2 p { line-height: 1.8; }
.cafe-bakery-v2 img { height: 100%; min-height: 540px; }
.cafe-coffee-v2 { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 7vw; }
.coffee-photo { min-height: 560px; background: url("../cafe/assets/hero-v2.png") 67% center/cover; }
.cafe-coffee-v2 > div:last-child { align-self: center; }
.coffee-notes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 38px; border-top: 1px solid #cabcae; border-bottom: 1px solid #cabcae; }
.coffee-notes span { padding: 20px 12px; border-right: 1px solid #cabcae; color: #1f4894; font-size: .7rem; font-weight: 800; }
.coffee-notes span:last-child { border-right: 0; }
.cafe .demo-footer { color: #f8ecdf; background: #25150f; }

/* Auto */
.auto { color: #eaf0f6; background: #090d12; }
.auto .demo-header { position: absolute; inset: 0 0 auto; border-bottom: 1px solid #27313c; }
.auto .demo-logo { letter-spacing: .08em; }
.auto-hero { min-height: 760px; display: flex; align-items: center; padding: 110px clamp(24px, 4vw, 70px) 60px; background: linear-gradient(90deg, rgba(5,8,12,.97) 0 38%, rgba(5,8,12,.14) 70%), url("../auto-service/assets/hero.png") center/cover; }
.auto-hero-copy { max-width: 720px; }
.auto h1 { margin: 0; font-size: clamp(4rem, 7.5vw, 8.5rem); line-height: .82; letter-spacing: -.06em; text-transform: uppercase; }
.auto-hero p { max-width: 470px; margin: 32px 0; color: #aeb8c1; line-height: 1.7; }
.auto .hero-button { color: white; background: #096dff; }
.auto-services { background: #0e141a; }
.auto-services .section-title::after { content: ""; display: inline-block; width: 15px; height: 42px; margin-left: 15px; background: #096dff; transform: skew(-20deg); }
.service-matrix { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 45px; border: 1px solid #35404c; }
.service-matrix article { min-height: 330px; padding: 30px; border-right: 1px solid #35404c; }
.service-matrix article:last-child { border: 0; }
.service-matrix span, .auto strong { color: #2d86ff; }
.service-matrix h3 { margin: 55px 0 20px; font-size: 1.25rem; text-transform: uppercase; }
.service-matrix p, .auto-process p { color: #8995a0; font-size: .78rem; line-height: 1.65; }
.service-matrix strong { display: block; margin-top: 38px; font-size: 1.2rem; }
.auto-process { background: #0a0f14; }
.auto-process .steps { grid-template-columns: repeat(4, 1fr); margin-top: 45px; }
.auto-process .steps article { border-color: #35404c; }
.auto-expertise { display: grid; grid-template-columns: .8fr 1.2fr; padding: 0; background: #0e141a; }
.auto-expertise div { padding: 8vw 5vw; }
.auto-expertise img { height: 100%; min-height: 560px; }
.auto-principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 1px; background: #35404c; }
.auto-principles article { padding: 60px 35px; background: #090d12; }
.auto-principles p { color: #8995a0; font-size: .75rem; line-height: 1.65; }
.auto .demo-footer { border-top: 1px solid #27313c; }

/* Fishing */
.fishing-shop { color: #0b2540; background: #f5f6f6; }
.fishing-shop .demo-header { position: absolute; inset: 0 0 auto; color: white; background: rgba(5,21,39,.92); border-bottom: 1px solid rgba(255,255,255,.16); }
.fishing-shop .demo-logo { letter-spacing: -.04em; font-size: 2rem; }
.tackle-hero { min-height: 720px; display: flex; align-items: center; padding: 120px clamp(24px, 4vw, 70px) 60px; color: white; background: linear-gradient(90deg, rgba(4,18,36,.96) 0 38%, rgba(4,18,36,.08) 68%), url("../fishing-store/assets/showroom-v2.png") center/cover; }
.tackle-hero-copy { max-width: 660px; }
.tackle-hero h1 { margin: 0; max-width: 650px; font-size: clamp(4rem, 7vw, 8rem); line-height: .84; letter-spacing: -.065em; text-transform: uppercase; }
.tackle-hero p { max-width: 500px; margin: 30px 0; color: #d8e0e7; line-height: 1.72; }
.fishing-shop .hero-button { color: white; background: #ff5a1f; }
.tackle-catalog { background: white; }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.catalog-heading p { max-width: 360px; color: #6c7883; line-height: 1.6; }
.tackle-product-photo { margin-top: 42px; overflow: hidden; border: 1px solid #d7dde1; background: white; }
.tackle-product-photo img { aspect-ratio: 2.5/1; object-fit: cover; }
.tackle-products { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid #d7dde1; }
.tackle-products article { padding: 27px; border-right: 1px solid #d7dde1; border-bottom: 1px solid #d7dde1; }
.tackle-products article > span { color: #ff5a1f; font-size: .68rem; font-weight: 800; }
.tackle-products h3 { min-height: 48px; margin: 22px 0; font-size: 1.15rem; text-transform: uppercase; }
.tackle-products dl { margin: 0; border-top: 1px solid #e2e6e8; }
.tackle-products dl div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #e2e6e8; font-size: .66rem; }
.tackle-products dt { color: #6c7883; }
.tackle-products dd { margin: 0; font-weight: 800; }
.tackle-products strong { display: block; margin-top: 28px; color: #0b2540; font-size: 1.45rem; }
.tackle-categories { color: white; background: #0b2540; }
.category-row { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 42px; border-top: 1px solid #53677a; border-left: 1px solid #53677a; }
.category-row article { min-height: 250px; padding: 28px; border-right: 1px solid #53677a; border-bottom: 1px solid #53677a; }
.category-row span { color: #ff7a48; font-size: .68rem; font-weight: 800; }
.category-row h3 { margin: 65px 0 12px; text-transform: uppercase; }
.category-row p { color: #aebbc5; font-size: .72rem; line-height: 1.65; }
.tackle-selection { display: grid; grid-template-columns: .65fr 1.35fr; gap: 7vw; }
.selection-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #bfc8ce; border-left: 1px solid #bfc8ce; }
.selection-grid article { padding: 28px; border-right: 1px solid #bfc8ce; border-bottom: 1px solid #bfc8ce; }
.selection-grid span { color: #ff5a1f; font-weight: 800; }
.selection-grid h3 { min-height: 52px; margin: 32px 0 20px; text-transform: uppercase; }
.selection-grid ul { margin: 0; padding-left: 17px; color: #5f6e79; font-size: .73rem; line-height: 1.9; }
.tackle-new { background: #e8ebed; }
.new-list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 42px; border-top: 1px solid #aab5bc; }
.new-list article { display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; padding: 27px; border-right: 1px solid #aab5bc; }
.new-list span { max-width: 190px; font-weight: 800; text-transform: uppercase; }
.new-list strong { color: #ff5a1f; font-size: 1.25rem; }
.fishing-shop .demo-footer { color: white; background: #071a2d; }

@media (max-width: 900px) {
  .demo-nav a { display: none; }
  .flower-hero, .beauty-hero, .beauty-manifesto, .flower-process, .auto-expertise, .cafe-menu-v2, .cafe-bakery-v2, .cafe-coffee-v2, .tackle-selection { grid-template-columns: 1fr; }
  .flower-hero > img, .beauty-hero img { min-height: 430px; }
  .bouquet-grid, .service-matrix, .auto-process .steps, .beauty-process .steps, .tackle-products, .category-row, .new-list { grid-template-columns: 1fr 1fr; }
  .occasion-row { grid-template-columns: 1fr 1fr; }
  .cafe-menu-v2 > img { min-height: 480px; }
  .cafe-bakery-v2 > div { padding: 70px 6vw; }
  .catalog-heading { align-items: start; flex-direction: column; }
  .selection-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .demo-header { min-height: 62px; }
  .demo-logo { font-size: 1.2rem; }
  .flower-hero-copy, .beauty-hero-copy { padding: 95px 22px 55px; }
  .flower h1, .beauty h1, .cafe h1, .auto h1, .fishing h1 { font-size: clamp(3.1rem, 16vw, 5rem); }
  .bouquet-grid, .steps, .beauty-process .steps, .service-matrix, .auto-process .steps, .auto-principles, .tackle-products, .category-row, .selection-grid, .new-list { grid-template-columns: 1fr; }
  .occasion-row { grid-template-columns: 1fr; }
  .beauty-gallery { grid-template-columns: 1fr; }
  .beauty-gallery img { height: 300px; }
  .price-list article { grid-template-columns: 36px 1fr; padding: 20px 0; }
  .price-list strong { grid-column: 2; }
  .cafe-hero-v2, .tackle-hero { min-height: 700px; padding-left: 22px; padding-right: 22px; }
  .cafe-menu-v2 > img { min-height: 350px; }
  .coffee-photo { min-height: 380px; }
  .coffee-notes { grid-template-columns: 1fr; }
  .coffee-notes span { border-right: 0; border-bottom: 1px solid #cabcae; }
  .coffee-notes span:last-child { border-bottom: 0; }
  .tackle-product-photo img { aspect-ratio: 1.3/1; }
  .tackle-products h3, .selection-grid h3 { min-height: 0; }
  .demo-footer { align-items: flex-start; flex-direction: column; }
}