@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
      :root { --ink:#1d2730; --muted:#6a737b; --paper:#fbf8f4; --card:#ffffff; --line:#e8e2da; --coral:#ef6854; --lavender:#7764cb; --mint:#dff4ed; }
      :root[data-theme="dark"] { --ink:#f3f7f8; --muted:#b3c0c5; --paper:#0e1519; --card:#1c272d; --line:#3a4a52; }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',Arial,sans-serif; transition:background .25s,color .25s; }
      a { color:inherit; text-decoration:none; }
      .shell { overflow:hidden; position:relative; }
      .shell:before, .shell:after { content:""; position:absolute; border-radius:50%; pointer-events:none; filter:blur(1px); }
      .shell:before { width:480px; height:480px; right:-220px; top:90px; background:#f7d9c8; opacity:.52; }
      .shell:after { width:370px; height:370px; left:-210px; top:580px; background:#d7ede8; opacity:.7; }
      :root[data-theme="dark"] .shell:before { background:#56382f; opacity:.38; }
      :root[data-theme="dark"] .shell:after { background:#214a48; opacity:.38; }
      .container { width:min(1120px, calc(100% - 40px)); margin:auto; position:relative; z-index:1; }
      header { height:90px; display:flex; align-items:center; justify-content:space-between; }
      .brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; letter-spacing:-.4px; }
      .brand-mark { width:35px; height:35px; border-radius:11px; background:linear-gradient(135deg,#f06b55,#e79763); position:relative; box-shadow:0 7px 16px #ef68553d; }
      .brand-mark:before { content:"f"; color:#fff; font-family:Georgia,serif; font-size:27px; font-weight:bold; position:absolute; top:1px; left:12px; }
      .nav { display:flex; align-items:center; gap:30px; font-size:14px; font-weight:600; color:#505963; }
      .nav a:hover { color:var(--coral); }
      .header-actions { display:flex; align-items:center; gap:12px; }
      .theme-toggle { width:42px; height:42px; display:grid; place-items:center; padding:0; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:50%; cursor:pointer; transition:background .2s,transform .2s; }
      .theme-toggle:hover { background:var(--card); transform:translateY(-2px); }
      .theme-icon { font-size:18px; line-height:1; }
      .theme-icon-dark { display:none; }
      :root[data-theme="dark"] .theme-icon-light { display:none; }
      :root[data-theme="dark"] .theme-icon-dark { display:block; }
      .contact { padding:11px 17px; background:var(--ink); color:#fff; border-radius:99px; font-size:14px; font-weight:600; transition:transform .2s; }
      .contact:hover, .store-button:hover { transform:translateY(-2px); }
      .hero { padding:75px 0 110px; text-align:center; }
      .eyebrow { display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border:1px solid #e8ddd2; border-radius:99px; color:#9a5b44; background:#fff9f3; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
      .eyebrow i { width:7px; height:7px; background:#ef8064; border-radius:50%; }
      h1 { max-width:760px; margin:22px auto 18px; font-family:'Playfair Display',Georgia,serif; font-size:clamp(43px,6vw,76px); line-height:1.04; letter-spacing:-.055em; font-weight:700; }
      h1 em { color:var(--coral); font-style:normal; }
      .hero p { max-width:545px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.65; }
      .scroll-link { margin-top:30px; display:inline-flex; align-items:center; gap:9px; color:#39434a; font-weight:700; font-size:14px; }
      .scroll-link span { display:grid; place-items:center; width:29px; height:29px; border:1px solid #cfc8c0; border-radius:50%; font-size:18px; }
      .apps { padding:0 0 105px; }
      .section-title { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:28px; }
      .section-title h2 { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:38px; letter-spacing:-.045em; }
      .section-title p { margin:0; color:var(--muted); font-size:14px; }
      .app-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
      .app-card { min-height:445px; position:relative; display:flex; flex-direction:column; padding:29px; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--card); box-shadow:0 13px 34px #4c3d2b0b; transition:transform .25s,box-shadow .25s; }
      .app-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px #4c3d2b19; }
      .app-card.pose { background:linear-gradient(145deg,#fff 0%,#fff8f3 100%); }
      .app-card.stamp { background:linear-gradient(145deg,#fff 0%,#f5f2ff 100%); }
      .app-card.film { background:linear-gradient(145deg,#fff 0%,#f7f3e9 100%); }
      .app-card.collage { background:linear-gradient(145deg,#fff 0%,#f4f1ff 100%); }
      :root[data-theme="dark"] .nav { color:var(--muted); }
      :root[data-theme="dark"] .contact,
      :root[data-theme="dark"] .store-button { color:#172126; }
      :root[data-theme="dark"] .eyebrow { color:#f3b49f; background:#2c2422; border-color:#553d36; }
      :root[data-theme="dark"] .scroll-link { color:var(--ink); }
      :root[data-theme="dark"] .scroll-link span { border-color:#536167; }
      :root[data-theme="dark"] .app-card { border-color:#41545d; box-shadow:0 18px 42px #0008; }
      :root[data-theme="dark"] .app-card:hover { box-shadow:0 25px 52px #000b; }
      :root[data-theme="dark"] .app-card.pose { background:linear-gradient(145deg,#202b31 0%,#4a2a26 100%); }
      :root[data-theme="dark"] .app-card.stamp { background:linear-gradient(145deg,#202a34 0%,#3d2960 100%); }
      :root[data-theme="dark"] .app-card.film { background:linear-gradient(145deg,#292a22 0%,#503a16 100%); }
      :root[data-theme="dark"] .app-card.collage { background:linear-gradient(145deg,#202636 0%,#51244c 100%); }
      :root[data-theme="dark"] .app-copy { color:#d2dcdf; }
      :root[data-theme="dark"] .features li { color:#edf2f3; background:#ffffff14; border-color:#63747c; }
      .app-top { position:relative; z-index:2; display:flex; align-items:center; gap:15px; }
      .app-icon { width:70px; height:70px; object-fit:cover; flex:0 0 auto; border-radius:19px; box-shadow:0 8px 18px #35303a22; background:#eee; }
      .app-kicker { margin:0 0 4px; font-size:12px; color:var(--muted); font-weight:600; }
      .app-top h3 { margin:0; font-size:21px; line-height:1.15; letter-spacing:-.04em; }
      .app-copy { position:relative; z-index:2; max-width:305px; margin:27px 0 0; color:#566069; line-height:1.6; font-size:15px; }
      .features { position:relative; z-index:2; list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; max-width:330px; }
      .features li { padding:7px 10px; border:1px solid #e6ddd6; border-radius:9px; background:#fff9; font-size:12px; font-weight:600; color:#49535a; }
      .store-button { position:relative; z-index:2; margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:9px; padding:12px 16px 12px 13px; color:#fff; background:var(--ink); border-radius:12px; font-size:13px; font-weight:700; transition:transform .2s; }
      .store-button-disabled { cursor:default; background:#68757a; }
      .store-button-disabled:hover { transform:none; }
      :root[data-theme="dark"] .store-button { color:#211a18; background:#f1846e; box-shadow:0 9px 22px #ef68544a; }
      :root[data-theme="dark"] .store-button-disabled { color:#2a210e; background:#e3b54b; box-shadow:0 9px 22px #e3b54b40; }
      .play { width:20px; height:20px; display:inline-grid; place-items:center; border-radius:5px; background:#fff; color:#1d2730; font-size:12px; }
      .art { position:absolute; right:-34px; bottom:-43px; width:245px; height:245px; border-radius:49% 51% 45% 55%; opacity:.98; }
      .pose .art { background:linear-gradient(145deg,#f6af84,#ef6b5b); transform:rotate(20deg); }
      .stamp .art { background:linear-gradient(145deg,#b9aae9,#7565c5); transform:rotate(-20deg); }
      .film .art { background:linear-gradient(145deg,#e7c168,#9e6b22); transform:rotate(14deg); }
      .collage .art { background:linear-gradient(145deg,#ff9d3b,#d937b7 52%,#5443e5); transform:rotate(-12deg); }
      .art:before { content:""; position:absolute; width:135px; height:185px; left:48px; top:24px; border:2px solid #fff9; border-radius:37% 63% 48% 52%; transform:rotate(-15deg); }
      .stamp .art:before { border-radius:14px; transform:rotate(18deg); }
      .art:after { content:"\2726"; position:absolute; color:#fff; font-size:43px; left:88px; top:78px; }
      .coming-soon { position:absolute; z-index:3; right:22px; top:20px; padding:6px 9px; color:#725119; background:#fff3cf; border:1px solid #e7cc8b; border-radius:99px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
      :root[data-theme="dark"] .coming-soon { color:#ffe29a; background:#54411a; border-color:#a37d29; }
      .about { margin-bottom:80px; padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:#fff; background:#27333a; border-radius:26px; }
      .about h2 { margin:0 0 8px; font-family:'Playfair Display',Georgia,serif; font-size:31px; letter-spacing:-.04em; }
      .about p { max-width:570px; margin:0; color:#cad3d4; line-height:1.55; font-size:15px; }
      .email { white-space:nowrap; padding:12px 16px; border:1px solid #627077; border-radius:10px; font-weight:700; font-size:14px; }
      .email:hover { background:#fff; color:#27333a; }
      footer { padding:0 0 28px; display:flex; justify-content:space-between; color:#7e8589; font-size:12px; }
      @media (max-width:700px) { .container { width:min(100% - 30px,1120px); } header { height:75px; } .nav { display:none; } .theme-toggle { width:38px; height:38px; } .hero { padding:55px 0 74px; } .hero p { font-size:15px; } .section-title { align-items:start; flex-direction:column; gap:7px; } .section-title h2 { font-size:32px; } .app-grid { grid-template-columns:1fr; } .app-card { min-height:425px; } .about { padding:32px 27px; flex-direction:column; align-items:flex-start; } footer { flex-direction:column; gap:7px; } }