/* Font Import */
@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://www.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
}

/*CSSVariables-DynamicEnergyColorScheme*/
:root{
/*Colors*/
--color-background:#FFFFFF;
--color-surface:#FFFFFF;
--color-text:#2C3E50;
--color-text-secondary:#626C71;
--color-primary:#FF6B35;
--color-primary-hover:#E85A2B;
--color-primary-active:#D1511F;
--color-secondary:rgba(94,82,64,0.12);
--color-secondary-hover:rgba(94,82,64,0.2);
--color-secondary-active:rgba(94,82,64,0.25);
--color-border:rgba(94,82,64,0.2);
--color-accent:#F39C12;
--color-card-border:rgba(94,82,64,0.12);
--color-error:#C0152F;
--color-success:#21808D;
--color-warning:#A84B2F;
--color-info:#626C71;
--color-focus-ring:rgba(255,107,53,0.4);

/*Typography*/
--font-family-base:"FKGroteskNeue","Geist","Inter",-apple-system,BlinkMacSystemFont,"SegoeUI",Roboto,sans-serif;
--font-family-mono:"BerkeleyMono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
--font-size-xs:11px;
--font-size-sm:12px;
--font-size-base:14px;
--font-size-md:14px;
--font-size-lg:16px;
--font-size-xl:18px;
--font-size-2xl:20px;
--font-size-3xl:24px;
--font-size-4xl:30px;
--font-weight-normal:400;
--font-weight-medium:500;
--font-weight-semibold:550;
--font-weight-bold:600;
--line-height-tight:1.2;
--line-height-normal:1.5;
--letter-spacing-tight:-0.01em;

/*Spacing*/
--space-4:4px;
--space-6:6px;
--space-8:8px;
--space-10:10px;
--space-12:12px;
--space-16:16px;
--space-20:20px;
--space-24:24px;
--space-32:32px;

/*BorderRadius*/
--radius-sm:6px;
--radius-base:8px;
--radius-md:10px;
--radius-lg:12px;
--radius-full:9999px;

/*Shadows*/
--shadow-sm:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
--shadow-md:0 4px 6px -1px rgba(0,0,0,0.04), 0 2px 4px -1px rgba(0,0,0,0.02);
--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.04), 0 4px 6px -2px rgba(0,0,0,0.02);

/*Animation*/
--duration-fast:150ms;
--duration-normal:250ms;
--ease-standard:cubic-bezier(0.16,1,0.3,1);

/*Layout*/
--container-sm:640px;
--container-md:768px;
--container-lg:1024px;
--container-xl:1280px;
}

/*BaseStyles*/
html{
font-size:var(--font-size-base);
font-family:var(--font-family-base);
line-height:var(--line-height-normal);
color:var(--color-text);
background-color:var(--color-background);
-webkit-font-smoothing:antialiased;
box-sizing:border-box;
}

body{
margin:0;
padding:0;
}

*,
*::before,
*::after{
box-sizing:inherit;
}

/*Typography*/
h1,h2,h3,h4,h5,h6{
margin:0;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-text);
letter-spacing: var(--letter-spacing-tight);
}

h1{font-size: var(--font-size-4xl);}
h2{font-size: var(--font-size-3xl);}
h3{font-size: var(--font-size-2xl);}
h4{font-size: var(--font-size-xl);}
h5{font-size: var(--font-size-lg);}
h6{font-size: var(--font-size-md);}

p{
margin:0 0 var(--space-16) 0;
}

a{
color:var(--color-primary);
text-decoration:none;
transition:colorvar(--duration-fast) var(--ease-standard);
}

a:hover{
color:var(--color-primary-hover);
}

/*Buttons*/
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:var(--space-8) var(--space-16);
border-radius:var(--radius-base);
font-size:var(--font-size-base);
font-weight:500;
line-height:1.5;
cursor:pointer;
transition:all var(--duration-normal) var(--ease-standard);
border:none;
text-decoration:none;
position:relative;
}

.btn:focus-visible{
outline:none;
box-shadow:0 0 0 3px var(--color-focus-ring);
}

.btn--primary{
background:var(--color-primary);
color:white;
}

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

.btn--primary:active{
background:var(--color-primary-active);
}

.btn--secondary{
background:var(--color-secondary);
color:var(--color-text);
}

.btn--secondary:hover{
background:var(--color-secondary-hover);
}

.btn--outline{
background:transparent;
border:1px solid var(--color-border);
color:var(--color-text);
}

.btn--outline:hover{
background: var(--color-secondary);
}

.btn--sm{
padding:var(--space-4) var(--space-12);
font-size:var(--font-size-sm);
border-radius:var(--radius-sm);
}

.btn--lg{
padding:var(--space-10) var(--space-20);
font-size:var(--font-size-lg);
border-radius:var(--radius-md);
}

.btn--full-width{
width:100%;
}

.btn:disabled{
opacity:0.5;
cursor:not-allowed;
}

/*FormElements*/
.form-control{
display:block;
width:100%;
padding:var(--space-8) var(--space-12);
font-size:16px;
line-height:1.5;
color:var(--color-text);
background-color:var(--color-background);
border:1px solid var(--color-border);
border-radius:var(--radius-base);
transition:border-color var(--duration-fast) var(--ease-standard);
}

.form-control:focus{
border-color:var(--color-primary);
outline:2px solid var(--color-primary);
box-shadow:0 0 0 3px var(--color-focus-ring);
}

.form-label{
display:block;
margin-bottom:var(--space-8);
font-weight:var(--font-weight-medium);
font-size:var(--font-size-sm);
color:var(--color-text);
}

.form-group{
margin-bottom:var(--space-16);
}

/*CardComponent*/
.card{
background-color:var(--color-surface);
border-radius:var(--radius-lg);
border:1px solid var(--color-card-border);
box-shadow:var(--shadow-sm);
overflow:hidden;
transition:box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover{
box-shadow:var(--shadow-md);
}

.card__body{
padding:var(--space-16);
}

.card__header,
.card__footer{
padding:var(--space-16);
border-bottom:1px solid var(--color-card-border);
}

/*ContainerLayout*/
.container{
width:100%;
margin-right:auto;
margin-left:auto;
padding-right:var(--space-16);
padding-left:var(--space-16);
}

@media(min-width:640px){
.container{max-width:var(--container-sm);}
}

@media(min-width:768px){
.container{max-width:var(--container-md);}
}

@media(min-width:1024px){
.container{max-width:var(--container-lg);}
}

@media(min-width:1280px){
.container{max-width:var(--container-xl);}
}

/*UtilityClasses*/
.flex{display:flex;}
.flex-col{flex-direction:column;}
.items-center{align-items:center;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.gap-4{gap:var(--space-4);}
.gap-8{gap:var(--space-8);}
.gap-16{gap:var(--space-16);}
.hidden{display:none;}

/*Header*/
.header{
background:var(--color-text);
padding:var(--space-16) 0;
box-shadow:var(--shadow-sm);
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
}

.nav__brand{
display:flex;
align-items:center;
}

.nav__logo{
color:var(--color-primary);
font-size:var(--font-size-3xl);
font-weight:var(--font-weight-bold);
margin:0;
}

.nav__menu{
display:flex;
list-style:none;
margin:0;
padding:0;
gap:var(--space-24);
}

.nav__link{
color:white;
font-weight:var(--font-weight-medium);
transition:color var(--duration-fast) var(--ease-standard);
}

.nav__link:hover{
color:var(--color-primary);
}

/*HeroSection*/
.hero{
background:linear-gradient(135deg, var(--color-text) 0% ,#34495e 100%);
padding:80px 0;
text-align:center;
color:white;
}

.hero__content{
max-width:800px;
margin:0 auto;
}

.hero__title{
font-size:48px;
margin-bottom:var(--space-16);
color:white;
}

.hero__subtitle{
font-size:var(--font-size-xl);
margin-bottom:var(--space-32);
opacity:0.9;
line-height:1.6;
}

.hero__cta{
padding:var(--space-16) var(--space-32);
font-size:var(--font-size-lg);
font-weight:var(--font-weight-semibold);
}

/*CalculatorSection*/
.calculator-section{
padding:80px 0;
background:#f8f9fa;
}

.calculator{
max-width:600px;
margin:0 auto;
background:white;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
overflow:hidden;
}

.calculator__header{
text-align:center;
padding:var(--space-32);
background:linear-gradient(135deg, var(--color-primary) 0% , var(--color-primary-hover) 100%);
color:white;
}

.calculator__header h3{
color:white;
margin-bottom: var(--space-8);
}

.calculator__header p{
opacity:0.9;
margin:0;
}

.calculator__form{
padding:var(--space-32);
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--space-24);
}

.input-group{
display:flex;
gap:var(--space-8);
}

.input-group .form-control{
flex:1;
}

.unit-toggle{
display:flex;
border:1px solid var(--color-border);
border-radius:var(--radius-base);
overflow:hidden;
}

.unit-btn{
padding:var(--space-8) var(--space-16);
border:none;
background:white;
color:var(--color-text);
cursor:pointer;
font-weight:var(--font-weight-medium);
transition:all var(--duration-fast) var(--ease-standard);
}

.unit-btn.active{
background:var(--color-primary);
color:white;
}

.unit-btn:hover:not(.active){
background:rgba(255,107,53,0.1);
}

/*ResultsSection*/
.results{
margin-top:var(--space-24);
padding:var(--space-24);
border:1px solid rgba(255,107,53,0.2);
border-radius:var(--radius-lg);
background:rgba(255,107,53,0.05);
}

.results__header{
text-align:center;
margin-bottom:var(--space-24);
}

.results__header h4{
margin-bottom:var(--space-16);
color:var(--color-text);
}

.one-rm-value{
font-size:48px;
font-weight:var(--font-weight-bold);
color:var(--color-primary);
display:flex;
align-items:baseline;
justify-content:center;
gap:var(--space-8);
}

.one-rm-value #one-rm-unit{
font-size:24px;
color:var(--color-text);
}

/*PercentageChart*/
.percentage-chart{
margin-top:var(--space-24);
}

.percentage-chart h5{
margin-bottom:var(--space-16);
text-align:center;
color:var(--color-text);
}

.chart-container{
display:flex;
flex-direction:column;
gap:var(--space-8);
}

.percentage-row{
display:grid;
grid-template-columns:60px 1fr 80px;
align-items:center;
gap:var(--space-12);
padding:var(--space-8);
border-radius:var(--radius-base);
background:white;
border:1px solid rgba(255,107,53,0.1);
}

.percentage-label{
font-weight: var(--font-weight-semibold);
color: var(--color-text);
text-align: center;
}

.progress-bar{
height:8px;
background:#e9ecef;
border-radius:var(--radius-full);
overflow:hidden;
}

.progress-fill{
height:100%;
background:linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
border-radius:var(--radius-full);
transition:width var(--duration-normal) var(--ease-standard);
}

.weight-value{
font-weight:var(--font-weight-semibold);
color:var(--color-text);
text-align:right;
}

/*ContentSections*/
.about-section,
.safety-section{
padding:40px 0;
}

.about-section{
background:white;
}

.safety-section{
background:#f8f9fa;
}

.content-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--space-32);
}

.content-block h3{
margin-bottom:var(--space-16);
color:var(--color-text);
}

.formula{
background:rgba(255,107,53,0.1);
padding:var(--space-16);
border-radius:var(--radius-base);
margin:var(--space-16) 0;
text-align:center;
border-left:4px solid var(--color-primary);
}

.tips-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:var(--space-24);
margin-top:var(--space-32);
}

.tip-card{
background:white;
padding:var(--space-24);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
border-top:4px solid var(--color-primary);
}

.tip-card h4{
margin-bottom:var(--space-12);
color:var(--color-text);
}

/*Footer*/
.footer{
background:var(--color-text);
color:white;
padding:60px 0 var(--space-24)0;
}

.footer__content{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:var(--space-32);
margin-bottom:var(--space-32);
}

.footer__brand h4{
color:var(--color-primary);
margin-bottom:var(--space-8);
}

.footer__links h5,
.footer__contact h5{
color:white;
margin-bottom:var(--space-16);
}

.footer__links ul{
list-style:none;
padding:0;
margin:0;
}

.footer__links li{
margin-bottom:var(--space-8);
}

.footer__links a{
color:rgba(255,255,255,0.8);
transition:colorvar(--duration-fast) var(--ease-standard);
}

.footer__links a:hover{
color:var(--color-primary);
}

.footer__bottom{
border-top:1px solid rgba(255,255,255,0.2);
padding-top:var(--space-24);
text-align:center;
color:rgba(255,255,255,0.7);
}

.footer__bottom a{
color:var(--color-primary);
}

/*ResponsiveDesign*/
@media(max-width:768px){
.nav__menu{
display:none;
}

.hero__title{
font-size:36px;
}

.form-row{
grid-template-columns:1fr;
}

.content-grid{
grid-template-columns:1fr;
}

.footer__content{
grid-template-columns:1fr;
gap:var(--space-24);
}

.tips-grid{
grid-template-columns:1fr;
}
}

@media(max-width:480px){
.hero{
padding:60px 0;
}

.hero__title{
font-size:28px;
}

.calculator-section{
padding:60px 0;
}

.calculator__header,
.calculator__form{
padding:var(--space-24);
}

.one-rm-value{
font-size:36px;
}
}