1	/* ===== ROOT VARIABLES ===== */
     2	:root {
     3	    /* Colors - tizoo brand palette */
     4	    --color-primary: #4dd9c5;      /* Cyan/Turquoise */
     5	    --color-secondary: #f4a742;    /* Golden Orange */
     6	    --color-tertiary: #2d7a89;     /* Teal */
     7	    --color-dark: #1a2332;         /* Navy */
     8	    --color-white: #ffffff;
     9	    --color-gray-light: #f5f7fa;
    10	    --color-gray: #8b95a5;
    11	    --color-text: #2c3e50;
    12	    --color-text-light: #6c757d;
    13	    
    14	    /* Gradients */
    15	    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-tertiary) 100%);
    16	    --gradient-accent: linear-gradient(135deg, var(--color-secondary) 0%, #ff8a5b 100%);
    17	    
    18	    /* Typography */
    19	    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    20	    --font-weight-light: 300;
    21	    --font-weight-regular: 400;
    22	    --font-weight-medium: 500;
    23	    --font-weight-semibold: 600;
    24	    --font-weight-bold: 700;
    25	    --font-weight-extrabold: 800;
    26	    
    27	    /* Spacing */
    28	    --spacing-xs: 0.5rem;
    29	    --spacing-sm: 1rem;
    30	    --spacing-md: 1.5rem;
    31	    --spacing-lg: 2rem;
    32	    --spacing-xl: 3rem;
    33	    --spacing-2xl: 4rem;
    34	    --spacing-3xl: 6rem;
    35	    
    36	    /* Layout */
    37	    --container-width: 1200px;
    38	    --header-height: 70px;
    39	    --border-radius: 12px;
    40	    --border-radius-sm: 8px;
    41	    --border-radius-lg: 16px;
    42	    
    43	    /* Shadows */
    44	    --shadow-sm: 0 2px 8px rgba(26, 35, 50, 0.08);
    45	    --shadow-md: 0 4px 16px rgba(26, 35, 50, 0.12);
    46	    --shadow-lg: 0 8px 32px rgba(26, 35, 50, 0.16);
    47	    --shadow-xl: 0 16px 48px rgba(26, 35, 50, 0.2);
    48	    
    49	    /* Transitions */
    50	    --transition-fast: 0.2s ease;
    51	    --transition-base: 0.3s ease;
    52	    --transition-slow: 0.5s ease;
    53	}
    54	
    55	/* ===== RESET & BASE ===== */
    56	* {
    57	    margin: 0;
    58	    padding: 0;
    59	    box-sizing: border-box;
    60	}
    61	
    62	html {
    63	    scroll-behavior: smooth;
    64	    font-size: 16px;
    65	}
    66	
    67	body {
    68	    font-family: var(--font-family);
    69	    font-weight: var(--font-weight-regular);
    70	    line-height: 1.6;
    71	    color: var(--color-text);
    72	    background-color: var(--color-white);
    73	    -webkit-font-smoothing: antialiased;
    74	    -moz-osx-font-smoothing: grayscale;
    75	}
    76	
    77	img {
    78	    max-width: 100%;
    79	    height: auto;
    80	    display: block;
    81	}
    82	
    83	a {
    84	    text-decoration: none;
    85	    color: inherit;
    86	    transition: var(--transition-base);
    87	}
    88	
    89	ul {
    90	    list-style: none;
    91	}
    92	
    93	button,
    94	input,
    95	textarea,
    96	select {
    97	    font-family: inherit;
    98	    font-size: inherit;
    99	    border: none;
   100	    outline: none;
   101	}
   102	
   103	/* ===== UTILITY CLASSES ===== */
   104	.container {
   105	    max-width: var(--container-width);
   106	    margin: 0 auto;
   107	    padding: 0 var(--spacing-md);
   108	}
   109	
   110	.section {
   111	    padding: var(--spacing-3xl) 0;
   112	}
   113	
   114	.section--dark {
   115	    background-color: var(--color-dark);
   116	    color: var(--color-white);
   117	}
   118	
   119	.section__header {
   120	    text-align: center;
   121	    margin-bottom: var(--spacing-2xl);
   122	}
   123	
   124	.section__title {
   125	    font-size: 2.5rem;
   126	    font-weight: var(--font-weight-extrabold);
   127	    margin-bottom: var(--spacing-sm);
   128	    line-height: 1.2;
   129	}
   130	
   131	.section__subtitle {
   132	    font-size: 1.125rem;
   133	    color: var(--color-text-light);
   134	    max-width: 600px;
   135	    margin: 0 auto;
   136	}
   137	
   138	.section--dark .section__subtitle {
   139	    color: var(--color-gray);
   140	}
   141	
   142	/* ===== BUTTONS ===== */
   143	.button {
   144	    display: inline-flex;
   145	    align-items: center;
   146	    justify-content: center;
   147	    padding: 1rem 2rem;
   148	    font-weight: var(--font-weight-semibold);
   149	    font-size: 1rem;
   150	    border-radius: var(--border-radius);
   151	    cursor: pointer;
   152	    transition: var(--transition-base);
   153	    min-height: 48px; /* Touch-friendly */
   154	    text-align: center;
   155	}
   156	
   157	.button--primary {
   158	    background: var(--gradient-primary);
   159	    color: var(--color-white);
   160	    box-shadow: var(--shadow-md);
   161	}
   162	
   163	.button--primary:hover {
   164	    transform: translateY(-2px);
   165	    box-shadow: var(--shadow-lg);
   166	}
   167	
   168	.button--secondary {
   169	    background: var(--gradient-accent);
   170	    color: var(--color-white);
   171	    box-shadow: var(--shadow-sm);
   172	}
   173	
   174	.button--secondary:hover {
   175	    transform: translateY(-2px);
   176	    box-shadow: var(--shadow-md);
   177	}
   178	
   179	.button--outline {
   180	    background: transparent;
   181	    color: var(--color-primary);
   182	    border: 2px solid var(--color-primary);
   183	}
   184	
   185	.button--outline:hover {
   186	    background: var(--color-primary);
   187	    color: var(--color-white);
   188	}
   189	
   190	.button--large {
   191	    padding: 1.25rem 2.5rem;
   192	    font-size: 1.125rem;
   193	}
   194	
   195	/* ===== HEADER & NAVIGATION ===== */
   196	.header {
   197	    position: fixed;
   198	    top: 0;
   199	    left: 0;
   200	    width: 100%;
   201	    background-color: var(--color-white);
   202	    box-shadow: var(--shadow-sm);
   203	    z-index: 1000;
   204	    transition: var(--transition-base);
   205	}
   206	
   207	.nav {
   208	    display: flex;
   209	    align-items: center;
   210	    justify-content: space-between;
   211	    height: var(--header-height);
   212	}
   213	
   214	.nav__logo-img {
   215	    height: 40px;
   216	    width: auto;
   217	}
   218	
   219	.nav__list {
   220	    display: flex;
   221	    gap: var(--spacing-lg);
   222	}
   223	
   224	.nav__link {
   225	    font-weight: var(--font-weight-medium);
   226	    color: var(--color-text);
   227	    padding: 0.5rem 0;
   228	    position: relative;
   229	}
   230	
   231	.nav__link::after {
   232	    content: '';
   233	    position: absolute;
   234	    bottom: 0;
   235	    left: 0;
   236	    width: 0;
   237	    height: 2px;
   238	    background: var(--gradient-primary);
   239	    transition: var(--transition-base);
   240	}
   241	
   242	.nav__link:hover::after,
   243	.nav__link.active::after {
   244	    width: 100%;
   245	}
   246	
   247	.nav__toggle,
   248	.nav__close {
   249	    display: none;
   250	    cursor: pointer;
   251	    color: var(--color-text);
   252	}
   253	
   254	/* ===== HERO SECTION ===== */
   255	.hero {
   256	    padding-top: calc(var(--header-height) + var(--spacing-3xl));
   257	    min-height: 100vh;
   258	    display: flex;
   259	    align-items: center;
   260	    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
   261	}
   262	
   263	.hero__container {
   264	    display: grid;
   265	    grid-template-columns: 1fr 1fr;
   266	    gap: var(--spacing-2xl);
   267	    align-items: center;
   268	}
   269	
   270	.hero__title {
   271	    font-size: 3.5rem;
   272	    font-weight: var(--font-weight-extrabold);
   273	    line-height: 1.1;
   274	    margin-bottom: var(--spacing-md);
   275	    color: var(--color-dark);
   276	}
   277	
   278	.hero__title-accent {
   279	    background: var(--gradient-primary);
   280	    -webkit-background-clip: text;
   281	    -webkit-text-fill-color: transparent;
   282	    background-clip: text;
   283	}
   284	
   285	.hero__subtitle {
   286	    font-size: 1.5rem;
   287	    color: var(--color-text-light);
   288	    margin-bottom: var(--spacing-xl);
   289	    font-weight: var(--font-weight-medium);
   290	}
   291	
   292	.hero__buttons {
   293	    display: flex;
   294	    gap: var(--spacing-md);
   295	    flex-wrap: wrap;
   296	    margin-bottom: var(--spacing-md);
   297	}
   298	
   299	.hero__micro-text {
   300	    font-size: 0.875rem;
   301	    color: var(--color-text-light);
   302	    font-weight: var(--font-weight-medium);
   303	}
   304	
   305	.hero__image {
   306	    position: relative;
   307	}
   308	
   309	.hero__img {
   310	    width: 100%;
   311	    border-radius: var(--border-radius-lg);
   312	    box-shadow: var(--shadow-xl);
   313	    animation: float 6s ease-in-out infinite;
   314	}
   315	
   316	@keyframes float {
   317	    0%, 100% {
   318	        transform: translateY(0);
   319	    }
   320	    50% {
   321	        transform: translateY(-20px);
   322	    }
   323	}
   324	
   325	/* ===== USP SECTION ===== */
   326	.usp {
   327	    background-color: var(--color-gray-light);
   328	}
   329	
   330	.usp__grid {
   331	    display: grid;
   332	    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   333	    gap: var(--spacing-lg);
   334	}
   335	
   336	.usp__card {
   337	    background: var(--color-white);
   338	    padding: var(--spacing-lg);
   339	    border-radius: var(--border-radius);
   340	    box-shadow: var(--shadow-sm);
   341	    transition: var(--transition-base);
   342	    text-align: center;
   343	}
   344	
   345	.usp__card:hover {
   346	    transform: translateY(-8px);
   347	    box-shadow: var(--shadow-lg);
   348	}
   349	
   350	.usp__icon {
   351	    width: 64px;
   352	    height: 64px;
   353	    margin: 0 auto var(--spacing-md);
   354	    display: flex;
   355	    align-items: center;
   356	    justify-content: center;
   357	    background: var(--gradient-primary);
   358	    border-radius: var(--border-radius);
   359	    color: var(--color-white);
   360	}
   361	
   362	.usp__title {
   363	    font-size: 1.25rem;
   364	    font-weight: var(--font-weight-bold);
   365	    margin-bottom: var(--spacing-xs);
   366	    color: var(--color-dark);
   367	}
   368	
   369	.usp__description {
   370	    color: var(--color-text-light);
   371	    font-size: 0.95rem;
   372	}
   373	
   374	/* ===== PRODUSE SECTION ===== */
   375	.produse__grid {
   376	    display: grid;
   377	    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   378	    gap: var(--spacing-xl);
   379	}
   380	
   381	.product__card {
   382	    background: var(--color-white);
   383	    border-radius: var(--border-radius-lg);
   384	    overflow: hidden;
   385	    box-shadow: var(--shadow-md);
   386	    transition: var(--transition-base);
   387	    display: flex;
   388	    flex-direction: column;
   389	}
   390	
   391	.product__card:hover {
   392	    transform: translateY(-8px);
   393	    box-shadow: var(--shadow-xl);
   394	}
   395	
   396	.product__image {
   397	    position: relative;
   398	    overflow: hidden;
   399	    height: 240px;
   400	    background: var(--color-gray-light);
   401	}
   402	
   403	.product__img {
   404	    width: 100%;
   405	    height: 100%;
   406	    object-fit: cover;
   407	    transition: var(--transition-slow);
   408	}
   409	
   410	.product__card:hover .product__img {
   411	    transform: scale(1.05);
   412	}
   413	
   414	.product__content {
   415	    padding: var(--spacing-lg);
   416	    flex: 1;
   417	    display: flex;
   418	    flex-direction: column;
   419	}
   420	
   421	.product__title {
   422	    font-size: 1.5rem;
   423	    font-weight: var(--font-weight-bold);
   424	    margin-bottom: var(--spacing-sm);
   425	    color: var(--color-dark);
   426	}
   427	
   428	.product__description {
   429	    color: var(--color-text-light);
   430	    margin-bottom: var(--spacing-md);
   431	    line-height: 1.7;
   432	}
   433	
   434	.product__features {
   435	    margin-bottom: var(--spacing-lg);
   436	    flex: 1;
   437	}
   438	
   439	.product__features li {
   440	    padding: 0.5rem 0;
   441	    color: var(--color-text);
   442	    font-size: 0.95rem;
   443	}
   444	
   445	/* ===== PORTOFOLIU SECTION ===== */
   446	.portfolio__project {
   447	    display: grid;
   448	    grid-template-columns: 1.2fr 1fr;
   449	    gap: var(--spacing-xl);
   450	    background: rgba(255, 255, 255, 0.05);
   451	    border-radius: var(--border-radius-lg);
   452	    padding: var(--spacing-xl);
   453	}
   454	
   455	.portfolio__images {
   456	    display: grid;
   457	    gap: var(--spacing-md);
   458	}
   459	
   460	.portfolio__img {
   461	    width: 100%;
   462	    border-radius: var(--border-radius);
   463	    object-fit: cover;
   464	}
   465	
   466	.portfolio__img--main {
   467	    height: 400px;
   468	}
   469	
   470	.portfolio__grid-small {
   471	    display: grid;
   472	    grid-template-columns: repeat(3, 1fr);
   473	    gap: var(--spacing-sm);
   474	}
   475	
   476	.portfolio__grid-small .portfolio__img {
   477	    height: 140px;
   478	}
   479	
   480	.portfolio__title {
   481	    font-size: 2rem;
   482	    font-weight: var(--font-weight-bold);
   483	    margin-bottom: var(--spacing-md);
   484	}
   485	
   486	.portfolio__meta {
   487	    display: flex;
   488	    gap: var(--spacing-sm);
   489	    margin-bottom: var(--spacing-md);
   490	    flex-wrap: wrap;
   491	}
   492	
   493	.portfolio__tag {
   494	    padding: 0.4rem 0.8rem;
   495	    background: var(--color-primary);
   496	    color: var(--color-white);
   497	    border-radius: 20px;
   498	    font-size: 0.875rem;
   499	    font-weight: var(--font-weight-medium);
   500	}
   501	
   502	.portfolio__description {
   503	    color: var(--color-gray);
   504	    line-height: 1.8;
   505	    margin-bottom: var(--spacing-lg);
   506	}
   507	
   508	.portfolio__details {
   509	    display: grid;
   510	    gap: var(--spacing-sm);
   511	}
   512	
   513	.portfolio__detail {
   514	    padding: var(--spacing-sm);
   515	    background: rgba(255, 255, 255, 0.05);
   516	    border-radius: var(--border-radius-sm);
   517	    font-size: 0.95rem;
   518	}
   519	
   520	/* ===== FORM SECTION ===== */
   521	.form {
   522	    max-width: 700px;
   523	    margin: 0 auto;
   524	    background: var(--color-white);
   525	    padding: var(--spacing-xl);
   526	    border-radius: var(--border-radius-lg);
   527	    box-shadow: var(--shadow-lg);
   528	}
   529	
   530	.form__group {
   531	    margin-bottom: var(--spacing-lg);
   532	}
   533	
   534	.form__row {
   535	    display: grid;
   536	    grid-template-columns: 1fr 1fr;
   537	    gap: var(--spacing-md);
   538	}
   539	
   540	.form__label {
   541	    display: block;
   542	    margin-bottom: var(--spacing-xs);
   543	    font-weight: var(--font-weight-medium);
   544	    color: var(--color-dark);
   545	}
   546	
   547	.form__input,
   548	.form__select,
   549	.form__textarea {
   550	    width: 100%;
   551	    padding: 1rem;
   552	    border: 2px solid #e1e8ed;
   553	    border-radius: var(--border-radius-sm);
   554	    font-size: 1rem;
   555	    transition: var(--transition-base);
   556	    background: var(--color-white);
   557	    color: var(--color-text);
   558	    min-height: 48px; /* Touch-friendly */
   559	}
   560	
   561	.form__input:focus,
   562	.form__select:focus,
   563	.form__textarea:focus {
   564	    border-color: var(--color-primary);
   565	    box-shadow: 0 0 0 3px rgba(77, 217, 197, 0.1);
   566	}
   567	
   568	.form__textarea {
   569	    resize: vertical;
   570	    min-height: 120px;
   571	}
   572	
   573	.form__footer {
   574	    text-align: center;
   575	}
   576	
   577	.form__note {
   578	    margin-top: var(--spacing-sm);
   579	    font-size: 0.875rem;
   580	    color: var(--color-text-light);
   581	}
   582	
   583	/* ===== DESPRE SECTION ===== */
   584	.despre__content {
   585	    display: grid;
   586	    grid-template-columns: 1.5fr 1fr;
   587	    gap: var(--spacing-2xl);
   588	    align-items: start;
   589	}
   590	
   591	.despre__description {
   592	    color: var(--color-gray);
   593	    line-height: 1.8;
   594	    margin-bottom: var(--spacing-md);
   595	}
   596	
   597	.despre__features {
   598	    margin: var(--spacing-xl) 0;
   599	    display: grid;
   600	    gap: var(--spacing-lg);
   601	}
   602	
   603	.despre__feature {
   604	    padding: var(--spacing-md);
   605	    background: rgba(255, 255, 255, 0.05);
   606	    border-radius: var(--border-radius);
   607	    border-left: 4px solid var(--color-primary);
   608	}
   609	
   610	.despre__feature-title {
   611	    font-size: 1.125rem;
   612	    margin-bottom: var(--spacing-xs);
   613	    color: var(--color-white);
   614	}
   615	
   616	.despre__feature p {
   617	    color: var(--color-gray);
   618	    font-size: 0.95rem;
   619	    line-height: 1.7;
   620	}
   621	
   622	.despre__process-title {
   623	    font-size: 1.5rem;
   624	    margin-bottom: var(--spacing-md);
   625	    color: var(--color-white);
   626	}
   627	
   628	.despre__steps {
   629	    counter-reset: step-counter;
   630	    display: grid;
   631	    gap: var(--spacing-sm);
   632	}
   633	
   634	.despre__steps li {
   635	    counter-increment: step-counter;
   636	    padding: var(--spacing-md);
   637	    background: rgba(255, 255, 255, 0.05);
   638	    border-radius: var(--border-radius-sm);
   639	    color: var(--color-gray);
   640	    position: relative;
   641	    padding-left: 3.5rem;
   642	}
   643	
   644	.despre__steps li::before {
   645	    content: counter(step-counter);
   646	    position: absolute;
   647	    left: var(--spacing-md);
   648	    top: 50%;
   649	    transform: translateY(-50%);
   650	    width: 32px;
   651	    height: 32px;
   652	    background: var(--gradient-primary);
   653	    border-radius: 50%;
   654	    display: flex;
   655	    align-items: center;
   656	    justify-content: center;
   657	    color: var(--color-white);
   658	    font-weight: var(--font-weight-bold);
   659	    font-size: 0.875rem;
   660	}
   661	
   662	.despre__images {
   663	    display: grid;
   664	    gap: var(--spacing-md);
   665	}
   666	
   667	.despre__img {
   668	    width: 100%;
   669	    border-radius: var(--border-radius);
   670	}
   671	
   672	.despre__img--large {
   673	    height: 300px;
   674	    object-fit: cover;
   675	}
   676	
   677	/* ===== FOOTER ===== */
   678	.footer {
   679	    background: var(--color-dark);
   680	    color: var(--color-white);
   681	    padding: var(--spacing-2xl) 0 var(--spacing-md);
   682	}
   683	
   684	.footer__content {
   685	    display: grid;
   686	    grid-template-columns: 2fr 1fr 1fr 1fr;
   687	    gap: var(--spacing-2xl);
   688	    margin-bottom: var(--spacing-xl);
   689	}
   690	
   691	.footer__logo-img {
   692	    height: 40px;
   693	    margin-bottom: var(--spacing-md);
   694	}
   695	
   696	.footer__tagline {
   697	    font-weight: var(--font-weight-semibold);
   698	    margin-bottom: var(--spacing-xs);
   699	    color: var(--color-white);
   700	}
   701	
   702	.footer__description {
   703	    color: var(--color-gray);
   704	    font-size: 0.95rem;
   705	}
   706	
   707	.footer__title {
   708	    font-size: 1.125rem;
   709	    font-weight: var(--font-weight-semibold);
   710	    margin-bottom: var(--spacing-md);
   711	    color: var(--color-white);
   712	}
   713	
   714	.footer__contact,
   715	.footer__links {
   716	    display: grid;
   717	    gap: var(--spacing-sm);
   718	}
   719	
   720	.footer__link {
   721	    display: flex;
   722	    align-items: center;
   723	    gap: var(--spacing-xs);
   724	    color: var(--color-gray);
   725	    transition: var(--transition-base);
   726	}
   727	
   728	.footer__link:hover {
   729	    color: var(--color-primary);
   730	    transform: translateX(4px);
   731	}
   732	
   733	.footer__link svg {
   734	    flex-shrink: 0;
   735	}
   736	
   737	.footer__location {
   738	    display: flex;
   739	    align-items: start;
   740	    gap: var(--spacing-xs);
   741	    color: var(--color-gray);
   742	}
   743	
   744	.footer__social {
   745	    display: flex;
   746	    gap: var(--spacing-md);
   747	    margin-bottom: var(--spacing-sm);
   748	}
   749	
   750	.footer__social-link {
   751	    width: 44px;
   752	    height: 44px;
   753	    display: flex;
   754	    align-items: center;
   755	    justify-content: center;
   756	    background: rgba(255, 255, 255, 0.1);
   757	    border-radius: 50%;
   758	    color: var(--color-white);
   759	    transition: var(--transition-base);
   760	}
   761	
   762	.footer__social-link:hover {
   763	    background: var(--color-primary);
   764	    transform: translateY(-4px);
   765	}
   766	
   767	.footer__social-note {
   768	    font-size: 0.875rem;
   769	    color: var(--color-gray);
   770	}
   771	
   772	.footer__bottom {
   773	    padding-top: var(--spacing-lg);
   774	    border-top: 1px solid rgba(255, 255, 255, 0.1);
   775	    display: flex;
   776	    justify-content: space-between;
   777	    align-items: center;
   778	    flex-wrap: wrap;
   779	    gap: var(--spacing-sm);
   780	}
   781	
   782	.footer__copyright,
   783	.footer__made {
   784	    color: var(--color-gray);
   785	    font-size: 0.875rem;
   786	}
   787	
   788	/* ===== WHATSAPP FLOAT ===== */
   789	.whatsapp-float {
   790	    position: fixed;
   791	    bottom: 2rem;
   792	    right: 2rem;
   793	    width: 60px;
   794	    height: 60px;
   795	    background: #25D366;
   796	    border-radius: 50%;
   797	    display: flex;
   798	    align-items: center;
   799	    justify-content: center;
   800	    box-shadow: var(--shadow-lg);
   801	    z-index: 999;
   802	    transition: var(--transition-base);
   803	}
   804	
   805	.whatsapp-float:hover {
   806	    transform: scale(1.1);
   807	    box-shadow: var(--shadow-xl);
   808	}
   809	
   810	/* ===== RESPONSIVE - TABLET ===== */
   811	@media screen and (max-width: 768px) {
   812	    :root {
   813	        --header-height: 60px;
   814	        --spacing-xl: 2rem;
   815	        --spacing-2xl: 3rem;
   816	        --spacing-3xl: 4rem;
   817	    }
   818	    
   819	    .section__title {
   820	        font-size: 2rem;
   821	    }
   822	    
   823	    /* Navigation Mobile */
   824	    .nav__menu {
   825	        position: fixed;
   826	        top: 0;
   827	        right: -100%;
   828	        width: 75%;
   829	        height: 100vh;
   830	        background: var(--color-white);
   831	        padding: var(--spacing-2xl) var(--spacing-lg);
   832	        box-shadow: var(--shadow-xl);
   833	        transition: var(--transition-base);
   834	        z-index: 1001;
   835	    }
   836	    
   837	    .nav__menu.show-menu {
   838	        right: 0;
   839	    }
   840	    
   841	    .nav__list {
   842	        flex-direction: column;
   843	        gap: var(--spacing-md);
   844	    }
   845	    
   846	    .nav__link {
   847	        font-size: 1.125rem;
   848	    }
   849	    
   850	    .nav__close {
   851	        display: block;
   852	        position: absolute;
   853	        top: var(--spacing-md);
   854	        right: var(--spacing-md);
   855	        font-size: 1.5rem;
   856	    }
   857	    
   858	    .nav__toggle {
   859	        display: block;
   860	        font-size: 1.5rem;
   861	    }
   862	    
   863	    /* Hero Mobile */
   864	    .hero__container {
   865	        grid-template-columns: 1fr;
   866	        gap: var(--spacing-xl);
   867	    }
   868	    
   869	    .hero__title {
   870	        font-size: 2.5rem;
   871	    }
   872	    
   873	    .hero__subtitle {
   874	        font-size: 1.25rem;
   875	    }
   876	    
   877	    .hero__image {
   878	        order: -1;
   879	    }
   880	    
   881	    /* Products Mobile */
   882	    .produse__grid {
   883	        grid-template-columns: 1fr;
   884	    }
   885	    
   886	    /* Portfolio Mobile */
   887	    .portfolio__project {
   888	        grid-template-columns: 1fr;
   889	    }
   890	    
   891	    .portfolio__img--main {
   892	        height: 300px;
   893	    }
   894	    
   895	    .portfolio__grid-small {
   896	        grid-template-columns: repeat(2, 1fr);
   897	    }
   898	    
   899	    /* Form Mobile */
   900	    .form__row {
   901	        grid-template-columns: 1fr;
   902	    }
   903	    
   904	    /* Despre Mobile */
   905	    .despre__content {
   906	        grid-template-columns: 1fr;
   907	    }
   908	    
   909	    /* Footer Mobile */
   910	    .footer__content {
   911	        grid-template-columns: 1fr;
   912	        gap: var(--spacing-xl);
   913	    }
   914	    
   915	    .footer__bottom {
   916	        flex-direction: column;
   917	        text-align: center;
   918	    }
   919	}
   920	
   921	/* ===== RESPONSIVE - MOBILE ===== */
   922	@media screen and (max-width: 375px) {
   923	    .container {
   924	        padding: 0 var(--spacing-sm);
   925	    }
   926	    
   927	    .hero__title {
   928	        font-size: 2rem;
   929	    }
   930	    
   931	    .hero__buttons {
   932	        flex-direction: column;
   933	        width: 100%;
   934	    }
   935	    
   936	    .button {
   937	        width: 100%;
   938	    }
   939	    
   940	    .section__title {
   941	        font-size: 1.75rem;
   942	    }
   943	    
   944	    .usp__grid {
   945	        grid-template-columns: 1fr;
   946	    }
   947	    
   948	    .whatsapp-float {
   949	        width: 52px;
   950	        height: 52px;
   951	        bottom: 1rem;
   952	        right: 1rem;
   953	    }
   954	}
   955	
   956	/* ===== ANIMATIONS ===== */
   957	@keyframes fadeInUp {
   958	    from {
   959	        opacity: 0;
   960	        transform: translateY(30px);
   961	    }
   962	    to {
   963	        opacity: 1;
   964	        transform: translateY(0);
   965	    }
   966	}
   967	
   968	.fade-in-up {
   969	    animation: fadeInUp 0.6s ease-out;
   970	}
   971	
   972	/* ===== PRINT STYLES ===== */
   973	@media print {
   974	    .header,
   975	    .nav__toggle,
   976	    .whatsapp-float,
   977	    .button {
   978	        display: none;
   979	    }
   980	    
   981	    .section {
   982	        page-break-inside: avoid;
   983	    }
   984	}
   985