*, *::before, *::after { box-sizing: border-box; }
:root { --bg:#1d1d1f; --surface:#191919; --text:#ffffff; --secondary:#b8b8b8; --border:#383838; --accent:#f4c400; --accent-hover:#ffe064; --nav-h:88px; --max:1240px; }
html { scroll-behavior:smooth; scroll-padding-top:110px; color-scheme:dark; }
body { margin:0; min-width:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
::selection { background:var(--accent); color:var(--bg); }
a, button { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
nav { position:fixed; top:0; left:0; right:0; height:var(--nav-h); padding:0 48px; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:blur(22px); border-bottom:1px solid #ffffff12; }
.nav-inner { max-width:var(--max); height:100%; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo { font-family:var(--font-display); font-size:18px; font-weight:600; text-decoration:none; letter-spacing:-.03em; white-space:nowrap; }
.nav-logo::before { content:''; display:inline-block; width:10px; height:10px; border:2px solid var(--accent); margin-right:12px; transform:rotate(45deg); }
.nav-links { display:flex; align-items:center; list-style:none; gap:32px; margin:0; padding:0; }
.nav-links a { font-size:13px; text-decoration:none; color:var(--secondary); opacity:1; position:relative; padding:12px 0; }
.nav-links a::after { content:''; position:absolute; bottom:5px; left:0; width:0; height:1px; background:var(--accent); transition:width .25s; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover,.nav-links a.active { color:var(--text); }
.lang-switch { display:flex; gap:3px; padding:4px; border:1px solid var(--border); border-radius: 30px; margin:0; }
.lang-btn { border:0; background:transparent; color:var(--secondary); font-family:inherit; font-size: 12px; padding:8px; border-radius:50%; cursor:pointer; opacity:1; line-height:1; }
.lang-btn.active { background:var(--text); color:var(--bg); }
.lang-btn:hover { background:var(--border); color:var(--text); }
.scroll-progress { position:fixed; top:0; left:0; height:2px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; z-index:101; }
.container { max-width:var(--max); margin:0 auto; }
.section { padding:120px 48px; }
.eyebrow,.page-eyebrow { display:flex; align-items:center; gap:12px; font-size: 12px; font-weight:500; text-transform:uppercase; letter-spacing: .06em; color:var(--accent); margin:0 0 25px; }
.eyebrow::before,.page-eyebrow::before { content:''; width:24px; height:1px; background:var(--accent); }
.section-headline,.page-title { font-family:var(--font-display); font-weight:600; font-size:clamp(42px,6vw,80px); letter-spacing:-.03em; line-height:1.06; margin:0; color:var(--text); }
.section-sub,.page-sub { color:var(--secondary); font-size:17px; max-width:500px; line-height:1.65; margin:24px 0 0; }
.hero { position:relative; min-height:850px; min-height:max(800px,100svh); padding:170px max(48px,calc((100vw - 1240px)/2)) 100px; overflow:hidden; display:flex; align-items:center; background:#1d1d1f; }
.hero-bg { position:absolute; top:120px; bottom:100px; left:47%; right:40px; background:url('rot.webp') center/cover; border-radius:180px 12px 12px 12px; filter:saturate(.45); opacity:.7; }
.hero::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,#1d1d1f 8%,#111111f5 29%,#11111120 75%),linear-gradient(0deg,#1d1d1f,transparent 40%); }
.hero::after { content:''; position:absolute; inset:88px 0 0; pointer-events:none; background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px); background-size:88px 88px; mask-image:linear-gradient(90deg,#000,transparent); }
.hero-content { position:relative; z-index:3; width:100%; }
.hero-eyebrow { margin:0 0 32px; text-transform:uppercase; letter-spacing: .06em; color:var(--accent); font-size: 11px; display:flex; align-items:center; gap:12px; }
.hero-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 20px #f4c400aa; }
.hero-name { font-family:var(--font-display); font-size:clamp(88px,12.7vw,178px); line-height:.91; font-weight:600; letter-spacing:-.03em; margin:0; max-width:850px; }
.hero-name span { display:block; }
.hero-name span:last-child { color:var(--accent); }
.hero-tagline { color:#bfbfbf; max-width:370px; margin:36px 0 28px; font-size:17px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:25px; }
.hero-projects { display:inline-flex; align-items:center; gap:34px; background:var(--text); color:var(--bg); border-radius: 8px; padding:14px 22px; font-size:13px; font-weight:600; text-decoration:none; transition:background .2s,transform .2s; }
.hero-projects::after { content:'↗'; font-size:20px; }
.hero-projects:hover { background:var(--accent); transform:translateY(-3px); }
.hero-arrow { display:flex; justify-content:center; align-items:center; width:50px; height:50px; border:1px solid #ffffff30; border-radius:50%; transition:transform .25s; }
.hero-arrow:hover { transform:translateY(5px); }
.hero-arrow svg { width:20px; height:20px; }
.hero-index { position:absolute; left:max(48px,calc((100vw - 1240px)/2)); right:max(48px,calc((100vw - 1240px)/2)); bottom:30px; z-index:3; display:flex; gap:32px; border-top:1px solid #ffffff20; padding-top:20px; }
.hero-index a { font-family:var(--font-display); color:#b2b2b2; font-size:13px; text-decoration:none; transition:color .2s; }
.hero-index a:hover { color:var(--accent); }
#about { background:#ffffff; color:#1d1d1f; --text:#1d1d1f; --secondary:#6e6e73; --border:#d5d5d5; --accent:#2457dd; --bg:#ffffff; }
.about-grid { display:grid; grid-template-columns:1.1fr 1.4fr; gap:50px 80px; margin-top:60px; align-items:center; }
.about-grid>div:first-child { grid-row:span 2; }
.about-photo { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top; border-radius:4px 100px 4px 4px; display:block; filter:saturate(.65); }
.about-grid>div:nth-child(2) { grid-column:2; grid-row:2; }
.about-body { grid-column:2; grid-row:1; }
.about-body p { margin:0; font-size:clamp(21px,2.3vw,31px); line-height:1.5; letter-spacing:-.035em; color:var(--secondary); }
.about-body strong { font-weight:500; color:var(--text); }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.tag { border:1px solid var(--border); border-radius: 30px; padding:7px 13px; font-size: 12px; color:var(--text); }
.about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-top:30px; border-top:1px solid var(--border); }
.stat-value { font-family:var(--font-display); font-size:43px; font-weight:600; line-height:1; letter-spacing:-.03em; }
.stat-label { font-size: 12px; margin-top:12px; color:var(--secondary); }
#projects { background:var(--bg); }
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:55px; }
.project-card { --project-accent:#2563eb; padding:20px 20px 30px; background:#191919; border:1px solid #383838; border-radius: 12px; position:relative; overflow:hidden; transition:border-color .3s,transform .3s; }
.project-card:nth-child(2) { --project-accent:#e52329; }
.project-card:nth-child(3) { --project-accent:#f4c400; }
.project-card:nth-child(4) { --project-accent:#ffffff; }
.project-card:hover { border-color:var(--project-accent); transform:translateY(-5px); }
.project-logo { height:240px; margin:0 0 28px; display:grid; place-items:center; overflow:hidden; position:relative; border-radius: 8px; background:radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--project-accent) 23%,transparent),transparent 65%),#222222; }
.project-logo::before { content:''; position:absolute; width:210px; height:210px; border:1px solid color-mix(in srgb,var(--project-accent) 35%,transparent); border-radius: 40px; transform:rotate(-25deg); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.project-logo::after { content:''; position:absolute; width:280px; height:280px; border:1px solid color-mix(in srgb,var(--project-accent) 20%,transparent); border-radius: 55px; transform:rotate(-25deg); transition:transform .8s; }
.project-card:nth-child(2) .project-logo::before,.project-card:nth-child(2) .project-logo::after { border-radius:50%; }
.project-card:nth-child(3) .project-logo::before,.project-card:nth-child(3) .project-logo::after { border-radius: 8px; transform:rotate(45deg); }
.project-card:nth-child(4) .project-logo::before,.project-card:nth-child(4) .project-logo::after { border-radius: 8px; transform:rotate(-12deg); width:180px; }
.project-logo img { width:85px; height:85px; object-fit:contain; border-radius: 18px; position:relative; z-index:2; box-shadow:0 25px 45px #0005; transition:transform .7s; }
.project-card:hover .project-logo img { transform:translateY(-8px) rotate(5deg); }
.project-card:hover .project-logo::before { transform:rotate(0) scale(1.1); }
.project-card:hover .project-logo::after { transform:rotate(15deg); }
.project-name { font-family:var(--font-display); font-weight:600; font-size:31px; letter-spacing:-.03em; line-height:1.1; margin:0 12px 12px; }
.project-name span { color:var(--project-accent,var(--accent)); }
.project-desc { margin:0 12px; color:var(--secondary); font-size:14px; line-height:1.6; }
.project-links { display:flex; align-items:center; justify-content:space-between; margin:28px 12px 0; padding-top:20px; border-top:1px solid var(--border); }
.project-visit,.project-support { font-size:12px; text-decoration:none; }
.project-visit { color:var(--text); }
.project-visit::after { content:' ↗'; margin-left:12px; color:var(--project-accent); }
.project-support { color:var(--secondary); }
#contact { padding:110px 48px; background:#171717; }
.contact-inner { max-width:var(--max); margin:auto; display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:90px; }
.contact-info .section-headline { font-size:clamp(60px,8vw,108px); max-width:550px; margin-bottom:40px; }
.contact-details { display:grid; gap:0; }
.contact-item { display:flex; align-items:center; gap:18px; padding:17px 0; border-bottom:1px solid #ffffff20; }
.contact-icon { width:34px; height:34px; display:grid; place-items:center; color:var(--accent); }
.contact-icon svg[stroke] { stroke:currentColor; }
.contact-icon svg[fill]:not([fill="none"]) { fill:currentColor; }
.contact-item a { font-size:16px; text-decoration:none; overflow-wrap:anywhere; }
.contact-item a:hover { color:var(--accent); }
.contact-photo { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top; border-radius:100px 4px 4px 4px; filter:saturate(.55); }
footer { background:var(--bg); border-top:1px solid var(--border); padding:30px 48px; }
.footer-inner { max-width:var(--max); margin:auto; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer p,footer a { font-size: 12px; color:var(--secondary); margin:0; text-decoration:none; }
.reveal { opacity:1; transform:none; filter:none; }
.motion-ready .reveal { opacity:0; transform:translateY(25px); transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1); }
.motion-ready .reveal.visible { opacity:1; transform:none; }
.page-header { padding:180px 48px 80px; text-align:left; max-width:1336px; margin:auto; }
.page-title { font-size:clamp(65px,10vw,136px); }
.page-sub { margin-left:0; }
.cv-btn { background:var(--text); color:var(--bg); border-radius: 8px; }
.ed-intro { padding:20px 48px 80px; }
.ed-intro p { max-width:800px; margin:0 auto; font-size:26px; }
.ed-full { max-width:var(--max); width:calc(100% - 96px); margin:24px auto; border-radius: 8px; }
.ed-item { max-width:var(--max); margin:60px auto; border:1px solid var(--border); border-radius: 10px; overflow:hidden; }
.ed-photo { object-fit:cover; height:100%; }
.ed-text { padding:60px; }
.ed-text-block { max-width:var(--max); margin:40px auto; border-radius: 10px; }
.project-section { padding:80px 48px; scroll-margin-top:20px; }
.project-top { grid-template-columns:260px 1fr; align-items:center; gap:70px; }
.project-logo-wrap { display:grid; place-items:center; min-height:250px; border:1px solid var(--border); background:radial-gradient(ellipse at bottom,#f4c40018,transparent),#222222; border-radius: 8px; }
.project-logo-wrap img { width:95px; height:95px; border-radius: 20px; }
.project-meta .project-name { margin:0 0 20px; }
#justabook .project-name span { color:#ffffff !important; }
#justmyplan .project-name span { color:#8badff !important; }
#justanopinion .project-name span { color:#ff8489 !important; }
.project-meta .btn-visit { border-radius: 8px; }
.features { gap:20px; margin-bottom:0; }
.feature-item { border-top:1px solid var(--border); padding:24px 0; }
.feature-title { color:var(--text); }
.support-wrap,.project-section:nth-child(even) .support-wrap { background:var(--surface); border-radius: 10px; }
.submit-btn { background:var(--accent); color:var(--bg); border-radius: 8px; padding:14px 24px; }
.submit-btn:hover { background:var(--accent-hover); }
nav { color:#1d1d1f; border-bottom:2px solid #1d1d1f; }
.nav-logo { color:#1d1d1f; }
.nav-logo::before { width:9px; height:9px; border:0; border-radius: 6px; background:#e52329; box-shadow:7px -7px 0 #2563eb,-7px 7px 0 #f4c400; transform:none; margin-right:19px; }
.nav-links a { color:#6e6e73; }
.nav-links a:hover,.nav-links a.active { color:#1d1d1f; }
.nav-links a::after { background:#e52329; height:2px; }
.lang-switch { border-color:#e5e5ea; }
.lang-btn { color:#6e6e73; }
.lang-btn.active { background:#1d1d1f; color:#fff; }
.lang-btn:hover { background:#2563eb; color:#fff; }
.scroll-progress { background:linear-gradient(90deg,#e52329 0 33.33%,#f4c400 33.33% 66.66%,#2563eb 66.66%); }
.hero { background:#fff; color:#1d1d1f; }
.hero-bg { border-radius: 8px; border:2px solid #1d1d1f; opacity:1; filter:grayscale(1); }
.hero::before { background:linear-gradient(90deg,#fff 8%,#fffffff5 29%,#ffffff00 75%),linear-gradient(0deg,#fff,transparent 40%); }
.hero::after { background-image:linear-gradient(#00000006 1px,transparent 1px),linear-gradient(90deg,#00000006 1px,transparent 1px); }
.hero-name { color:#1d1d1f; }
.hero-name span:last-child { color:#e52329; }
.hero-eyebrow { color:#6e6e73; }
.hero-eyebrow::before { background:#2563eb; box-shadow:10px 0 0 #f4c400,20px 0 0 #e52329; margin-right:20px; }
.hero-tagline { color:#424245; }
.hero-projects { background:#2563eb; color:#fff; }
.hero-projects:hover { background:#1748c7; }
.hero-arrow { border-color:#1d1d1f; }
.hero-arrow svg * { stroke:#1d1d1f; }
.hero-index { border-color:#1d1d1f; }
.hero-index a { color:#6e6e73; }
.hero-index a:hover { color:#2563eb; }
#about { border-top:7px solid #f4c400; }
.about-photo { border-radius: 8px; filter:none; }
.tag { border-radius: 8px; }
.project-card { border-radius: 8px; }
.project-card:nth-child(1) { border-top:4px solid #2563eb; }
.project-card:nth-child(2) { border-top:4px solid #e52329; }
.project-card:nth-child(3) { border-top:4px solid #f4c400; }
.project-card:nth-child(4) { border-top:4px solid #fff; }
.project-card:nth-child(1) .project-name span { color:#8badff; }
.project-card:nth-child(2) .project-name span { color:#ff8489; }
.project-logo { background:#fff; }
.project-logo::before { border:3px solid var(--project-accent); }
.project-logo::after { border:2px solid #1d1d1f; }
.project-card:nth-child(4) .project-logo::before { border-color:#2563eb; }
.project-logo img { box-shadow:0 15px 30px #0002; }
#contact { background:#2457dd; --text:#fff; --secondary:#fff; --accent:#f4c400; }
.contact-item { border-color:#ffffff55; }
.contact-photo { border-radius: 8px; filter:none; border-bottom:8px solid #f4c400; }
.project-logo-wrap { background:#fff; border:2px solid #1d1d1f; border-bottom:6px solid #f4c400; }
.cv-btn:hover { background:#f4c400; color:#1d1d1f; }
@media(min-width:1500px) { .hero-bg { right:calc((100vw - 1400px)/2); } }
@media(max-width:1000px) { .about-grid { gap:36px; } .stat-value { font-size:35px; } .contact-inner { gap:40px; } .project-top { gap:35px; } .ed-text { padding:32px; } }
@media(max-width:734px) {
  :root { --nav-h:108px; }
  nav { padding:0 22px; }
  .nav-inner { flex-wrap:wrap; gap:0; align-content:center; justify-content:space-between; }
  .nav-logo { font-size:16px; }
  .lang-switch { margin-left:auto; }
  .nav-links { display:flex; order:3; width:100%; justify-content:space-between; gap:16px; margin-top:12px; }
  .nav-links a { font-size: 12px; padding:5px 0; }
  .hero { min-height:790px; min-height:max(790px,100svh); padding:180px 24px 130px; align-items:flex-start; }
  .hero-bg { left:18%; right:0; top:135px; bottom:80px; border-top-left-radius:4px; opacity:.28; }
  .hero::before { background:linear-gradient(90deg,#ffffffed,#ffffff55),linear-gradient(0deg,#fff,transparent 60%); }
  .hero-name { font-size:clamp(73px,17vw,123px); }
  .hero-eyebrow { font-size:8px; letter-spacing: .06em; margin-bottom:36px; }
  .hero-tagline { max-width:290px; font-size:15px; margin-top:30px; }
  .hero-index { left:24px; right:24px; bottom:25px; gap:14px; flex-wrap:wrap; }
  .hero-index a { font-size: 11px; }
  .section { padding:75px 24px; }
  .about-grid { grid-template-columns:1fr; gap:32px; margin-top:35px; }
  .about-grid>div:first-child,.about-grid>div:nth-child(2),.about-body { grid-column:auto; grid-row:auto; }
  .about-photo { max-width:none; max-height:520px; }
  .about-body { order:1; }
  .about-stats { gap:10px; }
  .stat-value { font-size:36px; }
  .stat-label { font-size: 11px; }
  .projects-grid { grid-template-columns:1fr; gap:22px; margin-top:35px; }
  .project-card { padding:14px 14px 25px; }
  .project-logo { height:220px; }
  #contact { padding:75px 24px; }
  .contact-inner { grid-template-columns:1fr; }
  .contact-photo { max-width:none; max-height:440px; }
  .contact-info .section-headline { font-size:65px; }
  footer { padding:25px 24px; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
  .page-header { padding:170px 24px 50px; }
  .page-title { font-size:65px; }
  .ed-intro { padding:0 24px 35px; }
  .ed-intro p { font-size:21px; }
  .ed-full { width:calc(100% - 48px); }
  .ed-item { margin:30px 24px; grid-template-columns:1fr; }
  .ed-photo { height:auto; }
  .ed-text-block { margin:30px 24px; padding:40px 25px; }
  .ed-text { padding:30px 25px; }
  .project-section { padding:55px 24px; }
  .project-top { grid-template-columns:1fr; gap:30px; margin-bottom:35px; }
  .project-logo-wrap { min-height:220px; }
  .features,.form-row { grid-template-columns:1fr; }
  .support-wrap { padding:24px; }
}
.hero-projects { font-size:18px; line-height:1.25; padding:16px 26px; gap:20px; border-radius: 10px; }
.hero-projects::after { font-size:22px; }
.hero-bg, .about-photo, .contact-photo { border-radius: 18px; }
.hero-bg { border-top-left-radius:14px; }
.project-card, .support-wrap, .project-section:nth-child(even) .support-wrap { border-radius: 18px; }
.project-logo, .project-logo-wrap { border-radius: 10px; }
.project-meta .btn-visit, .cv-btn, .submit-btn, .tag { border-radius: 9px; }
.about-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.story-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:var(--max); margin:0 auto 64px; width:calc(100% - 96px); align-items:start; }
.story-gallery .ed-full { width:100%; height:clamp(280px,52vh,420px); object-fit:contain; margin:0; border-radius: 18px; background:var(--surface); }
.story-gallery .ed-item { grid-column:1 / -1; width:100%; margin:0; border-radius: 18px; align-items:center; }
.story-gallery .ed-photo { width:100%; height:clamp(280px,52vh,420px); object-fit:contain; background:var(--surface); }
.story-gallery .ed-text { padding:32px; }
.story-gallery .ed-text-block { width:100%; margin:0; padding:28px 32px; border-radius: 18px; }
.story-gallery .ed-para { max-width:none; font-size:17px; line-height:1.65; }
.story-gallery .ed-text-block.white { grid-column:1 / -1; }
@media(max-width:734px) {
  .story-gallery { width:calc(100% - 48px); grid-template-columns:1fr; gap:20px; margin-bottom:40px; }
  .story-gallery .ed-full, .story-gallery .ed-photo { height:auto; max-height:420px; object-fit:contain; }
  .story-gallery .ed-text, .story-gallery .ed-text-block { padding:26px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } .motion-ready .reveal { opacity:1; transform:none; } }