/* 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;
    }
}

/* Hero proof line */
.hero-proof {
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 1.5rem;
    opacity: 0.6;
}

/* Service list bullets */
.service-list {
    list-style: none;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.service-list li {
    color: var(--text-muted);
    font-size: clamp(0.825rem, 0.9vw, 0.9rem);
    font-weight: 200;
    letter-spacing: 0.01em;
    line-height: 1.6;
}

.service-list li::before {
    content: "—";
    margin-right: 0.5em;
    color: var(--accent-dim);
    opacity: 0.6;
}

/* Project tags */
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.project-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(167, 139, 250, 0.06);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* About section avatar & bio */
.about-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    object-fit: cover;
    margin-bottom: 1.25rem;
}

.about-bio {
    color: var(--text-muted);
    font-size: clamp(0.95rem, 1vw, 1.0625rem);
    line-height: 1.7;
    font-weight: 200;
    max-width: 50ch;
    margin: 0 auto 1.75rem;
    text-wrap: pretty;
}

/* Tech strip */
.tech-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    margin-bottom: 5rem;
    padding: 0;
}

.tech-strip span {
    display: inline-block;
    padding: 0.3rem 0.875rem;
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: clamp(0.75rem, 0.85vw, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: border-color 0.2s ease;
}

.tech-strip span:hover {
    border-color: var(--accent-dim);
    color: var(--text);
}

/* Scroll-triggered fade-in animations (progressive enhancement) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@supports (animation-timeline: view()) {
    .service-card,
    .project-card,
    .about-content,
    .tech-strip,
    .cta-card {
        animation: fadeInUp ease both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }
}

/* Fallback: simple load-in for browsers without scroll-timeline */
@supports not (animation-timeline: view()) {
    .service-card,
    .project-card,
    .about-content,
    .tech-strip,
    .cta-card {
        animation: fadeInUp 0.6s ease both;
    }

    .service-card:nth-child(2) { animation-delay: 0.1s; }
    .service-card:nth-child(3) { animation-delay: 0.2s; }
}

/* CTA card accent glow on hover */
.cta-card:hover {
    border-color: var(--accent);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(167, 139, 250, 0.1);
}

/* Gradient text effect on h1 */
h1 {
    background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mobile adjustments for new elements */
@media (max-width: 768px) {
    .hero-proof {
        margin-top: 1rem;
        font-size: clamp(0.7rem, 3vw, 0.8rem);
    }

    .tech-strip {
        margin-bottom: clamp(2.5rem, 8vw, 4rem);
        gap: 0.5rem;
    }

    .about-avatar {
        width: 80px;
        height: 80px;
    }

    .about-bio {
        font-size: clamp(0.9375rem, 4vw, 1.0625rem);
    }

    .service-list {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .tech-strip span {
        font-size: clamp(0.7rem, 3.5vw, 0.8rem);
        padding: 0.25rem 0.75rem;
    }

    .project-tags {
        gap: 0.375rem;
    }

    .project-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
}