/* Modern CSS inspired color scheme and styling */:root{/* Modern CSS color palette */ --bg:#0b0b0f;--surface:#14141a;--surface-2:#1a1a22;--border:#25252f;--border-light:#2f2f3a;--text:#e4e4e7;--text-muted:#9999a8;--accent:#a78bfa;--accent-dim:#7c3aed;--accent-hover:#8b5cf6;--green:#34d399;--blue:#60a5fa;--pink:#f472b6;--orange:#fb923c;--cyan:#22d3ee;--radius:16px;--radius-sm:10px;/* Keep some original values */ --fg:#e4e4e7;--fg-muted:#6b6b76;--bg-secondary:#14141a;--accent-cyan:#22d3ee;--card-bg:#14141a;/* Optimal System Font Stacks */ /* Display font:Readex Pro for modern clean look */ --font-display:'Readex Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;/* Body font:Readex Pro for consistency */ --font-body:'Readex Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;/* Advanced typographic system - modular scale based on golden ratio (1.618) */ --ratio:1.618;--base-size:clamp(16px,1vw + 0.75rem,20px);/* Type scale - each step multiplies by golden ratio */ --text-xs:calc(var(--base-size) / var(--ratio) / var(--ratio));--text-sm:calc(var(--base-size) / var(--ratio));--text-base:var(--base-size);--text-lg:calc(var(--base-size) * var(--ratio));--text-xl:calc(var(--base-size) * var(--ratio) * var(--ratio));--text-2xl:calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio));/* Vertical rhythm unit - based on golden ratio */ --rhythm:calc(var(--base-size) * 1.618)}*{margin:0;padding:0;box-sizing:border-box}/* Advanced typographic features */::selection{background:var(--accent-cyan);color:#000000;text-shadow:none}/* Proper hyphenation for text blocks */ p,li,.service-description,.hero-subtitle{hyphens:auto;hyphenate-limit-chars:6 3 2}/* Prevent widow/orphan lines */ p{orphans:3;widows:3}/* Small caps for acronyms */ abbr{font-feature-settings:"smcp" 1,"c2sc" 1;font-variant:small-caps;letter-spacing:0.05em}/* Proportional oldstyle figures for body text */ .company-details,.service-description{font-variant-numeric:proportional-nums}/* Lining figures for headers and UI */ h1,h2,h3,h4,nav,.cta-primary,.brand{font-variant-numeric:lining-nums}/* Superior typographic detail:proper quote marks */ q{quotes:"" " " "" "'" "'"}q::before{content:open-quote}q::after{content:close-quote}html{/* Fluid typography using clamp() for responsive scaling */ font-size:clamp(16px,1vw + 0.75rem,20px);font-family:var(--font-body);/* Advanced font rendering */ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}body{min-height:100vh;background:var(--bg);color:var(--text);/* Perfect vertical rhythm */ line-height:1.6;font-size:1rem;font-weight:200;overflow-x:hidden}/* Subtle gradient background effect */ body::before{content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 20% 80%,rgba(167,139,250,0.04) 0%,transparent 40%),radial-gradient(circle at 80% 20%,rgba(34,211,238,0.04) 0%,transparent 40%);pointer-events:none;z-index:0}/* Remove scan lines for cleaner look */ body::after{display:none}.container{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 2rem}header{padding:1rem 0;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);background:rgba(11,11,15,0.8)}header .container{display:flex;justify-content:space-between;align-items:center}header::after{display:none}.brand{/* Fluid sizing with clamp */ font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;letter-spacing:0.08em;color:var(--text);text-decoration:none;position:relative;display:inline-flex;align-items:baseline;text-transform:uppercase;font-feature-settings:"ss01" 1,"cv05" 1;transform:scale(1.02);transform-origin:left center;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-shadow:0 0 20px rgba(167,139,250,0.15)}/* Furigana (ruby annotation) styling */ .brand ruby{ruby-position:over;/* Japanese font with proper fallback */ font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;font-weight:700;letter-spacing:0.05em;/* Slightly larger for optical balance with Latin */ font-size:1.15em;display:ruby}.brand rt{/* Small romaji text ABOVE hiragana */ font-family:var(--font-body);font-size:0.42em;font-weight:700;font-variation-settings:'wght' 500;/* Wide letter-spacing to match width of hiragana below */ letter-spacing:0.45em;color:var(--fg);text-transform:uppercase;line-height:1.2;display:ruby-text;ruby-position:over}nav{display:flex;gap:2rem;align-items:center}nav a{color:var(--text-muted);text-decoration:none;font-size:clamp(0.85rem,1vw,0.95rem);font-weight:700;letter-spacing:0.015em;transition:color 0.2s ease}nav a:hover{color:var(--text)}main{padding:4rem 0 2rem}section{margin-bottom:5rem}.hero{display:grid;grid-template-columns:2fr 1fr;gap:4rem;align-items:center;max-width:1200px;margin-left:auto;margin-right:auto}.hero-content{max-width:600px;/* Optical margin alignment - aligns punctuation outside content box */ text-align:left}/* Advanced:Optical alignment for headings */ h1,h2,h3,.section-title{/* Balance ragged edges in multi-line headings */ text-wrap:balance;/* Improved rendering for display type */ text-rendering:geometricPrecision;/* Use Clash Display for all headings */ font-family:var(--font-display)}.hero-cta{display:flex;align-items:center;justify-content:center}h1{/* Fluid type scale - responds to viewport */ font-size:clamp(2.5rem,5vw + 1rem,5.5rem);font-weight:700;line-height:1.1;margin-bottom:clamp(1.5rem,3vh,2.5rem);letter-spacing:-0.045em;text-wrap:balance;max-width:25ch;color:var(--text)}.hero-subtitle{font-size:clamp(1.125rem,2vw,1.35rem);color:var(--text-muted);margin-bottom:0;opacity:1;line-height:1.75;font-weight:200;letter-spacing:0;max-width:60ch;text-wrap:pretty}.cta-primary{display:inline-flex;align-items:center;gap:0.75rem;padding:clamp(0.875rem,2vh,1.125rem) clamp(1.75rem,4vw,2.5rem);background:var(--accent-dim);color:#ffffff;font-size:clamp(1rem,1.5vw,1.15rem);font-family:var(--font-body);font-weight:700;letter-spacing:0.01em;border:1px solid var(--accent-dim);border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;user-select:none;transition:all 0.2s ease}.cta-primary:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(167,139,250,0.3)}.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.service-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;position:relative;transition:all 0.3s ease}.service-card::before{display:none}.service-card:hover{border-color:var(--accent-dim);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.4)}.service-icon{font-size:2.5rem;margin-bottom:1.5rem;color:var(--accent);width:3rem;height:3rem;display:flex;align-items:center;justify-content:center}.service-icon svg{width:100%;height:100%}.service-title{font-size:clamp(1.2rem,1.5vw,1.5rem);font-weight:700;margin-bottom:0.75rem;color:var(--text);letter-spacing:-0.02em;line-height:1.35;text-wrap:balance}.service-description{color:var(--text-muted);font-size:clamp(0.95rem,1vw,1.0625rem);line-height:1.7;font-weight:200;letter-spacing:0;max-width:60ch}.section-title{font-size:clamp(1.875rem,3vw + 0.5rem,2.5rem);font-weight:700;margin-bottom:clamp(2rem,5vh,3.5rem);text-align:center;letter-spacing:-0.02em;line-height:1.2;text-wrap:balance}.about-content{max-width:480px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;position:relative;text-align:center}.about-content::after{display:none}.about-content h3{font-size:clamp(1.5rem,2.5vw,1.875rem);font-weight:700;margin-bottom:1.5rem;color:var(--text);letter-spacing:-0.02em;line-height:1.25;text-wrap:balance}.company-details{color:var(--text-muted);line-height:1.7;font-size:clamp(0.95rem,1vw,1.0625rem)}.company-details p{margin-bottom:1.2em;text-wrap:pretty}.company-details strong{color:var(--text);font-weight:700;letter-spacing:0}.project-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-decoration:none;max-width:480px;margin:0 auto 2rem;position:relative;transition:all 0.3s ease;text-align:center}.project-card::before{display:none}.project-card:hover{border-color:var(--accent-dim);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.4)}.project-title{font-size:clamp(1.5rem,2.5vw,1.875rem);font-weight:700;margin-bottom:0.75rem;color:var(--text);letter-spacing:-0.02em;line-height:1.3;text-wrap:balance}.project-badge{display:inline-block;padding:0.5rem 1.25rem;background:rgba(167,139,250,0.08);color:var(--accent);border:1px solid rgba(167,139,250,0.2);border-radius:100px;font-size:clamp(0.8rem,1vw,0.875rem);font-weight:700;letter-spacing:0.05em;margin-top:1rem;white-space:nowrap;transition:all 0.3s ease}.project-card:hover .project-badge{background:rgba(167,139,250,0.12)}footer{text-align:center;padding:2rem 0;border-top:1px solid var(--border);margin-top:3rem}.copyright{color:var(--text-muted);font-size:clamp(0.8rem,1vw,0.875rem);font-weight:200;letter-spacing:0.02em}/* Style for email link in about section */ .company-details a{color:var(--accent);text-decoration:none;text-underline-offset:0.15em;transition:opacity 0.2s ease}.company-details a:hover{opacity:0.8}/* ============================================ MOBILE TYPOGRAPHY - INNOVATIVE PRACTICES ============================================ */ @media (max-width:768px){:root{/* Mobile-specific modular scale - slightly compressed for space efficiency */ --mobile-ratio:1.5;/* Fluid rhythm unit for mobile */ --mobile-rhythm:clamp(1.25rem,3.5vw,1.75rem);/* Mobile-optimized measure (45-75 characters optimal) */ --mobile-measure:min(65ch,90vw)}.hero{grid-template-columns:1fr;gap:var(--mobile-rhythm);text-align:left;/* Left-aligned for better readability on mobile */ /* Generous padding for breathing room */ padding:clamp(1.5rem,4vw,2.5rem) 0}.hero-content{max-width:var(--mobile-measure);/* Optical alignment - indent for visual rhythm */ margin-left:0}.hero-cta{justify-content:flex-start}h1{font-size:clamp(2.25rem,11vw,4rem);letter-spacing:-0.045em;line-height:1.1;font-weight:700;margin-bottom:clamp(1.5rem,5vw,2.5rem);max-width:20ch;text-wrap:balance;word-break:keep-all}.hero-subtitle{font-size:clamp(1.0625rem,4.5vw,1.25rem);line-height:1.75;font-weight:200;max-width:var(--mobile-measure);letter-spacing:0;text-wrap:pretty;word-break:normal;overflow-wrap:break-word;margin-bottom:clamp(2rem,5vw,3rem)}.services{grid-template-columns:1fr;/* Fluid gap using rhythm */ gap:var(--mobile-rhythm);/* Add spacing for visual separation */ margin-top:clamp(2rem,6vw,3rem)}.service-card{/* Center-align text on mobile */ text-align:center;align-items:center;/* Fluid padding */ padding:clamp(1rem,5vw,1.5rem)}.service-icon{/* Proportional scaling */ font-size:clamp(2rem,8vw,2.75rem);margin-bottom:clamp(1rem,3vw,1.5rem);/* Center-align icon */ align-self:center}.service-title{/* Mobile-optimized heading size */ font-size:clamp(1.25rem,5vw,1.5rem);/* Minimal tracking for readability */ letter-spacing:-0.01em;/* Optimal line-height */ line-height:1.3;/* Semibold weight for small screens */ font-weight:700;/* Rhythm-based spacing */ margin-bottom:clamp(0.625rem,2vw,0.875rem);/* Prevent awkward breaks */ text-wrap:balance}.service-description{/* Optimized body text for mobile */ font-size:clamp(0.9375rem,4vw,1.0625rem);/* Optimal reading line-height for mobile */ line-height:1.7;/* Normal tracking for readability */ letter-spacing:0;/* Optimal measure */ max-width:var(--mobile-measure)}header{/* Fluid padding */ padding:clamp(1rem,3vw,1.5rem) 0}header .container{/* Stack navigation on mobile */ flex-direction:column;gap:clamp(1rem,3vw,1.25rem);align-items:flex-start}.brand:hover{color:var(--accent);transform:scale(1.04);text-shadow:0 0 30px rgba(167,139,250,0.3)}.brand{/* Larger brand on mobile for presence */ font-size:clamp(1.375rem,5.5vw,1.75rem)}nav{/* Full width navigation */ width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,4vw,1.5rem);/* Remove top padding and border for better alignment */ padding-top:0;border-top:none}nav a{font-size:clamp(0.85rem,3.5vw,0.95rem);font-weight:700;letter-spacing:0.01em;padding:0;color:var(--text-muted);opacity:0.85}.section-title{font-size:clamp(1.875rem,8vw,2.5rem);letter-spacing:-0.02em;line-height:1.2;text-align:left;margin-bottom:clamp(1.5rem,5vw,2.5rem);font-weight:700}.about-content{/* Fluid padding */ padding:clamp(1rem,5vw,1.5rem)}.about-content h3{font-size:clamp(1.375rem,6vw,1.75rem);margin-bottom:clamp(1.25rem,4vw,1.5rem);letter-spacing:-0.02em;line-height:1.25}.company-details{font-size:clamp(0.9375rem,4vw,1.0625rem);line-height:1.7;letter-spacing:0}.project-card{padding:clamp(1rem,5vw,1.25rem);margin-bottom:clamp(1.5rem,4vw,2rem)}.project-title{font-size:clamp(1.375rem,6vw,1.75rem);letter-spacing:-0.02em;line-height:1.3;margin-bottom:clamp(0.75rem,3vw,1rem)}.project-badge{/* Optimized badge sizing */ font-size:clamp(0.8125rem,3.5vw,0.9375rem);/* Comfortable padding */ padding:clamp(0.5rem,2vw,0.625rem) clamp(1rem,4vw,1.375rem);/* Spacing */ margin-top:clamp(1rem,3vw,1.25rem)}.cta-primary{width:100%;justify-content:center;padding:clamp(1rem,3.5vw,1.25rem) clamp(2rem,6vw,2.75rem);font-size:clamp(1.0625rem,4.5vw,1.25rem);font-weight:700}footer{/* Rhythm-based spacing */ padding:clamp(1.5rem,4vw,2rem) 0;margin-top:clamp(2.5rem,6vw,3rem)}.copyright{/* Optimized footer text */ font-size:clamp(0.8125rem,3.5vw,0.9375rem);/* Enhanced spacing */ letter-spacing:0.015em;line-height:1.5}}@media (max-width:480px){:root{/* Tighter spacing for very small screens */ --mobile-rhythm:clamp(1rem,4vw,1.5rem)}.container{/* Optimized container padding */ padding:0 clamp(1.5rem,5vw,2rem)}main{/* Tighter vertical spacing */ padding:clamp(1.5rem,5vw,2rem) 0}section{/* Reduced section spacing */ margin-bottom:clamp(2.5rem,8vw,4rem)}h1{font-size:clamp(2rem,12vw,3.5rem);letter-spacing:-0.045em;line-height:1.1;font-weight:700}.hero-subtitle{font-size:clamp(1rem,4.5vw,1.1875rem);line-height:1.75}nav{/* Wrap horizontally on tiny screens */ flex-direction:row;flex-wrap:wrap;align-items:center;gap:clamp(0.875rem,3vw,1.125rem)}nav a{font-size:clamp(0.95rem,4vw,1.0625rem);padding:0}.section-title{font-size:clamp(1.75rem,9vw,2.25rem)}.service-card,.about-content,.project-card{padding:clamp(0.875rem,5vw,1.125rem)}.cta-primary{padding:clamp(0.9375rem,4vw,1.125rem) clamp(1.75rem,6vw,2.25rem);font-size:clamp(1rem,5vw,1.15rem)}}

/* CTA Card Styles - matches project-card */
.cta-card {
    margin-bottom: 2rem;
    padding: 1.25rem;
}

.cta-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.cta-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    flex-shrink: 0;
    object-fit: cover;
}

.cta-text {
    flex: 1;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cta-avatar {
        width: 72px;
        height: 72px;
    }
}