/* tanso.tech - Minimal Surreal Carbon Technology */
/* Colors: #1a1a2e (deep base), #4a90d9 (primary blue), #f5f0e8 (warm off-white), #e8b84b (accent gold), #6c757d (muted gray) */
/* Fonts: Playfair Display (headings), Inter (body) */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
--deep-base:#1a1a2e;
--primary-blue:#4a90d9;
--warm-white:#f5f0e8;
--accent-gold:#e8b84b;
--muted-gray:#6c757d;
--font-heading:'Playfair Display',Georgia,serif;
--font-body:'Inter',system-ui,sans-serif;
}

html{scroll-behavior:smooth}

body{
font-family:var(--font-body);
background:var(--deep-base);
color:var(--warm-white);
overflow-x:hidden;
line-height:1.6;
}

/* Fish Canvas */
#fish-canvas{
position:fixed;
top:0;left:0;
width:100vw;height:100vh;
pointer-events:none;
z-index:1;
}

/* HUD Frame */
.hud-frame{
position:fixed;
top:0;left:0;
width:100vw;height:100vh;
pointer-events:none;
z-index:100;
}

.hud-corner{
position:absolute;
width:40px;height:40px;
}

.hud-corner--tl{
top:20px;left:20px;
border-top:1px solid var(--accent-gold);
border-left:1px solid var(--accent-gold);
opacity:0.4;
}

.hud-corner--tr{
top:20px;right:20px;
border-top:1px solid var(--accent-gold);
border-right:1px solid var(--accent-gold);
opacity:0.4;
}

.hud-corner--bl{
bottom:20px;left:20px;
border-bottom:1px solid var(--accent-gold);
border-left:1px solid var(--accent-gold);
opacity:0.4;
}

.hud-corner--br{
bottom:20px;right:20px;
border-bottom:1px solid var(--accent-gold);
border-right:1px solid var(--accent-gold);
opacity:0.4;
}

.hud-scanline{
position:absolute;
top:0;left:0;
width:100%;height:2px;
background:linear-gradient(90deg,transparent,var(--accent-gold),transparent);
opacity:0.1;
animation:scanline 8s linear infinite;
}

@keyframes scanline{
0%{top:0}
100%{top:100vh}
}

/* Sections */
.section{
min-height:100vh;
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
}

.section-inner{
max-width:1200px;
width:100%;
padding:80px 60px;
}

/* HUD Panels */
.hud-panel{
font-family:var(--font-body);
letter-spacing:0.15em;
font-size:0.7rem;
font-weight:500;
text-transform:uppercase;
}

.hud-panel--label{
display:flex;
align-items:center;
gap:16px;
margin-bottom:32px;
}

.hud-panel__tag{
color:var(--muted-gray);
}

.hud-panel__status{
color:var(--accent-gold);
animation:blink 2s infinite;
}

@keyframes blink{
0%,100%{opacity:1}
50%{opacity:0.3}
}

.hud-panel--data{
display:flex;
gap:40px;
margin-top:40px;
padding:20px 0;
border-top:1px solid rgba(232,184,75,0.15);
}

.hud-data-row{
display:flex;
align-items:baseline;
gap:8px;
}

.hud-data-row__label{
color:var(--muted-gray);
font-size:0.65rem;
letter-spacing:0.2em;
}

.hud-data-row__value{
color:var(--accent-gold);
font-family:var(--font-heading);
font-size:1.8rem;
font-weight:600;
}

.hud-data-row__unit{
color:var(--muted-gray);
font-size:0.6rem;
}

.hud-panel--section-label{
margin-bottom:24px;
}

/* Hero */
.section--hero{
flex-direction:column;
background:radial-gradient(ellipse at 50% 50%,rgba(74,144,217,0.05),transparent 60%),
var(--deep-base);
}

.hero-content{
text-align:center;
padding:0 40px;
}

.hero-title{
font-family:var(--font-heading);
font-size:clamp(4rem,12vw,10rem);
font-weight:700;
line-height:0.9;
margin-bottom:24px;
display:flex;
align-items:baseline;
justify-content:center;
gap:0;
}

.hero-title__line--1{
color:var(--warm-white);
}

.hero-title__dot{
color:var(--accent-gold);
font-size:1.2em;
}

.hero-title__line--2{
color:var(--primary-blue);
}

.hero-subtitle{
font-size:1.1rem;
color:var(--muted-gray);
font-weight:300;
max-width:500px;
margin:0 auto;
letter-spacing:0.02em;
}

.hero-geo{
margin:48px auto;
opacity:0.6;
animation:rotate-slow 60s linear infinite;
}

@keyframes rotate-slow{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}

.scroll-indicator{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}

.scroll-indicator__line{
width:1px;
height:40px;
background:var(--accent-gold);
opacity:0.4;
animation:scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse{
0%,100%{transform:scaleY(1);opacity:0.4}
50%{transform:scaleY(0.5);opacity:0.15}
}

.scroll-indicator__text{
font-size:0.6rem;
letter-spacing:0.3em;
color:var(--muted-gray);
}

/* About */
.section--about{
background:linear-gradient(180deg,var(--deep-base),rgba(26,26,46,0.95));
}

.section-title{
font-family:var(--font-heading);
font-size:clamp(2.5rem,6vw,4.5rem);
font-weight:600;
line-height:1.1;
margin-bottom:48px;
color:var(--warm-white);
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about-text p{
color:rgba(245,240,232,0.7);
font-size:1rem;
line-height:1.8;
margin-bottom:20px;
font-weight:300;
}

.about-diagram{
display:flex;
justify-content:center;
align-items:center;
}

.carbon-diagram{
max-width:100%;
height:auto;
}

.diagram-ring{
animation:pulse-ring 4s ease-in-out infinite;
transform-origin:200px 200px;
}

.diagram-ring--1{animation-delay:0s}
.diagram-ring--2{animation-delay:1.3s}
.diagram-ring--3{animation-delay:2.6s}

@keyframes pulse-ring{
0%,100%{transform:scale(1);opacity:0.5}
50%{transform:scale(1.05);opacity:0.3}
}

.diagram-node{
animation:node-glow 3s ease-in-out infinite;
}

@keyframes node-glow{
0%,100%{opacity:0.8}
50%{opacity:0.4}
}

/* Features */
.section--features{
background:linear-gradient(180deg,rgba(26,26,46,0.95),var(--deep-base));
}

.features-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:32px;
}

.feature-card{
background:rgba(245,240,232,0.03);
border:1px solid rgba(232,184,75,0.1);
border-radius:4px;
padding:40px;
transition:transform 0.15s ease,box-shadow 0.3s ease;
transform-style:preserve-3d;
perspective:800px;
cursor:default;
}

.feature-card:hover{
box-shadow:0 0 40px rgba(74,144,217,0.08),0 0 80px rgba(232,184,75,0.04);
border-color:rgba(232,184,75,0.25);
}

.feature-card__inner{
transform-style:preserve-3d;
}

.feature-card__icon{
margin-bottom:24px;
}

.feature-card__title{
font-family:var(--font-heading);
font-size:1.5rem;
font-weight:600;
margin-bottom:12px;
color:var(--warm-white);
}

.feature-card__desc{
color:var(--muted-gray);
font-size:0.9rem;
line-height:1.7;
font-weight:300;
margin-bottom:24px;
}

.feature-card__hud{
padding-top:16px;
border-top:1px solid rgba(232,184,75,0.1);
display:flex;
align-items:baseline;
gap:12px;
}

.feature-card__metric{
font-family:var(--font-heading);
font-size:1.8rem;
color:var(--accent-gold);
font-weight:600;
}

.feature-card__metric-label{
font-size:0.6rem;
letter-spacing:0.2em;
color:var(--muted-gray);
}

/* Data / Dashboard */
.section--data{
background:var(--deep-base);
}

.dashboard{
display:grid;
grid-template-columns:2fr 1fr;
gap:24px;
}

.dashboard-panel{
background:rgba(245,240,232,0.02);
border:1px solid rgba(232,184,75,0.08);
border-radius:4px;
padding:24px;
}

.dashboard-panel--main{
grid-row:1;
}

.dashboard-panel__header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16px;
}

.dashboard-panel__title{
font-size:0.7rem;
letter-spacing:0.15em;
color:var(--muted-gray);
}

.dashboard-panel__indicator{
width:8px;height:8px;
border-radius:50%;
background:var(--accent-gold);
animation:blink 2s infinite;
}

.dashboard-panel__chart{
position:relative;
width:100%;
overflow:hidden;
}

.dashboard-panel__chart canvas{
width:100%;
height:auto;
display:block;
}

.dashboard-sidebar{
display:flex;
flex-direction:column;
gap:16px;
}

.dashboard-panel--stat{
display:flex;
flex-direction:column;
gap:8px;
}

.stat-label{
font-size:0.6rem;
letter-spacing:0.2em;
color:var(--muted-gray);
}

.stat-value{
font-family:var(--font-heading);
font-size:2.2rem;
font-weight:600;
color:var(--primary-blue);
}

.stat-value--good{
color:var(--accent-gold);
}

.dashboard-panel--fish{
flex:1;
display:flex;
align-items:center;
justify-content:center;
}

.fish-display{
text-align:center;
}

.fish-svg{
width:120px;
height:auto;
animation:fish-swim 3s ease-in-out infinite;
}

@keyframes fish-swim{
0%,100%{transform:translateX(0) rotate(0deg)}
25%{transform:translateX(5px) rotate(2deg)}
75%{transform:translateX(-5px) rotate(-2deg)}
}

.fish-display__label{
display:block;
margin-top:8px;
font-size:0.55rem;
letter-spacing:0.2em;
color:var(--muted-gray);
}

/* Contact */
.section--contact{
background:linear-gradient(180deg,var(--deep-base),rgba(26,26,46,0.95));
text-align:center;
}

.section--contact .section-inner{
display:flex;
flex-direction:column;
align-items:center;
}

.contact-desc{
color:var(--muted-gray);
font-size:1.1rem;
max-width:500px;
margin:0 auto 40px;
font-weight:300;
line-height:1.8;
}

.contact-actions{
display:flex;
gap:20px;
margin-bottom:60px;
}

.btn{
font-family:var(--font-body);
font-size:0.8rem;
letter-spacing:0.15em;
text-transform:uppercase;
padding:16px 40px;
border-radius:2px;
text-decoration:none;
transition:all 0.3s ease;
font-weight:500;
}

.btn--primary{
background:var(--accent-gold);
color:var(--deep-base);
border:1px solid var(--accent-gold);
}

.btn--primary:hover{
background:transparent;
color:var(--accent-gold);
}

.btn--ghost{
background:transparent;
color:var(--warm-white);
border:1px solid rgba(245,240,232,0.2);
}

.btn--ghost:hover{
border-color:var(--accent-gold);
color:var(--accent-gold);
}

.contact-geo{
opacity:0.4;
margin-top:20px;
}

.contact-geo__svg{
width:100%;
max-width:600px;
height:auto;
}

/* Footer */
.footer{
position:relative;
z-index:2;
border-top:1px solid rgba(232,184,75,0.08);
padding:40px 60px;
}

.footer-inner{
max-width:1200px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}

.footer-brand__name{
font-family:var(--font-heading);
font-size:1.2rem;
font-weight:600;
color:var(--warm-white);
display:block;
}

.footer-brand__tag{
font-size:0.6rem;
letter-spacing:0.15em;
color:var(--muted-gray);
text-transform:uppercase;
}

.footer-links{
display:flex;
gap:32px;
}

.footer-link{
color:var(--muted-gray);
text-decoration:none;
font-size:0.8rem;
letter-spacing:0.1em;
transition:color 0.3s ease;
}

.footer-link:hover{
color:var(--accent-gold);
}

.footer-hud{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:4px;
}

.footer-hud__status{
font-size:0.6rem;
letter-spacing:0.2em;
color:var(--accent-gold);
}

.footer-hud__year{
font-size:0.6rem;
color:var(--muted-gray);
letter-spacing:0.1em;
}

/* Reveal Animations */
.section-inner,.hero-content{
opacity:0;
transform:translateY(30px);
transition:opacity 0.8s ease,transform 0.8s ease;
}

.section-inner.visible,.hero-content.visible{
opacity:1;
transform:translateY(0);
}

/* Responsive */
@media(max-width:900px){
.about-grid{grid-template-columns:1fr;gap:40px}
.features-grid{grid-template-columns:1fr}
.dashboard{grid-template-columns:1fr}
.footer-inner{flex-direction:column;gap:24px;text-align:center}
.footer-links{justify-content:center}
.footer-hud{align-items:center}
.section-inner{padding:60px 30px}
.hud-panel--data{flex-direction:column;gap:20px}
.contact-actions{flex-direction:column;align-items:center}
}

@media(max-width:600px){
.hero-title{font-size:clamp(3rem,10vw,5rem)}
.section-title{font-size:clamp(2rem,5vw,3rem)}
.feature-card{padding:24px}
.section-inner{padding:40px 20px}
.footer{padding:30px 20px}
}